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 8ec159fc70c3c1f62ed4caa0c863fc533be1e904..d62714cce6f08af2f25343f342517d294a501321 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,8 @@ WebInspector.TextPrompt = function(completions, stopCharacters)
     this._completionStopCharacters = stopCharacters || " =:[({;,!+-*/&|^<>.";
     this._autocompletionTimeout = WebInspector.TextPrompt.DefaultAutocompletionTimeout;
     this._title = "";
+    this._previousText = "";
+    this._currentHintText = "";
     this._completionRequestId = 0;
 }
 
@@ -190,6 +192,7 @@ WebInspector.TextPrompt.prototype = {
         } else {
             this._element.textContent = x;
         }
+        this._previousText = this.userEnteredText();
 
         this.moveCaretToEndOfPrompt();
         this._element.scrollIntoView();
@@ -243,7 +246,7 @@ WebInspector.TextPrompt.prototype = {
             this._element.tabIndex = 0;
         this._focusRestorer = new WebInspector.ElementFocusRestorer(this._element);
         if (!this.text())
-            this._updateAutoComplete();
+            this.autoCompleteSoon();
     },
 
     _stopEditing: function()
@@ -277,14 +280,6 @@ WebInspector.TextPrompt.prototype = {
         this._selectionTimeout = setTimeout(moveBackIfOutside.bind(this), 100);
     },
 
-    /**
-     * @param {boolean=} force
-     */
-    _updateAutoComplete: function(force)
-    {
-        this._clearAutocompleteElement();
-        this.autoCompleteSoon(force);
-    },
 
     /**
      * @param {!Event} event
@@ -303,7 +298,6 @@ WebInspector.TextPrompt.prototype = {
             return;
 
         var handled = false;
-        delete this._needUpdateAutocomplete;
 
         switch (event.key) {
         case "Tab":
@@ -328,7 +322,7 @@ WebInspector.TextPrompt.prototype = {
             break;
         case " ": // Space
             if (event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) {
-                this._updateAutoComplete(true);
+                this.autoCompleteSoon(true);
                 handled = true;
             }
             break;
@@ -342,9 +336,6 @@ WebInspector.TextPrompt.prototype = {
         if (!handled && this.isSuggestBoxVisible())
             handled = this._suggestBox.keyPressed(event);
 
-        if (!handled)
-            this._needUpdateAutocomplete = true;
-
         if (handled)
             event.consume(true);
     },
@@ -354,8 +345,15 @@ WebInspector.TextPrompt.prototype = {
      */
     onInput: function(event)
     {
-        if (this._needUpdateAutocomplete)
-            this._updateAutoComplete();
+        var text = this.userEnteredText();
+        var hasCommonPrefix = text.startsWith(this._previousText) || this._previousText.startsWith(text);
+        if (this._autocompleteElement && hasCommonPrefix)
+            this._autocompleteElement.textContent = this._currentHintText.substring(text.length);

[lushnikov, 2016/10/20 20:49:27]

we should update currentHintText in applySuggestion

[einbinder, 2016/10/20 21:13:47]

Currently applySuggestion doesn't update the hint. It clears it and selects
text.

+        else
+            this._clearAutocompleteElement();
+        this._previousText = text;
+
+        this.autoCompleteSoon();
     },
 
     /**
@@ -381,10 +379,7 @@ WebInspector.TextPrompt.prototype = {
 
     _clearAutocompleteElement: function()
     {
-        if (this._completeTimeout) {
-            clearTimeout(this._completeTimeout);
-            delete this._completeTimeout;
-        }
+        this._clearAutocompleteTimeout();
 
         if (!this._autocompleteElement)
             return;
@@ -395,6 +390,15 @@ WebInspector.TextPrompt.prototype = {
         delete this._userEnteredText;
     },
 
+    _clearAutocompleteTimeout: function()
+    {
+        if (this._completeTimeout) {
+            clearTimeout(this._completeTimeout);
+            delete this._completeTimeout;
+        }
+        this._completionRequestId++;
+    },
+
     /**
      * @param {boolean=} force
      */
@@ -411,7 +415,7 @@ WebInspector.TextPrompt.prototype = {
      */
     complete: function(force, reverse)
     {
-        this.clearAutocomplete();
+        this._clearAutocompleteTimeout();
         var selection = this._element.getComponentSelection();
         var selectionRange = selection && selection.rangeCount ? selection.getRangeAt(0) : null;
         if (!selectionRange)
@@ -426,7 +430,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");
-            if (wordSuffixRange.toString().length)
+            if (wordSuffixRange.toString().length + this.userEnteredText().length - this.text().length)

[lushnikov, 2016/10/20 20:49:27]

Let's put the condition more explicitly, mentioning autocompleteHint

[einbinder, 2016/10/20 21:13:47]

Done.

                 shouldExit = true;
         }
         if (shouldExit) {
@@ -565,8 +569,10 @@ WebInspector.TextPrompt.prototype = {
             var prefixTextNode = createTextNode(prefixText);
             fullWordRange.insertNode(prefixTextNode);
 
-            this._autocompleteElement = createElementWithClass("span", "auto-complete-text");
+            if (!this._autocompleteElement)
+                this._autocompleteElement = createElementWithClass("span", "auto-complete-text");
             this._autocompleteElement.textContent = suffixText;
+            this._currentHintText = completionText;
 
             prefixTextNode.parentNode.insertBefore(this._autocompleteElement, prefixTextNode.nextSibling);