DevTools: visually indicate when prompt text is incomplete

- Prompt's '>' icon is dimmed when pressing 'Enter' would
  not evaluate (instead insert newline)
- Icon moves from ConsoleView to ConsolePrompt
- Drive-by: removes obsolete styles related to pins

Screenshot: https://imgur.com/a/GNrOadJ

Bug: none
Change-Id: Ia22c905154b78495138a0eaf954a2bc88de9a9c3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1548578Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#650508}

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

@@ -22,6 +22,10 @@ Console.ConsolePrompt = class extends UI.Widget {
     const editorContainerElement = this.element.createChild('div', 'console-prompt-editor-container');
     this.element.appendChild(this._eagerPreviewElement);
 
+    this._promptIcon = UI.Icon.create('smallicon-text-prompt', 'console-prompt-icon');
+    this.element.appendChild(this._promptIcon);
+    this._iconThrottler = new Common.Throttler(0);
+
     this._eagerEvalSetting = Common.settings.moduleSetting('consoleEagerEval');
     this._eagerEvalSetting.addChangeListener(this._eagerSettingChanged.bind(this));
     this._eagerPreviewElement.classList.toggle('hidden', !this._eagerEvalSetting.get());
@@ -52,6 +56,7 @@ Console.ConsolePrompt = class extends UI.Widget {
       }));
       this._editor.widget().element.addEventListener('keydown', this._editorKeyDown.bind(this), true);
       this._editor.widget().show(editorContainerElement);
+      this._editor.addEventListener(UI.TextEditor.Events.CursorChanged, this._updatePromptIcon, this);
       this._editor.addEventListener(UI.TextEditor.Events.TextChanged, this._onTextChanged, this);
       this._editor.addEventListener(UI.TextEditor.Events.SuggestionChanged, this._onTextChanged, this);
 
@@ -90,6 +95,7 @@ Console.ConsolePrompt = class extends UI.Widget {
       const asSoonAsPossible = !this._editor.textWithCurrentSuggestion();
       this._previewRequestForTest = this._textChangeThrottler.schedule(this._requestPreviewBound, asSoonAsPossible);
     }
+    this._updatePromptIcon();
     this.dispatchEventToListeners(Console.ConsolePrompt.Events.TextChanged);
   }
 
@@ -232,6 +238,22 @@ Console.ConsolePrompt = class extends UI.Widget {
       this.moveCaretToEndOfPrompt();
   }
 
+  /**
+   * @return {!Promise<boolean>}
+   */
+  async _enterWillEvaluate() {
+    if (!this._isCaretAtEndOfPrompt())
+      return true;
+    return await ObjectUI.JavaScriptAutocomplete.isExpressionComplete(this.text());
+  }
+
+  _updatePromptIcon() {
+    this._iconThrottler.schedule(async () => {
+      const canComplete = await this._enterWillEvaluate();
+      this._promptIcon.classList.toggle('console-prompt-incomplete', !canComplete);
+    });
+  }
+
   /**
    * @param {!KeyboardEvent} event
    */
@@ -249,12 +271,7 @@ Console.ConsolePrompt = class extends UI.Widget {
     if (!str.length)
       return;
 
-    if (!this._isCaretAtEndOfPrompt()) {
-      await this._appendCommand(str, true);
-      return;
-    }
-
-    if (await ObjectUI.JavaScriptAutocomplete.isExpressionComplete(str))
+    if (await this._enterWillEvaluate())
       await this._appendCommand(str, true);
     else
       this._editor.newlineAndIndent();

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

@@ -181,8 +181,6 @@ Console.ConsoleView = class extends UI.VBox {
     this._currentGroup = this._topGroup;
 
     this._promptElement = this._messagesElement.createChild('div', 'source-code');
-    const promptIcon = UI.Icon.create('smallicon-text-prompt', 'console-prompt-icon');
-    this._promptElement.appendChild(promptIcon);
     this._promptElement.id = 'console-prompt';
 
     // FIXME: This is a workaround for the selection machinery bug. See crbug.com/410899

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

@@ -52,27 +52,6 @@
   top: 1px;
 }
 
-.command-pin-button::before {
-  content: '\1f4cc';
-}
-
-.command-pin-button {
-  cursor: pointer;
-  position: absolute;
-  top: 1px;
-  right: -40px;
-  opacity: 0;
-  width: 40px;
-}
-
-#console-prompt:hover .command-pin-button {
-  opacity: 0.12;
-}
-
-.-theme-with-dark-background #console-prompt:hover .command-pin-button {
-  opacity: 0.25;
-}
-
-#console-prompt:hover .command-pin-button:hover {
-  opacity: 0.6;
+.console-prompt-icon.console-prompt-incomplete {
+  opacity: 0.65;
 }

third_party/blink/renderer/devtools/front_end/text_editor/CodeMirrorTextEditor.js

@@ -160,6 +160,9 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
 
     this._codeMirror.on('changes', this._changes.bind(this));
     this._codeMirror.on('beforeSelectionChange', this._beforeSelectionChange.bind(this));
+    this._codeMirror.on('cursorActivity', () => {
+      this.dispatchEventToListeners(UI.TextEditor.Events.CursorChanged);
+    });
 
     this.element.style.overflow = 'hidden';
     this._codeMirrorElement.classList.add('source-code');

third_party/blink/renderer/devtools/front_end/ui/TextEditor.js

@@ -100,6 +100,7 @@ UI.TextEditor.prototype = {
 
 /** @enum {symbol} */
 UI.TextEditor.Events = {
+  CursorChanged: Symbol('CursorChanged'),
   TextChanged: Symbol('TextChanged'),
   SuggestionChanged: Symbol('SuggestionChanged')
 };