Recognize <select> in <devtools-toolbar> as a ToolbarComboBox

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

Author: danilsomsikov

front_end/panels/protocol_monitor/JSONEditor.test.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Host from '../../core/host/host.js';
+import * as SDK from '../../core/sdk/sdk.js';
 import {
   dispatchClickEvent,
   dispatchKeyDownEvent,
@@ -510,21 +511,20 @@ describeWithEnvironment('JSONEditor', () => {
       const editorWidget = new ProtocolMonitor.ProtocolMonitor.EditorWidget();
       const jsonEditor = editorWidget.jsonEditor;
       jsonEditor.targetId = 'value2';
-      const dataGrid = new ProtocolMonitor.ProtocolMonitor.ProtocolMonitorDataGrid(split);
-      const selector = dataGrid.selector;
-
-      selector.createOption('Option 1', 'value1');
-      selector.createOption('Option 2', 'value2');
-      selector.createOption('Option 3', 'value3');
+      sinon.stub(SDK.TargetManager.TargetManager.instance(), 'targets').returns([
+        {id: () => 'value1'} as SDK.Target.Target,
+        {id: () => 'value2'} as SDK.Target.Target,
+      ]);
+      const view = sinon.stub();
+      const dataGrid = new ProtocolMonitor.ProtocolMonitor.ProtocolMonitorDataGrid(split, view);
 
       split.setMainWidget(dataGrid);
       split.setSidebarWidget(editorWidget);
 
       split.toggleSidebar();
-      await RenderCoordinator.done();
+      await RenderCoordinator.done({waitForWork: true});
 
-      // Should be index 1 because the targetId equals "value2" which corresponds to the index number 1
-      assert.deepEqual(selector.selectedIndex(), 1);
+      assert.deepEqual(view.lastCall.firstArg.selectedTargetId, 'value2');
     });
 
     // Flaky test.

front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -191,8 +191,10 @@ export interface ViewInput {
   onFilterChanged: (e: CustomEvent<string>) => void;
   onCommandChange: (e: CustomEvent<string>) => void;
   onCommandSubmitted: (e: CustomEvent<string>) => void;
+  onTargetChange: (e: Event) => void;
   showHideSidebarButton: UI.Toolbar.ToolbarButton;
-  selector: UI.Toolbar.ToolbarComboBox;
+  targets: SDK.Target.Target[];
+  selectedTargetId: string;
 }
 
 export interface ViewOutput {}
@@ -206,9 +208,8 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
   private readonly messageForId = new Map<number, Message>();
   private readonly filterParser: TextUtils.TextUtils.FilterParser;
   #filterKeys = ['method', 'request', 'response', 'target', 'session'];
-  readonly selector: UI.Toolbar.ToolbarComboBox;
   #commandAutocompleteSuggestionProvider = new CommandAutocompleteSuggestionProvider();
-  #selectedTargetId?: string;
+  #selectedTargetId: string;
   #command = '';
   #hideInputBar = false;
   #showHideSidebarButton: UI.Toolbar.ToolbarButton;
@@ -333,7 +334,17 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
                   ${input.commandSuggestions.map(c => html`<option value=${c}></option>`)}
                 </datalist>
               </devtools-toolbar-input>
-              ${input.selector.element}
+              <select class="target-selector"
+                      title=${i18nString(UIStrings.selectTarget)}
+                      style=${styleMap({display: input.hideInputBar ? 'none' : 'flex'})}
+                      jslog=${VisualLogging.dropDown('target-selector').track({change: true})}
+                      @change=${input.onTargetChange}>
+                ${input.targets.map(target => html`
+                  <option jslog=${VisualLogging.item('target').track({click: true})}
+                          value=${target.id()} ?selected=${target.id() === input.selectedTargetId}>
+                    ${target.name()} (${target.inspectedURL()})
+                  </option>`)}
+              </select>
             </devtools-toolbar>`,
         target,
         {host: input}
@@ -346,7 +357,6 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
     this.started = false;
     this.startTime = 0;
     this.contentElement.classList.add('protocol-monitor');
-    this.selector = this.#createTargetSelector();
 
     this.#filterKeys = ['method', 'request', 'response', 'type', 'target', 'session'];
     this.filterParser = new TextUtils.TextUtils.FilterParser(this.#filterKeys);
@@ -355,7 +365,6 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
         i18nString(UIStrings.showCDPCommandEditor), i18nString(UIStrings.hideCDPCommandEditor),
         i18nString(UIStrings.CDPCommandEditorShown), i18nString(UIStrings.CDPCommandEditorHidden),
         'protocol-monitor.toggle-command-editor');
-    const tabSelector = this.selector.element;
 
     const populateToolbarInput = (): void => {
       const editorWidget = splitWidget.sidebarWidget();
@@ -365,11 +374,7 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
       const commandJson = editorWidget.jsonEditor.getCommandJson();
       const targetId = editorWidget.jsonEditor.targetId;
       if (targetId) {
-        const selectedIndex = this.selector.options().findIndex(option => option.value === targetId);
-        if (selectedIndex !== -1) {
-          this.selector.setSelectedIndex(selectedIndex);
-          this.#selectedTargetId = targetId;
-        }
+        this.#selectedTargetId = targetId;
       }
       if (commandJson) {
         this.#command = commandJson;
@@ -381,18 +386,21 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
                                    if (event.data === 'OnlyMain') {
                                      populateToolbarInput();
                                      this.#hideInputBar = false;
-                                     tabSelector?.setAttribute('style', 'display:flex');
                                    } else {
                                      const {command, parameters} = parseCommandInput(this.#command);
                                      this.dispatchEventToListeners(
                                          Events.COMMAND_CHANGE,
                                          {command, parameters, targetId: this.#selectedTargetId});
                                      this.#hideInputBar = true;
-                                     tabSelector?.setAttribute('style', 'display:none');
                                    }
                                    this.requestUpdate();
                                  }));
+    this.#selectedTargetId = 'main';
     this.performUpdate();
+    SDK.TargetManager.TargetManager.instance().addEventListener(
+        SDK.TargetManager.Events.AVAILABLE_TARGETS_CHANGED, () => {
+          this.requestUpdate();
+        });
   }
 
   override performUpdate(): void {
@@ -439,8 +447,14 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
         this.#filter = e.detail;
         this.requestUpdate();
       },
+      onTargetChange: (e: Event) => {
+        if (e.target instanceof HTMLSelectElement) {
+          this.#selectedTargetId = e.target.value;
+        }
+      },
       showHideSidebarButton: this.#showHideSidebarButton,
-      selector: this.selector,
+      targets: SDK.TargetManager.TargetManager.instance().targets(),
+      selectedTargetId: this.#selectedTargetId,
     };
     const viewOutput = {};
     this.#view(viewInput, viewOutput, this.contentElement);
@@ -487,23 +501,6 @@ export class ProtocolMonitorDataGrid extends Common.ObjectWrapper.eventMixin<Eve
     }, {jslogContext: 'documentation'});
   }
 
-  #createTargetSelector(): UI.Toolbar.ToolbarComboBox {
-    const selector = new UI.Toolbar.ToolbarComboBox(() => {
-      this.#selectedTargetId = selector.selectedOption()?.value;
-    }, i18nString(UIStrings.selectTarget), undefined, 'target-selector');
-    selector.element.classList.add('target-selector');
-    const targetManager = SDK.TargetManager.TargetManager.instance();
-    const syncTargets = (): void => {
-      selector.removeOptions();
-      for (const target of targetManager.targets()) {
-        selector.createOption(`${target.name()} (${target.inspectedURL()})`, target.id(), 'target');
-      }
-    };
-    targetManager.addEventListener(SDK.TargetManager.Events.AVAILABLE_TARGETS_CHANGED, syncTargets);
-    syncTargets();
-    return selector;
-  }
-
   onCommandSend(command: string, parameters: object, target?: string): void {
     const test = ProtocolClient.InspectorBackend.test;
     const targetManager = SDK.TargetManager.TargetManager.instance();

front_end/ui/legacy/Toolbar.ts

@@ -120,6 +120,8 @@ export class Toolbar extends HTMLElement {
           item = new ToolbarButton('', undefined, undefined, undefined, element);
         } else if (element instanceof ToolbarInputElement) {
           item = element.item;
+        } else if (element instanceof HTMLSelectElement) {
+          item = new ToolbarComboBox(null, element.title, undefined, undefined, element);
         } else {
           item = new ToolbarItem(element);
         }
@@ -1139,8 +1141,13 @@ export interface ItemsProvider {
 }
 
 export class ToolbarComboBox extends ToolbarItem<void, HTMLSelectElement> {
-  constructor(changeHandler: ((arg0: Event) => void)|null, title: string, className?: string, jslogContext?: string) {
-    super(document.createElement('select'));
+  constructor(
+      changeHandler: ((arg0: Event) => void)|null, title: string, className?: string, jslogContext?: string,
+      element?: HTMLSelectElement) {
+    if (!element) {
+      element = document.createElement('select');
+    }
+    super(element);
     if (changeHandler) {
       this.element.addEventListener('change', changeHandler, false);
     }