[DevTools] make breakpoints better

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 36 matching lines @@
         this._scriptsPanel.element, this._getPopoverAnchor.bind(this), this._resolveObjectForPopover.bind(this),
         this._onHidePopover.bind(this), true);
     this._popoverHelper.setTimeout(250, 250);
 
     this.textEditor.element.addEventListener('keydown', this._onKeyDown.bind(this), true);
 
     this.textEditor.addEventListener(
         WebInspector.SourcesTextEditor.Events.GutterClick, this._handleGutterClick.bind(this), this);
 
     this._breakpointManager.addEventListener(
-        WebInspector.BreakpointManager.Events.BreakpointAdded, this._breakpointAdded, this);
+        WebInspector.BreakpointManager.Events.BreakpointAdded, this._breakpointChanged, this);
     this._breakpointManager.addEventListener(
-        WebInspector.BreakpointManager.Events.BreakpointRemoved, this._breakpointRemoved, this);
+        WebInspector.BreakpointManager.Events.BreakpointRemoved, this._breakpointChanged, this);
 
     this.uiSourceCode().addEventListener(
         WebInspector.UISourceCode.Events.SourceMappingChanged, this._onSourceMappingChanged, this);
     this.uiSourceCode().addEventListener(
         WebInspector.UISourceCode.Events.WorkingCopyChanged, this._workingCopyChanged, this);
     this.uiSourceCode().addEventListener(
         WebInspector.UISourceCode.Events.WorkingCopyCommitted, this._workingCopyCommitted, this);
     this.uiSourceCode().addEventListener(
         WebInspector.UISourceCode.Events.TitleChanged, this._showBlackboxInfobarIfNeeded, this);
 
+    /** @type {!Set<number>} */
+    this._scheduledBreakpointDecorationsUpdates = new Set();
+    this._inlineBreakpointSymbol = Symbol('inline-breakpoint');
+
     /** @type {!Map.<!WebInspector.Target, !WebInspector.ResourceScriptFile>}*/
     this._scriptFileForTarget = new Map();
     var targets = WebInspector.targetManager.targets();
     for (var i = 0; i < targets.length; ++i) {
       var scriptFile = WebInspector.debuggerWorkspaceBinding.scriptFile(uiSourceCode, targets[i]);
       if (scriptFile)
         this._updateScriptFile(targets[i]);
     }
 
     if (this._scriptFileForTarget.size || uiSourceCode.extension() === 'js' ||
@@ skipping 179 matching lines @@
       if (!breakpoints.length) {
         // This row doesn't have a breakpoint: We want to show Add Breakpoint and Add and Edit Breakpoint.
         contextMenu.appendItem(
             WebInspector.UIString('Add breakpoint'), this._createNewBreakpoint.bind(this, lineNumber, '', true));
         contextMenu.appendItem(
             WebInspector.UIString('Add conditional breakpoint…'), this._editBreakpointCondition.bind(this, lineNumber));
         contextMenu.appendItem(
             WebInspector.UIString('Never pause here'),
             this._createNewBreakpoint.bind(this, lineNumber, 'false', true));
       } else {
-        var breakpoint = breakpoints[0];
+        if (breakpoints.length === 1) {

[lushnikov, 2016/11/11 19:56:00]

nit: can we make it non-nested?

+          var breakpoint = breakpoints[0];
+          // This row has a breakpoint, we want to show edit and remove breakpoint, and either disable or enable.
+          contextMenu.appendItem(WebInspector.UIString('Remove breakpoint'), breakpoint.remove.bind(breakpoint));
+          contextMenu.appendItem(
+              WebInspector.UIString('Edit breakpoint…'),

[lushnikov, 2016/11/11 19:56:00]

nit: use \u.. for unicode

+              this._editBreakpointCondition.bind(this, lineNumber, breakpoint));
+          if (breakpoint.enabled())
+            contextMenu.appendItem(
+                WebInspector.UIString('Disable breakpoint'), breakpoint.setEnabled.bind(breakpoint, false));
+          else
+            contextMenu.appendItem(
+                WebInspector.UIString('Enable breakpoint'), breakpoint.setEnabled.bind(breakpoint, true));
+        } else {
+          var hasEnabled = breakpoints.some(breakpoint => breakpoint.enabled());
+          if (hasEnabled) {
+            contextMenu.appendItem(
+                WebInspector.UIString('Disable breakpoints in line'),
+                () => breakpoints.map(breakpoint => breakpoint.setEnabled(false)));
+          }
+          var hasDisabled = breakpoints.some(breakpoint => !breakpoint.enabled());
+          if (hasDisabled) {
+            contextMenu.appendItem(
+                WebInspector.UIString('Enable breakpoints in line'),
+                () => breakpoints.map(breakpoint => breakpoint.setEnabled(true)));
+          }
 
-        // This row has a breakpoint, we want to show edit and remove breakpoint, and either disable or enable.
-        contextMenu.appendItem(WebInspector.UIString('Remove breakpoint'), breakpoint.remove.bind(breakpoint));
-        contextMenu.appendItem(
-            WebInspector.UIString('Edit breakpoint…'),
-            this._editBreakpointCondition.bind(this, lineNumber, breakpoint));
-        if (breakpoint.enabled())
-          contextMenu.appendItem(
-              WebInspector.UIString('Disable breakpoint'), breakpoint.setEnabled.bind(breakpoint, false));
-        else
-          contextMenu.appendItem(
-              WebInspector.UIString('Enable breakpoint'), breakpoint.setEnabled.bind(breakpoint, true));
+          var breakpoint = breakpoints[0];
+
+        }
       }
       resolve();
     }
     return new Promise(populate.bind(this));
   }
 
   /**
    * @override
    * @return {!Promise}
    */
@@ skipping 29 matching lines @@
           contextMenu.appendSeparator();
         }
       }
     }
 
     return super.populateTextAreaContextMenu(contextMenu, lineNumber, columnNumber)
         .then(populateSourceMapMembers.bind(this));
   }
 
   _workingCopyChanged(event) {
-    if (this._supportsEnabledBreakpointsWhileEditing() || this._scriptFileForTarget.size)

[lushnikov, 2016/11/11 19:56:00]

where did this go?

-      return;
-
     if (this.uiSourceCode().isDirty())
       this._muteBreakpointsWhileEditing();
     else
       this._restoreBreakpointsAfterEditing();
   }
 
   _workingCopyCommitted(event) {
     this._scriptsPanel.updateLastModificationTime();
-    if (this._supportsEnabledBreakpointsWhileEditing())
-      return;
-
     if (!this._scriptFileForTarget.size)
       this._restoreBreakpointsAfterEditing();
   }
 
   _didMergeToVM() {
-    if (this._supportsEnabledBreakpointsWhileEditing())
-      return;
     this._updateDivergedInfobar();
     this._restoreBreakpointsIfConsistentScripts();
   }
 
   _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);
-    }
+    for (var lineNumber = 0; lineNumber < this._textEditor.linesCount; ++lineNumber)

[lushnikov, 2016/11/11 19:56:00]

that's unfortunate. Maybe it's time to teach editor to return its decorations?

+      this._scheduleBreakpointDecorationsUpdate(lineNumber);
     this._muted = true;
   }
 
   _updateDivergedInfobar() {
     if (this.uiSourceCode().project().type() !== WebInspector.projectTypes.FileSystem) {
       this._hideDivergedInfobar();
       return;
     }
 
     var scriptFiles = this._scriptFileForTarget.valuesArray();
     var hasDivergedScript = false;
     for (var i = 0; i < scriptFiles.length; ++i)
       hasDivergedScript = hasDivergedScript || scriptFiles[i].hasDivergedFromVM();
 
     if (this._divergedInfobar) {
       if (!hasDivergedScript)
         this._hideDivergedInfobar();
     } else {
       if (hasDivergedScript && !this.uiSourceCode().isDirty())
         this._showDivergedInfobar();
     }
   }
 
-  _supportsEnabledBreakpointsWhileEditing() {
-    return this.uiSourceCode().project().type() === WebInspector.projectTypes.Snippets;
-  }
-
   _restoreBreakpointsIfConsistentScripts() {
     var scriptFiles = this._scriptFileForTarget.valuesArray();
     for (var i = 0; i < scriptFiles.length; ++i)
       if (scriptFiles[i].hasDivergedFromVM() || scriptFiles[i].isMergingToVM())
         return;
 
     this._restoreBreakpointsAfterEditing();
   }
 
   _restoreBreakpointsAfterEditing() {
     delete this._muted;
-    var breakpoints = {};
-    // Save and remove muted breakpoint decorations.
-    for (var lineNumber = 0; lineNumber < this._textEditor.linesCount; ++lineNumber) {
-      var breakpointDecoration = this._textEditor.getAttribute(lineNumber, 'breakpoint');
-      if (breakpointDecoration) {
-        breakpoints[lineNumber] = breakpointDecoration;
-        this._removeBreakpointDecoration(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);
-    }
+    var allBreakpoints = this._breakpointManager.breakpointsForUISourceCode(this.uiSourceCode());
+    for (var breakpoint of allBreakpoints)
+      breakpoint.remove();
+    for (var breakpoint of allBreakpoints)
+      this._createNewBreakpoint(breakpoint.lineNumber(), 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 112 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};
-
-    this.textEditor.setAttribute(lineNumber, 'breakpoint', breakpoint);
-
-    var disabled = !enabled || mutedWhileEditing;
-    this.textEditor.addBreakpoint(lineNumber, disabled, !!condition);
-  }
-
-  _removeBreakpointDecoration(lineNumber) {
-    this.textEditor.removeAttribute(lineNumber, 'breakpoint');
-    this.textEditor.removeBreakpoint(lineNumber);
-  }
-
   _onKeyDown(event) {
     if (event.key === 'Escape') {
       if (this._popoverHelper.isPopoverVisible()) {
         this._popoverHelper.hidePopover();
         event.consume();
       }
     }
   }
 
   /**
    * @param {number} lineNumber
    * @param {!WebInspector.BreakpointManager.Breakpoint=} breakpoint
    */
   _editBreakpointCondition(lineNumber, breakpoint) {
     this._conditionElement = this._createConditionElement(lineNumber);
     this.textEditor.addDecoration(this._conditionElement, lineNumber);
 
     /**
      * @this {WebInspector.JavaScriptSourceFrame}
      */
     function finishEditing(committed, element, newText) {
       this.textEditor.removeDecoration(this._conditionElement, lineNumber);
       delete this._conditionEditorElement;
       delete this._conditionElement;
       if (!committed)
         return;
 
-      if (breakpoint)
+      if (breakpoint) {
         breakpoint.setCondition(newText);
-      else
+        breakpoint.setEnabled(true);
+      } else
         this._createNewBreakpoint(lineNumber, newText, true);
     }
 
     var config = new WebInspector.InplaceEditor.Config(finishEditing.bind(this, true), finishEditing.bind(this, false));
     WebInspector.InplaceEditor.startEditing(this._conditionEditorElement, config);
     this._conditionEditorElement.value = breakpoint ? breakpoint.condition() : '';
     this._conditionEditorElement.select();
   }
 
   _createConditionElement(lineNumber) {
@@ skipping 197 matching lines @@
     this._clearValueWidgetsTimer = setTimeout(this._clearValueWidgets.bind(this), 1000);
   }
 
   _clearValueWidgets() {
     delete this._clearValueWidgetsTimer;
     for (var line of this._valueWidgets.keys())
       this.textEditor.removeDecoration(this._valueWidgets.get(line), line);
     this._valueWidgets.clear();
   }
 
-  /**
-   * @return {boolean}
-   */
-  _shouldIgnoreExternalBreakpointEvents() {
-    if (this._supportsEnabledBreakpointsWhileEditing())
-      return false;
-    if (this._muted)
-      return true;
-    var scriptFiles = this._scriptFileForTarget.valuesArray();
-    for (var i = 0; i < scriptFiles.length; ++i) {
-      if (scriptFiles[i].isDivergingFromVM() || scriptFiles[i].isMergingToVM())
-        return true;
-    }
-    return false;
-  }
-
-  _breakpointAdded(event) {
+  _breakpointChanged(event) {
     var uiLocation = /** @type {!WebInspector.UILocation} */ (event.data.uiLocation);
     if (uiLocation.uiSourceCode !== this.uiSourceCode())
       return;
-    if (this._shouldIgnoreExternalBreakpointEvents())
-      return;
-
-    var breakpoint = /** @type {!WebInspector.BreakpointManager.Breakpoint} */ (event.data.breakpoint);
-    if (this.loaded)
-      this._addBreakpointDecoration(
-          uiLocation.lineNumber, uiLocation.columnNumber, breakpoint.condition(), breakpoint.enabled(), false);
+    this._scheduleBreakpointDecorationsUpdate(uiLocation.lineNumber);
   }
 
-  _breakpointRemoved(event) {
-    var uiLocation = /** @type {!WebInspector.UILocation} */ (event.data.uiLocation);
-    if (uiLocation.uiSourceCode !== this.uiSourceCode())
+  _scheduleBreakpointDecorationsUpdate(lineNumber) {
+    if (this._scheduledBreakpointDecorationsUpdates.has(lineNumber))
       return;
-    if (this._shouldIgnoreExternalBreakpointEvents())
-      return;
+    if (!this._scheduledBreakpointDecorationsUpdates.size)
+      setImmediate(() => this.textEditor.operation(update.bind(this)));
+    this._scheduledBreakpointDecorationsUpdates.add(lineNumber);
 
-    var remainingBreakpoints = this._breakpointManager.findBreakpoints(this.uiSourceCode(), uiLocation.lineNumber);
-    if (!remainingBreakpoints.length && this.loaded)
-      this._removeBreakpointDecoration(uiLocation.lineNumber);
+    /**
+     * @this {!WebInspector.JavaScriptSourceFrame}
+     */
+    function update() {
+      for (var lineNumber of this._scheduledBreakpointDecorationsUpdates)
+        this._updateBreakpointDecorations(lineNumber);
+      this._scheduledBreakpointDecorationsUpdates.clear();
+    }
   }
 
   /**
+   * @param {number} lineNumber
+   */
+  _updateBreakpointDecorations(lineNumber) {
+    if (lineNumber >= this.textEditor.linesCount)
+      return;
+    var lineLength = this.textEditor.line(lineNumber).length;
+    var bookmarks = this.textEditor.bookmarks(new WebInspector.TextRange(lineNumber, 0, lineNumber, lineLength), this._inlineBreakpointSymbol);
+    for (var bookmark of bookmarks)
+      bookmark.clear();
+
+    var breakpoints = this._breakpointManager.findBreakpoints(this.uiSourceCode(), lineNumber);
+    breakpoints.sort((breakpoint1, breakpoint2) => breakpoint1.columnNumber() - breakpoint2.columnNumber());

[lushnikov, 2016/11/11 19:56:00]

why do you need to sort them?

+    var hasEnabled = breakpoints.some(breakpoint => breakpoint.enabled());
+    var hasConditional = breakpoints.some(breakpoint => !!breakpoint.condition());
+    var hasEnabledConditional = breakpoints.some(breakpoint => !!breakpoint.condition() && breakpoint.enabled());
+
+    if (!breakpoints.length) {
+      this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint', false);
+      return;
+    }
+    this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint', true);
+    this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint-conditional', hasEnabledConditional || (!hasEnabled && hasConditional));
+    this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint-disabled', !hasEnabled || this._muted);
+    if (breakpoints.length <= 1 || this._muted)
+      return;
+    for (var i = 0; i < breakpoints.length; ++i) {
+      let breakpoint = breakpoints[i];
+      var inlineBreakpoint = WebInspector.InlineBreakpoint.create();
+      inlineBreakpoint.setEnabled(breakpoint.enabled() || this._muted);
+      inlineBreakpoint.setConditional(!!breakpoint.condition());
+      inlineBreakpoint.addEventListener('click', () => breakpoint.setEnabled(!breakpoint.enabled()), true);
+      inlineBreakpoint.addEventListener('contextmenu', this._populateInlineBreakpointMenu.bind(this, breakpoint), true);
+      this.textEditor.addBookmark(breakpoint.lineNumber(), breakpoint.columnNumber(), inlineBreakpoint, this._inlineBreakpointSymbol);
+    }
+  }
+
+  /**
+   * @param {!WebInspector.BreakpointManager.Breakpoint} breakpoint
+   * @param {!Event} event
+   */
+  _populateInlineBreakpointMenu(breakpoint, event) {
+    event.consume(true);
+    var contextMenu = new WebInspector.ContextMenu(event);
+    if (!breakpoint.enabled()) {
+      contextMenu.appendItem(WebInspector.UIString('Never pause here'), () => {
+        breakpoint.setCondition('false'); breakpoint.setEnabled(true);
+      });
+    }
+    var conditionalBreakpointTitle = breakpoint.enabled() ? WebInspector.UIString('Edit breakpoint…')
+        : WebInspector.UIString('Add conditional breakpoint…');
+    contextMenu.appendItem(
+        conditionalBreakpointTitle,
+        this._editBreakpointCondition.bind(this, breakpoint.lineNumber(), breakpoint));
+    contextMenu.show();
+  }
+
+  /**
    * @param {!WebInspector.Event} event
    */
   _onSourceMappingChanged(event) {
     var data = /** @type {{target: !WebInspector.Target}} */ (event.data);
     this._updateScriptFile(data.target);
     this._updateLinesWithoutMappingHighlight();
   }
 
   _updateLinesWithoutMappingHighlight() {
     var linesCount = this.textEditor.linesCount;
@@ skipping 50 matching lines @@
   /**
    * @override
    */
   onTextEditorContentSet() {
     super.onTextEditorContentSet();
     if (this._executionLocation)
       this.setExecutionLocation(this._executionLocation);
 
     var breakpointLocations = this._breakpointManager.breakpointLocationsForUISourceCode(this.uiSourceCode());
     for (var i = 0; i < breakpointLocations.length; ++i)
-      this._breakpointAdded({data: breakpointLocations[i]});
+      this._breakpointChanged({data: breakpointLocations[i]});
 
     var scriptFiles = this._scriptFileForTarget.valuesArray();
     for (var i = 0; i < scriptFiles.length; ++i)
       scriptFiles[i].checkMapping();
 
     this._updateLinesWithoutMappingHighlight();
     this._detectMinified();
   }
 
   _detectMinified() {
@@ skipping 52 matching lines @@
     eventObject.consume(true);
   }
 
   /**
    * @param {number} lineNumber
    * @param {boolean} onlyDisable
    */
   _toggleBreakpoint(lineNumber, onlyDisable) {
     var breakpoints = this._breakpointManager.findBreakpoints(this.uiSourceCode(), lineNumber);
     if (breakpoints.length) {
-      if (onlyDisable)
-        breakpoints[0].setEnabled(!breakpoints[0].enabled());
-      else
-        breakpoints[0].remove();
-    } else
+      for (var breakpoint of breakpoints) {
+        if (onlyDisable)
+          breakpoint.setEnabled(false);
+        else
+          breakpoint.remove();
+      }
+    } else {
       this._createNewBreakpoint(lineNumber, '', true);
+    }
   }
 
   /**
    * @param {number} lineNumber
    * @param {string} condition
    * @param {boolean} enabled
    */
   _createNewBreakpoint(lineNumber, condition, enabled) {
     findPossibleBreakpoints.call(this, lineNumber)
       .then(checkNextLineIfNeeded.bind(this, lineNumber, 4))
       .then(setBreakpoint.bind(this));
 
     /**
      * @this {!WebInspector.JavaScriptSourceFrame}
      * @param {number} lineNumber
      * @return {!Promise<?Array<!WebInspector.UILocation>>}
      */
     function findPossibleBreakpoints(lineNumber) {
       const maxLengthToCheck = 1024;
       if (lineNumber >= this._textEditor.linesCount)
         return Promise.resolve(/** @type {?Array<!WebInspector.UILocation>} */([]));
       if (this._textEditor.line(lineNumber).length >= maxLengthToCheck)
         return Promise.resolve(/** @type {?Array<!WebInspector.UILocation>} */([]));
       return this._breakpointManager.possibleBreakpoints(this.uiSourceCode(), new WebInspector.TextRange(lineNumber, 0, lineNumber + 1, 0))
           .then(locations => locations.length ? locations : null);

[lushnikov, 2016/11/11 19:56:00]

while we're here - we probably can just drop this line to return
!Promise<!Array<..>>

     }
 
     /**
      * @this {!WebInspector.JavaScriptSourceFrame}
      * @param {number} currentLineNumber
      * @param {number} linesToCheck
      * @param {?Array<!WebInspector.UILocation>} locations
      * @return {!Promise<?Array<!WebInspector.UILocation>>}
      */
     function checkNextLineIfNeeded(currentLineNumber, linesToCheck, locations) {
       if (locations || linesToCheck <= 0)
         return Promise.resolve(locations);
       return findPossibleBreakpoints.call(this, currentLineNumber + 1)
           .then(checkNextLineIfNeeded.bind(this, currentLineNumber + 1, linesToCheck - 1));
     }
 
     /**
      * @this {!WebInspector.JavaScriptSourceFrame}
      * @param {?Array<!WebInspector.UILocation>} locations
      */
     function setBreakpoint(locations) {
-      if (!locations || !locations.length)
+      if (!locations || !locations.length) {
         this._setBreakpoint(lineNumber, 0, condition, enabled);
-      else
-        this._setBreakpoint(locations[0].lineNumber, locations[0].columnNumber, condition, enabled);
+        WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action.ScriptsBreakpointSet);
+        return;
+      }
+      for (var i = 0; i < locations.length; ++i)
+        this._setBreakpoint(locations[i].lineNumber, locations[i].columnNumber, condition, enabled && i === 0);
       WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action.ScriptsBreakpointSet);
     }
   }
 
   toggleBreakpointOnCurrentLine() {
     if (this._muted)
       return;
 
     var selection = this.textEditor.selection();
     if (!selection)
@@ skipping 22 matching lines @@
    * @param {boolean} enabled
    */
   _breakpointWasSetForTest(lineNumber, columnNumber, condition, enabled) {
   }
 
   /**
    * @override
    */
   dispose() {
     this._breakpointManager.removeEventListener(
-        WebInspector.BreakpointManager.Events.BreakpointAdded, this._breakpointAdded, this);
+        WebInspector.BreakpointManager.Events.BreakpointAdded, this._breakpointChanged, this);
     this._breakpointManager.removeEventListener(
-        WebInspector.BreakpointManager.Events.BreakpointRemoved, this._breakpointRemoved, this);
+        WebInspector.BreakpointManager.Events.BreakpointRemoved, this._breakpointChanged, this);
     this.uiSourceCode().removeEventListener(
         WebInspector.UISourceCode.Events.SourceMappingChanged, this._onSourceMappingChanged, this);
     this.uiSourceCode().removeEventListener(
         WebInspector.UISourceCode.Events.WorkingCopyChanged, this._workingCopyChanged, this);
     this.uiSourceCode().removeEventListener(
         WebInspector.UISourceCode.Events.WorkingCopyCommitted, this._workingCopyCommitted, this);
     this.uiSourceCode().removeEventListener(
         WebInspector.UISourceCode.Events.TitleChanged, this._showBlackboxInfobarIfNeeded, this);
     WebInspector.moduleSetting('skipStackFramesPattern').removeChangeListener(this._showBlackboxInfobarIfNeeded, this);
     WebInspector.moduleSetting('skipContentScripts').removeChangeListener(this._showBlackboxInfobarIfNeeded, this);
     super.dispose();
   }
 };