DevTools: Implement the console prompt with CodeMirror

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

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 85 matching lines @@
     this._filterStatusMessageElement.createTextChild(" ");
     var resetFiltersLink = this._filterStatusMessageElement.createChild("span", "console-info link");
     resetFiltersLink.textContent = WebInspector.UIString("Show all messages.");
     resetFiltersLink.addEventListener("click", this._filter.reset.bind(this._filter), true);
 
     this._topGroup = WebInspector.ConsoleGroup.createTopGroup();
     this._currentGroup = this._topGroup;
 
     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");
     selectAllFixer.textContent = ".";
 
     this._showAllMessagesCheckbox = new WebInspector.ToolbarCheckbox(WebInspector.UIString("Show all messages"));
     this._showAllMessagesCheckbox.inputElement.checked = true;
     this._showAllMessagesCheckbox.inputElement.addEventListener("change", this._updateMessageList.bind(this), false);
 
     this._showAllMessagesCheckbox.element.classList.add("hidden");
 
     toolbar.appendToolbarItem(this._showAllMessagesCheckbox);
 
     this._registerShortcuts();
 
     this._messagesElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
     WebInspector.moduleSetting("monitoringXHREnabled").addChangeListener(this._monitoringXHREnabledSettingChanged, this);
 
     this._linkifier = new WebInspector.Linkifier();
 
     /** @type {!Array.<!WebInspector.ConsoleViewMessage>} */
     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);
 
     this._registerWithMessageSink();
     WebInspector.targetManager.observeTargets(this);
 
     this._initConsoleMessages();
 
     WebInspector.context.addFlavorChangeListener(WebInspector.ExecutionContext, this._executionContextChanged, this);
@@ skipping 11 matching lines @@
      * @return {!WebInspector.SearchableView}
      */
     searchableView: function()
     {
         return this._searchableView;
     },
 
     _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()
     {
         var mainTarget = WebInspector.targetManager.mainTarget();
         var resourceTreeModel = mainTarget && WebInspector.ResourceTreeModel.fromTarget(mainTarget);
         var resourcesLoaded = !resourceTreeModel || resourceTreeModel.cachedResourcesLoaded();
         if (!mainTarget || !resourcesLoaded) {
             WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.Events.CachedResourcesLoaded, this._onResourceTreeModelLoaded, this);
             return;
@@ skipping 13 matching lines @@
         this._fetchMultitargetMessages();
     },
 
     _fetchMultitargetMessages: function()
     {
         WebInspector.multitargetConsoleModel.addEventListener(WebInspector.ConsoleModel.Events.ConsoleCleared, this._consoleCleared, this);
         WebInspector.multitargetConsoleModel.addEventListener(WebInspector.ConsoleModel.Events.MessageAdded, this._onConsoleMessageAdded, this);
         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();
     },
 
     /**
      * @override
      * @return {number}
      */
     itemCount: function()
     {
         return this._visibleViewMessages.length;
     },
@@ skipping 88 matching lines @@
     {
         var enabled = /** @type {boolean} */ (event.data);
         this._updateMessageList();
         this._consoleMessages.forEach(function(viewMessage) {
             viewMessage.updateTimestamp(enabled);
         });
     },
 
     _executionContextChanged: function()
     {
-        this._prompt.clearAutoComplete();
+        if (this._prompt)
+            this._prompt.clearAutoComplete();
         if (!this._showAllMessagesCheckbox.checked())
             this._updateMessageList();
     },
 
     willHide: function()
     {
         this._hidePromptSuggestBox();
     },
 
     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()
     {
         if (this._viewport.stickToBottom())
             this._immediatelyScrollToBottom();
         else
             WebInspector.Widget.prototype.restoreScrollPositions.call(this);
     },
 
     onResize: function()
     {
         this._scheduleViewportRefresh();
         this._hidePromptSuggestBox();
         if (this._viewport.stickToBottom())
             this._immediatelyScrollToBottom();
         for (var i = 0; i < this._visibleViewMessages.length; ++i)
             this._visibleViewMessages[i].onResize();
     },
 
     _hidePromptSuggestBox: function()
     {
-        this._prompt.clearAutoComplete();
+        if (this._prompt)
+            this._prompt.clearAutoComplete();
     },
 
     _scheduleViewportRefresh: function()
     {
         /**
          * @this {WebInspector.ConsoleView}
          * @return {!Promise.<undefined>}
          */
         function invalidateViewport()
         {
@@ skipping 166 matching lines @@
             return new WebInspector.ConsoleViewMessage(message, this._linkifier, nestingLevel);
         }
     },
 
     _consoleCleared: function()
     {
         this._currentMatchRangeIndex = -1;
         this._consoleMessages = [];
         this._updateMessageList();
         this._hidePromptSuggestBox();
+        this._viewport.setStickToBottom(true);

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

Nice catch!

         this._linkifier.reset();
     },
 
     _handleContextMenuEvent: function(event)
     {
         if (event.target.enclosingNodeOrSelfWithNodeName("a"))
             return;
 
         var contextMenu = new WebInspector.ContextMenu(event);
         if (event.target.isSelfOrDescendant(this._promptElement)) {
@@ skipping 139 matching lines @@
         var enabled = /** @type {boolean} */ (event.data);
         WebInspector.targetManager.targets().forEach(function(target) {target.networkAgent().setMonitoringXHREnabled(enabled);});
     },
 
     /**
      * @param {!Event} event
      */
     _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;
         var consoleGroupViewMessage = groupMessage.parentElement.message;
         consoleGroupViewMessage.setCollapsed(!consoleGroupViewMessage.collapsed());
         this._updateMessageList();
     },
 
     _registerShortcuts: function()
     {
@@ skipping 29 matching lines @@
                 shortcut.makeDescriptor("P", shortcut.Modifiers.Alt)
             ];
             section.addRelatedKeys(keys, WebInspector.UIString("Next/previous command"));
         }
 
         section.addKey(shortcut.makeDescriptor(shortcut.Keys.Enter), WebInspector.UIString("Execute command"));
     },
 
     _clearPromptBackwards: function()
     {
-        this._prompt.setText("");
+        if (this._prompt)
+            this._prompt.setText("");
     },
 
+    /**
+     * @param {!KeyboardEvent} event
+     */
     _promptKeyDown: function(event)
     {
         if (event.key === "PageUp") {
             this._updateStickToBottomOnWheel();
             return;
         } else if (isEnterKey(event)) {
             this._enterKeyPressed(event);
             return;
         }
 
         var shortcut = WebInspector.KeyboardShortcut.makeKeyFromEvent(event);
         var handler = this._shortcuts[shortcut];
         if (handler) {
             handler();
             event.preventDefault();
         }
     },
 
     _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);
 
         this._prompt.clearAutoComplete();
 
         var str = this._prompt.text();
         if (!str.length)
             return;
         this._appendCommand(str, true);
@@ skipping 18 matching lines @@
         message.setOriginatingMessage(originatingConsoleMessage);
         result.target().consoleModel.addMessage(message);
     },
 
     /**
      * @param {string} text
      * @param {boolean} useCommandLineAPI
      */
     _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);
             if (WebInspector.inspectorView.currentPanel() && WebInspector.inspectorView.currentPanel().name === "console")
                 WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action.CommandEvaluatedInConsolePanel);
         }
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _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));
         this._printResult(data.result, data.commandMessage, data.exceptionDetails);
     },
 
     /**
      * @override
      * @return {!Array.<!Element>}
      */
@@ skipping 559 matching lines @@
             return true;
         }
         return false;
     }
 }
 
 /**
 * @typedef {{messageIndex: number, matchIndex: number}}
 */
 WebInspector.ConsoleView.RegexMatchRange;