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 fd5c652638febfb57634183cd20d4098cf1a872f..a9345a70f706d9121bad8de58d90fe890f742ff4 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);

[dgozman, 2016/09/12 21:38:57]

Should we use CodeMirror api instead? Does it interact with this correctly?

[einbinder, 2016/09/13 01:07:59]

CodeMirror promises to let these events fall through the editor.

 
     // 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,21 +128,32 @@ 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._needsFocus = false;
+
+    WebInspector.ConsolePrompt.create().then(promptCreated.bind(this));
+
+    /**
+     * @this {WebInspector.ConsoleView}
+     * @param {!WebInspector.ConsolePrompt} prompt
+     */
+    function promptCreated(prompt)

[dgozman, 2016/09/12 21:38:57]

I'd rather move asynchronicity to ConsolePrompt itself, and proxy things like
text/focus before editor is loaded there.

[einbinder, 2016/09/13 01:07:59]

Done.

+    {
+        this._prompt = prompt;
+        this._prompt.attach(this._promptElement);
+        this._prompt.addKeyDownHandler(this._promptKeyDown.bind(this));
+        this._searchableView.setDefaultFocusedElement(this._prompt.element);
+
+        var historyData = this._consoleHistorySetting.get();
+        this._prompt.history().setHistoryData(historyData);
+        this._consoleHistoryAutocompleteChanged();
+        if (this._needsFocus)
+            this.focus();
+    }
 
     this._consoleHistoryAutocompleteSetting = WebInspector.moduleSetting("consoleHistoryAutocomplete");
     this._consoleHistoryAutocompleteSetting.addChangeListener(this._consoleHistoryAutocompleteChanged, this);
-    this._consoleHistoryAutocompleteChanged();
 
     this._updateFilterStatus();
     WebInspector.moduleSetting("consoleTimestampsEnabled").addChangeListener(this._consoleTimestampsSettingChanged, this);
@@ -176,12 +185,14 @@ WebInspector.ConsoleView.prototype = {
     _clearHistory: function()
     {
         this._consoleHistorySetting.set([]);
-        this._prompt.history().setHistoryData([]);
+        if (this._prompt)
+            this._prompt.history().setHistoryData([]);
     },
 
     _consoleHistoryAutocompleteChanged: function()
     {
-        this._prompt.setAddCompletionsFromHistory(this._consoleHistoryAutocompleteSetting.get());
+        if (this._prompt)

[dgozman, 2016/09/12 21:38:57]

Could this even happen without a prompt? What about other places?

[einbinder, 2016/09/13 01:07:59]

Removed.

+            this._prompt.setAddCompletionsFromHistory(this._consoleHistoryAutocompleteSetting.get());
     },
 
     _initConsoleMessages: function()
@@ -215,6 +226,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();
     },
 
     /**
@@ -323,7 +335,8 @@ WebInspector.ConsoleView.prototype = {
 
     _executionContextChanged: function()
     {
-        this._prompt.clearAutoComplete();
+        if (this._prompt)
+            this._prompt.clearAutoComplete();
         if (!this._showAllMessagesCheckbox.checked())
             this._updateMessageList();
     },
@@ -336,18 +349,22 @@ WebInspector.ConsoleView.prototype = {
     wasShown: function()
     {
         this._viewport.refresh();
-        if (!this._prompt.isCaretInsidePrompt())
-            this._prompt.moveCaretToEndOfPrompt();
+        this.focus();
     },
 
     focus: function()
     {
-        if (this._promptElement === WebInspector.currentFocusElement())
+        if (!this._prompt){
+            this._needsFocus = true;
+            return;
+        }
+        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();
+        this._needsFocus = false;
     },
 
     restoreScrollPositions: function()
@@ -370,7 +387,8 @@ WebInspector.ConsoleView.prototype = {
 
     _hidePromptSuggestBox: function()
     {
-        this._prompt.clearAutoComplete();
+        if (this._prompt)
+            this._prompt.clearAutoComplete();
     },
 
     _scheduleViewportRefresh: function()
@@ -557,6 +575,7 @@ WebInspector.ConsoleView.prototype = {
         this._consoleMessages = [];
         this._updateMessageList();
         this._hidePromptSuggestBox();
+        this._viewport.setStickToBottom(true);

[dgozman, 2016/09/12 21:38:57]

Nice catch!

         this._linkifier.reset();
     },
 
@@ -716,8 +735,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,9 +786,13 @@ WebInspector.ConsoleView.prototype = {
 
     _clearPromptBackwards: function()
     {
-        this._prompt.setText("");
+        if (this._prompt)
+            this._prompt.setText("");
     },
 
+    /**
+     * @param {!KeyboardEvent} event
+     */
     _promptKeyDown: function(event)
     {
         if (event.key === "PageUp") {
@@ -790,7 +813,7 @@ WebInspector.ConsoleView.prototype = {
 
     _enterKeyPressed: function(event)
     {
-        if (event.altKey || event.ctrlKey || event.shiftKey)
+        if (!this._prompt || event.altKey || event.ctrlKey || event.shiftKey || !this._prompt.hasFocus())
             return;
 
         event.consume(true);
@@ -829,7 +852,8 @@ WebInspector.ConsoleView.prototype = {
      */
     _appendCommand: function(text, useCommandLineAPI)
     {
-        this._prompt.setText("");
+        if (this._prompt)
+            this._prompt.setText("");
         var currentExecutionContext = WebInspector.context.flavor(WebInspector.ExecutionContext);
         if (currentExecutionContext) {
             WebInspector.ConsoleModel.evaluateCommandInConsole(currentExecutionContext, text, useCommandLineAPI);
@@ -843,6 +867,8 @@ WebInspector.ConsoleView.prototype = {
      */
     _commandEvaluated: function(event)
     {
+        if (!this._prompt)
+            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));