DevTools: [ux regression] There is no way to clear console history.

BUG=594342

Review URL: https://codereview.chromium.org/1820393002

Cr-Commit-Position: refs/heads/master@{#383174}

9 files changed, 89 insertions, 37 deletions

diff --git a/third_party/WebKit/Source/devtools/front_end/Tests.js b/third_party/WebKit/Source/devtools/front_end/Tests.js
index 81e0557..af9d033 100644
--- a/third_party/WebKit/Source/devtools/front_end/Tests.js
+++ b/third_party/WebKit/Source/devtools/front_end/Tests.js
@@ -978,7 +978,7 @@ TestSuite.prototype.evaluateInConsole_ = function(code, callback)
     function innerEvaluate()
     {
         WebInspector.context.removeFlavorChangeListener(WebInspector.ExecutionContext, showConsoleAndEvaluate, this);
-        var consoleView = WebInspector.ConsolePanel._view();
+        var consoleView = WebInspector.ConsoleView.instance();
         consoleView._prompt.setText(code);
         consoleView._promptElement.dispatchEvent(TestSuite.createKeyEvent("Enter"));
 
diff --git a/third_party/WebKit/Source/devtools/front_end/console/ConsolePanel.js b/third_party/WebKit/Source/devtools/front_end/console/ConsolePanel.js
index fae8e44..47a5027 100644
--- a/third_party/WebKit/Source/devtools/front_end/console/ConsolePanel.js
+++ b/third_party/WebKit/Source/devtools/front_end/console/ConsolePanel.js
@@ -33,18 +33,7 @@
 WebInspector.ConsolePanel = function()
 {
     WebInspector.Panel.call(this, "console");
-    this._view = WebInspector.ConsolePanel._view();
-}
-
-/**
- * @return {!WebInspector.ConsoleView}
- */
-WebInspector.ConsolePanel._view = function()
-{
-    if (!WebInspector.ConsolePanel._consoleView)
-        WebInspector.ConsolePanel._consoleView = new WebInspector.ConsoleView();
-
-    return WebInspector.ConsolePanel._consoleView;
+    this._view = WebInspector.ConsoleView.instance();
 }
 
 WebInspector.ConsolePanel.prototype = {
@@ -86,7 +75,7 @@ WebInspector.ConsolePanel.prototype = {
      */
     searchableView: function()
     {
-        return WebInspector.ConsolePanel._view().searchableView();
+        return WebInspector.ConsoleView.instance().searchableView();
     },
 
     __proto__: WebInspector.Panel.prototype
@@ -103,7 +92,7 @@ WebInspector.ConsolePanel.WrapperView = function()
 
     WebInspector.ConsolePanel.WrapperView._instance = this;
 
-    this._view = WebInspector.ConsolePanel._view();
+    this._view = WebInspector.ConsoleView.instance();
 }
 
 WebInspector.ConsolePanel.WrapperView.prototype = {
@@ -158,7 +147,7 @@ WebInspector.ConsolePanel.ConsoleRevealer.prototype = {
      */
     reveal: function(object)
     {
-        var consoleView = WebInspector.ConsolePanel._view();
+        var consoleView = WebInspector.ConsoleView.instance();
         if (consoleView.isShowing()) {
             consoleView.focus();
             return Promise.resolve();
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 da86d91..8513478 100644
--- a/third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js
+++ b/third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js
@@ -164,6 +164,12 @@ WebInspector.ConsoleView.prototype = {
         return this._searchableView;
     },
 
+    _clearHistory: function()
+    {
+        this._consoleHistorySetting.set([]);
+        this._prompt.setHistoryData([]);
+    },
+
     /**
      * @param {!WebInspector.Event} event
      */
@@ -578,6 +584,7 @@ WebInspector.ConsoleView.prototype = {
 
         contextMenu.appendSeparator();
         contextMenu.appendAction("console.clear");
+        contextMenu.appendAction("console.clear.history");
         contextMenu.appendItem(WebInspector.UIString("Save as..."), this._saveConsole.bind(this));
 
         var request = consoleMessage ? consoleMessage.request : null;
@@ -1275,6 +1282,16 @@ WebInspector.ConsoleGroup.prototype = {
 }
 
 /**
+ * @return {!WebInspector.ConsoleView}
+ */
+WebInspector.ConsoleView.instance = function()
+{
+    if (!WebInspector.ConsoleView._instance)
+        WebInspector.ConsoleView._instance = new WebInspector.ConsoleView();
+    return WebInspector.ConsoleView._instance;
+}
+
+/**
  * @constructor
  * @implements {WebInspector.ActionDelegate}
  */
@@ -1298,6 +1315,9 @@ WebInspector.ConsoleView.ActionDelegate.prototype = {
         case "console.clear":
             WebInspector.ConsoleModel.clearConsole();
             return true;
+        case "console.clear.history":
+            WebInspector.ConsoleView.instance()._clearHistory();
+            return true;
         }
         return false;
     }
diff --git a/third_party/WebKit/Source/devtools/front_end/console/module.json b/third_party/WebKit/Source/devtools/front_end/console/module.json
index 181d9e0..2cdde58 100644
--- a/third_party/WebKit/Source/devtools/front_end/console/module.json
+++ b/third_party/WebKit/Source/devtools/front_end/console/module.json
@@ -49,6 +49,13 @@
             ]
         },
         {
+            "type": "@WebInspector.ActionDelegate",
+            "category": "Console",
+            "actionId": "console.clear.history",
+            "title": "Clear console history",
+            "className": "WebInspector.ConsoleView.ActionDelegate"
+        },
+        {
             "type": "setting",
             "category": "Console",
             "title": "Hide network messages",
diff --git a/third_party/WebKit/Source/devtools/front_end/source_frame/TextEditorAutocompleteController.js b/third_party/WebKit/Source/devtools/front_end/source_frame/TextEditorAutocompleteController.js
index fc75538..3c96b05 100644
--- a/third_party/WebKit/Source/devtools/front_end/source_frame/TextEditorAutocompleteController.js
+++ b/third_party/WebKit/Source/devtools/front_end/source_frame/TextEditorAutocompleteController.js
@@ -138,7 +138,7 @@ WebInspector.TextEditorAutocompleteController.prototype = {
         this._prefixRange = prefixRange;
         if (!oldPrefixRange || prefixRange.startLine !== oldPrefixRange.startLine || prefixRange.startColumn !== oldPrefixRange.startColumn)
             this._updateAnchorBox();
-        this._suggestBox.updateSuggestions(this._anchorBox, wordsWithPrefix, 0, true, this._textEditor.copyRange(prefixRange));
+        this._suggestBox.updateSuggestions(this._anchorBox, wordsWithPrefix.map(item => ({title: item})), 0, true, this._textEditor.copyRange(prefixRange));
         if (!this._suggestBox.visible())
             this.finishAutocomplete();
         this._onSuggestionsShownForTest(wordsWithPrefix);
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/FilterBar.js b/third_party/WebKit/Source/devtools/front_end/ui/FilterBar.js
index 281deb6..455cc11 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/FilterBar.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/FilterBar.js
@@ -348,7 +348,7 @@ WebInspector.TextFilterUI.prototype = {
             else
                 this._suggestionBuilder.applySuggestion(this._filterInputElement, suggestions[0], true);
             var anchorBox = this._filterInputElement.boxInWindow().relativeTo(new AnchorBox(-3, 0));
-            this._suggestBox.updateSuggestions(anchorBox, suggestions, 0, true, "");
+            this._suggestBox.updateSuggestions(anchorBox, suggestions.map(item => ({title: item})), 0, true, "");
         } else {
             this._suggestBox.hide();
         }
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js b/third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js
index f1cb273..188772d 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js
@@ -71,6 +71,11 @@ WebInspector.SuggestBox = function(suggestBoxDelegate, maxItemsHeight)
     this._asyncDetailsPromises = new Map();
 }
 
+/**
+ * @typedef Array.<{title: string, className: (string|undefined)}>
+ */
+WebInspector.SuggestBox.Suggestions;
+
 WebInspector.SuggestBox.prototype = {
     /**
      * @return {boolean}
@@ -240,11 +245,12 @@ WebInspector.SuggestBox.prototype = {
     /**
      * @param {string} prefix
      * @param {string} text
+     * @param {string|undefined} className
      * @param {number} index
      */
-    _createItemElement: function(prefix, text, index)
+    _createItemElement: function(prefix, text, className, index)
     {
-        var element = createElementWithClass("div", "suggest-box-content-item source-code");
+        var element = createElementWithClass("div", "suggest-box-content-item source-code " + (className || ""));
         element.tabIndex = -1;
         if (prefix && prefix.length && !text.indexOf(prefix)) {
             element.createChild("span", "prefix").textContent = prefix;
@@ -259,7 +265,7 @@ WebInspector.SuggestBox.prototype = {
     },
 
     /**
-     * @param {!Array.<string>} items
+     * @param {!WebInspector.SuggestBox.Suggestions} items
      * @param {string} userEnteredText
      * @param {function(number): !Promise<{detail:string, description:string}>=} asyncDetails
      */
@@ -273,7 +279,7 @@ WebInspector.SuggestBox.prototype = {
 
         for (var i = 0; i < items.length; ++i) {
             var item = items[i];
-            var currentItemElement = this._createItemElement(userEnteredText, item, i);
+            var currentItemElement = this._createItemElement(userEnteredText, item.title, item.className, i);
             this._element.appendChild(currentItemElement);
         }
     },
@@ -338,7 +344,7 @@ WebInspector.SuggestBox.prototype = {
     },
 
     /**
-     * @param {!Array.<string>} completions
+     * @param {!WebInspector.SuggestBox.Suggestions} completions
      * @param {boolean} canShowForSingleItem
      * @param {string} userEnteredText
      */
@@ -351,7 +357,7 @@ WebInspector.SuggestBox.prototype = {
             return true;
 
         // Do not show a single suggestion if it is the same as user-entered prefix, even if allowed to show single-item suggest boxes.
-        return canShowForSingleItem && completions[0] !== userEnteredText;
+        return canShowForSingleItem && completions[0].title !== userEnteredText;
     },
 
     _ensureRowCountPerViewport: function()
@@ -366,7 +372,7 @@ WebInspector.SuggestBox.prototype = {
 
     /**
      * @param {!AnchorBox} anchorBox
-     * @param {!Array.<string>} completions
+     * @param {!WebInspector.SuggestBox.Suggestions} completions
      * @param {number} selectedIndex
      * @param {boolean} canShowForSingleItem
      * @param {string} userEnteredText
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/TextPrompt.js b/third_party/WebKit/Source/devtools/front_end/ui/TextPrompt.js
index 84e2a53..79952d3 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/TextPrompt.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/TextPrompt.js
@@ -471,7 +471,7 @@ WebInspector.TextPrompt.prototype = {
 
     /**
      * @param {string} prefix
-     * @return {!Array.<string>}
+     * @return {!WebInspector.SuggestBox.Suggestions}
      */
     additionalCompletions: function(prefix)
     {
@@ -489,18 +489,20 @@ WebInspector.TextPrompt.prototype = {
     _completionsReady: function(selection, originalWordPrefixRange, reverse, force, completions, selectedIndex)
     {
         var prefix = originalWordPrefixRange.toString();
-        if (prefix || force) {
-            if (prefix)
-                completions = completions.concat(this.additionalCompletions(prefix));
-            else
-                completions = this.additionalCompletions(prefix).concat(completions);
-        }
 
         // Filter out dupes.
         var store = new Set();
         completions = completions.filter(item => !store.has(item) && !!store.add(item));
+        var annotatedCompletions = completions.map(item => ({title: item}));
+
+        if (prefix || force) {
+            if (prefix)
+                annotatedCompletions = annotatedCompletions.concat(this.additionalCompletions(prefix));
+            else
+                annotatedCompletions = this.additionalCompletions(prefix).concat(annotatedCompletions);
+        }
 
-        if (!this._waitingForCompletions || !completions.length) {
+        if (!this._waitingForCompletions || !annotatedCompletions.length) {
             this.hideSuggestBox();
             return;
         }
@@ -522,7 +524,7 @@ WebInspector.TextPrompt.prototype = {
         this._userEnteredText = fullWordRange.toString();
 
         if (this._suggestBox)
-            this._suggestBox.updateSuggestions(this._boxForAnchorAtStart(selection, fullWordRange), completions, selectedIndex, !this.isCaretAtEndOfPrompt(), this._userEnteredText);
+            this._suggestBox.updateSuggestions(this._boxForAnchorAtStart(selection, fullWordRange), annotatedCompletions, selectedIndex, !this.isCaretAtEndOfPrompt(), this._userEnteredText);
 
         if (selectedIndex === -1)
             return;
@@ -531,7 +533,7 @@ WebInspector.TextPrompt.prototype = {
         this._commonPrefix = this._buildCommonPrefix(completions, wordPrefixLength);
 
         if (this.isCaretAtEndOfPrompt()) {
-            var completionText = completions[selectedIndex];
+            var completionText = annotatedCompletions[selectedIndex].title;
             var prefixText = this._userEnteredRange.toString();
             var suffixText = completionText.substring(wordPrefixLength);
             this._userEnteredRange.deleteContents();
@@ -827,7 +829,7 @@ WebInspector.TextPromptWithHistory.prototype = {
     /**
      * @override
      * @param {string} prefix
-     * @return {!Array.<string>}
+     * @return {!WebInspector.SuggestBox.Suggestions}
      */
     additionalCompletions: function(prefix)
     {
@@ -835,11 +837,15 @@ WebInspector.TextPromptWithHistory.prototype = {
             return [];
         var result = [];
         var text = this.text();
+        var set = new Set();
         for (var i = this._data.length - 1; i >= 0 && result.length < 50; --i) {
             var item = this._data[i];
             if (!item.startsWith(text))
                 continue;
-            result.push(item.substring(text.length - prefix.length));
+            if (set.has(item))
+                continue;
+            set.add(item);
+            result.push({title: item.substring(text.length - prefix.length), className: "additional"});
         }
         return result;
     },
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/suggestBox.css b/third_party/WebKit/Source/devtools/front_end/ui/suggestBox.css
index 4752503..e33ff52 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/suggestBox.css
+++ b/third_party/WebKit/Source/devtools/front_end/ui/suggestBox.css
@@ -91,6 +91,30 @@
     white-space: nowrap;
 }
 
+.suggest-box .suggest-box-content-item.additional {
+    background-color: #f9f9f9;
+}
+
+.suggest-box .suggest-box-content-item.additional::before {
+    display: inline-block;
+    content: "";
+    -webkit-user-select: none;
+    background-image: url(Images/toolbarButtonGlyphs.png);
+    background-size: 352px 168px;
+    width: 10px;
+    height: 10px;
+    position: relative;
+    top: 2px;
+    margin-right: 4px;
+    background-position: -192px -96px;
+}
+
+@media (-webkit-min-device-pixel-ratio: 1.5) {
+.suggest-box .suggest-box-content-item.additional::before {
+    background-image: url(Images/toolbarButtonGlyphs_2x.png);
+}
+} /* media */
+
 .suggest-box .suggest-box-content-item .prefix {
     font-weight: bold;
 }