third_party/WebKit/Source/devtools/front_end/ui/TextPrompt.js - Issue 2439223002: DevTools: Use grey hint text for applied suggestion in TextPrompt

Unified Diff: third_party/WebKit/Source/devtools/front_end/ui/TextPrompt.js

Issue 2439223002: DevTools: Use grey hint text for applied suggestion in TextPrompt (Closed)

Patch Set: Fix bug with completing in the middle of a prompt Created 4 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

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 3b03a39af3a76e3b360f30c544051d29c4086e81..60f5507e24ab38f801be769dff1e54f4bc52c2c4 100644

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

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

@@ -45,9 +45,11 @@ WebInspector.TextPrompt = function(completions, stopCharacters)

this._completionStopCharacters = stopCharacters || " =:[({;,!+-*/&|^<>.";

this._autocompletionTimeout = WebInspector.TextPrompt.DefaultAutocompletionTimeout;

this._title = "";

+ this._userEnteredRange = null;

this._previousText = "";

this._currentHintText = "";

this._completionRequestId = 0;

+ this._autocompleteElement = createElementWithClass("span", "auto-complete-text");

}

WebInspector.TextPrompt.DefaultAutocompletionTimeout = 250;

@@ -140,7 +142,7 @@ WebInspector.TextPrompt.prototype = {

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;

@@ -172,7 +174,7 @@ WebInspector.TextPrompt.prototype = {

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);

}

@@ -280,7 +282,6 @@ WebInspector.TextPrompt.prototype = {

this._selectionTimeout = setTimeout(moveBackIfOutside.bind(this), 100);

/**

* @param {!Event} event

@@ -294,9 +295,6 @@ WebInspector.TextPrompt.prototype = {

onKeyDown: function(event)

{

- if (isEnterKey(event))

- return;

var handled = false;

switch (event.key) {

@@ -346,11 +344,13 @@ WebInspector.TextPrompt.prototype = {

onInput: function(event)

{

var text = this.userEnteredText();

- var hasCommonPrefix = text.startsWith(this._previousText) || this._previousText.startsWith(text);

lushnikov 2016/10/22 02:15:10 let's get it back! it was so good!

einbinder 2016/10/22 02:30:05 Done.

- if (this._autocompleteElement && hasCommonPrefix)

- this._autocompleteElement.textContent = this._currentHintText.substring(text.length);

- else

+ if (this._userEnteredRange && (text.startsWith(this._previousText) || this._previousText.startsWith(text))) {

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

+ this._setAutocompleteText(this._currentHintText);

+ }

lushnikov 2016/10/22 02:15:10 nit: "else" on the previous line

einbinder 2016/10/22 02:30:05 Done.

+ else {

this._clearAutocompleteElement();

+ }

this._previousText = text;

this.autoCompleteSoon();

@@ -381,13 +381,20 @@ WebInspector.TextPrompt.prototype = {

{

this._clearAutocompleteTimeout();

- if (!this._autocompleteElement)

- return;

this._autocompleteElement.remove();

- delete this._autocompleteElement;

- delete this._userEnteredRange;

- delete this._userEnteredText;

+ this._userEnteredRange = null;

+ },

+ /**

+ * @param {string} text

+ */

+ _setAutocompleteText: function(text)

+ {

+ if (this.isCaretAtEndOfPrompt() && this._userEnteredRange) {

+ this._autocompleteElement.textContent = text.substring(this._userEnteredRange.endColumn - this._userEnteredRange.startColumn);

+ this._element.appendChild(this._autocompleteElement);

+ }

+ this._currentHintText = text;

_clearAutocompleteTimeout: function()

@@ -430,7 +437,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");

- var autocompleteTextLength = (this._autocompleteElement && this._autocompleteElement.parentNode) ? this._autocompleteElement.textContent.length : 0;

+ var autocompleteTextLength = (this._autocompleteElement.parentNode) ? this._autocompleteElement.textContent.length : 0;

lushnikov 2016/10/22 02:15:10 nit: extra ()

einbinder 2016/10/22 02:30:05 Done.

if (wordSuffixRange.toString().length !== autocompleteTextLength)

shouldExit = true;

}

@@ -527,41 +534,16 @@ WebInspector.TextPrompt.prototype = {

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);

+ this._suggestBox.updateSuggestions(this._boxForAnchorAtStart(selection, fullWordRange), annotatedCompletions, selectedIndex, !this.isCaretAtEndOfPrompt(), this.userEnteredText());

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);

- }

+ var beforeRange = this._createRange();

lushnikov 2016/10/22 02:15:10 the calculation of the userEnteredRange should be

einbinder 2016/10/22 02:30:05 Done.

+ beforeRange.setStart(this._element, 0);

+ beforeRange.setEnd(fullWordRange.startContainer, fullWordRange.startOffset);

+ this._userEnteredRange = new WebInspector.TextRange(0, beforeRange.toString().length, 0, beforeRange.toString().length + fullWordRange.toString().length);

+ this.applySuggestion(annotatedCompletions[selectedIndex].title, true);

/**

@@ -571,44 +553,11 @@ WebInspector.TextPrompt.prototype = {

applySuggestion: function(completionText, isIntermediateSuggestion)

{

- this._applySuggestion(completionText, isIntermediateSuggestion);

- },

- /**

- * @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)

+ if (!this._userEnteredRange)

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;

- }

+ this._setAutocompleteText(completionText);

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 });

+ this.dispatchEventToListeners(WebInspector.TextPrompt.Events.ItemApplied);

/**

@@ -624,21 +573,13 @@ WebInspector.TextPrompt.prototype = {

_acceptSuggestionInternal: function()

{

- if (!this._autocompleteElement || !this._autocompleteElement.parentNode)

+ if (!this._userEnteredRange)

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._userEnteredRange.startColumn) + this._currentHintText + text.substring(this._userEnteredRange.endColumn);

+ this._select(this._userEnteredRange.startColumn + this._currentHintText.length, this._userEnteredRange.startColumn + this._currentHintText.length);

this.clearAutocomplete();

this.dispatchEventToListeners(WebInspector.TextPrompt.Events.ItemAccepted);

@@ -647,6 +588,24 @@ WebInspector.TextPrompt.prototype = {

/**

+ * @param {number} start

lushnikov 2016/10/22 02:15:10 startColumn

einbinder 2016/10/22 02:30:05 Done.

+ * @param {number} end

lushnikov 2016/10/22 02:15:10 endColumn

einbinder 2016/10/22 02:30:05 Done.

+ */

+ _select: function(start, end)

lushnikov 2016/10/22 02:15:10 _setDOMSelection:

einbinder 2016/10/22 02:30:05 Done.

+ {

+ this._element.normalize();

+ var node = this._element.childNodes[0];

+ if (node === this._autocompleteElement)

lushnikov 2016/10/22 02:15:10 !node

einbinder 2016/10/22 02:30:05 Done.

+ return;

+ var range = this._createRange();

+ range.setStart(node, start);

+ range.setEnd(node, end);

+ var selection = this._element.getComponentSelection();

+ selection.removeAllRanges();

+ selection.addRange(range);

+ },

+ /**

* @return {boolean}

isSuggestBoxVisible: function()

@@ -687,7 +646,7 @@ WebInspector.TextPrompt.prototype = {

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;

}

« no previous file with comments | « third_party/WebKit/LayoutTests/http/tests/inspector-unit/text-prompt-hint-expected.txt ('k') | no next file » | no next file with comments »