[DevTools] reworked JavaScriptBreakpointsSidebarPane.js

third_party/WebKit/Source/devtools/front_end/sources/JavaScriptBreakpointsSidebarPane.js

 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /**
  * @implements {WebInspector.ContextFlavorListener}
  * @unrestricted
  */
 WebInspector.JavaScriptBreakpointsSidebarPane = class extends WebInspector.VBox {
   constructor() {
     super();
     this.registerRequiredCSS('components/breakpointsList.css');
 
     this._breakpointManager = WebInspector.breakpointManager;
-
+    this._locationSymbol = Symbol('location');

[lushnikov, 2016/11/11 04:24:53]

let's make this static

[kozy, 2016/11/11 17:21:13]

Done.

+    /** @type {!Map<!WebInspector.UISourceCode, !Map<number, !WebInspector.JavaScriptBreakpointsSidebarPane.BreakpointItem>>} */
+    this._items = new Map();
     this._listElement = createElementWithClass('ol', 'breakpoint-list');
+    /** @type {!Map<string, !WebInspector.UILocation>} */
+    this._scheduledUpdates = new Map();
 
     this.emptyElement = this.element.createChild('div', 'gray-info-message');
     this.emptyElement.textContent = WebInspector.UIString('No Breakpoints');
+    this.emptyElement.addEventListener('contextmenu', this._emptyElementContextMenu.bind(this), true);
 
-    this._items = new Map();
+    this._breakpointManager.addEventListener(
+        WebInspector.BreakpointManager.Events.BreakpointAdded, this._breakpointChanged.bind(this), this);
+    this._breakpointManager.addEventListener(
+        WebInspector.BreakpointManager.Events.BreakpointRemoved, this._breakpointChanged.bind(this), this);
+    this._breakpointManager.addEventListener(
+        WebInspector.BreakpointManager.Events.BreakpointsActiveStateChanged, this._breakpointsActiveStateChanged, this);
 
     var breakpointLocations = this._breakpointManager.allBreakpointLocations();
     for (var i = 0; i < breakpointLocations.length; ++i)
-      this._addBreakpoint(breakpointLocations[i].breakpoint, breakpointLocations[i].uiLocation);
+      this._scheduleUpdate(breakpointLocations[i].uiLocation);
 
-    this._breakpointManager.addEventListener(
-        WebInspector.BreakpointManager.Events.BreakpointAdded, this._breakpointAdded, this);
-    this._breakpointManager.addEventListener(
-        WebInspector.BreakpointManager.Events.BreakpointRemoved, this._breakpointRemoved, this);
-
-    this.emptyElement.addEventListener('contextmenu', this._emptyElementContextMenu.bind(this), true);
-    this._breakpointManager.addEventListener(
-        WebInspector.BreakpointManager.Events.BreakpointsActiveStateChanged, this._breakpointsActiveStateChanged, this);
     this._breakpointsActiveStateChanged();
     this._update();
   }
 
   _emptyElementContextMenu(event) {
     var contextMenu = new WebInspector.ContextMenu(event);
     this._appendBreakpointActiveItem(contextMenu);
     contextMenu.show();
   }
 
   /**
    * @param {!WebInspector.ContextMenu} contextMenu
    */
   _appendBreakpointActiveItem(contextMenu) {
     var breakpointActive = this._breakpointManager.breakpointsActive();
-    var breakpointActiveTitle = breakpointActive ? WebInspector.UIString.capitalize('Deactivate ^breakpoints') :
-                                                   WebInspector.UIString.capitalize('Activate ^breakpoints');
+    var breakpointActiveTitle = breakpointActive ? WebInspector.UIString.capitalize('Deactivate breakpoints') :
+                                                   WebInspector.UIString.capitalize('Activate breakpoints');
     contextMenu.appendItem(
         breakpointActiveTitle,
         this._breakpointManager.setBreakpointsActive.bind(this._breakpointManager, !breakpointActive));
   }
 
   /**
    * @param {!WebInspector.Event} event
    */
-  _breakpointAdded(event) {
-    this._breakpointRemoved(event);
-
-    var breakpoint = /** @type {!WebInspector.BreakpointManager.Breakpoint} */ (event.data.breakpoint);
-    var uiLocation = /** @type {!WebInspector.UILocation} */ (event.data.uiLocation);
-    this._addBreakpoint(breakpoint, uiLocation);
+  _breakpointChanged(event) {
+    this._scheduleUpdate(/** @type {!WebInspector.UILocation} */ (event.data.uiLocation));
   }
 
   /**
-   * @param {!WebInspector.BreakpointManager.Breakpoint} breakpoint
    * @param {!WebInspector.UILocation} uiLocation
    */
-  _addBreakpoint(breakpoint, uiLocation) {
+  _scheduleUpdate(uiLocation) {
+    var locationDescriptor = uiLocation.uiSourceCode.url() + ':' + uiLocation.lineNumber;
+    if (this._scheduledUpdates.has(locationDescriptor))
+      return;
+    if (!this._scheduledUpdates.size)
+      setImmediate(this._updateBreakpointItems.bind(this));
+    this._scheduledUpdates.set(locationDescriptor, uiLocation);
+  }
+
+  _updateBreakpointItems() {
+    for (var uiLocation of this._scheduledUpdates.valuesArray()) {
+      var breakpoints = this._breakpointManager.findBreakpoints(uiLocation.uiSourceCode, uiLocation.lineNumber);
+      var hasEnabled = breakpoints.some(breakpoint => breakpoint.enabled());
+      var hasDisabled = breakpoints.some(breakpoint => !breakpoint.enabled());
+      if (breakpoints.length)
+        this._addBreakpointItem(uiLocation, hasEnabled, hasDisabled);
+      else
+        this._removeBreakpointItem(uiLocation);
+    }
+    this._scheduledUpdates.clear();
+    this._breakpointsWasUpdatedForTest();
+  }
+
+  _breakpointsWasUpdatedForTest() {
+  }
+
+  /**
+   * @param {!WebInspector.UILocation} uiLocation
+   * @param {boolean} hasEnabled
+   * @param {boolean} hasDisabled
+   */
+  _addBreakpointItem(uiLocation, hasEnabled, hasDisabled) {
+    if (!this._items.has(uiLocation.uiSourceCode))
+      this._items.set(uiLocation.uiSourceCode, new Map());
+    var uiSourceCodeItems = this._items.get(uiLocation.uiSourceCode);
+    if (!uiSourceCodeItems.has(uiLocation.lineNumber)) {
+      var breakpointItem = this._createBreakpointItem(uiLocation);
+
+      var newElementLocation = breakpointItem.element[this._locationSymbol];
+      var currentElement = this._listElement.firstChild;
+      while (currentElement) {
+        var currentElementLocation = currentElement[this._locationSymbol];
+        if (currentElementLocation && currentElementLocation.compareTo(newElementLocation) > 0)
+          break;
+        currentElement = currentElement.nextSibling;
+      }
+      this._addListElement(breakpointItem.element, currentElement);
+
+      uiSourceCodeItems.set(uiLocation.lineNumber, breakpointItem);
+    }
+    var breakpointItem = uiSourceCodeItems.get(uiLocation.lineNumber);
+    breakpointItem.checkbox.checked = hasEnabled;
+    breakpointItem.checkbox.indeterminate = hasEnabled && hasDisabled;
+  }
+
+  /**
+   * @param {!WebInspector.UILocation} uiLocation
+   * @return {!WebInspector.JavaScriptBreakpointsSidebarPane.BreakpointItem}
+   */
+  _createBreakpointItem(uiLocation) {
     var element = createElementWithClass('li', 'cursor-pointer');
-    element.addEventListener('contextmenu', this._breakpointContextMenu.bind(this, breakpoint), true);
+    element.addEventListener('contextmenu', this._breakpointContextMenu.bind(this, uiLocation), true);
     element.addEventListener('click', this._breakpointClicked.bind(this, uiLocation), false);
+    element[this._locationSymbol] = uiLocation;
 
-    var checkboxLabel = createCheckboxLabel(uiLocation.linkText(), breakpoint.enabled());
+    var checkboxLabel = createCheckboxLabel(uiLocation.linkText(), false);
     element.appendChild(checkboxLabel);
-    checkboxLabel.addEventListener('click', this._breakpointCheckboxClicked.bind(this, breakpoint), false);
+    checkboxLabel.addEventListener('click', this._breakpointCheckboxClicked.bind(this, uiLocation), false);
 
     var snippetElement = element.createChild('div', 'source-text monospace');
+    uiLocation.uiSourceCode.requestContent().then(fillSnippetElement.bind(this, snippetElement));
 
     /**
+     * @param {!Element} snippetElement
      * @param {?string} content
      * @this {WebInspector.JavaScriptBreakpointsSidebarPane}
      */
-    function didRequestContent(content) {
+    function fillSnippetElement(snippetElement, content) {
       var lineNumber = uiLocation.lineNumber;
-      var columnNumber = uiLocation.columnNumber;
       var text = new WebInspector.Text(content || '');
       if (lineNumber < text.lineCount()) {
         var lineText = text.lineAt(lineNumber);
         var maxSnippetLength = 200;
-        var snippetStartIndex = columnNumber > 100 ? columnNumber : 0;
-        snippetElement.textContent = lineText.substr(snippetStartIndex).trimEnd(maxSnippetLength);
+        snippetElement.textContent = lineText.substr(0).trimEnd(maxSnippetLength);
       }
-      this.didReceiveBreakpointLineForTest(uiLocation.uiSourceCode, lineNumber, columnNumber);
+      this.didReceiveBreakpointLineForTest(uiLocation.uiSourceCode, lineNumber, 0);
     }
 
-    uiLocation.uiSourceCode.requestContent().then(didRequestContent.bind(this));
-
-    element._data = uiLocation;
-    var currentElement = this._listElement.firstChild;
-    while (currentElement) {
-      if (currentElement._data && this._compareBreakpoints(currentElement._data, element._data) > 0)
-        break;
-      currentElement = currentElement.nextSibling;
-    }
-    this._addListElement(element, currentElement);
-
-    var breakpointItem = {element: element, checkbox: checkboxLabel.checkboxElement};
-    this._items.set(breakpoint, breakpointItem);
+    return { element: element, checkbox: checkboxLabel.checkboxElement };
   }
 
   /**
+   * @param {!WebInspector.UILocation} uiLocation
+   */
+  _removeBreakpointItem(uiLocation) {
+    var uiSourceCodeItems = this._items.get(uiLocation.uiSourceCode);
+    if (!uiSourceCodeItems)
+      return;
+    var breakpointItem = uiSourceCodeItems.get(uiLocation.lineNumber);
+    if (!breakpointItem)
+      return;
+    uiSourceCodeItems.delete(uiLocation.lineNumber);
+    if (!uiSourceCodeItems.size)
+      this._items.delete(uiLocation.uiSourceCode);
+    this._removeListElement(breakpointItem.element);
+  }
+
+  /**
    * @param {!WebInspector.UISourceCode} uiSourceCode
    * @param {number} lineNumber
    * @param {number} columnNumber
    */
   didReceiveBreakpointLineForTest(uiSourceCode, lineNumber, columnNumber) {
   }
 
   /**
-   * @param {!WebInspector.Event} event
-   */
-  _breakpointRemoved(event) {
-    var breakpoint = /** @type {!WebInspector.BreakpointManager.Breakpoint} */ (event.data.breakpoint);
-    var breakpointItem = this._items.get(breakpoint);
-    if (!breakpointItem)
-      return;
-    this._items.remove(breakpoint);
-    this._removeListElement(breakpointItem.element);
-  }
-
-  /**
    * @override
    * @param {?Object} object
    */
   flavorChanged(object) {
     this._update();
   }
 
   _update() {
     var details = WebInspector.context.flavor(WebInspector.DebuggerPausedDetails);
     var uiLocation = details && details.callFrames.length ?
         WebInspector.debuggerWorkspaceBinding.rawLocationToUILocation(details.callFrames[0].location()) :
         null;
-    var breakpoint = uiLocation ?
-        this._breakpointManager.findBreakpoint(
-            uiLocation.uiSourceCode, uiLocation.lineNumber, uiLocation.columnNumber) :
-        null;
-    var breakpointItem = this._items.get(breakpoint);
+    var breakpointItem;
+    if (uiLocation && this._items.has(uiLocation.uiSourceCode)) {
+      var uiSourceCodeItems = this._items.get(uiLocation.uiSourceCode);
+      breakpointItem = uiSourceCodeItems.get(uiLocation.lineNumber) || null;
+    }
     if (!breakpointItem) {
       if (this._highlightedBreakpointItem) {
         this._highlightedBreakpointItem.element.classList.remove('breakpoint-hit');
         delete this._highlightedBreakpointItem;
       }
       return;
     }
 
     breakpointItem.element.classList.add('breakpoint-hit');
     this._highlightedBreakpointItem = breakpointItem;
     WebInspector.viewManager.showView('sources.jsBreakpoints');
   }
 
   _breakpointsActiveStateChanged() {
     this._listElement.classList.toggle('breakpoints-list-deactivated', !this._breakpointManager.breakpointsActive());
   }
 
   /**
    * @param {!WebInspector.UILocation} uiLocation
    */
   _breakpointClicked(uiLocation) {
     WebInspector.Revealer.reveal(uiLocation);
   }
 
   /**
-   * @param {!WebInspector.BreakpointManager.Breakpoint} breakpoint
+   * @param {!WebInspector.UILocation} uiLocation
    * @param {!Event} event
    */
-  _breakpointCheckboxClicked(breakpoint, event) {
+  _breakpointCheckboxClicked(uiLocation, event) {
     // Breakpoint element has it's own click handler.
     event.consume();
-    breakpoint.setEnabled(event.target.checkboxElement.checked);
+    var breakpoints = this._breakpointManager.findBreakpoints(uiLocation.uiSourceCode, uiLocation.lineNumber);
+    var newState = event.target.checkboxElement.checked;
+    for (var breakpoint of breakpoints)
+      breakpoint.setEnabled(newState);
   }
 
   /**
-   * @param {!WebInspector.BreakpointManager.Breakpoint} breakpoint
+   * @param {!WebInspector.UILocation} uiLocation
    * @param {!Event} event
    */
-  _breakpointContextMenu(breakpoint, event) {
-    var breakpoints = this._items.valuesArray();
+  _breakpointContextMenu(uiLocation, event) {
+    var breakpoints = this._breakpointManager.findBreakpoints(uiLocation.uiSourceCode, uiLocation.lineNumber);
+
     var contextMenu = new WebInspector.ContextMenu(event);
-    contextMenu.appendItem(WebInspector.UIString.capitalize('Remove ^breakpoint'), breakpoint.remove.bind(breakpoint));
-    if (breakpoints.length > 1) {
-      var removeAllTitle = WebInspector.UIString.capitalize('Remove ^all ^breakpoints');
-      contextMenu.appendItem(
-          removeAllTitle, this._breakpointManager.removeAllBreakpoints.bind(this._breakpointManager));
-    }
+    contextMenu.appendItem(WebInspector.UIString.capitalize('Remove breakpoints in line'), () => breakpoints.map(breakpoint => breakpoint.remove()));
+
+    var removeAllTitle = WebInspector.UIString.capitalize('Remove all breakpoints');
+    contextMenu.appendItem(
+        removeAllTitle, this._breakpointManager.removeAllBreakpoints.bind(this._breakpointManager));
 
     contextMenu.appendSeparator();
     this._appendBreakpointActiveItem(contextMenu);
 
-    function enabledBreakpointCount(breakpoints) {
-      var count = 0;
-      for (var i = 0; i < breakpoints.length; ++i) {
-        if (breakpoints[i].checkbox.checked)
-          count++;
-      }
-      return count;
+    contextMenu.appendSeparator();
+
+    if (breakpoints.some(breakpoint => !breakpoint.enabled())) {
+      var enableTitle = WebInspector.UIString.capitalize('Enable all breakpoints');
+      contextMenu.appendItem(
+          enableTitle, this._breakpointManager.toggleAllBreakpoints.bind(this._breakpointManager, true));
     }
-    if (breakpoints.length > 1) {
-      var enableBreakpointCount = enabledBreakpointCount(breakpoints);
-      var enableTitle = WebInspector.UIString.capitalize('Enable ^all ^breakpoints');
-      var disableTitle = WebInspector.UIString.capitalize('Disable ^all ^breakpoints');
-
-      contextMenu.appendSeparator();
-
+    if (breakpoints.some(breakpoint => breakpoint.enabled())) {
+      var disableTitle = WebInspector.UIString.capitalize('Disable all breakpoints');
       contextMenu.appendItem(
-          enableTitle, this._breakpointManager.toggleAllBreakpoints.bind(this._breakpointManager, true),
-          !(enableBreakpointCount !== breakpoints.length));
-      contextMenu.appendItem(
-          disableTitle, this._breakpointManager.toggleAllBreakpoints.bind(this._breakpointManager, false),
-          !(enableBreakpointCount > 1));
+          disableTitle, this._breakpointManager.toggleAllBreakpoints.bind(this._breakpointManager, false));
     }
-
     contextMenu.show();
   }
 
   _addListElement(element, beforeElement) {
     if (beforeElement)
       this._listElement.insertBefore(element, beforeElement);
     else {
       if (!this._listElement.firstChild) {
         this.element.removeChild(this.emptyElement);
         this.element.appendChild(this._listElement);
       }
       this._listElement.appendChild(element);
     }
   }
 
   _removeListElement(element) {
     this._listElement.removeChild(element);
     if (!this._listElement.firstChild) {
       this.element.removeChild(this._listElement);
       this.element.appendChild(this.emptyElement);
     }
   }
 
-  _compare(x, y) {
-    if (x !== y)
-      return x < y ? -1 : 1;
-    return 0;
-  }
-
-  _compareBreakpoints(b1, b2) {
-    return this._compare(b1.uiSourceCode.url(), b2.uiSourceCode.url()) || this._compare(b1.lineNumber, b2.lineNumber);
-  }
-
   reset() {
     this._listElement.removeChildren();
     if (this._listElement.parentElement) {
       this.element.removeChild(this._listElement);
       this.element.appendChild(this.emptyElement);
     }
     this._items.clear();
   }
 };
+
+/** @typedef {{ element: !Element, checkbox: !Element}} */
+WebInspector.JavaScriptBreakpointsSidebarPane.BreakpointItem;