[GM3Restyling] Use <select> for Recorder replay throttling menu

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

Bug: 325441856
Change-Id: I563be8cb189c76547746102edd77fede703c6f99
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6357350
Auto-Submit: Kateryna Prokopenko <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>

Author: Kateryna Prokopenko

front_end/panels/recorder/components/RecordingView.ts

@@ -20,6 +20,8 @@ import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
 import * as Input from '../../../ui/components/input/input.js';
 import type * as Menus from '../../../ui/components/menus/menus.js';
 import * as TextEditor from '../../../ui/components/text_editor/text_editor.js';
+// eslint-disable-next-line rulesdir/es-modules-import
+import inspectorCommonStylesRaw from '../../../ui/legacy/inspectorCommon.css.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import type * as Converters from '../converters/converters.js';
@@ -37,6 +39,10 @@ import {
   type StepViewData,
 } from './StepView.js';
 
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const inspectorCommonStyles = new CSSStyleSheet();
+inspectorCommonStyles.replaceSync(inspectorCommonStylesRaw.cssText);
+
 // TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
 const recordingViewStyles = new CSSStyleSheet();
 recordingViewStyles.replaceSync(recordingViewStylesRaw.cssText);
@@ -374,6 +380,7 @@ export class RecordingView extends HTMLElement {
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [
+      inspectorCommonStyles,
       recordingViewStyles,
       Input.textInputStyles,
     ];
@@ -552,15 +559,18 @@ export class RecordingView extends HTMLElement {
     this.#render();
   }
 
-  #onNetworkConditionsChange(event: Menus.SelectMenu.SelectMenuItemSelectedEvent): void {
-    const preset = networkConditionPresets.find(
-        preset => preset.i18nTitleKey === event.itemValue,
-    );
-    this.dispatchEvent(
-        new NetworkConditionsChanged(
-            preset?.i18nTitleKey === SDK.NetworkManager.NoThrottlingConditions.i18nTitleKey ? undefined : preset,
-            ),
-    );
+  #onNetworkConditionsChange(event: Event): void {
+    const throttlingMenu = event.target;
+    if (throttlingMenu instanceof HTMLSelectElement) {
+      const preset = networkConditionPresets.find(
+          preset => preset.i18nTitleKey === throttlingMenu.value,
+      );
+      this.dispatchEvent(
+          new NetworkConditionsChanged(
+              preset?.i18nTitleKey === SDK.NetworkManager.NoThrottlingConditions.i18nTitleKey ? undefined : preset,
+              ),
+      );
+    }
   }
 
   #onTimeoutInput(event: Event): void {
@@ -744,31 +754,20 @@ export class RecordingView extends HTMLElement {
       replaySettingsFragments.push(html`<div class="editable-setting">
         <label class="wrapping-label" @click=${this.#onSelectMenuLabelClick}>
           ${i18nString(UIStrings.network)}
-          <devtools-select-menu
-            @selectmenuselected=${this.#onNetworkConditionsChange}
-            .disabled=${!this.#steps.find(step => step.type === 'navigate')}
-            .showDivider=${true}
-            .showArrow=${true}
-            .sideButton=${false}
-            .showSelectedItem=${true}
-            .jslogContext=${'network-conditions'}
-            .position=${Dialogs.Dialog.DialogVerticalPosition.BOTTOM}
-            .buttonTitle=${menuButtonTitle}
-          >
-            ${networkConditionPresets.map(condition => {
-              return html`<devtools-menu-item
-                .value=${condition.i18nTitleKey || ''}
-                .selected=${selectedOption === condition.i18nTitleKey}
-                jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(condition.i18nTitleKey || ''))}
-              >
-                ${
-                  condition.title instanceof Function
-                    ? condition.title()
-                    : condition.title
-                }
-              </devtools-menu-item>`;
-            })}
-          </devtools-select-menu>
+          <select
+              title=${menuButtonTitle}
+              jslog=${VisualLogging.dropDown('network-conditions').track({change: true})}
+              @change=${this.#onNetworkConditionsChange}>
+        ${networkConditionPresets.map(condition => html`
+          <option jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(condition.i18nTitleKey || ''))}
+                  value=${condition.i18nTitleKey || ''} ?selected=${selectedOption === condition.i18nTitleKey}>
+                  ${
+                    condition.title instanceof Function
+                      ? condition.title()
+                      : condition.title
+                  }
+          </option>`)}
+      </select>
         </label>
       </div>`);
       replaySettingsFragments.push(html`<div class="editable-setting">

test/e2e/recorder/ui_test.ts

@@ -12,6 +12,7 @@ import {
   getBrowserAndPages,
   getResourcesPath,
   renderCoordinatorQueueEmpty,
+  selectOption,
   waitFor,
   waitForAnimationFrame,
   waitForAria,
@@ -334,13 +335,11 @@ describe('Recorder', function() {
         await click('aria/Edit replay settings');
         await waitForAnimationFrame();
 
-        const selectMenu = await click(
-            '.editable-setting devtools-select-menu',
+        const selectMenu = await waitFor(
+            '.editable-setting select',
         );
-        await waitForAnimationFrame();
 
-        await click('devtools-menu-item:nth-child(3)', {root: selectMenu});
-        await waitForAnimationFrame();
+        void selectOption(await selectMenu.toElement('select'), '3G');
 
         const recording = await getCurrentRecording();