DevTools: fix Console stick-to-bottom on load, enter

Fixes 2 stick to bottom cases
- Prompt has text, but is scrolled out of view. User presses 'Enter'.
  Browsers usually scroll an field into view on input events, but
  Console preventsDefault to avoid adding a newline. Now, we will
  emulate the scroll.
- Page logs a ton of messages, Console opened for the first time.
  CodeMirror asynchronously resized prompt height on load, which
  broke stick to bottom. This CL changes layout so that prompt
  height does not grow on editor load.

Bug: 863664
Change-Id: Ia25a71100d9a895d4c8c710b36ba1d8b76d76990
Reviewed-on: https://chromium-review.googlesource.com/c/1321575Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#605936}

third_party/WebKit/LayoutTests/http/tests/devtools/console/console-viewport-stick-to-bottom-expected.txt

@@ -27,3 +27,7 @@ Is at bottom: false, should stick: false
 Running: testShouldNotJumpToBottomWhenPromptFillsEntireViewport
 Is at bottom: false, should stick: false
 
+Running: testShouldStickWhenEnteringCommandAndPromptIsOutOfView
+Sending key: Enter
+Is at bottom: true, should stick: true
+

third_party/WebKit/LayoutTests/http/tests/devtools/console/console-viewport-stick-to-bottom-onload-expected.txt

+Verifies viewport stick-to-bottom behavior when Console is opened.
+
+Message count: 150
+Is at bottom: true, should stick: true
+

third_party/WebKit/LayoutTests/http/tests/devtools/console/console-viewport-stick-to-bottom-onload.js

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(`Verifies viewport stick-to-bottom behavior when Console is opened.\n`);
+
+  // Log a ton of messages before opening console.
+  await TestRunner.evaluateInPagePromise(`
+      for (var i = 0; i < 150; ++i)
+        console.log("Message #" + i);
+
+      //# sourceURL=console-viewport-stick-to-bottom-onload.js
+    `);
+  await TestRunner.loadModule('console_test_runner');
+  await TestRunner.showPanel('console');
+  await ConsoleTestRunner.waitUntilConsoleEditorLoaded();
+
+  var viewport = Console.ConsoleView.instance()._viewport;
+  ConsoleTestRunner.waitForConsoleMessagesPromise(150);
+  await ConsoleTestRunner.waitForPendingViewportUpdates();
+
+  TestRunner.addResult(
+      'Is at bottom: ' + viewport.element.isScrolledToBottom() + ', should stick: ' + viewport.stickToBottom());
+  TestRunner.completeTest();
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/console/console-viewport-stick-to-bottom.js

@@ -122,7 +122,23 @@
       consoleView._prompt.setText('Bar' + '\n'.repeat(viewportHeight));
 
       dumpAndContinue(next);
-    }
+    },
+
+    async function testShouldStickWhenEnteringCommandAndPromptIsOutOfView(next) {
+      consoleView._prompt.focus();
+      consoleView._prompt.setText('1');
+
+      // Set scrollTop such that prompt is not in visible area.
+      viewport.setStickToBottom(false);
+      viewport.element.scrollTop = 0;
+      await ConsoleTestRunner.waitForPendingViewportUpdates();
+
+      TestRunner.addResult(`Sending key: Enter`);
+      eventSender.keyDown('Enter');
+      await ConsoleTestRunner.waitForPendingViewportUpdates();
+
+      dumpAndContinue(next);
+    },
   ];
 
   function dumpAndContinue(callback) {

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

@@ -20,6 +20,10 @@ Console.ConsolePrompt = class extends UI.Widget {
     this._innerPreviewElement = this._eagerPreviewElement.createChild('div', 'console-eager-inner-preview');
     this._eagerPreviewElement.appendChild(UI.Icon.create('smallicon-command-result', 'preview-result-icon'));
 
+    const editorContainerElement = this.element.createChild('div', 'console-prompt-editor-container');
+    if (this._isBelowPromptEnabled)
+      this.element.appendChild(this._eagerPreviewElement);
+
     this._eagerEvalSetting = Common.settings.moduleSetting('consoleEagerEval');
     this._eagerEvalSetting.addChangeListener(this._eagerSettingChanged.bind(this));
     this._eagerPreviewElement.classList.toggle('hidden', !this._eagerEvalSetting.get());
@@ -50,11 +54,9 @@ Console.ConsolePrompt = class extends UI.Widget {
                                                      UI.GlassPane.AnchorBehavior.PreferBottom
       }));
       this._editor.widget().element.addEventListener('keydown', this._editorKeyDown.bind(this), true);
-      this._editor.widget().show(this.element);
+      this._editor.widget().show(editorContainerElement);
       this._editor.addEventListener(UI.TextEditor.Events.TextChanged, this._onTextChanged, this);
       this._editor.addEventListener(UI.TextEditor.Events.SuggestionChanged, this._onTextChanged, this);
-      if (this._isBelowPromptEnabled)
-        this.element.appendChild(this._eagerPreviewElement);
 
       this.setText(this._initialText);
       delete this._initialText;
@@ -239,6 +241,8 @@ Console.ConsolePrompt = class extends UI.Widget {
 
     event.consume(true);
 
+    // Since we prevent default, manually emulate the native "scroll on key input" behavior.
+    this.element.scrollIntoView();
     this.clearAutocomplete();
 
     const str = this.text();

third_party/blink/renderer/devtools/front_end/console/consoleView.css

@@ -88,7 +88,10 @@
     clear: right;
     position: relative;
     margin: 0 22px 0 20px;
-    min-height: 18px;  /* Sync with ConsoleViewMessage.js */
+}
+
+.console-prompt-editor-container {
+    min-height: 21px;
 }
 
 .console-message,