[GM3Restyling] Use <select> for WebAudio context selector

Screenshot: https://imgur.com/a/xenmD3T

Bug: 325441856
Change-Id: I33dcb0da74ea93ba26f3d0d6c5827cf74a9b7696
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6372540
Reviewed-by: Kim-Anh Tran <kimanh@chromium.org>
Auto-Submit: Kateryna Prokopenko <kprokopenko@chromium.org>
Commit-Queue: Kim-Anh Tran <kimanh@chromium.org>

Author: Kateryna Prokopenko

front_end/panels/web_audio/AudioContextSelector.ts

@@ -4,12 +4,10 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Platform from '../../core/platform/platform.js';
+import type * as Platform from '../../core/platform/platform.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import audioContextSelectorStyles from './audioContextSelector.css.js';
-
 const UIStrings = {
   /**
    *@description Text that shows there is no recording
@@ -24,119 +22,103 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/web_audio/AudioContextSelector.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class AudioContextSelector extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
-    UI.SoftDropDown.Delegate<Protocol.WebAudio.BaseAudioContext> {
+export class AudioContextSelector extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private readonly placeholderText: Platform.UIString.LocalizedString;
+  private readonly selectElement: HTMLSelectElement;
   private readonly items: UI.ListModel.ListModel<Protocol.WebAudio.BaseAudioContext>;
-  private readonly dropDown: UI.SoftDropDown.SoftDropDown<Protocol.WebAudio.BaseAudioContext>;
   private readonly toolbarItemInternal: UI.Toolbar.ToolbarItem;
-  private selectedContextInternal: Protocol.WebAudio.BaseAudioContext|null;
+
   constructor() {
     super();
 
     this.placeholderText = i18nString(UIStrings.noRecordings);
-
     this.items = new UI.ListModel.ListModel();
-
-    this.dropDown = new UI.SoftDropDown.SoftDropDown(this.items, this, 'audio-context');
-    this.dropDown.setPlaceholderText(this.placeholderText);
-
-    this.toolbarItemInternal = new UI.Toolbar.ToolbarItem(this.dropDown.element);
-    this.toolbarItemInternal.setEnabled(false);
+    this.selectElement = document.createElement('select');
+    this.toolbarItemInternal = new UI.Toolbar.ToolbarItem(this.selectElement);
     this.toolbarItemInternal.setTitle(i18nString(UIStrings.audioContextS, {PH1: this.placeholderText}));
+    this.selectElement.addEventListener('change', this.onSelectionChanged.bind(this));
+    this.selectElement.disabled = true;
+    this.addPlaceholderOption();
+
     this.items.addEventListener(UI.ListModel.Events.ITEMS_REPLACED, this.onListItemReplaced, this);
-    this.toolbarItemInternal.element.classList.add('toolbar-has-dropdown');
+  }
 
-    this.selectedContextInternal = null;
+  private addPlaceholderOption(): void {
+    const placeholderOption = UI.Fragment.html`
+    <option value="" hidden>${this.placeholderText}</option>`;
+    this.selectElement.appendChild(placeholderOption);
   }
 
   private onListItemReplaced(): void {
-    const hasItems = Boolean(this.items.length);
-    this.toolbarItemInternal.setEnabled(hasItems);
-    if (!hasItems) {
-      this.toolbarItemInternal.setTitle(i18nString(UIStrings.audioContextS, {PH1: this.placeholderText}));
+    this.selectElement.removeChildren();
+
+    if (this.items.length === 0) {
+      this.addPlaceholderOption();
+      this.selectElement.disabled = true;
+      this.onSelectionChanged();
+      return;
+    }
+
+    for (const context of this.items) {
+      const option = UI.Fragment.html`
+    <option value=${context.contextId}>${this.titleFor(context)}</option>`;
+      this.selectElement.appendChild(option);
     }
+    this.selectElement.disabled = false;
+    this.onSelectionChanged();
   }
 
   contextCreated({data: context}: Common.EventTarget.EventTargetEvent<Protocol.WebAudio.BaseAudioContext>): void {
     this.items.insert(this.items.length, context);
-
-    // Select if this is the first item.
-    if (this.items.length === 1) {
-      this.dropDown.selectItem(context);
-    }
+    this.onListItemReplaced();
   }
 
   contextDestroyed({data: contextId}: Common.EventTarget.EventTargetEvent<string>): void {
-    const contextIndex =
-        this.items.findIndex((context: Protocol.WebAudio.BaseAudioContext) => context.contextId === contextId);
-    if (contextIndex > -1) {
-      this.items.remove(contextIndex);
+    const index = this.items.findIndex(context => context.contextId === contextId);
+    if (index !== -1) {
+      this.items.remove(index);
+      this.onListItemReplaced();
     }
   }
 
   contextChanged({data: changedContext}: Common.EventTarget.EventTargetEvent<Protocol.WebAudio.BaseAudioContext>):
       void {
-    const contextIndex = this.items.findIndex(
-        (context: Protocol.WebAudio.BaseAudioContext) => context.contextId === changedContext.contextId);
-    if (contextIndex > -1) {
-      this.items.replace(contextIndex, changedContext);
-
-      // If the changed context is currently selected by user. Re-select it
-      // because the actual element is replaced with a new one.
-      if (this.selectedContextInternal && this.selectedContextInternal.contextId === changedContext.contextId) {
-        this.dropDown.selectItem(changedContext);
-      }
+    const index = this.items.findIndex(context => context.contextId === changedContext.contextId);
+    if (index !== -1) {
+      this.items.replace(index, changedContext);
+      this.onListItemReplaced();
     }
   }
 
-  createElementForItem(item: Protocol.WebAudio.BaseAudioContext): Element {
-    const element = document.createElement('div');
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: audioContextSelectorStyles});
-    const title = shadowRoot.createChild('div', 'title');
-    UI.UIUtils.createTextChild(title, Platform.StringUtilities.trimEndWithMaxLength(this.titleFor(item), 100));
-    return element;
-  }
-
   selectedContext(): Protocol.WebAudio.BaseAudioContext|null {
-    if (!this.selectedContextInternal) {
+    const selectedValue = this.selectElement.value;
+    if (!selectedValue) {
       return null;
     }
-
-    return this.selectedContextInternal;
+    return this.items.find(context => context.contextId === selectedValue) || null;
   }
 
-  highlightedItemChanged(
-      from: Protocol.WebAudio.BaseAudioContext|null, to: Protocol.WebAudio.BaseAudioContext|null,
-      fromElement: Element|null, toElement: Element|null): void {
-    if (fromElement) {
-      fromElement.classList.remove('highlighted');
-    }
-    if (toElement) {
-      toElement.classList.add('highlighted');
+  onSelectionChanged(): void {
+    const selectedContext = this.selectedContext();
+    if (selectedContext) {
+      this.toolbarItemInternal.setTitle(i18nString(UIStrings.audioContextS, {PH1: this.titleFor(selectedContext)}));
+    } else {
+      this.toolbarItemInternal.setTitle(i18nString(UIStrings.audioContextS, {PH1: this.placeholderText}));
     }
-  }
-
-  isItemSelectable(_item: Protocol.WebAudio.BaseAudioContext): boolean {
-    return true;
+    this.dispatchEventToListeners(Events.CONTEXT_SELECTED, selectedContext);
   }
 
   itemSelected(item: Protocol.WebAudio.BaseAudioContext|null): void {
     if (!item) {
       return;
     }
-
-    // It's possible that no context is selected yet.
-    if (!this.selectedContextInternal || this.selectedContextInternal.contextId !== item.contextId) {
-      this.selectedContextInternal = item;
-      this.toolbarItemInternal.setTitle(i18nString(UIStrings.audioContextS, {PH1: this.titleFor(item)}));
-    }
-
-    this.dispatchEventToListeners(Events.CONTEXT_SELECTED, item);
+    this.selectElement.value = item.contextId;
+    this.onSelectionChanged();
   }
 
   reset(): void {
     this.items.replaceAll([]);
+    this.onListItemReplaced();
   }
 
   titleFor(context: Protocol.WebAudio.BaseAudioContext): string {

front_end/panels/web_audio/WebAudioView.ts

@@ -82,9 +82,7 @@ export class WebAudioView extends UI.ThrottledWidget.ThrottledWidget implements
         SelectorEvents.CONTEXT_SELECTED,
         (event: Common.EventTarget.EventTargetEvent<Protocol.WebAudio.BaseAudioContext|null>) => {
           const context = event.data;
-          if (context) {
-            this.updateDetailView(context);
-          }
+          this.updateDetailView(context);
           void this.doUpdate();
         });
 
@@ -180,10 +178,10 @@ export class WebAudioView extends UI.ThrottledWidget.ThrottledWidget implements
   }
 
   private reset(): void {
+    this.contextSelector.reset();
     if (this.landingPage.isShowing()) {
       this.landingPage.detach();
     }
-    this.contextSelector.reset();
     this.detailViewContainer.removeChildren();
     this.landingPage.show(this.detailViewContainer);
     this.graphManager.clearGraphs();
@@ -335,7 +333,13 @@ export class WebAudioView extends UI.ThrottledWidget.ThrottledWidget implements
     });
   }
 
-  private updateDetailView(context: Protocol.WebAudio.BaseAudioContext): void {
+  private updateDetailView(context: Protocol.WebAudio.BaseAudioContext|null): void {
+    if (!context) {
+      this.landingPage.detach();
+      this.detailViewContainer.removeChildren();
+      this.landingPage.show(this.detailViewContainer);
+      return;
+    }
     if (this.landingPage.isShowing()) {
       this.landingPage.detach();
     }