[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 193 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 99 matching lines @@
     }
 
     this._restoreBreakpointsAfterEditing();
   }
 
   _restoreBreakpointsAfterEditing() {
     delete this._muted;
     var decorations = Array.from(this._breakpointDecorations);
     this._breakpointDecorations.clear();
     for (var decoration of decorations) {
+      decoration.hide();
+      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 230 matching lines @@
      * @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);
       }
+      var promises = [];
       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);
-        if (!decorations.length)
+        if (!decorations.some(decoration => !!decoration.breakpoint)) {
+          for (var decoration of decorations) {
+            decoration.hide();
+            this._breakpointDecorations.delete(decoration);
+          }
           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 (Runtime.experiments.isEnabled('inlineBreakpoints')) {
+          promises.push(
+              this._breakpointManager
+                  .possibleBreakpoints(this.uiSourceCode(), new Common.TextRange(lineNumber, 0, lineNumber + 1, 0))
+                  .then(
+                      locations => this._textEditor.operation(addInlineDecorations.bind(this, lineNumber, locations))));
+        }
       }
       delete this._scheduledBreakpointDecorationUpdates;
-      this._breakpointDecorationsUpdatedForTest();
+      if (!promises.length)
+        this._breakpointDecorationsUpdatedForTest();
+      else
+        Promise.all(promises).then(() => this._breakpointDecorationsUpdatedForTest());
+    }
+
+    /**
+     * @this {Sources.JavaScriptSourceFrame}
+     * @param {number} lineNumber
+     * @param {!Array<!Workspace.UILocation>} possibleLocations
+     */
+    function addInlineDecorations(lineNumber, possibleLocations) {
+      var decorations = this._lineBreakpointDecorations(lineNumber);
+      // Hide all inline decoration, remove decoration if decoration doesn't have a breakpoint.
+      for (var decoration of decorations) {
+        decoration.hide();
+        if (!decoration.breakpoint)
+          this._breakpointDecorations.delete(decoration);
+      }
+      decorations = decorations.filter(decoration => !!decoration.breakpoint);
+      // If less then two locations or no real breakpoints in this line - don't show any inline decorations.
+      if (possibleLocations.length <= 1 || !decorations.length)
+        return;
+      // Add missing decorations for possible locations without breakpoint.
+      /** @type {!Set<number>} */
+      var columns = new Set();
+      for (var decoration of decorations) {
+        var location = decoration.handle.resolve();
+        if (location)
+          columns.add(location.columnNumber);
+      }
+      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(handle, '', false, null);
+        this._breakpointDecorations.add(decoration);
+        decorations.push(decoration);
+      }
+      // Render inline decorations.
+      for (var decoration of decorations) {
+        var element = decoration.show(this._textEditor);
+        if (!element)
+          continue;
+        element.addEventListener('click', this._inlineBreakpointClick.bind(this, decoration), true);
+        element.addEventListener('contextmenu', this._inlineBreakpointContextMenu.bind(this, decoration), true);
+      }
     }
   }
 
   _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 breakpoint = /** @type {!Bindings.BreakpointManager.Breakpoint} */ (event.data.breakpoint);
-    var decoration = new Sources.JavaScriptSourceFrame.BreakpointDecoration(handle, breakpoint);
+    var decoration = new Sources.JavaScriptSourceFrame.BreakpointDecoration(
+        handle, breakpoint.condition(), breakpoint.enabled(), breakpoint);
     this._breakpointDecorations.add(decoration);
     breakpoint[Sources.JavaScriptSourceFrame.BreakpointDecoration._decorationSymbol] = decoration;
     this._updateBreakpointDecoration(decoration);
   }
 
   /**
    * @param {!Common.Event} event
    */
   _breakpointRemoved(event) {
     if (this._shouldIgnoreExternalBreakpointEvents(event))
       return;
     var breakpoint = /** @type {!Bindings.BreakpointManager.Breakpoint} */ (event.data.breakpoint);
     var decoration = breakpoint[Sources.JavaScriptSourceFrame.BreakpointDecoration._decorationSymbol];
     if (!decoration)
       return;
     this._breakpointDecorations.delete(decoration);
+    decoration.hide();
     delete breakpoint[Sources.JavaScriptSourceFrame.BreakpointDecoration._decorationSymbol];
     this._updateBreakpointDecoration(decoration);
   }
 
   /**
    * @param {!Common.Event} event
    */
   _onSourceMappingChanged(event) {
     var data = /** @type {{target: !SDK.Target}} */ (event.data);
     this._updateScriptFile(data.target);
@@ skipping 129 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 101 matching lines @@
         Workspace.UISourceCode.Events.TitleChanged, this._showBlackboxInfobarIfNeeded, this);
     Common.moduleSetting('skipStackFramesPattern').removeChangeListener(this._showBlackboxInfobarIfNeeded, this);
     Common.moduleSetting('skipContentScripts').removeChangeListener(this._showBlackboxInfobarIfNeeded, this);
     super.dispose();
   }
 };
 
 /**
  * @unrestricted
  */
 Sources.JavaScriptSourceFrame.BreakpointDecoration = class {

[lushnikov, 2016/11/23 21:54:39]

What is BreakpointDecoration? It used to be a gutter thing, but now it blends
with inline bookmark?

Can we distinguish between the two? E.g.:
- Sources.JSSF.BreakpointDecoration holds inline breakpoint
- Sources.JSSF updates text editor gutter decorations wrt BreakpointDecorations

[kozy, 2016/11/23 23:08:47]

BreakpointDecoration represents decoration for breakpoint or possible breakpoint
location in JavaScriptSourceFrame. gutter decoration is meta decoration that is
calcauled base on existing decorations for breakpoints.

   /**
    * @param {!TextEditor.TextEditorPositionHandle} handle
-   * @param {!Bindings.BreakpointManager.Breakpoint} breakpoint
+   * @param {string} condition
+   * @param {boolean} enabled
+   * @param {?Bindings.BreakpointManager.Breakpoint} breakpoint
    */
-  constructor(handle, breakpoint) {
+  constructor(handle, condition, enabled, breakpoint) {

[lushnikov, 2016/11/23 21:54:39]

let's make decoration texteditor-aware:

constructor(textEditor, lineNumber, columnNumber, condition, enabled,
breakpoint) {
  this._textEditor = textEditor;
  this._handle = editor.createHandle(lineNumber, columnNumber);
  ...
  
}

[kozy, 2016/11/23 23:08:47]

Done.

     this.handle = handle;
-    this.condition = breakpoint.condition();
-    this.enabled = breakpoint.enabled();
+    this.condition = condition;
+    this.enabled = enabled;
     this.breakpoint = breakpoint;
+
+    /** @type {?TextEditor.TextEditorBookMark} */
+    this._bookmark = null;
   }
 
   /**
    * @param {!Sources.JavaScriptSourceFrame.BreakpointDecoration} decoration1
    * @param {!Sources.JavaScriptSourceFrame.BreakpointDecoration} decoration2
    * @return {number}
    */
   static mostSpecificFirst(decoration1, decoration2) {
     if (!!decoration1.condition !== !!decoration2.condition)
       return !!decoration1.condition ? -1 : 1;
     if (decoration1.enabled !== decoration2.enabled)
       return decoration1.enabled ? -1 : 1;
     return 0;
   }
+
+  /**
+   * @param {!TextEditor.CodeMirrorTextEditor} textEditor
+   * @return {?Element}
+   */
+  show(textEditor) {
+    if (this._bookmark)
+      return null;
+    var location = this.handle.resolve();
+    if (!location)
+      return null;
+    var inlineBreakpoint = createElementWithClass('div', 'cm-inline-breakpoint');
+    inlineBreakpoint.classList.toggle('cm-inline-conditional', !!this.condition);
+    inlineBreakpoint.classList.toggle('cm-inline-disabled', !this.enabled);
+    this._bookmark = textEditor.addBookmark(
+        location.lineNumber, location.columnNumber, inlineBreakpoint,
+        Sources.JavaScriptSourceFrame.BreakpointDecoration._bookmarkSymbol);
+    this._bookmark[Sources.JavaScriptSourceFrame.BreakpointDecoration._elementSymbolForTest] = inlineBreakpoint;
+    return inlineBreakpoint;
+  }
+
+  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');