DevTools: Use grey hint text for applied suggestion 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._prefixRange = null;
     this._previousText = "";
     this._currentHintText = "";
     this._completionRequestId = 0;
+    this._autocompleteElement = createElementWithClass("span", "auto-complete-text");
 }
 
 WebInspector.TextPrompt.DefaultAutocompletionTimeout = 250;
 
 /** @enum {symbol} */
 WebInspector.TextPrompt.Events = {
     ItemApplied: Symbol("text-prompt-item-applied"),
     ItemAccepted: Symbol("text-prompt-item-accepted")
 };
 
@@ skipping 72 matching lines @@
         this._proxyElement.appendChild(element);
         this._element.classList.add("text-prompt");
         this._element.addEventListener("keydown", this._boundOnKeyDown, false);
         this._element.addEventListener("input", this._boundOnInput, false);
         this._element.addEventListener("mousewheel", this._boundOnMouseWheel, false);
         this._element.addEventListener("selectstart", this._boundSelectStart, false);
         this._element.addEventListener("blur", this._boundClearAutocomplete, false);
         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;
 
         return this._proxyElement;
     },
 
     detach: function()
     {
         this._removeFromElement();
@@ skipping 11 matching lines @@
     {
         return this._element.textContent;
     },
 
     /**
      * @return {string}
      */
     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);
         }
         return text;
     },
 
     /**
      * @param {string} x
      */
     setText: function(x)
@@ skipping 77 matching lines @@
         if (this._selectionTimeout)
             clearTimeout(this._selectionTimeout);
 
         this.clearAutocomplete();
 
         /**
          * @this {WebInspector.TextPrompt}
          */
         function moveBackIfOutside()
         {
             delete this._selectionTimeout;

[lushnikov, 2016/10/24 21:27:21]

what does this do? 

             if (!this.isCaretInsidePrompt() && this._element.isComponentSelectionCollapsed()) {
                 this.moveCaretToEndOfPrompt();
                 this.autoCompleteSoon();
             }
         }
 
         this._selectionTimeout = setTimeout(moveBackIfOutside.bind(this), 100);
     },
 
-
     /**
      * @param {!Event} event
      */
     onMouseWheel: function(event)
     {
         // Subclasses can implement.
     },
 
     /**
      * @param {!Event} event
      */
     onKeyDown: function(event)
     {
-        if (isEnterKey(event))
-            return;
-
         var handled = false;
 
         switch (event.key) {
         case "Tab":
             handled = this.tabKeyPressed(event);
             break;
         case "ArrowLeft":
         case "Home":
             this.clearAutocomplete();
             break;
@@ skipping 30 matching lines @@
             event.consume(true);
     },
 
     /**
      * @param {!Event} event
      */
     onInput: function(event)
     {
         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);
-        else
+        if (this._prefixRange && hasCommonPrefix) {

[lushnikov, 2016/10/24 21:27:20]

let's check that cursor is in the end of the prompt -- explicitly

+            this._prefixRange.endColumn += text.length - this._previousText.length;

[lushnikov, 2016/10/24 21:27:20]

this._prefixRange.endColumn = text.length;

+            this._setAutocompleteText(this._currentHintText);
+        } else {
             this._clearAutocompleteElement();
+        }
         this._previousText = text;
 
         this.autoCompleteSoon();
     },
 
     /**
      * @return {boolean}
      */
     acceptAutoComplete: function()
     {
@@ skipping 10 matching lines @@
     {
         if (this.isSuggestBoxVisible())
             this._suggestBox.hide();
         this._clearAutocompleteElement();
     },
 
     _clearAutocompleteElement: function()
     {
         this._clearAutocompleteTimeout();
 
-        if (!this._autocompleteElement)
-            return;
+        this._autocompleteElement.remove();
+        this._prefixRange = null;

[lushnikov, 2016/10/24 21:27:20]

this should probably go inside clearAutocomplete - prefixRange doesn't relate to
autocomplete element

+    },
 
-        this._autocompleteElement.remove();
-        delete this._autocompleteElement;
-        delete this._userEnteredRange;
-        delete this._userEnteredText;
+    /**
+     * @param {string} text
+     */
+    _setAutocompleteText: function(text)

[lushnikov, 2016/10/24 21:27:20]

text -> suggestion

+    {
+        if (this.isCaretAtEndOfPrompt() && this._prefixRange) {
+            this._autocompleteElement.textContent = text.substring(this._prefixRange.endColumn - this._prefixRange.startColumn);
+            this._element.appendChild(this._autocompleteElement);
+        }
+        this._currentHintText = text;
     },
 
     _clearAutocompleteTimeout: function()
     {
         if (this._completeTimeout) {
             clearTimeout(this._completeTimeout);
             delete this._completeTimeout;
         }
         this._completionRequestId++;
     },
@@ skipping 22 matching lines @@
 
         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");
-            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;
         }
         if (shouldExit) {
             this.clearAutocomplete();
             return;
         }
 
         var wordPrefixRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, this._completionStopCharacters, this._element, "backward");
         this._loadCompletions(/** @type {!Element} */ (this._proxyElement), wordPrefixRange, force || false, this._completionsReady.bind(this, ++this._completionRequestId, selection, wordPrefixRange, !!reverse, !!force));
@@ skipping 76 matching lines @@
 
         var fullWordRange = this._createRange();
         fullWordRange.setStart(originalWordPrefixRange.startContainer, originalWordPrefixRange.startOffset);
         fullWordRange.setEnd(selectionRange.endContainer, selectionRange.endOffset);
 
         if (prefix + selectionRange.toString() !== fullWordRange.toString())
             return;
 
         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());
 
-        if (this._suggestBox)
-            this._suggestBox.updateSuggestions(this._boxForAnchorAtStart(selection, fullWordRange), annotatedCompletions, selectedIndex, !this.isCaretAtEndOfPrompt(), this._userEnteredText);
+        var beforeRange = this._createRange();
+        beforeRange.setStart(this._element, 0);
+        beforeRange.setEnd(fullWordRange.startContainer, fullWordRange.startOffset);
+        this._prefixRange = new WebInspector.TextRange(0, beforeRange.toString().length, 0, beforeRange.toString().length + fullWordRange.toString().length);

[lushnikov, 2016/10/24 21:27:20]

let's convert range to string only once - i remember this to be expensive

 
         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.applySuggestion(annotatedCompletions[selectedIndex].title, true);
     },
 
     /**
      * @override
      * @param {string} completionText
      * @param {boolean=} isIntermediateSuggestion
      */
     applySuggestion: function(completionText, isIntermediateSuggestion)
     {
-        this._applySuggestion(completionText, isIntermediateSuggestion);
+        if (!this._prefixRange)
+            return;
+        this._setAutocompleteText(completionText);
+        if (isIntermediateSuggestion)
+            this.dispatchEventToListeners(WebInspector.TextPrompt.Events.ItemApplied);
     },
 
     /**
-     * @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)
-            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;
-        }
-
-        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 });
-    },
-
-    /**
      * @override
      */
     acceptSuggestion: function()
     {
         this._acceptSuggestionInternal();
     },
 
     /**
      * @return {boolean}
      */
     _acceptSuggestionInternal: function()
     {
-        if (!this._autocompleteElement || !this._autocompleteElement.parentNode)
+        if (!this._prefixRange)
             return false;
 
-        var text = this._autocompleteElement.textContent;
-        var textNode = createTextNode(text);
-        this._autocompleteElement.parentNode.replaceChild(textNode, this._autocompleteElement);
-        delete this._autocompleteElement;
-
-        var finalSelectionRange = this._createRange();
-        finalSelectionRange.setStart(textNode, text.length);
-        finalSelectionRange.setEnd(textNode, text.length);
-
-        var selection = this._element.getComponentSelection();
-        selection.removeAllRanges();
-        selection.addRange(finalSelectionRange);
+        this._autocompleteElement.remove();
+        var text = this.userEnteredText();
+        this._element.textContent = text.substring(0, this._prefixRange.startColumn) + this._currentHintText + text.substring(this._prefixRange.endColumn);
+        this._setDOMSelection(this._prefixRange.startColumn + this._currentHintText.length, this._prefixRange.startColumn + this._currentHintText.length);
 
         this.clearAutocomplete();
         this.dispatchEventToListeners(WebInspector.TextPrompt.Events.ItemAccepted);
 
         return true;
     },
 
     /**
+     * @param {number} startColumn
+     * @param {number} endColumn
+     */
+    _setDOMSelection: function(startColumn, endColumn)
+    {
+        this._element.normalize();
+        var node = this._element.childNodes[0];
+        if (!node || node === this._autocompleteElement)
+            return;
+        var range = this._createRange();
+        range.setStart(node, startColumn);
+        range.setEnd(node, endColumn);
+        var selection = this._element.getComponentSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+    },
+
+    /**
      * @return {boolean}
      */
     isSuggestBoxVisible: function()
     {
         return this._suggestBox && this._suggestBox.visible();
     },
 
     /**
      * @return {boolean}
      */
@@ skipping 20 matching lines @@
         var node = selectionRange.startContainer;
         if (!node.isSelfOrDescendant(this._element))
             return false;
 
         if (node.nodeType === Node.TEXT_NODE && selectionRange.startOffset < node.nodeValue.length)
             return false;
 
         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;
             }
 
             node = node.traverseNextNode(this._element);
         }
 
         return true;
     },
 
     /**
      * @return {boolean}
      */
     isCaretOnFirstLine: function()
     {
         var selection = this._element.getComponentSelection();

[lushnikov, 2016/10/24 21:27:20]

let's rely on the _prefixRange her

         var focusNode = selection.focusNode;
         if (!focusNode || focusNode.nodeType !== Node.TEXT_NODE || focusNode.parentNode !== this._element)
             return true;
 
         if (focusNode.textContent.substring(0, selection.focusOffset).indexOf("\n") !== -1)
             return false;
         focusNode = focusNode.previousSibling;
 
         while (focusNode) {
             if (focusNode.nodeType !== Node.TEXT_NODE)
@@ skipping 279 matching lines @@
     },
 
     /**
      * @return {string|undefined}
      */
     _currentHistoryItem: function()
     {
         return this._data[this._data.length - this._historyOffset];
     }
 };