aa47783dae62246d0847e34784551c76aaf39e7d
[WebKit-https.git] / Source / WebCore / inspector / front-end / BreakpointsSidebarPane.js
1 /*
2  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
14  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
15  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
17  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
18  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
19  * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
20  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
21  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
22  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 /**
27  * @constructor
28  * @param {WebInspector.BreakpointManager} breakpointManager
29  * @extends {WebInspector.SidebarPane}
30  */
31 WebInspector.JavaScriptBreakpointsSidebarPane = function(breakpointManager, showSourceLineDelegate)
32 {
33     WebInspector.SidebarPane.call(this, WebInspector.UIString("Breakpoints"));
34
35     this._breakpointManager = breakpointManager;
36     this._showSourceLineDelegate = showSourceLineDelegate;
37
38     this.listElement = document.createElement("ol");
39     this.listElement.className = "breakpoint-list";
40
41     this.emptyElement = document.createElement("div");
42     this.emptyElement.className = "info";
43     this.emptyElement.textContent = WebInspector.UIString("No Breakpoints");
44
45     this.bodyElement.appendChild(this.emptyElement);
46
47     this._items = new Map();
48     
49     var breakpointLocations = this._breakpointManager.allBreakpointLocations();
50     for (var i = 0; i < breakpointLocations.length; ++i)
51         this._addBreakpoint(breakpointLocations[i].breakpoint, breakpointLocations[i].uiLocation);
52
53     this._breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.BreakpointAdded, this._breakpointAdded, this);
54     this._breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.BreakpointRemoved, this._breakpointRemoved, this);
55
56     this.emptyElement.addEventListener("contextmenu", this._emptyElementContextMenu.bind(this), true);
57 }
58
59 WebInspector.JavaScriptBreakpointsSidebarPane.prototype = {
60     _emptyElementContextMenu: function(event)
61     {
62         var contextMenu = new WebInspector.ContextMenu(event);
63         var breakpointActive = WebInspector.debuggerModel.breakpointsActive();
64         var breakpointActiveTitle = WebInspector.UIString(breakpointActive ? "Deactivate Breakpoints" : "Activate Breakpoints");
65         contextMenu.appendItem(breakpointActiveTitle, WebInspector.debuggerModel.setBreakpointsActive.bind(WebInspector.debuggerModel, !breakpointActive));
66         contextMenu.show();
67     },
68
69     /**
70      * @param {WebInspector.Event} event
71      */
72     _breakpointAdded: function(event)
73     {
74         this._breakpointRemoved(event);
75
76         var breakpoint = /** @type {WebInspector.BreakpointManager.Breakpoint} */ (event.data.breakpoint);
77         var uiLocation = /** @type {WebInspector.UILocation} */ (event.data.uiLocation);
78         this._addBreakpoint(breakpoint, uiLocation);
79     },
80
81     /**
82      * @param {WebInspector.BreakpointManager.Breakpoint} breakpoint
83      * @param {WebInspector.UILocation} uiLocation
84      */
85     _addBreakpoint: function(breakpoint, uiLocation)
86     {
87         var element = document.createElement("li");
88         element.addStyleClass("cursor-pointer");
89         element.addEventListener("contextmenu", this._breakpointContextMenu.bind(this, breakpoint), true);
90         element.addEventListener("click", this._breakpointClicked.bind(this, uiLocation), false);
91
92         var checkbox = document.createElement("input");
93         checkbox.className = "checkbox-elem";
94         checkbox.type = "checkbox";
95         checkbox.checked = breakpoint.enabled();
96         checkbox.addEventListener("click", this._breakpointCheckboxClicked.bind(this, breakpoint), false);
97         element.appendChild(checkbox);
98
99         var labelElement = document.createTextNode(WebInspector.formatLinkText(uiLocation.uiSourceCode.originURL(), uiLocation.lineNumber));
100         element.appendChild(labelElement);
101
102         var snippetElement = document.createElement("div");
103         snippetElement.className = "source-text monospace";
104         element.appendChild(snippetElement);
105
106         /**
107          * @param {?string} content
108          * @param {boolean} contentEncoded
109          * @param {string} mimeType
110          */
111         function didRequestContent(content, contentEncoded, mimeType)
112         {
113             var lineEndings = content.lineEndings();
114             if (uiLocation.lineNumber < lineEndings.length)
115                 snippetElement.textContent = content.substring(lineEndings[uiLocation.lineNumber - 1], lineEndings[uiLocation.lineNumber]);
116         }
117         uiLocation.uiSourceCode.requestContent(didRequestContent.bind(this));
118
119         element._data = uiLocation;
120         var currentElement = this.listElement.firstChild;
121         while (currentElement) {
122             if (currentElement._data && this._compareBreakpoints(currentElement._data, element._data) > 0)
123                 break;
124             currentElement = currentElement.nextSibling;
125         }
126         this._addListElement(element, currentElement);
127
128         var breakpointItem = {};
129         breakpointItem.element = element;
130         breakpointItem.checkbox = checkbox;
131         this._items.put(breakpoint, breakpointItem);
132
133         this.expand();
134     },
135
136     /**
137      * @param {WebInspector.Event} event
138      */
139     _breakpointRemoved: function(event)
140     {
141         var breakpoint = /** @type {WebInspector.BreakpointManager.Breakpoint} */ (event.data.breakpoint);
142         var uiLocation = /** @type {WebInspector.UILocation} */ (event.data.uiLocation);
143         var breakpointItem = this._items.get(breakpoint);
144         if (!breakpointItem)
145             return;
146         this._items.remove(breakpoint);
147         this._removeListElement(breakpointItem.element);
148     },
149
150     /**
151      * @param {WebInspector.BreakpointManager.Breakpoint} breakpoint
152      */
153     highlightBreakpoint: function(breakpoint)
154     {
155         var breakpointItem = this._items.get(breakpoint);
156         if (!breakpointItem)
157             return;
158         breakpointItem.element.addStyleClass("breakpoint-hit");
159         this._highlightedBreakpointItem = breakpointItem;
160     },
161
162     clearBreakpointHighlight: function()
163     {
164         if (this._highlightedBreakpointItem) {
165             this._highlightedBreakpointItem.element.removeStyleClass("breakpoint-hit");
166             delete this._highlightedBreakpointItem;
167         }
168     },
169
170     _breakpointClicked: function(uiLocation, event)
171     {
172         this._showSourceLineDelegate(uiLocation.uiSourceCode, uiLocation.lineNumber);
173     },
174
175     /**
176      * @param {WebInspector.BreakpointManager.Breakpoint} breakpoint
177      */
178     _breakpointCheckboxClicked: function(breakpoint, event)
179     {
180         // Breakpoint element has it's own click handler.
181         event.consume();
182         breakpoint.setEnabled(event.target.checked);
183     },
184
185     /**
186      * @param {WebInspector.BreakpointManager.Breakpoint} breakpoint
187      */
188     _breakpointContextMenu: function(breakpoint, event)
189     {
190         var breakpoints = this._items.values();
191         var contextMenu = new WebInspector.ContextMenu(event);
192         contextMenu.appendItem(WebInspector.UIString("Remove Breakpoint"), breakpoint.remove.bind(breakpoint));
193         if (breakpoints.length > 1) {
194             var removeAllTitle = WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Remove all breakpoints" : "Remove All Breakpoints");
195             contextMenu.appendItem(removeAllTitle, this._breakpointManager.removeAllBreakpoints.bind(this._breakpointManager));
196         }
197
198         contextMenu.appendSeparator();
199         var breakpointActive = WebInspector.debuggerModel.breakpointsActive();
200         var breakpointActiveTitle = WebInspector.UIString(breakpointActive ? "Deactivate Breakpoints" : "Activate Breakpoints");
201         contextMenu.appendItem(breakpointActiveTitle, WebInspector.debuggerModel.setBreakpointsActive.bind(WebInspector.debuggerModel, !breakpointActive));
202
203         function enabledBreakpointCount(breakpoints)
204         {
205             var count = 0;
206             for (var i = 0; i < breakpoints.length; ++i) {
207                 if (breakpoints[i].checkbox.checked)
208                     count++;
209             }
210             return count;
211         }
212         if (breakpoints.length > 1) {
213             var enableBreakpointCount = enabledBreakpointCount(breakpoints);
214             var enableTitle = WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Enable all breakpoints" : "Enable All Breakpoints");
215             var disableTitle = WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Disable all breakpoints" : "Disable All Breakpoints");
216
217             contextMenu.appendSeparator();
218
219             contextMenu.appendItem(enableTitle, this._breakpointManager.toggleAllBreakpoints.bind(this._breakpointManager, true), !(enableBreakpointCount != breakpoints.length));
220             contextMenu.appendItem(disableTitle, this._breakpointManager.toggleAllBreakpoints.bind(this._breakpointManager, false), !(enableBreakpointCount > 1));
221         }
222
223         contextMenu.show();
224     },
225
226     _addListElement: function(element, beforeElement)
227     {
228         if (beforeElement)
229             this.listElement.insertBefore(element, beforeElement);
230         else {
231             if (!this.listElement.firstChild) {
232                 this.bodyElement.removeChild(this.emptyElement);
233                 this.bodyElement.appendChild(this.listElement);
234             }
235             this.listElement.appendChild(element);
236         }
237     },
238
239     _removeListElement: function(element)
240     {
241         this.listElement.removeChild(element);
242         if (!this.listElement.firstChild) {
243             this.bodyElement.removeChild(this.listElement);
244             this.bodyElement.appendChild(this.emptyElement);
245         }
246     },
247
248     _compare: function(x, y)
249     {
250         if (x !== y)
251             return x < y ? -1 : 1;
252         return 0;
253     },
254
255     _compareBreakpoints: function(b1, b2)
256     {
257         return this._compare(b1.uiSourceCode.originURL(), b2.uiSourceCode.originURL()) || this._compare(b1.lineNumber, b2.lineNumber);
258     },
259
260     reset: function()
261     {
262         this.listElement.removeChildren();
263         if (this.listElement.parentElement) {
264             this.bodyElement.removeChild(this.listElement);
265             this.bodyElement.appendChild(this.emptyElement);
266         }
267         this._items.clear();
268     },
269
270     __proto__: WebInspector.SidebarPane.prototype
271 }
272
273 /**
274  * @constructor
275  * @extends {WebInspector.NativeBreakpointsSidebarPane}
276  */
277 WebInspector.XHRBreakpointsSidebarPane = function()
278 {
279     WebInspector.NativeBreakpointsSidebarPane.call(this, WebInspector.UIString("XHR Breakpoints"));
280
281     this._breakpointElements = {};
282
283     var addButton = document.createElement("button");
284     addButton.className = "pane-title-button add";
285     addButton.addEventListener("click", this._addButtonClicked.bind(this), false);
286     addButton.title = WebInspector.UIString("Add XHR breakpoint");
287     this.titleElement.appendChild(addButton);
288
289     this.emptyElement.addEventListener("contextmenu", this._emptyElementContextMenu.bind(this), true);
290
291     this._restoreBreakpoints();
292 }
293
294 WebInspector.XHRBreakpointsSidebarPane.prototype = {
295     _emptyElementContextMenu: function(event)
296     {
297         var contextMenu = new WebInspector.ContextMenu(event);
298         contextMenu.appendItem(WebInspector.UIString("Add Breakpoint"), this._addButtonClicked.bind(this));
299         contextMenu.show();
300     },
301
302     _addButtonClicked: function(event)
303     {
304         if (event)
305             event.consume();
306
307         this.expand();
308
309         var inputElementContainer = document.createElement("p");
310         inputElementContainer.className = "breakpoint-condition";
311         var inputElement = document.createElement("span");
312         inputElementContainer.textContent = WebInspector.UIString("Break when URL contains:");
313         inputElement.className = "editing";
314         inputElement.id = "breakpoint-condition-input";
315         inputElementContainer.appendChild(inputElement);
316         this._addListElement(inputElementContainer, this.listElement.firstChild);
317
318         function finishEditing(accept, e, text)
319         {
320             this._removeListElement(inputElementContainer);
321             if (accept) {
322                 this._setBreakpoint(text, true);
323                 this._saveBreakpoints();
324             }
325         }
326
327         var config = new WebInspector.EditingConfig(finishEditing.bind(this, true), finishEditing.bind(this, false));
328         WebInspector.startEditing(inputElement, config);
329     },
330
331     _setBreakpoint: function(url, enabled)
332     {
333         if (url in this._breakpointElements)
334             return;
335
336         var element = document.createElement("li");
337         element._url = url;
338         element.addEventListener("contextmenu", this._contextMenu.bind(this, url), true);
339
340         var checkboxElement = document.createElement("input");
341         checkboxElement.className = "checkbox-elem";
342         checkboxElement.type = "checkbox";
343         checkboxElement.checked = enabled;
344         checkboxElement.addEventListener("click", this._checkboxClicked.bind(this, url), false);
345         element._checkboxElement = checkboxElement;
346         element.appendChild(checkboxElement);
347
348         var labelElement = document.createElement("span");
349         if (!url)
350             labelElement.textContent = WebInspector.UIString("Any XHR");
351         else
352             labelElement.textContent = WebInspector.UIString("URL contains \"%s\"", url);
353         labelElement.addStyleClass("cursor-auto");
354         labelElement.addEventListener("dblclick", this._labelClicked.bind(this, url), false);
355         element.appendChild(labelElement);
356
357         var currentElement = this.listElement.firstChild;
358         while (currentElement) {
359             if (currentElement._url && currentElement._url < element._url)
360                 break;
361             currentElement = currentElement.nextSibling;
362         }
363         this._addListElement(element, currentElement);
364         this._breakpointElements[url] = element;
365         if (enabled)
366             DOMDebuggerAgent.setXHRBreakpoint(url);
367     },
368
369     _removeBreakpoint: function(url)
370     {
371         var element = this._breakpointElements[url];
372         if (!element)
373             return;
374
375         this._removeListElement(element);
376         delete this._breakpointElements[url];
377         if (element._checkboxElement.checked)
378             DOMDebuggerAgent.removeXHRBreakpoint(url);
379     },
380
381     _contextMenu: function(url, event)
382     {
383         var contextMenu = new WebInspector.ContextMenu(event);
384         function removeBreakpoint()
385         {
386             this._removeBreakpoint(url);
387             this._saveBreakpoints();
388         }
389         function removeAllBreakpoints()
390         {
391             for (var url in this._breakpointElements)
392                 this._removeBreakpoint(url);
393             this._saveBreakpoints();
394         }
395         var removeAllTitle = WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Remove all breakpoints" : "Remove All Breakpoints");
396
397         contextMenu.appendItem(WebInspector.UIString("Add Breakpoint"), this._addButtonClicked.bind(this));
398         contextMenu.appendItem(WebInspector.UIString("Remove Breakpoint"), removeBreakpoint.bind(this));
399         contextMenu.appendItem(removeAllTitle, removeAllBreakpoints.bind(this));
400         contextMenu.show();
401     },
402
403     _checkboxClicked: function(url, event)
404     {
405         if (event.target.checked)
406             DOMDebuggerAgent.setXHRBreakpoint(url);
407         else
408             DOMDebuggerAgent.removeXHRBreakpoint(url);
409         this._saveBreakpoints();
410     },
411
412     _labelClicked: function(url)
413     {
414         var element = this._breakpointElements[url];
415         var inputElement = document.createElement("span");
416         inputElement.className = "breakpoint-condition editing";
417         inputElement.textContent = url;
418         this.listElement.insertBefore(inputElement, element);
419         element.addStyleClass("hidden");
420
421         function finishEditing(accept, e, text)
422         {
423             this._removeListElement(inputElement);
424             if (accept) {
425                 this._removeBreakpoint(url);
426                 this._setBreakpoint(text, element._checkboxElement.checked);
427                 this._saveBreakpoints();
428             } else
429                 element.removeStyleClass("hidden");
430         }
431
432         WebInspector.startEditing(inputElement, new WebInspector.EditingConfig(finishEditing.bind(this, true), finishEditing.bind(this, false)));
433     },
434
435     highlightBreakpoint: function(url)
436     {
437         var element = this._breakpointElements[url];
438         if (!element)
439             return;
440         this.expand();
441         element.addStyleClass("breakpoint-hit");
442         this._highlightedElement = element;
443     },
444
445     clearBreakpointHighlight: function()
446     {
447         if (this._highlightedElement) {
448             this._highlightedElement.removeStyleClass("breakpoint-hit");
449             delete this._highlightedElement;
450         }
451     },
452
453     _saveBreakpoints: function()
454     {
455         var breakpoints = [];
456         for (var url in this._breakpointElements)
457             breakpoints.push({ url: url, enabled: this._breakpointElements[url]._checkboxElement.checked });
458         WebInspector.settings.xhrBreakpoints.set(breakpoints);
459     },
460
461     _restoreBreakpoints: function()
462     {
463         var breakpoints = WebInspector.settings.xhrBreakpoints.get();
464         for (var i = 0; i < breakpoints.length; ++i) {
465             var breakpoint = breakpoints[i];
466             if (breakpoint && typeof breakpoint.url === "string")
467                 this._setBreakpoint(breakpoint.url, breakpoint.enabled);
468         }
469     },
470
471     __proto__: WebInspector.NativeBreakpointsSidebarPane.prototype
472 }
473
474 /**
475  * @constructor
476  * @extends {WebInspector.SidebarPane}
477  */
478 WebInspector.EventListenerBreakpointsSidebarPane = function()
479 {
480     WebInspector.SidebarPane.call(this, WebInspector.UIString("Event Listener Breakpoints"));
481
482     this.categoriesElement = document.createElement("ol");
483     this.categoriesElement.tabIndex = 0;
484     this.categoriesElement.addStyleClass("properties-tree");
485     this.categoriesElement.addStyleClass("event-listener-breakpoints");
486     this.categoriesTreeOutline = new TreeOutline(this.categoriesElement);
487     this.bodyElement.appendChild(this.categoriesElement);
488
489     this._breakpointItems = {};
490     // FIXME: uncomment following once inspector stops being drop targer in major ports.
491     // Otherwise, inspector page reacts on drop event and tries to load the event data.
492     // this._createCategory(WebInspector.UIString("Drag"), true, ["drag", "drop", "dragstart", "dragend", "dragenter", "dragleave", "dragover"]);
493     this._createCategory(WebInspector.UIString("Animation"), false, ["requestAnimationFrame", "cancelAnimationFrame", "animationFrameFired"]);
494     this._createCategory(WebInspector.UIString("Control"), true, ["resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"]);
495     this._createCategory(WebInspector.UIString("Clipboard"), true, ["copy", "cut", "paste", "beforecopy", "beforecut", "beforepaste"]);
496     this._createCategory(WebInspector.UIString("DOM Mutation"), true, ["DOMActivate", "DOMFocusIn", "DOMFocusOut", "DOMAttrModified", "DOMCharacterDataModified", "DOMNodeInserted", "DOMNodeInsertedIntoDocument", "DOMNodeRemoved", "DOMNodeRemovedFromDocument", "DOMSubtreeModified", "DOMContentLoaded"]);
497     this._createCategory(WebInspector.UIString("Device"), true, ["deviceorientation", "devicemotion"]);
498     this._createCategory(WebInspector.UIString("Keyboard"), true, ["keydown", "keyup", "keypress", "input"]);
499     this._createCategory(WebInspector.UIString("Load"), true, ["load", "unload", "abort", "error"]);
500     this._createCategory(WebInspector.UIString("Mouse"), true, ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mousemove", "mouseout", "mousewheel"]);
501     this._createCategory(WebInspector.UIString("Timer"), false, ["setTimer", "clearTimer", "timerFired"]);
502     this._createCategory(WebInspector.UIString("Touch"), true, ["touchstart", "touchmove", "touchend", "touchcancel"]);
503
504     this._restoreBreakpoints();
505 }
506
507 WebInspector.EventListenerBreakpointsSidebarPane.categotyListener = "listener:";
508 WebInspector.EventListenerBreakpointsSidebarPane.categotyInstrumentation = "instrumentation:";
509
510 WebInspector.EventListenerBreakpointsSidebarPane.eventNameForUI = function(eventName)
511 {
512     if (!WebInspector.EventListenerBreakpointsSidebarPane._eventNamesForUI) {
513         WebInspector.EventListenerBreakpointsSidebarPane._eventNamesForUI = {
514             "instrumentation:setTimer": WebInspector.UIString("Set Timer"),
515             "instrumentation:clearTimer": WebInspector.UIString("Clear Timer"),
516             "instrumentation:timerFired": WebInspector.UIString("Timer Fired"),
517             "instrumentation:requestAnimationFrame": WebInspector.UIString("Request Animation Frame"),
518             "instrumentation:cancelAnimationFrame": WebInspector.UIString("Cancel Animation Frame"),
519             "instrumentation:animationFrameFired": WebInspector.UIString("Animation Frame Fired")
520         };
521     }
522     return WebInspector.EventListenerBreakpointsSidebarPane._eventNamesForUI[eventName] || eventName.substring(eventName.indexOf(":") + 1);
523 }
524
525 WebInspector.EventListenerBreakpointsSidebarPane.prototype = {
526     _createCategory: function(name, isDOMEvent, eventNames)
527     {
528         var categoryItem = {};
529         categoryItem.element = new TreeElement(name);
530         this.categoriesTreeOutline.appendChild(categoryItem.element);
531         categoryItem.element.listItemElement.addStyleClass("event-category");
532         categoryItem.element.selectable = true;
533
534         categoryItem.checkbox = this._createCheckbox(categoryItem.element);
535         categoryItem.checkbox.addEventListener("click", this._categoryCheckboxClicked.bind(this, categoryItem), true);
536
537         categoryItem.children = {};
538         for (var i = 0; i < eventNames.length; ++i) {
539             var eventName = (isDOMEvent ? WebInspector.EventListenerBreakpointsSidebarPane.categotyListener :  WebInspector.EventListenerBreakpointsSidebarPane.categotyInstrumentation) + eventNames[i];
540
541             var breakpointItem = {};
542             var title = WebInspector.EventListenerBreakpointsSidebarPane.eventNameForUI(eventName);
543             breakpointItem.element = new TreeElement(title);
544             categoryItem.element.appendChild(breakpointItem.element);
545             var hitMarker = document.createElement("div");
546             hitMarker.className = "breakpoint-hit-marker";
547             breakpointItem.element.listItemElement.appendChild(hitMarker);
548             breakpointItem.element.listItemElement.addStyleClass("source-code");
549             breakpointItem.element.selectable = true;
550
551             breakpointItem.checkbox = this._createCheckbox(breakpointItem.element);
552             breakpointItem.checkbox.addEventListener("click", this._breakpointCheckboxClicked.bind(this, eventName), true);
553             breakpointItem.parent = categoryItem;
554
555             this._breakpointItems[eventName] = breakpointItem;
556             categoryItem.children[eventName] = breakpointItem;
557         }
558     },
559
560     _createCheckbox: function(treeElement)
561     {
562         var checkbox = document.createElement("input");
563         checkbox.className = "checkbox-elem";
564         checkbox.type = "checkbox";
565         treeElement.listItemElement.insertBefore(checkbox, treeElement.listItemElement.firstChild);
566         return checkbox;
567     },
568
569     _categoryCheckboxClicked: function(categoryItem)
570     {
571         var checked = categoryItem.checkbox.checked;
572         for (var eventName in categoryItem.children) {
573             var breakpointItem = categoryItem.children[eventName];
574             if (breakpointItem.checkbox.checked === checked)
575                 continue;
576             if (checked)
577                 this._setBreakpoint(eventName);
578             else
579                 this._removeBreakpoint(eventName);
580         }
581         this._saveBreakpoints();
582     },
583
584     _breakpointCheckboxClicked: function(eventName, event)
585     {
586         if (event.target.checked)
587             this._setBreakpoint(eventName);
588         else
589             this._removeBreakpoint(eventName);
590         this._saveBreakpoints();
591     },
592
593     _setBreakpoint: function(eventName)
594     {
595         var breakpointItem = this._breakpointItems[eventName];
596         if (!breakpointItem)
597             return;
598         breakpointItem.checkbox.checked = true;
599         if (eventName.startsWith(WebInspector.EventListenerBreakpointsSidebarPane.categotyListener))
600             DOMDebuggerAgent.setEventListenerBreakpoint(eventName.substring(WebInspector.EventListenerBreakpointsSidebarPane.categotyListener.length));
601         else if (eventName.startsWith(WebInspector.EventListenerBreakpointsSidebarPane.categotyInstrumentation))
602             DOMDebuggerAgent.setInstrumentationBreakpoint(eventName.substring(WebInspector.EventListenerBreakpointsSidebarPane.categotyInstrumentation.length));
603         this._updateCategoryCheckbox(breakpointItem.parent);
604     },
605
606     _removeBreakpoint: function(eventName)
607     {
608         var breakpointItem = this._breakpointItems[eventName];
609         if (!breakpointItem)
610             return;
611         breakpointItem.checkbox.checked = false;
612         if (eventName.startsWith(WebInspector.EventListenerBreakpointsSidebarPane.categotyListener))
613             DOMDebuggerAgent.removeEventListenerBreakpoint(eventName.substring(WebInspector.EventListenerBreakpointsSidebarPane.categotyListener.length));
614         else if (eventName.startsWith(WebInspector.EventListenerBreakpointsSidebarPane.categotyInstrumentation))
615             DOMDebuggerAgent.removeInstrumentationBreakpoint(eventName.substring(WebInspector.EventListenerBreakpointsSidebarPane.categotyInstrumentation.length));
616         this._updateCategoryCheckbox(breakpointItem.parent);
617     },
618
619     _updateCategoryCheckbox: function(categoryItem)
620     {
621         var hasEnabled = false, hasDisabled = false;
622         for (var eventName in categoryItem.children) {
623             var breakpointItem = categoryItem.children[eventName];
624             if (breakpointItem.checkbox.checked)
625                 hasEnabled = true;
626             else
627                 hasDisabled = true;
628         }
629         categoryItem.checkbox.checked = hasEnabled;
630         categoryItem.checkbox.indeterminate = hasEnabled && hasDisabled;
631     },
632
633     highlightBreakpoint: function(eventName)
634     {
635         var breakpointItem = this._breakpointItems[eventName];
636         if (!breakpointItem)
637             return;
638         this.expand();
639         breakpointItem.parent.element.expand();
640         breakpointItem.element.listItemElement.addStyleClass("breakpoint-hit");
641         this._highlightedElement = breakpointItem.element.listItemElement;
642     },
643
644     clearBreakpointHighlight: function()
645     {
646         if (this._highlightedElement) {
647             this._highlightedElement.removeStyleClass("breakpoint-hit");
648             delete this._highlightedElement;
649         }
650     },
651
652     _saveBreakpoints: function()
653     {
654         var breakpoints = [];
655         for (var eventName in this._breakpointItems) {
656             if (this._breakpointItems[eventName].checkbox.checked)
657                 breakpoints.push({ eventName: eventName });
658         }
659         WebInspector.settings.eventListenerBreakpoints.set(breakpoints);
660     },
661
662     _restoreBreakpoints: function()
663     {
664         var breakpoints = WebInspector.settings.eventListenerBreakpoints.get();
665         for (var i = 0; i < breakpoints.length; ++i) {
666             var breakpoint = breakpoints[i];
667             if (breakpoint && typeof breakpoint.eventName === "string")
668                 this._setBreakpoint(breakpoint.eventName);
669         }
670     },
671
672     __proto__: WebInspector.SidebarPane.prototype
673 }