DevTools: Fix flickering hint when typing in TextPrompt

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

 /*
  * Copyright (C) 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  *
  * 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 27 matching lines @@
 {
     /**
      * @type {!Element|undefined}
      */
     this._proxyElement;
     this._proxyElementDisplay = "inline-block";
     this._loadCompletions = completions;
     this._completionStopCharacters = stopCharacters || " =:[({;,!+-*/&|^<>.";
     this._autocompletionTimeout = WebInspector.TextPrompt.DefaultAutocompletionTimeout;
     this._title = "";
+    this._previousText = "";
 }
 
 WebInspector.TextPrompt.DefaultAutocompletionTimeout = 250;
 
 /** @enum {symbol} */
 WebInspector.TextPrompt.Events = {
     ItemApplied: Symbol("text-prompt-item-applied"),
     ItemAccepted: Symbol("text-prompt-item-accepted")
 };
 
@@ skipping 124 matching lines @@
     setText: function(x)
     {
         this._removeSuggestionAids();
         if (!x) {
             // Append a break element instead of setting textContent to make sure the selection is inside the prompt.
             this._element.removeChildren();
             this._element.createChild("br");
         } else {
             this._element.textContent = x;
         }
+        this._previousText = this.userEnteredText();
 
         this.moveCaretToEndOfPrompt();
         this._element.scrollIntoView();
     },
 
     /**
      * @return {string}
      */
     title: function()
     {
@@ skipping 78 matching lines @@
         }
 
         this._selectionTimeout = setTimeout(moveBackIfOutside.bind(this), 100);
     },
 
     /**
      * @param {boolean=} force
      */
     _updateAutoComplete: function(force)
     {
-        this.clearAutoComplete();
+        var clearHint = true;
+        if (this.autoCompleteElement) {

[lushnikov, 2016/09/01 21:25:33]

can we hide autoCompleteElement inside text prompt in a follow-up? It's a pity
someone reaches right into it.

[einbinder, 2016/09/01 23:28:46]

Yes, I am planning a TextPrompt rewrite/refactor.

+            var text = this.userEnteredText();
+            if (this._previousText === text.substring(0, text.length - 1)) {

[lushnikov, 2016/09/01 21:25:33]

can we generalize this to the "this.userEnteredText() is prefix of previous
text"?

[einbinder, 2016/09/01 23:28:46]

No, it's checking that exactly one character was deleted.

+                this._hintPrefix += this.autoCompleteElement.textContent.charAt(0);
+                this.autoCompleteElement.textContent = this.autoCompleteElement.textContent.substring(1);
+                clearHint = false;
+            }

[lushnikov, 2016/09/01 21:25:33]

nit: else on the same line as "}"

[einbinder, 2016/09/01 23:28:46]

Done.

+            else if (this._previousText.substring(0, this._previousText.length - 1) === text) {
+                this.autoCompleteElement.textContent = this._hintPrefix.charAt(this._hintPrefix.length - 1) + this.autoCompleteElement.textContent;
+                this._hintPrefix = this._hintPrefix.substring(0, this._hintPrefix.length - 1);
+                clearHint = false;
+            }
+        }
+        if (clearHint)
+            this.clearAutoComplete(false);
+        delete this._waitingForCompletions;
         this.autoCompleteSoon(force);
     },
 
     /**
      * @param {!Event} event
      */
     onMouseWheel: function(event)
     {
         // Subclasses can implement.
     },
@@ skipping 53 matching lines @@
             event.consume(true);
     },
 
     /**
      * @param {!Event} event
      */
     onInput: function(event)
     {
         if (this._needUpdateAutocomplete)
             this._updateAutoComplete();
+        this._previousText = this.userEnteredText();
     },
 
     /**
      * @return {boolean}
      */
     acceptAutoComplete: function()
     {
         var result = false;
         if (this.isSuggestBoxVisible())
             result = this._suggestBox.acceptSuggestion();
         if (!result)
             result = this._acceptSuggestionInternal();
 
         return result;
     },
 
     /**
      * @param {boolean=} includeTimeout
      */
     clearAutoComplete: function(includeTimeout)

[lushnikov, 2016/09/01 21:25:33]

I'm confused with TextPrompt API.

So there are three methods which in some way hide autocomplete:
- clearAutoComplete - cleans grey text
- hideSuggestBox - hides suggest box
- _removeCompletionAids - does both clearAutoComplete and hideSuggestBox

In which situation clients of TextPrompt need to call either clearAutoComlpete
or hideSuggestBox, and
not both?

[einbinder, 2016/09/01 23:28:46]

I think we can get away with always hiding SuggestBox.

     {
-        if (includeTimeout && this._completeTimeout) {
-            clearTimeout(this._completeTimeout);
-            delete this._completeTimeout;
-        }
+        if (includeTimeout)

[lushnikov, 2016/09/01 21:25:33]

why would anyone ever want to call this with includeTimeout === false?

[einbinder, 2016/09/01 23:28:46]

I don't think there is a good reason.

+            this._clearAutocompleteTimeout();
+
         delete this._waitingForCompletions;
 
         if (!this.autoCompleteElement)
             return;
 
         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
      */
     autoCompleteSoon: function(force)
     {
         var immediately = this.isSuggestBoxVisible() || force;
         if (!this._completeTimeout)
             this._completeTimeout = setTimeout(this.complete.bind(this, force), immediately ? 0 : this._autocompletionTimeout);
     },
 
     /**
      * @param {boolean=} force
      * @param {boolean=} reverse
      */
     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)
             return;
 
         var shouldExit;
 
         if (!force && !this.isCaretAtEndOfPrompt() && !this.isSuggestBoxVisible())
             shouldExit = true;
         else if (!selection.isCollapsed)
             shouldExit = true;
         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;
         }
 
         var wordPrefixRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, this._completionStopCharacters, this._element, "backward");
         this._waitingForCompletions = true;
         this._loadCompletions(/** @type {!Element} */ (this._proxyElement), wordPrefixRange, force || false, this._completionsReady.bind(this, selection, wordPrefixRange, !!reverse, !!force));
     },
 
     disableDefaultSuggestionForEmptyInput: function()
     {
@@ skipping 73 matching lines @@
         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 || !annotatedCompletions.length) {
-            this.hideSuggestBox();
+            this._removeSuggestionAids();
             return;
         }
 
         delete this._waitingForCompletions;
 
         var selectionRange = selection.getRangeAt(0);
 
         var fullWordRange = this._createRange();
         fullWordRange.setStart(originalWordPrefixRange.startContainer, originalWordPrefixRange.startOffset);
         fullWordRange.setEnd(selectionRange.endContainer, selectionRange.endOffset);
@@ skipping 19 matching lines @@
             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);
 
-            this.autoCompleteElement = createElementWithClass("span", "auto-complete-text");
+            if (!this.autoCompleteElement)
+                this.autoCompleteElement = createElementWithClass("span", "auto-complete-text");
             this.autoCompleteElement.textContent = suffixText;
+            this._hintPrefix = completionText.substring(0, wordPrefixLength);
 
             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);
         }
     },
@@ skipping 449 matching lines @@
     },
 
     /**
      * @return {string|undefined}
      */
     _currentHistoryItem: function()
     {
         return this._data[this._data.length - this._historyOffset];
     }
 };