[DevTools] Prepare JavaScriptSourceFrame for multiple breakpoints per line

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

 /*
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 239 matching lines @@
      */
     function populate(resolve, reject) {
       var uiLocation = new Workspace.UILocation(this.uiSourceCode(), lineNumber, 0);
       this._scriptsPanel.appendUILocationItems(contextMenu, uiLocation);
       var breakpoints = this._breakpointManager.findBreakpoints(this.uiSourceCode(), lineNumber);
       if (!breakpoints.length) {
         // This row doesn't have a breakpoint: We want to show Add Breakpoint and Add and Edit Breakpoint.
         contextMenu.appendItem(
             Common.UIString('Add breakpoint'), this._createNewBreakpoint.bind(this, lineNumber, '', true));
         contextMenu.appendItem(
-            Common.UIString('Add conditional breakpoint…'), this._editBreakpointCondition.bind(this, lineNumber));
+            Common.UIString('Add conditional breakpoint\u2026'), this._editBreakpointCondition.bind(this, lineNumber));
         contextMenu.appendItem(
             Common.UIString('Never pause here'), this._createNewBreakpoint.bind(this, lineNumber, 'false', true));
       } else {
-        var breakpoint = breakpoints[0];
+        var hasOneBreakpoint = breakpoints.length === 1;
+        var removeTitle =
+            hasOneBreakpoint ? Common.UIString('Remove breakpoint') : Common.UIString('Remove all breakpoints in line');
+        contextMenu.appendItem(removeTitle, () => breakpoints.map(breakpoint => breakpoint.remove()));
+        if (hasOneBreakpoint) {
+          contextMenu.appendItem(
+              Common.UIString('Edit breakpoint\u2026'),
+              this._editBreakpointCondition.bind(this, lineNumber, breakpoints[0]));
+        }
 
-        // This row has a breakpoint, we want to show edit and remove breakpoint, and either disable or enable.
-        contextMenu.appendItem(Common.UIString('Remove breakpoint'), breakpoint.remove.bind(breakpoint));
-        contextMenu.appendItem(
-            Common.UIString('Edit breakpoint…'), this._editBreakpointCondition.bind(this, lineNumber, breakpoint));
-        if (breakpoint.enabled())
-          contextMenu.appendItem(Common.UIString('Disable breakpoint'), breakpoint.setEnabled.bind(breakpoint, false));
-        else
-          contextMenu.appendItem(Common.UIString('Enable breakpoint'), breakpoint.setEnabled.bind(breakpoint, true));
+        var hasEnabled = breakpoints.some(breakpoint => breakpoint.enabled());
+        if (hasEnabled) {
+          var title = hasOneBreakpoint ? Common.UIString('Disable breakpoint') :
+                                         Common.UIString('Disable all breakpoints in line');
+          contextMenu.appendItem(title, () => breakpoints.map(breakpoint => breakpoint.setEnabled(false)));
+        }
+
+        var hasDisabled = breakpoints.some(breakpoint => !breakpoint.enabled());
+        if (hasDisabled) {
+          var title = hasOneBreakpoint ? Common.UIString('Enable breakpoint') :
+                                         Common.UIString('Enabled all breakpoints in line');
+          contextMenu.appendItem(title, () => breakpoints.map(breakpoint => breakpoint.setEnabled(true)));
+        }
       }
       resolve();
     }
     return new Promise(populate.bind(this));
   }
 
   /**
    * @override
    * @return {!Promise}
    */
@@ skipping 64 matching lines @@
   _didDivergeFromVM() {
     if (this._supportsEnabledBreakpointsWhileEditing())
       return;
     this._updateDivergedInfobar();
     this._muteBreakpointsWhileEditing();
   }
 
   _muteBreakpointsWhileEditing() {
     if (this._muted)
       return;
-    for (var lineNumber = 0; lineNumber < this._textEditor.linesCount; ++lineNumber) {
-      var breakpointDecoration = this._textEditor.getAttribute(lineNumber, 'breakpoint');
-      if (!breakpointDecoration)
-        continue;
-      this._removeBreakpointDecoration(lineNumber);
-      this._addBreakpointDecoration(
-          lineNumber, breakpointDecoration.columnNumber, breakpointDecoration.condition, breakpointDecoration.enabled,
-          true);
-    }
     this._muted = true;
+    for (var breakpointLocation of this._breakpointManager.breakpointLocationsForUISourceCode(this.uiSourceCode()))

[lushnikov, 2016/11/17 21:33:18]

i don't think it returns provisional breakpoints. Will this work for FS source
codes?

[kozy, 2016/11/18 16:32:40]

It returns.

+      this._updateBreakpointDecorations(breakpointLocation.uiLocation.lineNumber);
   }
 
   _updateDivergedInfobar() {
     if (this.uiSourceCode().project().type() !== Workspace.projectTypes.FileSystem) {
       this._hideDivergedInfobar();
       return;
     }
 
     var scriptFiles = this._scriptFileForTarget.valuesArray();
     var hasDivergedScript = false;
@@ skipping 18 matching lines @@
     for (var i = 0; i < scriptFiles.length; ++i) {
       if (scriptFiles[i].hasDivergedFromVM() || scriptFiles[i].isMergingToVM())
         return;
     }
 
     this._restoreBreakpointsAfterEditing();
   }
 
   _restoreBreakpointsAfterEditing() {
     delete this._muted;
-    var breakpoints = {};
+    /** @type {!Map<number, !{lineNumber: number, columnNumber: number, condition: string, enabled: boolean }>} */
+    var breakpoints = new Map();
     // Save and remove muted breakpoint decorations.
-    for (var lineNumber = 0; lineNumber < this._textEditor.linesCount; ++lineNumber) {

[lushnikov, 2016/11/17 22:14:52]

unfortunately we need to traverse lines, because editor moves breakpoint
decorations as the edits happen

[kozy, 2016/11/18 16:32:40]

Done.

-      var breakpointDecoration = this._textEditor.getAttribute(lineNumber, 'breakpoint');
-      if (breakpointDecoration) {
-        breakpoints[lineNumber] = breakpointDecoration;
-        this._removeBreakpointDecoration(lineNumber);
-      }
+    for (var breakpointLocation of this._breakpointManager.breakpointLocationsForUISourceCode(this.uiSourceCode())) {

[lushnikov, 2016/11/17 21:33:18]

same question here about file system UISourceCodes

[kozy, 2016/11/18 16:32:40]

returns.

+      var uiLocation = breakpointLocation.uiLocation;
+      if (breakpoints.has(uiLocation.lineNumber))
+        continue;
+      var breakpoint = breakpointLocation.breakpoint;
+      breakpoints.set(uiLocation.lineNumber, {
+        lineNumber: uiLocation.lineNumber,
+        columnNumber: uiLocation.columnNumber,
+        condition: breakpoint.condition(),
+        enabled: breakpoint.enabled()
+      });
+      this._updateBreakpointDecorations(uiLocation.lineNumber);
     }
 
     // Remove all breakpoints.
     this._removeAllBreakpoints();
 
     // Restore all breakpoints from saved decorations.
-    for (var lineNumberString in breakpoints) {
-      var lineNumber = parseInt(lineNumberString, 10);
-      if (isNaN(lineNumber))
-        continue;
-      var breakpointDecoration = breakpoints[lineNumberString];
-      this._setBreakpoint(
-          lineNumber, breakpointDecoration.columnNumber, breakpointDecoration.condition, breakpointDecoration.enabled);
-    }
+    for (var breakpoint of breakpoints.valuesArray())
+      this._setBreakpoint(breakpoint.lineNumber, breakpoint.columnNumber, breakpoint.condition, breakpoint.enabled);
   }
 
   _removeAllBreakpoints() {
     var breakpoints = this._breakpointManager.breakpointsForUISourceCode(this.uiSourceCode());
     for (var i = 0; i < breakpoints.length; ++i)
       breakpoints[i].remove();
   }
 
   /**
    * @param {string}  tokenType
@@ skipping 114 matching lines @@
   _onHidePopover() {
     if (!this._popoverAnchorBox)
       return;
     if (this._popoverAnchorBox._highlightDescriptor)
       this.textEditor.removeHighlight(this._popoverAnchorBox._highlightDescriptor);
     delete this._popoverAnchorBox;
   }
 
   /**
    * @param {number} lineNumber
-   * @param {number} columnNumber
-   * @param {string} condition
-   * @param {boolean} enabled
-   * @param {boolean} mutedWhileEditing
    */
-  _addBreakpointDecoration(lineNumber, columnNumber, condition, enabled, mutedWhileEditing) {
-    var breakpoint = {condition: condition, enabled: enabled, columnNumber: columnNumber};
+  _updateBreakpointDecorations(lineNumber) {
+    if (!this._scheduledBreakpointDecorationUpdates)
+      this._scheduledBreakpointDecorationUpdates = new Set();
+    if (!this._scheduledBreakpointDecorationUpdates.size)
+      setImmediate(() => this.textEditor.operation(update.bind(this)));
+    this._scheduledBreakpointDecorationUpdates.add(lineNumber);
 
-    this.textEditor.setAttribute(lineNumber, 'breakpoint', breakpoint);
+    /**
+     * @this {Sources.JavaScriptSourceFrame}
+     */
+    function update() {
+      for (var lineNumber of this._scheduledBreakpointDecorationUpdates) {
+        var breakpointLocations = this._breakpointManager.breakpointLocationsForLine(this.uiSourceCode(), lineNumber);
+        var breakpoints = breakpointLocations.map(breakpointLocation => breakpointLocation.breakpoint);
 
-    var disabled = !enabled || mutedWhileEditing;
-    this.textEditor.addBreakpoint(lineNumber, disabled, !!condition);
+        var hasAny = !!breakpoints.length;
+        var hasEnabled = false;
+        var hasConditional = false;
+        var hasEnabledConditional = false;
+        for (var breakpoint of breakpoints) {

[lushnikov, 2016/11/17 22:14:52]

breakpoints.sort((b1, b2) => {
  if (!!b1.condition() !== !!b2.condition())
    return b1.condition() ? -1 : 1;
  if (b1.enabled() !== b2.enabled())
    return b1.enabled() ? -1 : 1;
  return 0;
});

var leadBreakpoint = breakpoints[0];
this.textEditor.toggleLineClas(lineNumber, 'cm-breakpoint', true);
....

[kozy, 2016/11/18 16:32:40]

Done.

+          if (breakpoint.enabled())
+            hasEnabled = true;
+          if (!!breakpoint.condition()) {
+            hasConditional = true;
+            if (breakpoint.enabled())
+              hasEnabledConditional = true;
+          }
+        }
+        this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint', hasAny);
+        this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint-disabled', hasAny && (!hasEnabled && !this._muted));

[lushnikov, 2016/11/17 21:33:18]

what is this._muted flag? do we really need it? 

[kozy, 2016/11/18 16:32:40]

We can remove it later with better understanding why we need separate handling
for snippets.

+        this.textEditor.toggleLineClass(
+            lineNumber, 'cm-breakpoint-conditional',
+            hasEnabledConditional || (hasAny && !hasEnabled && hasConditional));
+        this._breakpointDecorationsUpdatedForTest(lineNumber, !hasEnabled, !hasAny);
+      }
+      delete this._scheduledBreakpointDecorationUpdates;
+    }
   }
 
-  _removeBreakpointDecoration(lineNumber) {
-    this.textEditor.removeAttribute(lineNumber, 'breakpoint');
-    this.textEditor.removeBreakpoint(lineNumber);
+  _breakpointDecorationsUpdatedForTest(lineNumber, disabled, removed) {
   }
 
   _onKeyDown(event) {
     if (event.key === 'Escape') {
       if (this._popoverHelper.isPopoverVisible()) {
         this._popoverHelper.hidePopover();
         event.consume();
       }
     }
   }
@@ skipping 254 matching lines @@
   }
 
   _breakpointAdded(event) {
     var uiLocation = /** @type {!Workspace.UILocation} */ (event.data.uiLocation);
     if (uiLocation.uiSourceCode !== this.uiSourceCode())
       return;
     if (this._shouldIgnoreExternalBreakpointEvents())
       return;
 
     var breakpoint = /** @type {!Bindings.BreakpointManager.Breakpoint} */ (event.data.breakpoint);
-    if (this.loaded) {
-      this._addBreakpointDecoration(
-          uiLocation.lineNumber, uiLocation.columnNumber, breakpoint.condition(), breakpoint.enabled(), false);
-    }
+    if (this.loaded)
+      this._updateBreakpointDecorations(uiLocation.lineNumber);
   }
 
   _breakpointRemoved(event) {
     var uiLocation = /** @type {!Workspace.UILocation} */ (event.data.uiLocation);
     if (uiLocation.uiSourceCode !== this.uiSourceCode())
       return;
     if (this._shouldIgnoreExternalBreakpointEvents())
       return;
 
-    var remainingBreakpoints = this._breakpointManager.findBreakpoints(this.uiSourceCode(), uiLocation.lineNumber);
+    var remainingBreakpoints =
+        this._breakpointManager.breakpointLocationsForLine(this.uiSourceCode(), uiLocation.lineNumber);
     if (!remainingBreakpoints.length && this.loaded)
-      this._removeBreakpointDecoration(uiLocation.lineNumber);
+      this._updateBreakpointDecorations(uiLocation.lineNumber);
   }
 
   /**
    * @param {!Common.Event} event
    */
   _onSourceMappingChanged(event) {
     var data = /** @type {{target: !SDK.Target}} */ (event.data);
     this._updateScriptFile(data.target);
     this._updateLinesWithoutMappingHighlight();
   }
@@ skipping 241 matching lines @@
         Workspace.UISourceCode.Events.WorkingCopyChanged, this._workingCopyChanged, this);
     this.uiSourceCode().removeEventListener(
         Workspace.UISourceCode.Events.WorkingCopyCommitted, this._workingCopyCommitted, this);
     this.uiSourceCode().removeEventListener(
         Workspace.UISourceCode.Events.TitleChanged, this._showBlackboxInfobarIfNeeded, this);
     Common.moduleSetting('skipStackFramesPattern').removeChangeListener(this._showBlackboxInfobarIfNeeded, this);
     Common.moduleSetting('skipContentScripts').removeChangeListener(this._showBlackboxInfobarIfNeeded, this);
     super.dispose();
   }
 };