Merge 105140 - Web Inspector: [TextPrompt] Autocomplete adds unwanted text that's hard to remove

Source/WebCore/inspector/front-end/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 119 matching lines @@
             WebInspector.setCurrentFocusElement(WebInspector.previousFocusElement());
     },
 
     get text()
     {
         return this._element.textContent;
     },
 
     set text(x)
     {
-        this.clearAutoComplete(true);
+        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.appendChild(document.createElement("br"));
         } else
             this._element.textContent = x;
 
         this.moveCaretToEndOfPrompt();
         this._element.scrollIntoView();
     },
@@ skipping 28 matching lines @@
     _stopEditing: function()
     {
         this._element.tabIndex = this._oldTabIndex;
         if (this._blurListener)
             this._element.removeEventListener("blur", this._blurListener, false);
         this._element.removeStyleClass("editing");
         delete this._isEditing;
         WebInspector.markBeingEdited(this._element, false);
     },
 
+    _removeSuggestionAids: function()
+    {
+        this.clearAutoComplete();
+        this.hideSuggestBox();
+    },
+
     _selectStart: function(event)
     {
         if (this._selectionTimeout)
             clearTimeout(this._selectionTimeout);
 
-        this.clearAutoComplete();
+        this._removeSuggestionAids();
 
         function moveBackIfOutside()
         {
             delete this._selectionTimeout;
-            if (!this.isCaretInsidePrompt() && window.getSelection().isCollapsed)
+            if (!this.isCaretInsidePrompt() && window.getSelection().isCollapsed) {
                 this.moveCaretToEndOfPrompt();
-            this.autoCompleteSoon();
+                this.autoCompleteSoon();
+            }
         }
 
         this._selectionTimeout = setTimeout(moveBackIfOutside.bind(this), 100);
     },
 
     /**
      * @param {boolean=} force
      */
     defaultKeyHandler: function(event, force)
     {
         this.clearAutoComplete();
         this.autoCompleteSoon(force);
         return false;
     },
 
     onKeyDown: function(event)
     {
         var handled = false;
         var invokeDefault = true;
 
         switch (event.keyIdentifier) {
         case "Up":
             handled = this.upKeyPressed(event);
             break;
         case "Down":
             handled = this.downKeyPressed(event);
             break;
+        case "PageUp":
+            handled = this.pageUpKeyPressed(event);
+            break;
+        case "PageDown":
+            handled = this.pageDownKeyPressed(event);
+            break;
         case "U+0009": // Tab
             handled = this.tabKeyPressed(event);
             break;
         case "Enter":
             handled = this.enterKeyPressed(event);
             break;
+        case "Left":
+        case "Home":
+            this._removeSuggestionAids();
+            invokeDefault = false;
+            break;
         case "Right":
         case "End":
-            if (this.isSuggestBoxVisible() && this.isCaretAtEndOfPrompt())
-                handled = this._suggestBox.tabKeyPressed(event);
-            else {
+            if (this.isCaretAtEndOfPrompt())
                 handled = this.acceptAutoComplete();
-                if (!handled)
-                    this.autoCompleteSoon();
-            }
+            else
+                this._removeSuggestionAids();
+            invokeDefault = false;
             break;
         case "U+001B": // Esc
             if (this.isSuggestBoxVisible()) {
                 this._suggestBox.hide();
                 handled = true;
-                break;
             }
+            break;
         case "U+0020": // Space
             if (this._suggestForceable && event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) {
                 this.defaultKeyHandler(event, true);
                 handled = true;
             }
             break;
         case "Alt":
         case "Meta":
         case "Shift":
         case "Control":
             invokeDefault = false;
             break;
         }
 
         if (!handled && invokeDefault)
             handled = this.defaultKeyHandler(event);
 
         if (handled) {
             event.preventDefault();
             event.stopPropagation();
         }
 
         return handled;
     },
 
     acceptAutoComplete: function()
     {
+        var result = false;
         if (this.isSuggestBoxVisible())
-            return this._suggestBox.acceptSuggestion();
-        return this.acceptSuggestion();
+            result = this._suggestBox.acceptSuggestion();
+        if (!result)
+            result = this.acceptSuggestion();
+
+        return result;
     },
 
     /**
      * @param {boolean=} includeTimeout
      */
     clearAutoComplete: function(includeTimeout)
     {
         if (includeTimeout && this._completeTimeout) {
             clearTimeout(this._completeTimeout);
             delete this._completeTimeout;
@@ skipping 50 matching lines @@
         var selectionRange = selection.getRangeAt(0);
         var isEmptyInput = selectionRange.commonAncestorContainer === this._element; // this._element has no child Text nodes.
 
         var shouldExit;
 
         // Do not attempt to auto-complete an empty input in the auto mode (only on demand).
         if (auto && isEmptyInput && !force)
             shouldExit = true;
         else if (!auto && !isEmptyInput && !selectionRange.commonAncestorContainer.isDescendant(this._element))
             shouldExit = true;
-        else if (auto && !this._suggestBox && !force && !this.isCaretAtEndOfPrompt())
+        else if (auto && !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)
                 shouldExit = true;
         }
         if (shouldExit) {
@@ skipping 36 matching lines @@
         fullWordRange.setStart(originalWordPrefixRange.startContainer, originalWordPrefixRange.startOffset);
         fullWordRange.setEnd(selectionRange.endContainer, selectionRange.endOffset);
 
         if (originalWordPrefixRange.toString() + selectionRange.toString() != fullWordRange.toString())
             return;
 
         this._userEnteredRange = fullWordRange;
         this._userEnteredText = fullWordRange.toString();
 
         if (this._suggestBox)
-            this._suggestBox.updateSuggestions(this._boxForAnchorAtStart(selection, fullWordRange), completions);
+            this._suggestBox.updateSuggestions(this._boxForAnchorAtStart(selection, fullWordRange), completions, !this.isCaretAtEndOfPrompt());
 
         var wordPrefixLength = originalWordPrefixRange.toString().length;
 
         if (auto)
             var completionText = completions[0];
         else {
             if (completions.length === 1) {
                 var completionText = completions[0];
                 wordPrefixLength = completionText.length;
             } else {
@@ skipping 26 matching lines @@
                         var completionText = completions[0];
                     else if (nextIndex < 0)
                         var completionText = completions[completions.length - 1];
                     else
                         var completionText = completions[nextIndex];
                 }
             }
         }
 
         if (auto) {
-            this._userEnteredRange.deleteContents();
-            this._element.pruneEmptyTextNodes();
-            var finalSelectionRange = document.createRange();
-            var prefixText = completionText.substring(0, wordPrefixLength);
-            var suffixText = completionText.substring(wordPrefixLength);
+            if (this.isCaretAtEndOfPrompt()) {
+                this._userEnteredRange.deleteContents();
+                this._element.pruneEmptyTextNodes();
+                var finalSelectionRange = document.createRange();
+                var prefixText = completionText.substring(0, wordPrefixLength);
+                var suffixText = completionText.substring(wordPrefixLength);
 
-            var prefixTextNode = document.createTextNode(prefixText);
-            fullWordRange.insertNode(prefixTextNode);
+                var prefixTextNode = document.createTextNode(prefixText);
+                fullWordRange.insertNode(prefixTextNode);
 
-            this.autoCompleteElement = document.createElement("span");
-            this.autoCompleteElement.className = "auto-complete-text";
-            this.autoCompleteElement.textContent = suffixText;
+                this.autoCompleteElement = document.createElement("span");
+                this.autoCompleteElement.className = "auto-complete-text";
+                this.autoCompleteElement.textContent = suffixText;
 
-            prefixTextNode.parentNode.insertBefore(this.autoCompleteElement, prefixTextNode.nextSibling);
+                prefixTextNode.parentNode.insertBefore(this.autoCompleteElement, prefixTextNode.nextSibling);
 
-            finalSelectionRange.setStart(prefixTextNode, wordPrefixLength);
-            finalSelectionRange.setEnd(prefixTextNode, wordPrefixLength);
-            selection.removeAllRanges();
-            selection.addRange(finalSelectionRange);
+                finalSelectionRange.setStart(prefixTextNode, wordPrefixLength);
+                finalSelectionRange.setEnd(prefixTextNode, wordPrefixLength);
+                selection.removeAllRanges();
+                selection.addRange(finalSelectionRange);
+            }
         } else
             this.applySuggestion(completionText, completions.length > 1, originalWordPrefixRange);
     },
 
     /**
      * @param {Range=} originalPrefixRange
      */
     applySuggestion: function(completionText, isIntermediateSuggestion, originalPrefixRange)
     {
         var wordPrefixLength;
@@ skipping 74 matching lines @@
         var node = selectionRange.startContainer;
         if (node !== this._element && !node.isDescendant(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)
+                if (foundNextText && (!this.autoCompleteElement || !this.autoCompleteElement.isAncestor(node)))
                     return false;
                 foundNextText = true;
             }
 
             node = node.traverseNextNode(this._element);
         }
 
         return true;
     },
 
@@ skipping 49 matching lines @@
         var offset = this._element.childNodes.length;
         selectionRange.setStart(this._element, offset);
         selectionRange.setEnd(this._element, offset);
 
         selection.removeAllRanges();
         selection.addRange(selectionRange);
     },
 
     tabKeyPressed: function(event)
     {
-        if (this.isSuggestBoxVisible())
-            return this._suggestBox.tabKeyPressed(event);
-
-        this.complete(false, false, event.shiftKey);
+        // Just consume the key.
         return true;
     },
 
     enterKeyPressed: function(event)
     {
         if (this.isSuggestBoxVisible())
             return this._suggestBox.enterKeyPressed(event);
 
         return false;
     },
 
     upKeyPressed: function(event)
     {
         if (this.isSuggestBoxVisible())
             return this._suggestBox.upKeyPressed(event);
 
         return false;
     },
 
     downKeyPressed: function(event)
     {
         if (this.isSuggestBoxVisible())
             return this._suggestBox.downKeyPressed(event);
 
         return false;
-    }
+    },
+
+    pageUpKeyPressed: function(event)
+    {
+        if (this.isSuggestBoxVisible())
+            return this._suggestBox.pageUpKeyPressed(event);
+
+        return false;
+    },
+
+    pageDownKeyPressed: function(event)
+    {
+        if (this.isSuggestBoxVisible())
+            return this._suggestBox.pageDownKeyPressed(event);
+
+        return false;
+    },
 }
 
 WebInspector.TextPrompt.prototype.__proto__ = WebInspector.Object.prototype;
 
 /**
  * @constructor
  * @extends {WebInspector.TextPrompt}
  * @param {function(Range, boolean, function(*))} completions
  * @param {string} stopCharacters
  */
@@ skipping 302 matching lines @@
         var result = this._applySuggestion(text, false);
         this.hide();
         if (!result)
             return false;
 
         this._textPrompt.acceptSuggestion();
 
         return true;
     },
 
-    _onNextItem: function(event)
+    _onNextItem: function(event, isPageScroll)
     {
         var children = this.contentElement.childNodes;
         if (!children.length)
             return false;
 
-        if (this._selectedElement)
-            this._selectedElement = this._selectedElement.nextSibling || this.contentElement.firstChild;
-        else
+        if (!this._selectedElement)
             this._selectedElement = this.contentElement.firstChild;
+        else {
+            if (!isPageScroll)
+                this._selectedElement = this._selectedElement.nextSibling || this.contentElement.firstChild;
+            else {
+                var candidate = this._selectedElement;
+
+                for (var itemsLeft = this._rowCountPerViewport; itemsLeft; --itemsLeft) {
+                    if (candidate.nextSibling)
+                        candidate = candidate.nextSibling;
+                    else
+                        break;
+                }
+
+                this._selectedElement = candidate;
+            }
+        }
         this._updateSelection();
         this._applySuggestion(undefined, true);
         return true;
     },
 
-    _onPreviousItem: function(event)
+    _onPreviousItem: function(event, isPageScroll)
     {
         var children = this.contentElement.childNodes;
         if (!children.length)
             return false;
 
-        if (this._selectedElement)
-            this._selectedElement = this._selectedElement.previousSibling || this.contentElement.lastChild;
-        else
+        if (!this._selectedElement)
             this._selectedElement = this.contentElement.lastChild;
+        else {
+            if (!isPageScroll)
+                this._selectedElement = this._selectedElement.previousSibling || this.contentElement.lastChild;
+            else {
+                var candidate = this._selectedElement;
+
+                for (var itemsLeft = this._rowCountPerViewport; itemsLeft; --itemsLeft) {
+                    if (candidate.previousSibling)
+                        candidate = candidate.previousSibling;
+                    else
+                        break;
+                }
+
+                this._selectedElement = candidate;
+            }
+        }
         this._updateSelection();
         this._applySuggestion(undefined, true);
         return true;
     },
 
     /**
      * @param {AnchorBox} anchorBox
      * @param {Array.<string>=} completions
+     * @param {boolean=} canShowForSingleItem
      */
-    updateSuggestions: function(anchorBox, completions)
+    updateSuggestions: function(anchorBox, completions, canShowForSingleItem)
     {
         if (this._suggestTimeout) {
             clearTimeout(this._suggestTimeout);
             delete this._suggestTimeout;
         }
-        this._completionsReady(anchorBox, completions);
+        this._completionsReady(anchorBox, completions, canShowForSingleItem);
     },
 
     _onItemMouseDown: function(text, event)
     {
         this.acceptSuggestion(text);
         event.stopPropagation();
         event.preventDefault();
     },
 
     _createItemElement: function(prefix, text)
     {
         var element = document.createElement("div");
         element.className = "suggest-box-content-item source-code";
         element.tabIndex = -1;
         if (prefix && prefix.length && !text.indexOf(prefix)) {
             var prefixElement = element.createChild("span", "prefix");
             prefixElement.textContent = prefix;
             var suffixElement = element.createChild("span", "suffix");
             suffixElement.textContent = text.substring(prefix.length);
         } else {
             var suffixElement = element.createChild("span", "suffix");
             suffixElement.textContent = text;
         }
         element.addEventListener("mousedown", this._onItemMouseDown.bind(this, text), false);
         return element;
     },
 
-    _updateItems: function(items)
+    /**
+     * @param {boolean=} canShowForSingleItem
+     */
+    _updateItems: function(items, canShowForSingleItem)
     {
-        var children = this.contentElement.children;
-        this._selectedIndex = Math.min(children.length - 1, this._selectedIndex);
-        var selectedItemText = this._selectedIndex >= 0 ? children[this._selectedIndex].textContent : null;
-        var itemIndex = 0;
-        var child = this.contentElement.firstChild;
-        var childText = child ? child.textContent : null;
         this.contentElement.removeChildren();
 
         var userEnteredText = this._textPrompt._userEnteredText;
         for (var i = 0; i < items.length; ++i) {
             var item = items[i];
             var currentItemElement = this._createItemElement(userEnteredText, item);
             this.contentElement.appendChild(currentItemElement);
         }
 
-        this._selectedElement = this.contentElement.firstChild;
+        this._selectedElement = canShowForSingleItem ? this.contentElement.firstChild : null;
         this._updateSelection();
     },
 
     _updateSelection: function()
     {
         // FIXME: might want some optimization if becomes a bottleneck.
         for (var child = this.contentElement.firstChild; child; child = child.nextSibling) {
             if (child !== this._selectedElement)
                 child.removeStyleClass("selected");
         }
         if (this._selectedElement) {
             this._selectedElement.addStyleClass("selected");
             this._selectedElement.scrollIntoViewIfNeeded(false);
         }
     },
 
     /**
+     * @param {Array.<string>=} completions
+     * @param {boolean=} canShowForSingleItem
+     */
+    _canShowBox: function(completions, canShowForSingleItem)
+    {
+        if (!completions || !completions.length)
+            return false;
+
+        if (completions.length > 1)
+            return true;
+
+        // Do not show a single suggestion if it is the same as user-entered prefix, even if allowed to show single-item suggest boxes.
+        return canShowForSingleItem && completions[0] !== this._textPrompt._userEnteredText;
+    },
+
+    _rememberRowCountPerViewport: function()
+    {
+        if (!this.contentElement.firstChild)
+            return;
+
+        this._rowCountPerViewport = Math.floor(this.containerElement.offsetHeight / this.contentElement.firstChild.offsetHeight);
+    },
+
+    /**
      * @param {AnchorBox} anchorBox
      * @param {Array.<string>=} completions
+     * @param {boolean=} canShowForSingleItem
      */
-    _completionsReady: function(anchorBox, completions)
+    _completionsReady: function(anchorBox, completions, canShowForSingleItem)
     {
-        if (!completions || !completions.length) {
-            this.hide()
-            return;
-        }
-
-        this._updateItems(completions);
-        this._updateBoxPosition(anchorBox);
-        if (this.contentElement.children.length && this.contentElement.children.length > 1) {
-            // Will not be shown if a sole suggestion is equal to the user input.
+        if (this._canShowBox(completions, canShowForSingleItem)) {
+            this._updateItems(completions, canShowForSingleItem);
+            this._updateBoxPosition(anchorBox);
             this._element.addStyleClass("visible");
+            this._rememberRowCountPerViewport();
         } else
             this.hide();
     },
 
     upKeyPressed: function(event)
     {
         return this._onPreviousItem(event);
     },
 
     downKeyPressed: function(event)
     {
         return this._onNextItem(event);
     },
 
+    pageUpKeyPressed: function(event)
+    {
+        return this._onPreviousItem(event, true);
+    },
+
+    pageDownKeyPressed: function(event)
+    {
+        return this._onNextItem(event, true);
+    },
+
     enterKeyPressed: function(event)
     {
+        var hasSelectedItem = !!this._selectedElement;
         this.acceptSuggestion();
-        return true;
+
+        // Report the event as non-handled if there is no selected item,
+        // to commit the input or handle it otherwise.
+        return hasSelectedItem;
     },
 
     tabKeyPressed: function(event)
     {
         return this.enterKeyPressed(event);
     }
 }