[DevTools] Added inline breakpoints

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 51 matching lines @@
         Workspace.UISourceCode.Events.SourceMappingChanged, this._onSourceMappingChanged, this);
     this.uiSourceCode().addEventListener(
         Workspace.UISourceCode.Events.WorkingCopyChanged, this._workingCopyChanged, this);
     this.uiSourceCode().addEventListener(
         Workspace.UISourceCode.Events.WorkingCopyCommitted, this._workingCopyCommitted, this);
     this.uiSourceCode().addEventListener(
         Workspace.UISourceCode.Events.TitleChanged, this._showBlackboxInfobarIfNeeded, this);
 
     /** @type {!Set<!Sources.JavaScriptSourceFrame.BreakpointDecoration>} */
     this._breakpointDecorations = new Set();
+    this._waitForInlineDecorationsForTest = 0;
 
     /** @type {!Map.<!SDK.Target, !Bindings.ResourceScriptFile>}*/
     this._scriptFileForTarget = new Map();
     var targets = SDK.targetManager.targets();
     for (var i = 0; i < targets.length; ++i) {
       var scriptFile = Bindings.debuggerWorkspaceBinding.scriptFile(uiSourceCode, targets[i]);
       if (scriptFile)
         this._updateScriptFile(targets[i]);
     }
 
@@ skipping 122 matching lines @@
    * @override
    * @return {!Promise}
    */
   populateLineGutterContextMenu(contextMenu, lineNumber) {
     /**
      * @this {Sources.JavaScriptSourceFrame}
      */
     function populate(resolve, reject) {
       var uiLocation = new Workspace.UILocation(this.uiSourceCode(), lineNumber, 0);
       this._scriptsPanel.appendUILocationItems(contextMenu, uiLocation);
-      var breakpoints = this._lineBreakpointDecorations(lineNumber).map(decoration => decoration.breakpoint);
+      var breakpoints = this._lineBreakpointDecorations(lineNumber)
+                            .map(decoration => decoration.breakpoint)
+                            .filter(breakpoint => !!breakpoint);
       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\u2026'), this._editBreakpointCondition.bind(this, lineNumber));
+            Common.UIString('Add conditional breakpoint\u2026'),
+            this._editBreakpointCondition.bind(this, lineNumber, null, null));
         contextMenu.appendItem(
             Common.UIString('Never pause here'), this._createNewBreakpoint.bind(this, lineNumber, 'false', true));
       } else {
         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._editBreakpointCondition.bind(this, lineNumber, breakpoints[0], null));
         }
         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') :
@@ skipping 98 matching lines @@
         return;
     }
 
     this._restoreBreakpointsAfterEditing();
   }
 
   _restoreBreakpointsAfterEditing() {
     delete this._muted;
     var decorations = Array.from(this._breakpointDecorations);
     this._breakpointDecorations.clear();
+    this._textEditor.operation(() => decorations.map(decoration => decoration.hide()));
     for (var decoration of decorations) {
+      if (!decoration.breakpoint)
+        continue;
       decoration.breakpoint.remove();
       var location = decoration.handle.resolve();
       if (location)
         this._setBreakpoint(location.lineNumber, location.columnNumber, decoration.condition, decoration.enabled);
     }
   }
 
   /**
    * @param {string}  tokenType
    * @return {boolean}
@@ skipping 122 matching lines @@
     if (event.key === 'Escape') {
       if (this._popoverHelper.isPopoverVisible()) {
         this._popoverHelper.hidePopover();
         event.consume();
       }
     }
   }
 
   /**
    * @param {number} lineNumber
-   * @param {!Bindings.BreakpointManager.Breakpoint=} breakpoint
+   * @param {?Bindings.BreakpointManager.Breakpoint} breakpoint
+   * @param {?{lineNumber: number, columnNumber: number}} location
    */
-  _editBreakpointCondition(lineNumber, breakpoint) {
+  _editBreakpointCondition(lineNumber, breakpoint, location) {
     this._conditionElement = this._createConditionElement(lineNumber);
     this.textEditor.addDecoration(this._conditionElement, lineNumber);
 
     /**
      * @this {Sources.JavaScriptSourceFrame}
      */
     function finishEditing(committed, element, newText) {
       this.textEditor.removeDecoration(this._conditionElement, lineNumber);
       delete this._conditionEditorElement;
       delete this._conditionElement;
       if (!committed)
         return;
 
       if (breakpoint)
         breakpoint.setCondition(newText);
+      else if (location)
+        this._setBreakpoint(location.lineNumber, location.columnNumber, newText, true);
       else
         this._createNewBreakpoint(lineNumber, newText, true);
     }
 
     var config = new UI.InplaceEditor.Config(finishEditing.bind(this, true), finishEditing.bind(this, false));
     UI.InplaceEditor.startEditing(this._conditionEditorElement, config);
     this._conditionEditorElement.value = breakpoint ? breakpoint.condition() : '';
     this._conditionEditorElement.select();
   }
 
@@ skipping 209 matching lines @@
   /**
    * @param {number} lineNumber
    * @return {!Array<!Sources.JavaScriptSourceFrame.BreakpointDecoration>}
    */
   _lineBreakpointDecorations(lineNumber) {
     return Array.from(this._breakpointDecorations)
         .filter(decoration => (decoration.handle.resolve() || {}).lineNumber === lineNumber);
   }
 
   /**
+   * @param {number} lineNumber
+   * @param {number} columnNumber
+   * @return {?Sources.JavaScriptSourceFrame.BreakpointDecoration}
+   */
+  _breakpointDecoration(lineNumber, columnNumber) {
+    for (var decoration of this._breakpointDecorations) {
+      var location = decoration.handle.resolve();
+      if (!location)
+        continue;
+      if (location.lineNumber === lineNumber && location.columnNumber === columnNumber)
+        return decoration;
+    }
+    return null;
+  }
+
+  /**
    * @param {!Sources.JavaScriptSourceFrame.BreakpointDecoration} decoration
    */
   _updateBreakpointDecoration(decoration) {
     if (!this._scheduledBreakpointDecorationUpdates) {
       /** @type {!Set<!Sources.JavaScriptSourceFrame.BreakpointDecoration>} */
       this._scheduledBreakpointDecorationUpdates = new Set();
       setImmediate(() => this.textEditor.operation(update.bind(this)));
     }
     this._scheduledBreakpointDecorationUpdates.add(decoration);
 
     /**
      * @this {Sources.JavaScriptSourceFrame}
      */
     function update() {
       var lineNumbers = new Set();
       for (var decoration of this._scheduledBreakpointDecorationUpdates) {
         var location = decoration.handle.resolve();
         if (!location)
           continue;
         lineNumbers.add(location.lineNumber);
       }
+      delete this._scheduledBreakpointDecorationUpdates;
       for (var lineNumber of lineNumbers) {
         this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint', false);
         this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint-disabled', false);
         this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint-conditional', false);
+
         var decorations = this._lineBreakpointDecorations(lineNumber);
+        var actualBookmarks =
+            new Set(decorations.map(decoration => decoration.bookmark).filter(bookmark => !!bookmark));
+        var lineEnd = this._textEditor.line(lineNumber).length;
+        var bookmarks = this._textEditor.bookmarks(
+            new Common.TextRange(lineNumber, 0, lineEnd, 0),
+            Sources.JavaScriptSourceFrame.BreakpointDecoration.bookmarkSymbol);
+        for (var bookmark of bookmarks) {
+          if (!actualBookmarks.has(bookmark))
+            bookmark.clear();
+        }
         if (!decorations.length)
           continue;
         decorations.sort(Sources.JavaScriptSourceFrame.BreakpointDecoration.mostSpecificFirst);
         this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint', true);
         this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint-disabled', !decorations[0].enabled || this._muted);
         this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint-conditional', !!decorations[0].condition);
+        if (decorations.length > 1) {

[lushnikov, 2016/11/29 03:17:11]

let's hide all decorations when we're editing file

[kozy, 2016/11/29 19:53:25]

Done.

+          for (var decoration of decorations)
+            decoration.update();
+        } else {
+          decorations[0].hide();
+        }
       }
-      delete this._scheduledBreakpointDecorationUpdates;
       this._breakpointDecorationsUpdatedForTest();
     }
   }
 
   _breakpointDecorationsUpdatedForTest() {
   }
 
   /**
+   * @param {!Sources.JavaScriptSourceFrame.BreakpointDecoration} decoration
+   * @param {!Event} event
+   */
+  _inlineBreakpointClick(decoration, event) {
+    event.consume(true);
+    if (decoration.breakpoint) {
+      if (event.shiftKey)
+        decoration.breakpoint.setEnabled(!decoration.breakpoint.enabled());
+      else
+        decoration.breakpoint.remove();
+    } else {
+      var location = decoration.handle.resolve();
+      if (!location)
+        return;
+      this._setBreakpoint(location.lineNumber, location.columnNumber, decoration.condition, true);
+    }
+  }
+
+  /**
+   * @param {!Sources.JavaScriptSourceFrame.BreakpointDecoration} decoration
+   * @param {!Event} event
+   */
+  _inlineBreakpointContextMenu(decoration, event) {
+    event.consume(true);
+    var location = decoration.handle.resolve();
+    if (!location)
+      return;
+    var contextMenu = new UI.ContextMenu(event);
+    if (decoration.breakpoint) {
+      contextMenu.appendItem(
+          Common.UIString('Edit breakpoint\u2026'),
+          this._editBreakpointCondition.bind(this, location.lineNumber, decoration.breakpoint, null));
+    } else {
+      contextMenu.appendItem(
+          Common.UIString('Add conditional breakpoint\u2026'),
+          this._editBreakpointCondition.bind(this, location.lineNumber, null, location));
+      contextMenu.appendItem(
+          Common.UIString('Never pause here'),
+          this._setBreakpoint.bind(this, location.lineNumber, location.columnNumber, 'false', true));
+    }
+    contextMenu.show();
+  }
+
+  /**
    * @param {!Common.Event} event
    * @return {boolean}
    */
   _shouldIgnoreExternalBreakpointEvents(event) {
     var uiLocation = /** @type {!Workspace.UILocation} */ (event.data.uiLocation);
     if (uiLocation.uiSourceCode !== this.uiSourceCode() || !this.loaded)
       return true;
     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;
   }
 
   /**
    * @param {!Common.Event} event
    */
   _breakpointAdded(event) {
     if (this._shouldIgnoreExternalBreakpointEvents(event))
       return;
     var uiLocation = /** @type {!Workspace.UILocation} */ (event.data.uiLocation);
-    var handle = this._textEditor.textEditorPositionHandle(uiLocation.lineNumber, uiLocation.columnNumber);
+    var lineDecorations = this._lineBreakpointDecorations(uiLocation.lineNumber);
     var breakpoint = /** @type {!Bindings.BreakpointManager.Breakpoint} */ (event.data.breakpoint);
-    var decoration = new Sources.JavaScriptSourceFrame.BreakpointDecoration(handle, breakpoint);
-    this._breakpointDecorations.add(decoration);
+
+    var decoration = this._breakpointDecoration(uiLocation.lineNumber, uiLocation.columnNumber);
+    if (decoration) {
+      decoration.breakpoint = breakpoint;
+      decoration.condition = breakpoint.condition();
+      decoration.enabled = breakpoint.enabled();
+    } else {
+      var handle = this._textEditor.textEditorPositionHandle(uiLocation.lineNumber, uiLocation.columnNumber);
+      decoration = new Sources.JavaScriptSourceFrame.BreakpointDecoration(
+          this._textEditor, handle, breakpoint.condition(), breakpoint.enabled(), breakpoint);
+      decoration.element.addEventListener('click', this._inlineBreakpointClick.bind(this, decoration), true);
+      decoration.element.addEventListener(
+          'contextmenu', this._inlineBreakpointContextMenu.bind(this, decoration), true);
+      this._breakpointDecorations.add(decoration);
+    }
     breakpoint[Sources.JavaScriptSourceFrame.BreakpointDecoration._decorationSymbol] = decoration;
     this._updateBreakpointDecoration(decoration);
+    if (!lineDecorations.length && Runtime.experiments.isEnabled('inlineBreakpoints')) {
+      this._waitForInlineDecorationsForTest++;

[lushnikov, 2016/11/29 03:17:11]

it would be nice to not introduce test's state in the production code

[kozy, 2016/11/29 19:53:25]

Done.

+      this._breakpointManager
+          .possibleBreakpoints(
+              this.uiSourceCode(), new Common.TextRange(uiLocation.lineNumber, 0, uiLocation.lineNumber + 1, 0))
+          .then(addInlineDecorations.bind(this, uiLocation.lineNumber));
+    }
+
+    /**
+     * @this {Sources.JavaScriptSourceFrame}
+     * @param {number} lineNumber
+     * @param {!Array<!Workspace.UILocation>} possibleLocations
+     */
+    function addInlineDecorations(lineNumber, possibleLocations) {
+      this._waitForInlineDecorationsForTest--;
+      var decorations = this._lineBreakpointDecorations(lineNumber);
+      if (!decorations.some(decoration => !!decoration.breakpoint) || possibleLocations.length <= 1) {

[lushnikov, 2016/11/29 03:17:11]

Not needed: possibleLocations.length <= 1

[kozy, 2016/11/29 19:53:25]

Done.

+        this._breakpointDecorationsUpdatedForTest();
+        return;
+      }
+      /** @type {!Set<number>} */
+      var columns = new Set();
+      for (var decoration of decorations) {
+        var location = decoration.handle.resolve();
+        if (!location)
+          continue;
+        columns.add(location.columnNumber);
+      }
+      var wasScheduled = false;
+      for (var location of possibleLocations) {
+        if (columns.has(location.columnNumber))
+          continue;
+        var handle = this._textEditor.textEditorPositionHandle(location.lineNumber, location.columnNumber);
+        var decoration =
+            new Sources.JavaScriptSourceFrame.BreakpointDecoration(this._textEditor, handle, '', false, null);
+        decoration.element.addEventListener('click', this._inlineBreakpointClick.bind(this, decoration), true);
+        decoration.element.addEventListener(
+            'contextmenu', this._inlineBreakpointContextMenu.bind(this, decoration), true);
+        this._breakpointDecorations.add(decoration);
+        wasScheduled = true;
+        this._updateBreakpointDecoration(decoration);
+      }
+      if (!wasScheduled)
+        this._breakpointDecorationsUpdatedForTest();
+    }
   }
 
   /**
    * @param {!Common.Event} event
    */
   _breakpointRemoved(event) {
     if (this._shouldIgnoreExternalBreakpointEvents(event))
       return;
+    var uiLocation = /** @type {!Workspace.UILocation} */ (event.data.uiLocation);
     var breakpoint = /** @type {!Bindings.BreakpointManager.Breakpoint} */ (event.data.breakpoint);
     var decoration = breakpoint[Sources.JavaScriptSourceFrame.BreakpointDecoration._decorationSymbol];
     if (!decoration)
       return;
-    this._breakpointDecorations.delete(decoration);
     delete breakpoint[Sources.JavaScriptSourceFrame.BreakpointDecoration._decorationSymbol];
-    this._updateBreakpointDecoration(decoration);
+
+    decoration.breakpoint = null;
+    decoration.enabled = false;
+
+    var lineDecorations = this._lineBreakpointDecorations(uiLocation.lineNumber);
+    if (!lineDecorations.some(decoration => !!decoration.breakpoint)) {
+      for (var lineDecoration of lineDecorations) {
+        this._breakpointDecorations.delete(lineDecoration);
+        this._updateBreakpointDecoration(lineDecoration);
+      }
+    } else {
+      this._updateBreakpointDecoration(decoration);
+    }
   }
 
   /**
    * @param {!Common.Event} event
    */
   _onSourceMappingChanged(event) {
     var data = /** @type {{target: !SDK.Target}} */ (event.data);
     this._updateScriptFile(data.target);
     this._updateLinesWithoutMappingHighlight();
   }
@@ skipping 127 matching lines @@
    * @param {number} lineNumber
    * @param {boolean} onlyDisable
    */
   _toggleBreakpoint(lineNumber, onlyDisable) {
     var decorations = this._lineBreakpointDecorations(lineNumber);
     if (!decorations.length) {
       this._createNewBreakpoint(lineNumber, '', true);
       return;
     }
     var hasDisabled = this._textEditor.hasLineClass(lineNumber, 'cm-breakpoint-disabled');
-    var breakpoints = decorations.map(decoration => decoration.breakpoint);
+    var breakpoints = decorations.map(decoration => decoration.breakpoint).filter(breakpoint => !!breakpoint);
     for (var breakpoint of breakpoints) {
       if (onlyDisable)
         breakpoint.setEnabled(hasDisabled);
       else
         breakpoint.remove();
     }
   }
 
   /**
    * @param {number} lineNumber
@@ skipping 103 matching lines @@
     Common.moduleSetting('skipContentScripts').removeChangeListener(this._showBlackboxInfobarIfNeeded, this);
     super.dispose();
   }
 };
 
 /**
  * @unrestricted
  */
 Sources.JavaScriptSourceFrame.BreakpointDecoration = class {
   /**
+   * @param {!TextEditor.CodeMirrorTextEditor} textEditor
    * @param {!TextEditor.TextEditorPositionHandle} handle
-   * @param {!Bindings.BreakpointManager.Breakpoint} breakpoint
+   * @param {string} condition
+   * @param {boolean} enabled
+   * @param {?Bindings.BreakpointManager.Breakpoint} breakpoint
    */
-  constructor(handle, breakpoint) {
+  constructor(textEditor, handle, condition, enabled, breakpoint) {
+    this._textEditor = textEditor;
     this.handle = handle;
-    this.condition = breakpoint.condition();
-    this.enabled = breakpoint.enabled();
+    this.condition = condition;
+    this.enabled = enabled;
     this.breakpoint = breakpoint;
+    this.element = createElementWithClass('div', 'cm-inline-breakpoint');

[lushnikov, 2016/11/29 03:17:11]

you don't need a wrapper element - icon is HTMLElement!

[kozy, 2016/11/29 19:53:25]

Done.

+
+    /** @type {?TextEditor.TextEditorBookMark} */
+    this.bookmark = null;
   }
 
   /**
    * @param {!Sources.JavaScriptSourceFrame.BreakpointDecoration} decoration1
    * @param {!Sources.JavaScriptSourceFrame.BreakpointDecoration} decoration2
    * @return {number}
    */
   static mostSpecificFirst(decoration1, decoration2) {
+    if (decoration1.enabled !== decoration2.enabled)
+      return decoration1.enabled ? -1 : 1;
     if (!!decoration1.condition !== !!decoration2.condition)
       return !!decoration1.condition ? -1 : 1;
-    if (decoration1.enabled !== decoration2.enabled)
-      return decoration1.enabled ? -1 : 1;
     return 0;
   }
+
+  update() {

[lushnikov, 2016/11/29 03:17:11]

update -> updateAndShow

[kozy, 2016/11/29 19:53:26]

Done.

+    var location = this.handle.resolve();
+    if (!location)
+      return;
+    this.element.removeChildren();
+    if (!!this.condition)
+      this.element.appendChild(UI.Icon.create('smallicon-inline-breakpoint'));

[lushnikov, 2016/11/29 03:17:11]

this._icon.setIconType(...)

[kozy, 2016/11/29 19:53:25]

Done.

+    else
+      this.element.appendChild(UI.Icon.create('smallicon-inline-breakpoint-conditional'));
+    this.element.classList.toggle('cm-inline-disabled', !this.enabled);
+    if (!this.bookmark) {
+      this.bookmark = this._textEditor.addBookmark(
+          location.lineNumber, location.columnNumber, this.element,
+          Sources.JavaScriptSourceFrame.BreakpointDecoration.bookmarkSymbol);
+      this.bookmark[Sources.JavaScriptSourceFrame.BreakpointDecoration._elementSymbolForTest] = this.element;
+    }
+  }
+
+  hide() {
+    if (!this.bookmark)
+      return;
+    this.bookmark.clear();
+    this.bookmark = null;
+  }
 };
 
 Sources.JavaScriptSourceFrame.BreakpointDecoration._decorationSymbol = Symbol('decoration');
+Sources.JavaScriptSourceFrame.BreakpointDecoration.bookmarkSymbol = Symbol('bookmark');
+Sources.JavaScriptSourceFrame.BreakpointDecoration._elementSymbolForTest = Symbol('element');