DevTools: render continue to location as execution line instead of green dots.

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._popoverHelper = new UI.PopoverHelper(this._scriptsPanel.element, this._getPopoverRequest.bind(this));
     this._popoverHelper.setDisableOnClick(true);
     this._popoverHelper.setTimeout(250, 250);
     this._popoverHelper.setHasPadding(true);
     this._scriptsPanel.element.addEventListener(
         'scroll', this._popoverHelper.hidePopover.bind(this._popoverHelper), true);
 
     this.textEditor.element.addEventListener('keydown', this._onKeyDown.bind(this), true);
     this.textEditor.element.addEventListener('keyup', this._onKeyUp.bind(this), true);
     this.textEditor.element.addEventListener('mousemove', this._onMouseMove.bind(this), false);
+    this.textEditor.element.addEventListener('mousedown', this._onMouseDown.bind(this), true);
     if (Runtime.experiments.isEnabled('continueToLocationMarkers')) {
       this.textEditor.element.addEventListener('wheel', event => {
         if (UI.KeyboardShortcut.eventHasCtrlOrMeta(event))
           event.preventDefault();
       }, true);
     }
 
     this.textEditor.addEventListener(
         SourceFrame.SourcesTextEditor.Events.GutterClick, this._handleGutterClick.bind(this), this);
 
@@ skipping 18 matching lines @@
     this._scriptFileForDebuggerModel = new Map();
 
     Common.moduleSetting('skipStackFramesPattern').addChangeListener(this._showBlackboxInfobarIfNeeded, this);
     Common.moduleSetting('skipContentScripts').addChangeListener(this._showBlackboxInfobarIfNeeded, this);
 
     /** @type {!Map.<number, !Element>} */
     this._valueWidgets = new Map();
     this.onBindingChanged();
     Bindings.debuggerWorkspaceBinding.addEventListener(
         Bindings.DebuggerWorkspaceBinding.Events.SourceMappingChanged, this._onSourceMappingChanged, this);
+    /** @type {?Map<!Object, !Function>} */
+    this._continueToLocationDecorations = null;
   }
 
   /**
    * @override
    * @return {!Array<!UI.ToolbarItem>}
    */
   syncToolbarItems() {
     var result = super.syncToolbarItems();
     var originURL = Bindings.CompilerScriptMapping.uiSourceCodeOrigin(this._debuggerSourceCode);
     if (originURL) {
@@ skipping 270 matching lines @@
 
   /**
    * @param {string}  tokenType
    * @return {boolean}
    */
   _isIdentifier(tokenType) {
     return tokenType.startsWith('js-variable') || tokenType.startsWith('js-property') || tokenType === 'js-def';
   }
 
   /**
-   * @param {!Event} event
+   * @param {!MouseEvent} event
    * @return {?UI.PopoverRequest}
    */
   _getPopoverRequest(event) {
+    if (UI.KeyboardShortcut.eventHasCtrlOrMeta(event))
+      return null;
     var target = UI.context.flavor(SDK.Target);
     var debuggerModel = target ? target.model(SDK.DebuggerModel) : null;
     if (!debuggerModel || !debuggerModel.isPaused())
       return null;
 
     var textPosition = this.textEditor.coordinatesToCursorPosition(event.x, event.y);
     if (!textPosition)
       return null;
 
     var mouseLine = textPosition.startLine;
@@ skipping 82 matching lines @@
    */
   _onKeyDown(event) {
     if (event.key === 'Escape') {
       if (this._popoverHelper.isPopoverVisible()) {
         this._popoverHelper.hidePopover();
         event.consume();
       }
       return;
     }
     if (UI.KeyboardShortcut.eventHasCtrlOrMeta(event) && this._executionLocation) {
-      if (!this._continueToLocationShown) {
+      if (!this._continueToLocationDecorations)
         this._showContinueToLocations();
-        this._continueToLocationShown = true;
-      }
     }
   }
 
   /**
    * @param {!MouseEvent} event
    */
   _onMouseMove(event) {
     if (this._executionLocation && UI.KeyboardShortcut.eventHasCtrlOrMeta(event)) {
-      if (!this._continueToLocationShown) {
+      if (!this._continueToLocationDecorations)
         this._showContinueToLocations();
-        this._continueToLocationShown = true;
-      }
-      return;
     }
   }
 
+  /**
+   * @param {!MouseEvent} event
+   */
+  _onMouseDown(event) {
+    if (!this._executionLocation || !UI.KeyboardShortcut.eventHasCtrlOrMeta(event))
+      return;
+    if (!this._continueToLocationDecorations)
+      return;
+    event.consume();
+    var textPosition = this.textEditor.coordinatesToCursorPosition(event.x, event.y);
+    if (!textPosition)
+      return;
+    for (var decoration of this._continueToLocationDecorations.keys()) {
+      var range = decoration.find();
+      if (range.from.line !== textPosition.startLine || range.to.line !== textPosition.startLine)
+        continue;
+      if (range.from.ch <= textPosition.startColumn && textPosition.startColumn <= range.to.ch) {
+        this._continueToLocationDecorations.get(decoration)();
+        break;
+      }
+    }
+  }
+
   /**
    * @param {!KeyboardEvent} event
    */
   _onKeyUp(event) {
     if (UI.KeyboardShortcut.eventHasCtrlOrMeta(event))
       return;
-    if (!this._continueToLocationShown)
-      return;
     this._clearContinueToLocations();
-    this._continueToLocationShown = false;
   }
 
   /**
    * @param {number} lineNumber
    * @param {?Bindings.BreakpointManager.Breakpoint} breakpoint
    * @param {?{lineNumber: number, columnNumber: number}} location
    */
   _editBreakpointCondition(lineNumber, breakpoint, location) {
     this._conditionElement = this._createConditionElement(lineNumber);
     this.textEditor.addDecoration(this._conditionElement, lineNumber);
@@ skipping 45 matching lines @@
     this._executionLocation = uiLocation;
     if (!this.loaded)
       return;
 
     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();
         if (Runtime.experiments.isEnabled('continueToLocationMarkers')) {
-          if (this._continueToLocationShown)
+          if (this._continueToLocationDecorations)
             this._showContinueToLocations();
         }
       });
     }
   }
 
   _generateValuesInSource() {
     if (!Common.moduleSetting('inlineVariableValues').get())
       return;
     var executionContext = UI.context.flavor(SDK.ExecutionContext);
@@ skipping 12 matching lines @@
 
     if (this._clearValueWidgetsTimer) {
       clearTimeout(this._clearValueWidgetsTimer);
       delete this._clearValueWidgetsTimer;
     }
   }
 
   _showContinueToLocations() {
     if (!Runtime.experiments.isEnabled('continueToLocationMarkers'))
       return;
+    this._popoverHelper.hidePopover();
     var executionContext = UI.context.flavor(SDK.ExecutionContext);
     if (!executionContext)
       return;
     var callFrame = UI.context.flavor(SDK.DebuggerModel.CallFrame);
     if (!callFrame)
       return;
-    if (this._clearContinueToLocationsTimer) {
-      clearTimeout(this._clearContinueToLocationsTimer);
-      delete this._clearContinueToLocationsTimer;
-    }
     var localScope = callFrame.localScope();
     if (!localScope) {
-      this.textEditor.operation(clearExistingLocations.bind(this));
+      this._clearContinueToLocations();
       return;
     }
     var start = localScope.startLocation();
     var end = localScope.endLocation();
     var debuggerModel = callFrame.debuggerModel;
-    var executionLocation = callFrame.location();
     debuggerModel.getPossibleBreakpoints(start, end, true)
         .then(locations => this.textEditor.operation(renderLocations.bind(this, locations)));
+
     /**
      * @param {!Array<!SDK.DebuggerModel.BreakLocation>} locations
      * @this {Sources.JavaScriptSourceFrame}
      */
     function renderLocations(locations) {
-      clearExistingLocations.call(this);
+      this._clearContinueToLocations();
+      this._continueToLocationDecorations = new Map();
       for (var location of locations) {
-        var icon;
-        var isCurrent = location.lineNumber === executionLocation.lineNumber &&
-            location.columnNumber === executionLocation.columnNumber;
-        if (!isCurrent || (location.type !== SDK.DebuggerModel.BreakLocationType.Call &&
-                           location.type !== SDK.DebuggerModel.BreakLocationType.Return)) {
-          icon = UI.Icon.create('smallicon-green-arrow');
-          icon.addEventListener('click', location.continueToLocation.bind(location));
-        } else if (location.type === SDK.DebuggerModel.BreakLocationType.Call) {
-          icon = UI.Icon.create('smallicon-step-in');
-          icon.addEventListener('click', () => {
-            debuggerModel.scheduleStepIntoAsync();
-            debuggerModel.stepInto();
-          });
-        } else if (location.type === SDK.DebuggerModel.BreakLocationType.Return) {
-          icon = UI.Icon.create('smallicon-step-out');
-          icon.addEventListener('click', () => {
-            debuggerModel.stepOut();
-          });
-        }
-        icon.classList.add('cm-continue-to-location');
-        icon.addEventListener('mousemove', hidePopoverAndConsumeEvent.bind(this));
-        this.textEditor.addBookmark(
-            location.lineNumber, location.columnNumber, icon,
-            Sources.JavaScriptSourceFrame.continueToLocationDecorationSymbol);
+        var lineNumber = location.lineNumber;
+        var token = this.textEditor.tokenAtTextPosition(lineNumber, location.columnNumber);
+        if (!token || !token.type)
+          continue;
+        var line = this.textEditor.line(lineNumber);
+        var tokenContent = line.substring(token.startColumn, token.endColumn);
+        if (!this._isIdentifier(token.type) && (token.type !== 'js-keyword' || tokenContent !== 'this'))
+          continue;
+
+        var highlightRange = new TextUtils.TextRange(lineNumber, token.startColumn, lineNumber, token.endColumn - 1);
+        var decoration = this.textEditor.highlightRange(highlightRange, 'source-frame-continue-to-location');
+        this._continueToLocationDecorations.set(decoration, location.continueToLocation.bind(location));
       }
     }
-
-    /**
-     * @this {Sources.JavaScriptSourceFrame}
-     */
-    function clearExistingLocations() {
-      var bookmarks = this.textEditor.bookmarks(
-          this.textEditor.fullRange(), Sources.JavaScriptSourceFrame.continueToLocationDecorationSymbol);
-      bookmarks.map(bookmark => bookmark.clear());
-    }
-
-    /**
-     * @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
    * @param {?Array.<!SDK.RemoteObjectProperty>} internalProperties
    */
   _prepareScopeVariables(callFrame, properties, internalProperties) {
     if (!properties || !properties.length || properties.length > 500 || !this.isShowing()) {
       this._clearValueWidgets();
@@ skipping 126 matching lines @@
         }
       }
       if (widgetChanged) {
         this._valueWidgets.set(i, widget);
         this.textEditor.addDecoration(widget, i);
       }
     }
   }
 
   clearExecutionLine() {
-    if (this.loaded && this._executionLocation)
-      this.textEditor.clearExecutionLine();
-    delete this._executionLocation;
-    this._clearValueWidgetsTimer = setTimeout(this._clearValueWidgets.bind(this), 1000);
-    if (Runtime.experiments.isEnabled('continueToLocationMarkers'))
-      this._clearContinueToLocationsTimer = setTimeout(this._clearContinueToLocations.bind(this), 1000);
+    this.textEditor.operation(() => {
+      if (this.loaded && this._executionLocation)
+        this.textEditor.clearExecutionLine();
+      delete this._executionLocation;
+      this._clearValueWidgetsTimer = setTimeout(this._clearValueWidgets.bind(this), 1000);

[dgozman, 2017/04/26 16:04:58]

I feel like we should do similar things for all decorations.

[pfeldman, 2017/04/27 21:05:05]

Sure. textEditor operation is a good-enough tool to do that.

+      this._clearContinueToLocations();

[dgozman, 2017/04/26 16:04:58]

This is a nested operation. That's ok?

[pfeldman, 2017/04/27 21:05:05]

Yes

+    });
   }
 
   _clearValueWidgets() {
     delete this._clearValueWidgetsTimer;
-    for (var line of this._valueWidgets.keys())
-      this.textEditor.removeDecoration(this._valueWidgets.get(line), line);
-    this._valueWidgets.clear();
+    this.textEditor.operation(() => {
+      for (var line of this._valueWidgets.keys())
+        this.textEditor.removeDecoration(this._valueWidgets.get(line), line);
+      this._valueWidgets.clear();
+    });
   }
 
   _clearContinueToLocations() {
-    if (!Runtime.experiments.isEnabled('continueToLocationMarkers'))
+    if (!this._continueToLocationDecorations)
       return;
-    delete this._clearContinueToLocationsTimer;
-    var bookmarks = this.textEditor.bookmarks(
-        this.textEditor.fullRange(), Sources.JavaScriptSourceFrame.continueToLocationDecorationSymbol);
-    this.textEditor.operation(() => bookmarks.map(bookmark => bookmark.clear()));
+    this.textEditor.operation(() => {
+      for (var decoration of this._continueToLocationDecorations.keys())
+        this.textEditor.removeHighlight(decoration);
+      delete this._continueToLocationDecorations;
+    });
   }
 
   /**
    * @param {number} lineNumber
    * @return {!Array<!Sources.JavaScriptSourceFrame.BreakpointDecoration>}
    */
   _lineBreakpointDecorations(lineNumber) {
     return Array.from(this._breakpointDecorations)
         .filter(decoration => (decoration.handle.resolve() || {}).lineNumber === lineNumber);
   }
@@ skipping 619 matching lines @@
       return;
     this.bookmark.clear();
     this.bookmark = null;
   }
 };
 
 Sources.JavaScriptSourceFrame.BreakpointDecoration.bookmarkSymbol = Symbol('bookmark');
 Sources.JavaScriptSourceFrame.BreakpointDecoration._elementSymbolForTest = Symbol('element');
 
 Sources.JavaScriptSourceFrame.continueToLocationDecorationSymbol = Symbol('bookmark');