DevTools: Implement the console prompt with CodeMirror

third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js

Index: third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js b/third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js
index 865876d5f57fc46f1c9330558bedb22df044a401..0434a0275a0a0ed6a279fecb11f3f098a92a469c 100644
--- a/third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js
+++ b/third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js
@@ -103,9 +103,7 @@ WebInspector.ConsoleView = function()
 
     this._promptElement = this._messagesElement.createChild("div", "source-code");
     this._promptElement.id = "console-prompt";
-    this._promptElement.spellcheck = false;
-
-    this._searchableView.setDefaultFocusedElement(this._promptElement);
+    this._promptElement.addEventListener("input", this._promptInput.bind(this), false);
 
     // FIXME: This is a workaround for the selection machinery bug. See crbug.com/410899
     var selectAllFixer = this._messagesElement.createChild("div", "console-view-fix-select-all");
@@ -130,20 +128,20 @@ WebInspector.ConsoleView = function()
     this._consoleMessages = [];
     this._viewMessageSymbol = Symbol("viewMessage");
 
-    this._prompt = new WebInspector.TextPromptWithHistory(WebInspector.ExecutionContextSelector.completionsForTextPromptInCurrentContext);
-    this._prompt.setSuggestBoxEnabled(true);
-    this._prompt.setAutocompletionTimeout(0);
-    this._prompt.renderAsBlock();
-    var proxyElement = this._prompt.attach(this._promptElement);
-    proxyElement.addEventListener("keydown", this._promptKeyDown.bind(this), false);
-    proxyElement.addEventListener("input", this._promptInput.bind(this), false);
 
     this._consoleHistorySetting = WebInspector.settings.createLocalSetting("consoleHistory", []);
-    var historyData = this._consoleHistorySetting.get();
-    this._prompt.history().setHistoryData(historyData);
+
+    this._prompt = new WebInspector.ConsolePrompt();
+    this._prompt.show(this._promptElement);
+    this._prompt.element.addEventListener("keydown", this._promptKeyDown.bind(this), true);
+    // this._searchableView.setDefaultFocusedElement(this._prompt.element);

[dgozman, 2016/09/14 04:26:18]

Commented code.

[einbinder, 2016/09/14 20:21:06]

Done.

+
 
     this._consoleHistoryAutocompleteSetting = WebInspector.moduleSetting("consoleHistoryAutocomplete");
     this._consoleHistoryAutocompleteSetting.addChangeListener(this._consoleHistoryAutocompleteChanged, this);
+
+    var historyData = this._consoleHistorySetting.get();
+    this._prompt.history().setHistoryData(historyData);
     this._consoleHistoryAutocompleteChanged();
 
     this._updateFilterStatus();
@@ -215,6 +213,7 @@ WebInspector.ConsoleView.prototype = {
         WebInspector.multitargetConsoleModel.addEventListener(WebInspector.ConsoleModel.Events.MessageUpdated, this._onConsoleMessageUpdated, this);
         WebInspector.multitargetConsoleModel.addEventListener(WebInspector.ConsoleModel.Events.CommandEvaluated, this._commandEvaluated, this);
         WebInspector.multitargetConsoleModel.messages().forEach(this._addConsoleMessage, this);
+        this._viewport.invalidate();
     },
 
     /**
@@ -336,18 +335,17 @@ WebInspector.ConsoleView.prototype = {
     wasShown: function()
     {
         this._viewport.refresh();
-        if (!this._prompt.isCaretInsidePrompt())
-            this._prompt.moveCaretToEndOfPrompt();
+        this.focus();

[dgozman, 2016/09/14 04:26:18]

Why this? I think the code which shows ConsoleView knows better whether to focus
it.

[einbinder, 2016/09/14 20:21:06]

The old code focused the prompt. I agree that its overeager, but I want to main
consistency with how the old prompt worked and fix these things in another
patch.

     },
 
     focus: function()
     {
-        if (this._promptElement === WebInspector.currentFocusElement())
+        if (this._prompt.hasFocus())
             return;
         // Set caret position before setting focus in order to avoid scrolling
         // by focus().
         this._prompt.moveCaretToEndOfPrompt();
-        WebInspector.setCurrentFocusElement(this._promptElement);
+        this._prompt.focus();
     },
 
     restoreScrollPositions: function()
@@ -557,6 +555,7 @@ WebInspector.ConsoleView.prototype = {
         this._consoleMessages = [];
         this._updateMessageList();
         this._hidePromptSuggestBox();
+        this._viewport.setStickToBottom(true);
         this._linkifier.reset();
     },
 
@@ -716,8 +715,8 @@ WebInspector.ConsoleView.prototype = {
     _messagesClicked: function(event)
     {
         var targetElement = event.deepElementFromPoint();
-        if (!this._prompt.isCaretInsidePrompt() && (!targetElement || targetElement.isComponentSelectionCollapsed()))
-            this._prompt.moveCaretToEndOfPrompt();
+        if (!targetElement || targetElement.isComponentSelectionCollapsed())
+            this.focus();
         var groupMessage = event.target.enclosingNodeOrSelfWithClass("console-group-title");
         if (!groupMessage)
             return;
@@ -767,30 +766,35 @@ WebInspector.ConsoleView.prototype = {
 
     _clearPromptBackwards: function()
     {
-        this._prompt.setText("");
+        if (this._prompt)

[lushnikov, 2016/09/14 01:11:21]

how could there be no prompt?

[einbinder, 2016/09/14 20:21:06]

Got lost in a merge.

+            this._prompt.setText("");
     },
 
+    /**
+     * @param {!Event} event
+     */
     _promptKeyDown: function(event)
     {
-        if (event.key === "PageUp") {
+        var keyboardEvent = /** @type {!KeyboardEvent} */ (event);
+        if (keyboardEvent.key === "PageUp") {
             this._updateStickToBottomOnWheel();
             return;
-        } else if (isEnterKey(event)) {
-            this._enterKeyPressed(event);
+        } else if (isEnterKey(keyboardEvent)) {
+            this._enterKeyPressed(keyboardEvent);
             return;
         }
 
-        var shortcut = WebInspector.KeyboardShortcut.makeKeyFromEvent(event);
+        var shortcut = WebInspector.KeyboardShortcut.makeKeyFromEvent(keyboardEvent);
         var handler = this._shortcuts[shortcut];
         if (handler) {
             handler();
-            event.preventDefault();
+            keyboardEvent.preventDefault();
         }
     },
 
     _enterKeyPressed: function(event)
     {
-        if (event.altKey || event.ctrlKey || event.shiftKey)
+        if (!this._prompt || event.altKey || event.ctrlKey || event.shiftKey || !this._prompt.hasFocus())

[dgozman, 2016/09/14 04:26:18]

prompt is always there.

[einbinder, 2016/09/14 20:21:06]

Done.

             return;
 
         event.consume(true);
@@ -829,7 +833,8 @@ WebInspector.ConsoleView.prototype = {
      */
     _appendCommand: function(text, useCommandLineAPI)
     {
-        this._prompt.setText("");
+        if (this._prompt)

[dgozman, 2016/09/14 04:26:18]

ditto

[einbinder, 2016/09/14 20:21:06]

Done.

+            this._prompt.setText("");
         var currentExecutionContext = WebInspector.context.flavor(WebInspector.ExecutionContext);
         if (currentExecutionContext) {
             WebInspector.ConsoleModel.evaluateCommandInConsole(currentExecutionContext, text, useCommandLineAPI);
@@ -843,6 +848,8 @@ WebInspector.ConsoleView.prototype = {
      */
     _commandEvaluated: function(event)
     {
+        if (!this._prompt)

[dgozman, 2016/09/14 04:26:18]

ditto

[einbinder, 2016/09/14 20:21:06]

Done.

+            return;
         var data = /** @type {{result: ?WebInspector.RemoteObject, text: string, commandMessage: !WebInspector.ConsoleMessage, exceptionDetails: (!RuntimeAgent.ExceptionDetails|undefined)}} */ (event.data);
         this._prompt.history().pushHistoryItem(data.text);
         this._consoleHistorySetting.set(this._prompt.history().historyData().slice(-WebInspector.ConsoleView.persistedHistorySize));