[Quick open] Suggestion text is only set from outside

This changes the functionality of the suggestion text. The suggestion input is no longer set to be exactly like the input text on input. Instead, the suggestion text is only set from outside. If the suggestion text is not different from the input, there is no gain in showing anything anyway.

This fixes a bug where we'd have overlapping suggestion & input texts if the input text was too long. In that case, the input text was scrolled to the end, while the suggestion text was not.

Fixed: 405350055
Change-Id: I4933cb8f3c70790dd6885de744cc64369904b7b7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6428565
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/ui/components/text_prompt/TextPrompt.test.ts

@@ -66,19 +66,6 @@ describe('TextPrompt', () => {
       assert.lengthOf(textPromptInputs, 1);
       assert.strictEqual((textPromptInputs[0] as HTMLInputElement).value.trim(), 'text');
     });
-
-    it('sets the input and suggestion text correctly', () => {
-      const component = renderTextPrompt(defaultTextPromptData);
-      renderElementIntoDOM(component);
-
-      component.setText('@');
-      component.setSuggestion('Command');
-
-      const textPromptInputs = component.shadowRoot!.querySelectorAll('.input');
-      assert.strictEqual((textPromptInputs[0] as HTMLInputElement).value.trim(), '@');
-      const textPromptSuggestions = component.shadowRoot!.querySelectorAll('.suggestion');
-      assert.strictEqual((textPromptSuggestions[0] as HTMLInputElement).value.trim(), '@Command');
-    });
   });
 
   it('focus on the input element correctly', () => {

front_end/ui/components/text_prompt/TextPrompt.ts

@@ -61,11 +61,6 @@ export class TextPrompt extends HTMLElement {
     this.setSelectedRange(this.#text().length, this.#text().length);
   }
 
-  onInput(): void {
-    this.#suggestion().value = this.#text();
-    this.dispatchEvent(new PromptInputEvent(this.#text()));
-  }
-
   onKeyDown(event: KeyboardEvent): void {
     if (event.key === Platform.KeyboardUtilities.ENTER_KEY) {
       event.preventDefault();
@@ -93,13 +88,12 @@ export class TextPrompt extends HTMLElement {
 
   setSuggestion(suggestion: string): void {
     this.#suggestionText = suggestion;
-    this.#suggestion().value += this.#suggestionText;
+    this.#suggestion().value = this.#suggestionText;
     this.#render();
   }
 
   setText(text: string): void {
     this.#input().value = text;
-    this.#suggestion().value = this.#text();
 
     if (this.#input().hasFocus()) {
       this.moveCaretToEndOfInput();
@@ -140,8 +134,9 @@ export class TextPrompt extends HTMLElement {
       <style>${textPromptStyles.cssText}</style>
       <span class="prefix">${this.#prefixText} </span>
       <span class="text-prompt-input"><input class="input" aria-label=${
-        this.#ariaLabelText} spellcheck="false" @input=${this.onInput} @keydown=${
-        this.onKeyDown}/><input class="suggestion" tabindex=-1 aria-label=${
+        this.#ariaLabelText} spellcheck="false" @input=${
+        () => this.dispatchEvent(new PromptInputEvent(
+            this.#text()))} @keydown=${this.onKeyDown}/><input class="suggestion" tabindex=-1 aria-label=${
         this.#ariaLabelText + ' Suggestion'}></span>`;
     render(output, this.#shadow, {host: this});
   }

front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -365,6 +365,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
       }
       this.inputBoxElement.focus();
       this.inputBoxElement.setText(completion);
+      this.inputBoxElement.setSuggestion('');
       this.setQuerySelectedRange(userEnteredText.length, completion.length);
       return true;
     }

front_end/ui/legacy/components/quick_open/QuickOpen.ts

@@ -73,7 +73,7 @@ export class QuickOpenImpl {
     const titlePrefixFunction = this.providers.get(prefix)?.titlePrefix;
     this.filteredListWidget.setCommandPrefix(titlePrefixFunction ? titlePrefixFunction() : '');
     const titleSuggestionFunction = (query === prefix) && this.providers.get(prefix)?.titleSuggestion;
-    this.filteredListWidget.setCommandSuggestion(titleSuggestionFunction ? titleSuggestionFunction() : '');
+    this.filteredListWidget.setCommandSuggestion(titleSuggestionFunction ? prefix + titleSuggestionFunction() : '');
 
     if (this.prefix === prefix) {
       return;