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);
 
     // 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._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();
     WebInspector.moduleSetting("consoleTimestampsEnabled").addChangeListener(this._consoleTimestampsSettingChanged, this);
 
     this._registerWithMessageSink();
     WebInspector.targetManager.observeTargets(this);
 
     this._initConsoleMessages();
 
@@ skipping 51 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 101 matching lines @@
     },
 
     willHide: function()
     {
         this._hidePromptSuggestBox();
     },
 
     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()
     {
         if (this._viewport.stickToBottom())
             this._immediatelyScrollToBottom();
         else
             WebInspector.Widget.prototype.restoreScrollPositions.call(this);
     },
 
@@ skipping 189 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);
         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)

[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);
 
         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)

[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);
             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)

[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));
         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;