Make Toolbar recognize items provided in the HTML template, implement devtools-toolbar-input and use it in the protocol monitor.

Bug: 388730998
Change-Id: I8f28455d5245f51ca7d50df86e09da47629f3672
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6298133
Commit-Queue: Benedikt Meurer <[email protected]>
Auto-Submit: Danil Somsikov <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>

Author: danilsomsikov

front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -16,12 +16,13 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, render} from '../../ui/lit/lit.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {type Command, Events as JSONEditorEvents, JSONEditor, type Parameter} from './JSONEditor.js';
 import protocolMonitorStyles from './protocolMonitor.css.js';
 
+const {styleMap} = Directives;
 const {widgetConfig} = UI.Widget;
 const UIStrings = {
   /**
@@ -176,15 +177,21 @@ export interface ProtocolDomain {
 export interface ViewInput {
   messages: Message[];
   selectedMessage?: Message;
-  filters: TextUtils.TextUtils.ParsedFilter[];
+  hideInputBar: boolean;
+  command: string;
+  commandSuggestions: string[];
+  filterKeys: string[];
+  filter: string;
+  parseFilter: (filter: string) => TextUtils.TextUtils.ParsedFilter[];
   onRecord: (e: Event) => void;
   onClear: () => void;
   onSave: () => void;
   onSelect: (e: CustomEvent<HTMLElement|null>) => void;
   onContextMenu: (e: CustomEvent<{menu: UI.ContextMenu.ContextMenu, element: HTMLElement}>) => void;
-  textFilterUI: UI.Toolbar.ToolbarInput;
+  onFilterChanged: (e: CustomEvent<string>) => void;
+  onCommandChange: (e: CustomEvent<string>) => void;
+  onCommandSubmitted: (e: CustomEvent<string>) => void;
   showHideSidebarButton: UI.Toolbar.ToolbarButton;
-  commandInput: UI.Toolbar.ToolbarInput;
   selector: UI.Toolbar.ToolbarComboBox;
 }
 
@@ -198,17 +205,17 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
   private startTime: number;
   private readonly messageForId = new Map<number, Message>();
   private readonly filterParser: TextUtils.TextUtils.FilterParser;
-  private readonly suggestionBuilder: UI.FilterSuggestionBuilder.FilterSuggestionBuilder;
-  private readonly textFilterUI: UI.Toolbar.ToolbarInput;
+  #filterKeys = ['method', 'request', 'response', 'target', 'session'];
   readonly selector: UI.Toolbar.ToolbarComboBox;
   #commandAutocompleteSuggestionProvider = new CommandAutocompleteSuggestionProvider();
   #selectedTargetId?: string;
-  #commandInput: UI.Toolbar.ToolbarInput;
+  #command = '';
+  #hideInputBar = false;
   #showHideSidebarButton: UI.Toolbar.ToolbarButton;
   #view: View;
   #messages: Message[] = [];
   #selectedMessage: Message|undefined;
-  #filters: TextUtils.TextUtils.ParsedFilter[] = [];
+  #filter = '';
   #splitWidget: UI.SplitWidget.SplitWidget;
   constructor(splitWidget: UI.SplitWidget.SplitWidget, view: View = (input, output, target) => {
     // clang-format off
@@ -233,7 +240,17 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
                                .variant=${Buttons.Button.Variant.TOOLBAR}
                                .jslogContext=${'protocol-monitor.save'}
                                @click=${input.onSave}></devtools-button>
-              ${input.textFilterUI.element}
+              <devtools-toolbar-input type="filter"
+                                      list="filter-suggestions"
+                                      style="flex-grow: 1"
+                                      value=${input.filter}
+                                      @change=${input.onFilterChanged}>
+                <datalist id="filter-suggestions">
+                  ${input.filterKeys.map(key => html`
+                        <option value=${key + ':'}></option>
+                        <option value=${'-' + key + ':'}></option>`)}
+                </datalist>
+              </devtools-toolbar-input>
             </devtools-toolbar>
             <devtools-split-widget .options=${{
                 vertical: true,
@@ -245,7 +262,7 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
                   slot="main"
                   @select=${input.onSelect}
                   @contextmenu=${input.onContextMenu}
-                  .filters=${input.filters}>
+                  .filters=${input.parseFilter(input.filter)}>
                 <table>
                     <tr>
                       <th id="type" sortable style="text-align: center" hideable weight="1">${i18nString(UIStrings.type)}</th>
@@ -302,7 +319,20 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
             <devtools-toolbar class="protocol-monitor-bottom-toolbar"
                jslog=${VisualLogging.toolbar('bottom')}>
               ${input.showHideSidebarButton.element}
-              ${input.commandInput.element}
+              <devtools-toolbar-input id="command-input"
+                                      style=${styleMap({
+                                        'flex-grow': 1,
+                                        display: input.hideInputBar ? 'none' : 'flex'})}
+                                      value=${input.command}
+                                      list="command-input-suggestions"
+                                      placeholder=${i18nString(UIStrings.sendRawCDPCommand)}
+                                      title=${i18nString(UIStrings.sendRawCDPCommandExplanation)}
+                                      @change=${input.onCommandChange}
+                                      @submit=${input.onCommandSubmitted}>
+                <datalist id="command-input-suggestions">
+                  ${input.commandSuggestions.map(c => html`<option value=${c}></option>`)}
+                </datalist>
+              </devtools-toolbar-input>
               ${input.selector.element}
             </devtools-toolbar>`,
         target,
@@ -318,23 +348,13 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
     this.contentElement.classList.add('protocol-monitor');
     this.selector = this.#createTargetSelector();
 
-    const keys = ['method', 'request', 'response', 'type', 'target', 'session'];
-    this.filterParser = new TextUtils.TextUtils.FilterParser(keys);
-    this.suggestionBuilder = new UI.FilterSuggestionBuilder.FilterSuggestionBuilder(keys);
+    this.#filterKeys = ['method', 'request', 'response', 'type', 'target', 'session'];
+    this.filterParser = new TextUtils.TextUtils.FilterParser(this.#filterKeys);
 
-    this.textFilterUI = new UI.Toolbar.ToolbarFilter(
-        undefined, 1, .2, '', this.suggestionBuilder.completions.bind(this.suggestionBuilder), true);
-    this.textFilterUI.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, event => {
-      const query = event.data;
-      this.#filters = this.filterParser.parse(query);
-      this.requestUpdate();
-    });
     this.#showHideSidebarButton = splitWidget.createShowHideSidebarButton(
         i18nString(UIStrings.showCDPCommandEditor), i18nString(UIStrings.hideCDPCommandEditor),
         i18nString(UIStrings.CDPCommandEditorShown), i18nString(UIStrings.CDPCommandEditorHidden),
         'protocol-monitor.toggle-command-editor');
-    this.#commandInput = this.#createCommandInput();
-    const inputBar = this.#commandInput.element;
     const tabSelector = this.selector.element;
 
     const populateToolbarInput = (): void => {
@@ -352,24 +372,25 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
         }
       }
       if (commandJson) {
-        this.#commandInput.setValue(commandJson);
+        this.#command = commandJson;
+        this.requestUpdate();
       }
     };
 
     splitWidget.addEventListener(UI.SplitWidget.Events.SHOW_MODE_CHANGED, (event => {
                                    if (event.data === 'OnlyMain') {
                                      populateToolbarInput();
-
-                                     inputBar?.setAttribute('style', 'display:flex; flex-grow: 1');
+                                     this.#hideInputBar = false;
                                      tabSelector?.setAttribute('style', 'display:flex');
                                    } else {
-                                     const {command, parameters} = parseCommandInput(this.#commandInput.value());
+                                     const {command, parameters} = parseCommandInput(this.#command);
                                      this.dispatchEventToListeners(
                                          Events.COMMAND_CHANGE,
                                          {command, parameters, targetId: this.#selectedTargetId});
-                                     inputBar?.setAttribute('style', 'display:none');
+                                     this.#hideInputBar = true;
                                      tabSelector?.setAttribute('style', 'display:none');
                                    }
+                                   this.requestUpdate();
                                  }));
     this.performUpdate();
   }
@@ -378,7 +399,12 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
     const viewInput = {
       messages: this.#messages,
       selectedMessage: this.#selectedMessage,
-      filters: this.#filters,
+      hideInputBar: this.#hideInputBar,
+      command: this.#command,
+      commandSuggestions: this.#commandAutocompleteSuggestionProvider.allSuggestions(),
+      filterKeys: this.#filterKeys,
+      filter: this.#filter,
+      parseFilter: this.filterParser.parse.bind(this.filterParser),
       onRecord: (e: Event) => {
         this.setRecording((e.target as Buttons.Button.Button).toggled);
       },
@@ -401,9 +427,19 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
           this.#populateContextMenu(e.detail.menu, message);
         }
       },
-      textFilterUI: this.textFilterUI,
+      onCommandChange: (e: CustomEvent<string>) => {
+        this.#command = e.detail;
+      },
+      onCommandSubmitted: (e: CustomEvent<string>) => {
+        this.#commandAutocompleteSuggestionProvider.addEntry(e.detail);
+        const {command, parameters} = parseCommandInput(e.detail);
+        this.onCommandSend(command, parameters, this.#selectedTargetId);
+      },
+      onFilterChanged: (e: CustomEvent<string>) => {
+        this.#filter = e.detail;
+        this.requestUpdate();
+      },
       showHideSidebarButton: this.#showHideSidebarButton,
-      commandInput: this.#commandInput,
       selector: this.selector,
     };
     const viewOutput = {};
@@ -434,7 +470,8 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
      * current row.
      */
     menu.editSection().appendItem(i18nString(UIStrings.filter), () => {
-      this.textFilterUI.setValue(`method:${message.method}`, true);
+      this.#filter = `method:${message.method}`;
+      this.requestUpdate();
     }, {jslogContext: 'filter'});
 
     /**
@@ -450,30 +487,6 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
     }, {jslogContext: 'documentation'});
   }
 
-  #createCommandInput(): UI.Toolbar.ToolbarInput {
-    const placeholder = i18nString(UIStrings.sendRawCDPCommand);
-    const accessiblePlaceholder = placeholder;
-    const growFactor = 1;
-    const shrinkFactor = 0.2;
-    const tooltip = i18nString(UIStrings.sendRawCDPCommandExplanation);
-    const input = new UI.Toolbar.ToolbarInput(
-        placeholder,
-        accessiblePlaceholder,
-        growFactor,
-        shrinkFactor,
-        tooltip,
-        this.#commandAutocompleteSuggestionProvider.buildTextPromptCompletions,
-        false,
-        'command-input',
-    );
-    input.addEventListener(UI.Toolbar.ToolbarInput.Event.ENTER_PRESSED, () => {
-      this.#commandAutocompleteSuggestionProvider.addEntry(input.value());
-      const {command, parameters} = parseCommandInput(input.value());
-      this.onCommandSend(command, parameters, this.#selectedTargetId);
-    });
-    return input;
-  }
-
   #createTargetSelector(): UI.Toolbar.ToolbarComboBox {
     const selector = new UI.Toolbar.ToolbarComboBox(() => {
       this.#selectedTargetId = selector.selectedOption()?.value;
@@ -631,14 +644,19 @@ export class CommandAutocompleteSuggestionProvider {
     }
   }
 
+  allSuggestions(): string[] {
+    const newestToOldest = [...this.#commandHistory].reverse();
+    newestToOldest.push(...metadataByCommand.keys());
+    return newestToOldest;
+  }
+
   buildTextPromptCompletions =
       async(expression: string, prefix: string, force?: boolean): Promise<UI.SuggestBox.Suggestions> => {
     if (!prefix && !force && expression) {
       return [];
     }
 
-    const newestToOldest = [...this.#commandHistory].reverse();
-    newestToOldest.push(...metadataByCommand.keys());
+    const newestToOldest = this.allSuggestions();
     return newestToOldest.filter(cmd => cmd.startsWith(prefix)).map(text => ({
                                                                       text,
                                                                     }));