DevTools: Use grey hint text for applied suggestion in TextPrompt

third_party/WebKit/Source/devtools/front_end/ui/TextPrompt.js

Index: third_party/WebKit/Source/devtools/front_end/ui/TextPrompt.js
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 3b03a39af3a76e3b360f30c544051d29c4086e81..99739728fb7a14dea94c477938244e5f7f056354 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/TextPrompt.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/TextPrompt.js
@@ -45,9 +45,11 @@ WebInspector.TextPrompt = function(completions, stopCharacters)
     this._completionStopCharacters = stopCharacters || " =:[({;,!+-*/&|^<>.";
     this._autocompletionTimeout = WebInspector.TextPrompt.DefaultAutocompletionTimeout;
     this._title = "";
+    this._userEnteredRange = null;
     this._previousText = "";
     this._currentHintText = "";
     this._completionRequestId = 0;
+    this._autocompleteElement = createElementWithClass("span", "auto-complete-text");
 }
 
 WebInspector.TextPrompt.DefaultAutocompletionTimeout = 250;
@@ -140,7 +142,7 @@ WebInspector.TextPrompt.prototype = {
         this._element.ownerDocument.defaultView.addEventListener("resize", this._boundClearAutocomplete, false);
 
         if (this._suggestBoxEnabled)
-            this._suggestBox = new WebInspector.SuggestBox(this);
+            this._suggestBox = new WebInspector.SuggestBox(this, 20, true);
 
         if (this._title)
             this._proxyElement.title = this._title;
@@ -172,7 +174,7 @@ WebInspector.TextPrompt.prototype = {
     userEnteredText: function()
     {
         var text = this.text();
-        if (this._autocompleteElement) {
+        if (this._autocompleteElement.parentNode) {
             var addition = this._autocompleteElement.textContent;
             text = text.substring(0, text.length - addition.length);
         }
@@ -280,7 +282,6 @@ WebInspector.TextPrompt.prototype = {
         this._selectionTimeout = setTimeout(moveBackIfOutside.bind(this), 100);
     },
 
-
     /**
      * @param {!Event} event
      */
@@ -294,9 +295,6 @@ WebInspector.TextPrompt.prototype = {
      */
     onKeyDown: function(event)
     {
-        if (isEnterKey(event))
-            return;
-
         var handled = false;
 
         switch (event.key) {
@@ -346,8 +344,7 @@ WebInspector.TextPrompt.prototype = {
     onInput: function(event)
     {
         var text = this.userEnteredText();
-        var hasCommonPrefix = text.startsWith(this._previousText) || this._previousText.startsWith(text);
-        if (this._autocompleteElement && hasCommonPrefix)
+        if (text.startsWith(this._previousText) || this._previousText.startsWith(text))
             this._autocompleteElement.textContent = this._currentHintText.substring(text.length);

[einbinder, 2016/10/21 23:52:20]

broken

         else
             this._clearAutocompleteElement();
@@ -381,13 +378,20 @@ WebInspector.TextPrompt.prototype = {
     {
         this._clearAutocompleteTimeout();
 
-        if (!this._autocompleteElement)
-            return;
-
         this._autocompleteElement.remove();
-        delete this._autocompleteElement;
-        delete this._userEnteredRange;
-        delete this._userEnteredText;
+        this._userEnteredRange = null;
+    },
+
+    /**
+     * @param {string} text
+     */
+    _setAutocompleteText: function(text)
+    {
+        if (this.isCaretAtEndOfPrompt()) {
+            this._autocompleteElement.textContent = text.substring(this._userEnteredRange.toString().length);
+            this._element.appendChild(this._autocompleteElement);
+        }
+        this._currentHintText = text;
     },
 
     _clearAutocompleteTimeout: function()
@@ -430,7 +434,7 @@ WebInspector.TextPrompt.prototype = {
         else if (!force) {
             // BUG72018: Do not show suggest box if caret is followed by a non-stop character.
             var wordSuffixRange = selectionRange.startContainer.rangeOfWord(selectionRange.endOffset, this._completionStopCharacters, this._element, "forward");
-            var autocompleteTextLength = (this._autocompleteElement && this._autocompleteElement.parentNode) ? this._autocompleteElement.textContent.length : 0;
+            var autocompleteTextLength = (this._autocompleteElement.parentNode) ? this._autocompleteElement.textContent.length : 0;
             if (wordSuffixRange.toString().length !== autocompleteTextLength)
                 shouldExit = true;
         }
@@ -527,41 +531,13 @@ WebInspector.TextPrompt.prototype = {
 
         selectedIndex = (this._disableDefaultSuggestionForEmptyInput && !this.text()) ? -1 : (selectedIndex || 0);
 
-        this._userEnteredRange = fullWordRange;
-        this._userEnteredText = fullWordRange.toString();
-
         if (this._suggestBox)
-            this._suggestBox.updateSuggestions(this._boxForAnchorAtStart(selection, fullWordRange), annotatedCompletions, selectedIndex, !this.isCaretAtEndOfPrompt(), this._userEnteredText);
+            this._suggestBox.updateSuggestions(this._boxForAnchorAtStart(selection, fullWordRange), annotatedCompletions, selectedIndex, !this.isCaretAtEndOfPrompt(), this.userEnteredText());
 
         if (selectedIndex === -1)
             return;
-
-        var wordPrefixLength = originalWordPrefixRange.toString().length;
-
-        if (this.isCaretAtEndOfPrompt()) {
-            var completionText = annotatedCompletions[selectedIndex].title;
-            var prefixText = this._userEnteredRange.toString();
-            var suffixText = completionText.substring(wordPrefixLength);
-            this._userEnteredRange.deleteContents();
-            this._element.normalize();
-            var finalSelectionRange = this._createRange();
-
-            var prefixTextNode = createTextNode(prefixText);
-            fullWordRange.insertNode(prefixTextNode);
-
-            if (!this._autocompleteElement)
-                this._autocompleteElement = createElementWithClass("span", "auto-complete-text");
-            this._autocompleteElement.textContent = suffixText;
-            this._currentHintText = completionText;
-
-            prefixTextNode.parentNode.insertBefore(this._autocompleteElement, prefixTextNode.nextSibling);
-
-            finalSelectionRange.setStart(prefixTextNode, wordPrefixLength);
-            finalSelectionRange.setEnd(prefixTextNode, wordPrefixLength);
-            selection.removeAllRanges();
-            selection.addRange(finalSelectionRange);
-            this.dispatchEventToListeners(WebInspector.TextPrompt.Events.ItemApplied);
-        }
+        this._userEnteredRange = fullWordRange;
+        this.applySuggestion(annotatedCompletions[selectedIndex].title, true);
     },
 
     /**
@@ -571,44 +547,11 @@ WebInspector.TextPrompt.prototype = {
      */
     applySuggestion: function(completionText, isIntermediateSuggestion)
     {
-        this._applySuggestion(completionText, isIntermediateSuggestion);
-    },
-
-    /**
-     * @param {string} completionText
-     * @param {boolean=} isIntermediateSuggestion
-     */
-    _applySuggestion: function(completionText, isIntermediateSuggestion)
-    {
-        if (!this._userEnteredRange) {
-            // We could have already cleared autocompletion range by the time this is called. (crbug.com/587683)
+        if (!this._userEnteredRange)
             return;
-        }
-
-        var wordPrefixLength = this._userEnteredText ? this._userEnteredText.length : 0;
-
-        this._userEnteredRange.deleteContents();
-        this._element.normalize();
-        var finalSelectionRange = this._createRange();
-        var completionTextNode = createTextNode(completionText);
-        this._userEnteredRange.insertNode(completionTextNode);
-        if (this._autocompleteElement) {
-            this._autocompleteElement.remove();
-            delete this._autocompleteElement;
-        }
-
+        this._setAutocompleteText(completionText);
         if (isIntermediateSuggestion)
-            finalSelectionRange.setStart(completionTextNode, wordPrefixLength);
-        else
-            finalSelectionRange.setStart(completionTextNode, completionText.length);
-
-        finalSelectionRange.setEnd(completionTextNode, completionText.length);
-
-        var selection = this._element.getComponentSelection();
-        selection.removeAllRanges();
-        selection.addRange(finalSelectionRange);
-        if (isIntermediateSuggestion)
-            this.dispatchEventToListeners(WebInspector.TextPrompt.Events.ItemApplied, { itemText: completionText });
+            this.dispatchEventToListeners(WebInspector.TextPrompt.Events.ItemApplied);
     },
 
     /**
@@ -624,14 +567,14 @@ WebInspector.TextPrompt.prototype = {
      */
     _acceptSuggestionInternal: function()
     {
-        if (!this._autocompleteElement || !this._autocompleteElement.parentNode)
+        if (!this._userEnteredRange)
             return false;
 
-        var text = this._autocompleteElement.textContent;
+        var text = this._currentHintText;
         var textNode = createTextNode(text);
-        this._autocompleteElement.parentNode.replaceChild(textNode, this._autocompleteElement);
-        delete this._autocompleteElement;
-
+        this._autocompleteElement.remove();
+        this._userEnteredRange.deleteContents();
+        this._userEnteredRange.insertNode(textNode);
         var finalSelectionRange = this._createRange();
         finalSelectionRange.setStart(textNode, text.length);
         finalSelectionRange.setEnd(textNode, text.length);
@@ -687,7 +630,7 @@ WebInspector.TextPrompt.prototype = {
         var foundNextText = false;
         while (node) {
             if (node.nodeType === Node.TEXT_NODE && node.nodeValue.length) {
-                if (foundNextText && (!this._autocompleteElement || !this._autocompleteElement.isAncestor(node)))
+                if (foundNextText && !this._autocompleteElement.isAncestor(node))
                     return false;
                 foundNextText = true;
             }