DevTools: unhide console prompt experiment and fix focus

Turns the console below-prompt UI experiment from hidden to
visible.

Clicking on the preview element will now focus the prompt
editor, unless it has a selection.

Bug: 810176
Change-Id: I28cb5fa9c375ab4ae5cbfdf5043d03c7d8c71057
Reviewed-on: https://chromium-review.googlesource.com/1043464
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#556316}

third_party/WebKit/LayoutTests/http/tests/devtools/console/viewport-testing/console-runtime-result-below-prompt-expected.txt

@@ -44,3 +44,17 @@ Running: testNoOpForLongText
 Setting max length for evaluation to 0
 Expression: "1 + 2" yielded preview: ""
 
+Running: testClickingPreviewFocusesEditor
+Prompt text set to `1 + 2`
+Selection before: {"startLine":0,"startColumn":0,"endLine":0,"endColumn":0}
+Clicking preview element
+Selection after: {"startLine":0,"startColumn":5,"endLine":0,"endColumn":5}
+Editor has focus: true
+
+Running: testClickWithSelectionDoesNotFocusEditor
+Prompt text set to `1 + 2`
+Selection before: 3
+Clicking preview element
+Selection after: 3
+Editor has focus: false
+

third_party/WebKit/LayoutTests/http/tests/devtools/console/viewport-testing/console-runtime-result-below-prompt.js

@@ -6,11 +6,11 @@
   TestRunner.addResult(`Tests that console fills the empty element below the prompt editor.\n`);
   await TestRunner.loadModule('console_test_runner');
   await TestRunner.showPanel('console');
-  await ConsoleTestRunner.waitUntilConsoleEditorLoaded();
   await ConsoleTestRunner.waitForPendingViewportUpdates();
 
   const consoleView = Console.ConsoleView.instance();
   const prompt = consoleView._prompt;
+  const editor = await ConsoleTestRunner.waitUntilConsoleEditorLoaded();
 
   TestRunner.runTestSuite([
     async function testUnsafeExpressions(next) {
@@ -39,6 +39,44 @@
 
       next();
     },
+
+    async function testClickingPreviewFocusesEditor(next) {
+      const expression = `1 + 2`;
+      TestRunner.addResult(`Prompt text set to \`${expression}\``);
+      prompt.setText(expression);
+      await prompt._previewRequestForTest;
+
+      editor.setSelection(TextUtils.TextRange.createFromLocation(0, 0));
+      TestRunner.addResult('Selection before: ' + editor.selection().toString());
+
+      TestRunner.addResult(`Clicking preview element`);
+      prompt._eagerPreviewElement.click();
+
+      TestRunner.addResult('Selection after: ' + editor.selection().toString());
+      TestRunner.addResult(`Editor has focus: ${editor.element.hasFocus()}`);
+
+      next();
+    },
+
+    async function testClickWithSelectionDoesNotFocusEditor(next) {
+      const expression = `1 + 2`;
+      TestRunner.addResult(`Prompt text set to \`${expression}\``);
+      prompt.setText(expression);
+      await prompt._previewRequestForTest;
+      document.activeElement.blur();
+
+      var firstTextNode = prompt.belowEditorElement().traverseNextTextNode();
+      window.getSelection().setBaseAndExtent(firstTextNode, 0, firstTextNode, 1);
+      TestRunner.addResult('Selection before: ' + window.getSelection().toString());
+
+      TestRunner.addResult(`Clicking preview element`);
+      prompt._eagerPreviewElement.click();
+
+      TestRunner.addResult('Selection after: ' + window.getSelection().toString());
+      TestRunner.addResult(`Editor has focus: ${editor.element.hasFocus()}`);
+
+      next();
+    },
   ]);
 
   async function checkExpression(expression) {

third_party/WebKit/LayoutTests/http/tests/devtools/console/viewport-testing/console-stick-to-bottom-with-large-prompt.js

@@ -21,7 +21,7 @@
 
   const consoleView = Console.ConsoleView.instance();
   const viewport = consoleView._viewport;
-  const heightBelowPromptEditor = consoleView._prompt.heightBelowEditor();
+  const heightBelowPromptEditor = consoleView._prompt.belowEditorElement().offsetHeight;
   const messagesCount = 150;
 
   TestRunner.runTestSuite([

third_party/blink/renderer/devtools/front_end/console/ConsolePrompt.js

@@ -46,17 +46,18 @@ Console.ConsolePrompt = class extends UI.Widget {
       delete this._initialText;
       if (this.hasFocus())
         this.focus();
-      this.element.tabIndex = -1;
+      this.element.removeAttribute('tabindex');
+      this._editor.widget().element.tabIndex = -1;
 
       this._editorSetForTest();
     }
   }
 
   /**
-   * @return {number}
+   * @return {!Element}
    */
-  heightBelowEditor() {
-    return this._eagerPreviewElement.offsetHeight;
+  belowEditorElement() {
+    return this._eagerPreviewElement;
   }
 
   _onTextChanged() {

third_party/blink/renderer/devtools/front_end/console/ConsoleView.js

@@ -833,9 +833,11 @@ Console.ConsoleView = class extends UI.VBox {
    * @param {!Event} event
    */
   _messagesClicked(event) {
+    const target = /** @type {?Node} */ (event.target);
     // Do not focus prompt if messages have selection.
     if (!this._messagesElement.hasSelection()) {
-      const clickedOutsideMessageList = event.target === this._messagesElement;
+      const clickedOutsideMessageList =
+          target === this._messagesElement || this._prompt.belowEditorElement().isSelfOrAncestor(target);
       if (clickedOutsideMessageList)
         this._prompt.moveCaretToEndOfPrompt();
       this.focus();
@@ -1168,7 +1170,7 @@ Console.ConsoleView = class extends UI.VBox {
     if (!this._isBelowPromptEnabled)
       return this._messagesElement.isScrolledToBottom();
     const distanceToPromptEditorBottom = this._messagesElement.scrollHeight - this._messagesElement.scrollTop -
-        this._messagesElement.clientHeight - this._prompt.heightBelowEditor();
+        this._messagesElement.clientHeight - this._prompt.belowEditorElement().offsetHeight;
     return distanceToPromptEditorBottom <= 2;
   }
 };

third_party/blink/renderer/devtools/front_end/main/Main.js

@@ -108,7 +108,7 @@ Main.Main = class {
     Runtime.experiments.register('applyCustomStylesheet', 'Allow custom UI themes');
     Runtime.experiments.register('blackboxJSFramesOnTimeline', 'Blackbox JavaScript frames on Timeline', true);
     Runtime.experiments.register('colorContrastRatio', 'Color contrast ratio line in color picker', true);
-    Runtime.experiments.register('consoleBelowPrompt', 'Console below-prompt UI', true);
+    Runtime.experiments.register('consoleBelowPrompt', 'Eager evaluation');
     Runtime.experiments.register('emptySourceMapAutoStepping', 'Empty sourcemap auto-stepping');
     Runtime.experiments.register('inputEventsOnTimelineOverview', 'Input events on Timeline overview', true);
     Runtime.experiments.register('nativeHeapProfiler', 'Native memory sampling heap profiler', true);