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 }