[DevTools] show inlined shortcuts for go to location

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

Index: third_party/WebKit/Source/devtools/front_end/sources/JavaScriptSourceFrame.js
diff --git a/third_party/WebKit/Source/devtools/front_end/sources/JavaScriptSourceFrame.js b/third_party/WebKit/Source/devtools/front_end/sources/JavaScriptSourceFrame.js
index fc995436fdb9683804b8e7c71ee265ff07059aa7..8a88b7c63bc7a2c63372eef25cbbd30df04089ea 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/JavaScriptSourceFrame.js
+++ b/third_party/WebKit/Source/devtools/front_end/sources/JavaScriptSourceFrame.js
@@ -553,7 +553,11 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame {
     this.textEditor.setExecutionLocation(uiLocation.lineNumber, uiLocation.columnNumber);
     if (this.isShowing()) {
       // We need SourcesTextEditor to be initialized prior to this call. @see crbug.com/506566
-      setImmediate(this._generateValuesInSource.bind(this));
+      setImmediate(() => {
+        this._generateValuesInSource();
+        if (Runtime.experiments.isEnabled('inlineContinueToLocation'))
+          this._showContinueToLocations();
+      });
     }
   }
 
@@ -580,6 +584,61 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame {
     }
   }
 
+  _showContinueToLocations() {
+    var executionContext = UI.context.flavor(SDK.ExecutionContext);
+    if (!executionContext)
+      return;
+    var callFrame = UI.context.flavor(SDK.DebuggerModel.CallFrame);
+    if (!callFrame)
+      return;
+    var localScope = callFrame.localScope();
+    if (!localScope)
+      return;
+    var start = localScope.startLocation();
+    var end = localScope.endLocation();
+    var executionLocation = callFrame.location();
+    var debuggerModel = callFrame.debuggerModel;
+    debuggerModel.getPossibleBreakpoints(start, end, true)
+        .then(locations => this.textEditor.operation(renderLocations.bind(this, locations)));
+
+    if (this._clearContinueToLocationsTimer) {
+      clearTimeout(this._clearContinueToLocationsTimer);
+      delete this._clearContinueToLocationsTimer;
+    }
+
+    /**
+     * @param {!Array<!SDK.DebuggerModel.Location>} locations
+     * @this {Sources.JavaScriptSourceFrame}
+     */
+    function renderLocations(locations) {
+      var bookmarks = this.textEditor.bookmarks(
+          this.textEditor.fullRange(), Sources.JavaScriptSourceFrame.continueToLocationDecorationSymbol);
+      this.textEditor.operation(() => bookmarks.map(bookmark => bookmark.clear()));

[dgozman, 2017/02/24 19:49:42]

This function is already run as operation. Just call bookmark.clear() directly?

[kozy, 2017/02/24 20:04:46]

Done.

+
+      for (var location of locations) {
+        if (location.lineNumber === executionLocation.lineNumber &&
+            location.columnNumber === executionLocation.columnNumber)
+          continue;

[dgozman, 2017/02/24 19:49:42]

So, the current one will appear/disappear anyway?

[kozy, 2017/02/24 20:04:46]

Yes..
I removed this logic because in case of more then one dot in line, e.g.:
promise.then().then().then() 
it forces all other dots jumps - it doesn't look good.

+        var icon = UI.Icon.create('smallicon-green-ball');
+        icon.classList.add('cm-continue-to-location');
+        icon.addEventListener('click', location.continueToLocation.bind(location));
+        icon.addEventListener('mousemove', hidePopoverAndConsumeEvent.bind(this));
+        this.textEditor.addBookmark(
+            location.lineNumber, location.columnNumber, icon,
+            Sources.JavaScriptSourceFrame.continueToLocationDecorationSymbol);
+      }
+    }
+
+    /**
+     * @param {!Event} event
+     * @this {Sources.JavaScriptSourceFrame}
+     */
+    function hidePopoverAndConsumeEvent(event) {
+      event.consume(true);
+      this._popoverHelper.hidePopover();
+    }
+  }
+
   /**
    * @param {!SDK.DebuggerModel.CallFrame} callFrame
    * @param {?Array.<!SDK.RemoteObjectProperty>} properties
@@ -728,6 +787,8 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame {
       this.textEditor.clearExecutionLine();
     delete this._executionLocation;
     this._clearValueWidgetsTimer = setTimeout(this._clearValueWidgets.bind(this), 1000);
+    if (Runtime.experiments.isEnabled('inlineContinueToLocation'))
+      this._clearContinueToLocationsTimer = setTimeout(this._clearContinueToLocations.bind(this), 1000);
   }
 
   _clearValueWidgets() {
@@ -737,6 +798,13 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame {
     this._valueWidgets.clear();
   }
 
+  _clearContinueToLocations() {
+    delete this._clearContinueToLocationsTimer;
+    var bookmarks = this.textEditor.bookmarks(
+        this.textEditor.fullRange(), Sources.JavaScriptSourceFrame.continueToLocationDecorationSymbol);
+    this.textEditor.operation(() => bookmarks.map(bookmark => bookmark.clear()));
+  }
+
   /**
    * @param {number} lineNumber
    * @return {!Array<!Sources.JavaScriptSourceFrame.BreakpointDecoration>}
@@ -1382,3 +1450,5 @@ Sources.JavaScriptSourceFrame.BreakpointDecoration = class {
 
 Sources.JavaScriptSourceFrame.BreakpointDecoration.bookmarkSymbol = Symbol('bookmark');
 Sources.JavaScriptSourceFrame.BreakpointDecoration._elementSymbolForTest = Symbol('element');
+
+Sources.JavaScriptSourceFrame.continueToLocationDecorationSymbol = Symbol('bookmark');