DevTools: remove continue to location from behind experiment.

BUG=

Review-Url: https://codereview.chromium.org/2849973003
Cr-Commit-Position: refs/heads/master@{#468386}

third_party/WebKit/Source/devtools/front_end/main/Main.js

@@ -137,7 +137,7 @@ Main.Main = class {
         Runtime.experiments.enableForTest('liveSASS');
     }
 
-    Runtime.experiments.setDefaultExperiments([]);
+    Runtime.experiments.setDefaultExperiments(['continueToLocationMarkers']);
   }
 
   /**

third_party/WebKit/Source/devtools/front_end/source_frame/SourcesTextEditor.js

@@ -215,17 +215,37 @@ SourceFrame.SourcesTextEditor = class extends TextEditor.CodeMirrorTextEditor {
     if (!this._executionLine)
       return;
 
-    this.codeMirror().addLineClass(this._executionLine, 'wrap', 'cm-execution-line');
+    this.showExecutionLineBackground();
+    this.codeMirror().addLineClass(this._executionLine, 'wrap', 'cm-execution-line-outline');
+    var token = this.tokenAtTextPosition(lineNumber, columnNumber);
+    var endColumn;
+    if (token && token.type)
+      endColumn = token.endColumn;
+    else
+      endColumn = this.codeMirror().getLine(lineNumber).length;
+
+
     this._executionLineTailMarker = this.codeMirror().markText(
-        {line: lineNumber, ch: columnNumber}, {line: lineNumber, ch: this.codeMirror().getLine(lineNumber).length},
-        {className: 'cm-execution-line-tail'});
+        {line: lineNumber, ch: columnNumber}, {line: lineNumber, ch: endColumn}, {className: 'cm-execution-line-tail'});
   }
 
-  clearExecutionLine() {
-    this.clearPositionHighlight();
+  showExecutionLineBackground() {
+    if (this._executionLine)
+      this.codeMirror().addLineClass(this._executionLine, 'wrap', 'cm-execution-line');
+  }
 
+  hideExecutionLineBackground() {
     if (this._executionLine)
       this.codeMirror().removeLineClass(this._executionLine, 'wrap', 'cm-execution-line');
+  }
+
+  clearExecutionLine() {
+    this.clearPositionHighlight();
+
+    if (this._executionLine) {
+      this.hideExecutionLineBackground();
+      this.codeMirror().removeLineClass(this._executionLine, 'wrap', 'cm-execution-line-outline');
+    }
     delete this._executionLine;
 
     if (this._executionLineTailMarker)

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

@@ -55,6 +55,7 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame {
     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);
+    this.textEditor.element.addEventListener('focusout', this._onBlur.bind(this), false);
     if (Runtime.experiments.isEnabled('continueToLocationMarkers')) {
       this.textEditor.element.addEventListener('wheel', event => {
         if (UI.KeyboardShortcut.eventHasCtrlOrMeta(event))
@@ -485,6 +486,8 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame {
    * @param {!KeyboardEvent} event
    */
   _onKeyDown(event) {
+    this._clearControlDown();
+
     if (event.key === 'Escape') {
       if (this._popoverHelper.isPopoverVisible()) {
         this._popoverHelper.hidePopover();
@@ -492,9 +495,15 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame {
       }
       return;
     }
+
     if (UI.KeyboardShortcut.eventHasCtrlOrMeta(event) && this._executionLocation) {
-      if (!this._continueToLocationDecorations)
-        this._showContinueToLocations();
+      this._controlDown = true;
+      if (event.key === UI.KeyboardShortcut.Keys.CtrlOrMeta.name) {
+        this._controlTimeout = setTimeout(() => {
+          if (this._executionLocation && this._controlDown)
+            this._showContinueToLocations();
+        }, 150);
+      }
     }
   }
 
@@ -502,7 +511,7 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame {
    * @param {!MouseEvent} event
    */
   _onMouseMove(event) {
-    if (this._executionLocation && UI.KeyboardShortcut.eventHasCtrlOrMeta(event)) {
+    if (this._executionLocation && this._controlDown && UI.KeyboardShortcut.eventHasCtrlOrMeta(event)) {
       if (!this._continueToLocationDecorations)
         this._showContinueToLocations();
     }
@@ -531,13 +540,26 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame {
     }
   }
 
+  /**
+   * @param {!Event} event
+   */
+  _onBlur(event) {
+    if (this.textEditor.element.isAncestor(event.target))
+      return;
+    this._clearControlDown();
+  }
+
   /**
    * @param {!KeyboardEvent} event
    */
   _onKeyUp(event) {
-    if (UI.KeyboardShortcut.eventHasCtrlOrMeta(event))
-      return;
+    this._clearControlDown();
+  }
+
+  _clearControlDown() {
+    this._controlDown = false;
     this._clearContinueToLocations();
+    clearTimeout(this._controlTimeout);
   }
 
   /**
@@ -601,10 +623,11 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame {
     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._continueToLocationDecorations)
+        if (this._controlDown) {
+          if (Runtime.experiments.isEnabled('continueToLocationMarkers'))
             this._showContinueToLocations();
+        } else {
+          this._generateValuesInSource();
         }
       });
     }
@@ -645,7 +668,7 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame {
       return;
     var localScope = callFrame.localScope();
     if (!localScope) {
-      this._clearContinueToLocations();
+      this._clearContinueToLocationsNoRestore();
       return;
     }
     var start = localScope.startLocation();
@@ -659,7 +682,9 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame {
      * @this {Sources.JavaScriptSourceFrame}
      */
     function renderLocations(locations) {
-      this._clearContinueToLocations();
+      this._clearContinueToLocationsNoRestore();
+      this.textEditor.hideExecutionLineBackground();
+      this._clearValueWidgets();
       this._continueToLocationDecorations = new Map();
       for (var location of locations) {
         var lineNumber = location.lineNumber;
@@ -827,11 +852,12 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame {
         this.textEditor.clearExecutionLine();
       delete this._executionLocation;
       this._clearValueWidgetsTimer = setTimeout(this._clearValueWidgets.bind(this), 1000);
-      this._clearContinueToLocations();
+      this._clearContinueToLocationsNoRestore();
     });
   }
 
   _clearValueWidgets() {
+    clearTimeout(this._clearValueWidgetsTimer);
     delete this._clearValueWidgetsTimer;
     this.textEditor.operation(() => {
       for (var line of this._valueWidgets.keys())
@@ -840,13 +866,23 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame {
     });
   }
 
-  _clearContinueToLocations() {
+  _clearContinueToLocationsNoRestore() {
     if (!this._continueToLocationDecorations)
       return;
     this.textEditor.operation(() => {
       for (var decoration of this._continueToLocationDecorations.keys())
         this.textEditor.removeHighlight(decoration);
-      delete this._continueToLocationDecorations;
+      this._continueToLocationDecorations = null;
+    });
+  }
+
+  _clearContinueToLocations() {
+    if (!this._continueToLocationDecorations)
+      return;
+    this.textEditor.operation(() => {
+      this.textEditor.showExecutionLineBackground();
+      this._generateValuesInSource();
+      this._clearContinueToLocationsNoRestore();
     });
   }
 

third_party/WebKit/Source/devtools/front_end/text_editor/cmdevtools.css

@@ -51,6 +51,7 @@
     border: 1px solid rgb(121, 141, 254);
     background-color: rgb(171, 191, 254);
 }
+
 .CodeMirror .source-frame-continue-to-location-start {
     border-left-width: 1px;
     margin-left: -1px;
@@ -244,6 +245,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 .cm-execution-line,
 .-theme-selection-color {
     background-color: rgb(230, 236, 255);
+}
+
+.cm-execution-line-outline,
+.-theme-selection-color {
     outline: 1px solid rgb(64, 115, 244);
 }