DevTools: Fix flickering hint when typing 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 839f4b9bc35705059205e754168429f1a2463eca..5f93fe58556ec66b6c864d8ab1a0b496a40d80f1 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/TextPrompt.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/TextPrompt.js
@@ -45,6 +45,7 @@ WebInspector.TextPrompt = function(completions, stopCharacters)
     this._completionStopCharacters = stopCharacters || " =:[({;,!+-*/&|^<>.";
     this._autocompletionTimeout = WebInspector.TextPrompt.DefaultAutocompletionTimeout;
     this._title = "";
+    this._previousText = "";
 }
 
 WebInspector.TextPrompt.DefaultAutocompletionTimeout = 250;
@@ -189,6 +190,7 @@ WebInspector.TextPrompt.prototype = {
         } else {
             this._element.textContent = x;
         }
+        this._previousText = this.userEnteredText();
 
         this.moveCaretToEndOfPrompt();
         this._element.scrollIntoView();
@@ -287,7 +289,14 @@ WebInspector.TextPrompt.prototype = {
      */
     _updateAutoComplete: function(force)
     {
-        this.clearAutoComplete();
+        var singleCharInput = false;
+        var singleCharDelete = false;
+        var text = this.userEnteredText();
+        if (this._previousText === text.substring(0, text.length - 1))
+            singleCharInput = true;
+        else if (this._previousText.substring(0, this._previousText.length - 1) === text)
+            singleCharDelete = true;
+        this.clearAutoComplete(false, singleCharInput, singleCharDelete);
         this.autoCompleteSoon(force);
     },
 
@@ -361,6 +370,7 @@ WebInspector.TextPrompt.prototype = {
     {
         if (this._needUpdateAutocomplete)
             this._updateAutoComplete();
+        this._previousText = this.userEnteredText();
     },
 
     /**
@@ -379,24 +389,41 @@ WebInspector.TextPrompt.prototype = {
 
     /**
      * @param {boolean=} includeTimeout
+     * @param {boolean=} singleCharInput
+     * @param {boolean=} singleDeleteChar
      */
-    clearAutoComplete: function(includeTimeout)
+    clearAutoComplete: function(includeTimeout, singleCharInput, singleDeleteChar)

[lushnikov, 2016/08/29 22:10:41]

why are these arguments a part of public interface?  They feel like an
implementation detail

[einbinder, 2016/08/30 22:22:35]

Done.

     {
-        if (includeTimeout && this._completeTimeout) {
-            clearTimeout(this._completeTimeout);
-            delete this._completeTimeout;
-        }
+
+        if (includeTimeout)
+            this._clearAutocompleteTimeout();
+
         delete this._waitingForCompletions;
 
         if (!this.autoCompleteElement)
             return;
-
-        this.autoCompleteElement.remove();
-        delete this.autoCompleteElement;
+        if (singleCharInput) {
+            this._hintPrefix += this.autoCompleteElement.textContent.charAt(0);
+            this.autoCompleteElement.textContent = this.autoCompleteElement.textContent.substring(1);
+        } else if (singleDeleteChar && this._hintPrefix) {
+            this.autoCompleteElement.textContent = this._hintPrefix.charAt(this._hintPrefix.length - 1) + this.autoCompleteElement.textContent;
+            this._hintPrefix = this._hintPrefix.substring(0, this._hintPrefix.length - 1);
+        } else {
+            this.autoCompleteElement.remove();
+            delete this.autoCompleteElement;
+        }
         delete this._userEnteredRange;
         delete this._userEnteredText;
     },
 
+    _clearAutocompleteTimeout: function()
+    {
+        if (this._completeTimeout) {
+            clearTimeout(this._completeTimeout);
+            delete this._completeTimeout;
+        }
+    },
+
     /**
      * @param {boolean=} force
      */
@@ -413,7 +440,7 @@ WebInspector.TextPrompt.prototype = {
      */
     complete: function(force, reverse)
     {
-        this.clearAutoComplete(true);
+        this._clearAutocompleteTimeout();
         var selection = this._element.getComponentSelection();
         var selectionRange = selection && selection.rangeCount ? selection.getRangeAt(0) : null;
         if (!selectionRange)
@@ -428,11 +455,11 @@ 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");
-            if (wordSuffixRange.toString().length)
+            if (wordSuffixRange.toString().length + this.userEnteredText().length - this.text().length)
                 shouldExit = true;
         }
         if (shouldExit) {
-            this.hideSuggestBox();
+            this._removeSuggestionAids();
             return;
         }
 
@@ -526,7 +553,7 @@ WebInspector.TextPrompt.prototype = {
         }
 
         if (!this._waitingForCompletions || !annotatedCompletions.length) {
-            this.hideSuggestBox();
+            this._removeSuggestionAids();
             return;
         }
 
@@ -566,8 +593,11 @@ WebInspector.TextPrompt.prototype = {
             var prefixTextNode = createTextNode(prefixText);
             fullWordRange.insertNode(prefixTextNode);
 
+            if (this.autoCompleteElement)
+                this.autoCompleteElement.remove();
             this.autoCompleteElement = createElementWithClass("span", "auto-complete-text");
             this.autoCompleteElement.textContent = suffixText;
+            this._hintPrefix = completionText.substring(0, wordPrefixLength);
 
             prefixTextNode.parentNode.insertBefore(this.autoCompleteElement, prefixTextNode.nextSibling);