chrome-devtools-frontend 1.0.1626840 → 1.0.1629211

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -1,8 +1,6 @@
 // Copyright 2016 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../ui/legacy/legacy.js';
 
@@ -13,10 +11,58 @@ import * as Platform from '../../core/platform/platform.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, i18nTemplate, type LitTemplate, render} from '../../ui/lit/lit.js';
+import {Directive, Directives, html, i18nTemplate, type LitTemplate, noChange, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 
+class AutoWidthSelectDirective extends Directive.Directive {
+  static itemWidthCache = new Map<string, string>();
+
+  constructor(partInfo: Directive.PartInfo) {
+    super(partInfo);
+    if (partInfo.type !== Directive.PartType.ELEMENT) {
+      throw new Error('AutoWidthSelectDirective must be used as an element directive');
+    }
+  }
+
+  override update(part: Directive.ElementPart, [text]: [string]): unknown {
+    /* eslint-disable @devtools/no-imperative-dom-api */
+    const select = part.element as HTMLSelectElement;
+
+    let widthPx = AutoWidthSelectDirective.itemWidthCache.get(text);
+    if (!widthPx) {
+      const measuringElement = document.createElement('select');
+      measuringElement.className = select.className;
+      measuringElement.style.width = 'fit-content';
+      measuringElement.style.position = 'absolute';
+      measuringElement.style.visibility = 'hidden';
+      measuringElement.style.pointerEvents = 'none';
+      measuringElement.appendChild(document.createElement('option'));
+      measuringElement.options[0].textContent = text;
+
+      // Append to the select's parent so it inherits the exact same Shadow DOM styles
+      select.parentElement?.appendChild(measuringElement);
+      const width = measuringElement.offsetWidth;
+      measuringElement.remove();
+
+      widthPx = width ? `${width}px` : '';
+      if (width > 0) {
+        AutoWidthSelectDirective.itemWidthCache.set(text, widthPx);
+      }
+    }
+
+    select.style.width = widthPx;
+    /* eslint-enable @devtools/no-imperative-dom-api */
+    return this.render(text);
+  }
+
+  render(_text: string): unknown {
+    return noChange;
+  }
+}
+
+const autoWidthSelect = Directive.directive(AutoWidthSelectDirective);
+
 const UIStrings = {
   /**
    * @description Title of the device dimensions selection item in the Device Mode Toolbar.
@@ -188,11 +234,227 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/emulation/DeviceModeToolbar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {ifDefined, styleMap} = Directives;
+const {ifDefined, live} = Directives;
 const {widget} = UI.Widget;
 const {bindToSetting} = UI.UIUtils;
 
-export class DeviceModeToolbar {
+export interface DeviceModeOption {
+  device: EmulationModel.EmulatedDevices.EmulatedDevice;
+  title: string;
+  selected: boolean;
+  jslogContext: string;
+}
+
+export interface ViewInput {
+  isResponsive: boolean;
+  isFullHeight: boolean;
+  widthValue: string;
+  heightValue: string;
+  heightPlaceholder: string;
+  modeButtonTitle: string;
+  modeButtonDisabled: boolean;
+  showSpanButton: boolean;
+  showPostureItem: boolean;
+  deviceModeOptions: {
+    responsive: {title: string, selected: boolean, jslogContext: string},
+    standard: DeviceModeOption[],
+    custom: DeviceModeOption[],
+    edit: {title: string, jslogContext: string},
+  };
+  scaleOptions: Array<{title: string, value: number, selected: boolean, jslogContext: string}>;
+  dprOptions: Array<{title: string, value: number, selected: boolean, jslogContext: string}>;
+  uaOptions: Array<{title: string, value: EmulationModel.DeviceModeModel.UA, selected: boolean, jslogContext: string}>;
+  postureOptions: Array<{title: string, value: string, selected: boolean}>;
+  selectedDeviceOption: {title: string, selected: boolean, jslogContext: string}|undefined;
+  deviceText: string;
+  scaleText: string;
+  dprText: string;
+  uaText: string;
+  postureText: string;
+  onDeviceChange: (event: Event) => void;
+  onWidthChange: (event: Event) => void;
+  onHeightChange: (event: Event) => void;
+  onScaleChange: (event: Event) => void;
+  onDeviceScaleChange: (event: Event) => void;
+  onUAChange: (event: Event) => void;
+  onPostureChange: (event: Event) => void;
+  onModeMenuClick: (event: Event) => void;
+  onSpanClick: () => void;
+  onMoreOptionsClick: (event: Event) => void;
+  autoAdjustScaleSetting: Common.Settings.Setting<boolean>;
+  showDeviceScaleFactorSetting: Common.Settings.Setting<boolean>;
+  showUserAgentTypeSetting: Common.Settings.Setting<boolean>;
+}
+
+export type View = (input: ViewInput, output: object, target: HTMLElement|DocumentFragment) => void;
+
+function createSizeInput(
+    title: string, jslogContext: string, value: string|undefined, disabled: boolean|undefined,
+    placeholder: string|undefined, onChange: (event: Event) => void): LitTemplate {
+  return html`
+      <input type="number"
+             max=${EmulationModel.DeviceModeModel.MaxDeviceSize}
+             min=${EmulationModel.DeviceModeModel.MinDeviceSize}
+             title=${title}
+             class="device-mode-size-input"
+             .disabled=${disabled ?? false}
+             jslog=${VisualLogging.textField().track({change: true}).context(jslogContext)}
+             .value=${value ?? ''}
+             placeholder=${ifDefined(placeholder)}
+             @change=${onChange}
+             @keydown=${(event: Event): void => {
+    const input = event.target as HTMLInputElement;
+    let modifiedValue = UI.UIUtils.modifiedFloatNumber(Number(input.value), event);
+    if (modifiedValue === null) {
+      return;
+    }
+    modifiedValue = Math.min(modifiedValue, EmulationModel.DeviceModeModel.MaxDeviceSize);
+    modifiedValue = Math.max(modifiedValue, EmulationModel.DeviceModeModel.MinDeviceSize);
+
+    event.preventDefault();
+    input.value = String(modifiedValue);
+    input.dispatchEvent(new Event('change'));
+  }}>`;
+}
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(html`
+    <devtools-toolbar class="main-toolbar">
+      <div class="device-mode-empty-toolbar-element"></div>
+      ${i18nTemplate(str_, UIStrings.dimensions, {PH1: html`
+        <select class="dark-text toolbar-has-dropdown-shrinkable"
+                ${autoWidthSelect(input.deviceText)}
+                title=${i18nString(UIStrings.deviceType)}
+                aria-label=${i18nString(UIStrings.deviceType)}
+                @change=${input.onDeviceChange}
+                .value=${live(input.selectedDeviceOption === input.deviceModeOptions.responsive ? 'Responsive' : (input.selectedDeviceOption?.title || 'Responsive'))}
+                jslog=${VisualLogging.dropDown().track({change: true}).context('device')}>
+          <option value="Responsive" ?selected=${input.deviceModeOptions.responsive.selected} jslog=${VisualLogging.item(input.deviceModeOptions.responsive.jslogContext).track({click: true})}>
+            ${input.deviceModeOptions.responsive.title}
+          </option>
+          ${input.deviceModeOptions.standard.length > 0 ? html`
+            <optgroup label="Standard">
+              ${input.deviceModeOptions.standard.map(o => html`<option value=${o.title} ?selected=${o.selected} jslog=${VisualLogging.item(o.jslogContext).track({click: true})}>${o.title}</option>`)}
+            </optgroup>
+          ` : ''}
+          ${input.deviceModeOptions.custom.length > 0 ? html`
+            <optgroup label="Custom">
+              ${input.deviceModeOptions.custom.map(o => html`<option value=${o.title} ?selected=${o.selected} jslog=${VisualLogging.item(o.jslogContext).track({click: true})}>${o.title}</option>`)}
+            </optgroup>
+          ` : ''}
+          <option value="Edit" jslog=${VisualLogging.item(input.deviceModeOptions.edit.jslogContext).track({click: true})}>
+            ${input.deviceModeOptions.edit.title}
+          </option>
+        </select>`})}
+
+      ${createSizeInput(i18nString(UIStrings.width), 'width', input.widthValue, !input.isResponsive, '', input.onWidthChange)}
+
+      <div class="device-mode-x">×</div>
+      ${createSizeInput(i18nString(UIStrings.heightLeaveEmptyForFull), 'height', input.heightValue, !input.isResponsive, input.heightPlaceholder, input.onHeightChange)}
+
+      <div class="device-mode-empty-toolbar-element"></div>
+      <select class="dark-text toolbar-has-dropdown-shrinkable"
+              ${autoWidthSelect(input.scaleText)}
+              title=${i18nString(UIStrings.zoom)}
+              aria-label=${i18nString(UIStrings.zoom)}
+              @change=${input.onScaleChange}
+              .value=${String(input.scaleOptions.find(o => o.selected)?.value || '')}
+              jslog=${VisualLogging.dropDown().track({change: true}).context('scale')}>
+        ${input.scaleOptions.map(o => html`<option value=${o.value} ?selected=${o.selected} jslog=${VisualLogging.item(o.jslogContext).track({click: true})}>${o.title}</option>`)}
+      </select>
+
+      <devtools-button .data=${{variant: Buttons.Button.Variant.TOOLBAR, iconName: 'center-focus-weak',
+                                toggledIconName: 'center-focus-weak', toggleType: Buttons.Button.ToggleType.PRIMARY} as Buttons.Button.ButtonData}
+                       class="toolbar-button" title=${i18nString(UIStrings.autoadjustZoom)}
+                       ${bindToSetting(input.autoAdjustScaleSetting)}>
+      </devtools-button>
+
+      <div class="device-mode-empty-toolbar-element"></div>
+
+      ${input.showDeviceScaleFactorSetting.get() ? html`
+        <div class="toolbar-text">
+          ${i18nTemplate(str_, UIStrings.dpr, {
+            PH1: html`
+              <select class="dark-text toolbar-has-dropdown-shrinkable"
+                      ${autoWidthSelect(input.dprText)}
+                    title=${i18nString(UIStrings.devicePixelRatio)}
+                    aria-label=${i18nString(UIStrings.devicePixelRatio)}
+                    @change=${input.onDeviceScaleChange}
+                    .value=${String(input.dprOptions.find(o => o.selected)?.value || '')}
+                    jslog=${VisualLogging.dropDown().track({change: true}).context('device-pixel-ratio')}
+                    ?disabled=${!input.isResponsive}>
+                ${input.dprOptions.map(o => html`<option value=${o.value} ?selected=${o.selected} jslog=${VisualLogging.item(o.jslogContext).track({click: true})}>${o.title}</option>`)}
+              </select>`
+          })}
+        </div>` : ''}
+
+      <div class="device-mode-empty-toolbar-element"></div>
+      ${input.showUserAgentTypeSetting.get() ? html`
+        <select class="dark-text toolbar-has-dropdown-shrinkable"
+                ${autoWidthSelect(input.uaText)}
+                title=${i18nString(UIStrings.deviceType)}
+                aria-label=${i18nString(UIStrings.deviceType)}
+                @change=${input.onUAChange}
+                .value=${input.uaOptions.find(o => o.selected)?.value || ''}
+                jslog=${VisualLogging.dropDown().track({change: true}).context('device-type')}
+                ?disabled=${!input.isResponsive}>
+          ${input.uaOptions.map(o => html`<option value=${o.value} ?selected=${o.selected} jslog=${VisualLogging.item(o.jslogContext).track({click: true})}>${o.title}</option>`)}
+        </select>` : ''}
+      <select class="dark-text" ${widget(MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect, {
+        title: i18nString(UIStrings.throttling),
+        bindToGlobalConditions: true,
+      })}></select>
+      <select class="dark-text toolbar-has-dropdown-shrinkable" ${widget(
+          MobileThrottling.ThrottlingManager.SaveDataOverrideSelect)}></select>
+
+      <div class="device-mode-empty-toolbar-element"></div>
+      <devtools-button class="toolbar-button"
+                       .data=${{variant: Buttons.Button.Variant.TOOLBAR, iconName: 'screen-rotation'} as Buttons.Button.ButtonData}
+                       jslog=${VisualLogging.action('screen-rotation').track({click: true})}
+                       @click=${input.onModeMenuClick}
+                       .title=${input.modeButtonTitle}
+                       .disabled=${input.modeButtonDisabled}>
+      </devtools-button>
+
+      <!-- Show dual screen toolbar -->
+      ${input.showSpanButton ? html`
+        <devtools-button class="toolbar-button"
+                         .data=${{variant: Buttons.Button.Variant.TOOLBAR, iconName: 'device-fold'} as Buttons.Button.ButtonData}
+                         jslog=${VisualLogging.action('device-fold').track({click: true})}
+                         .title=${i18nString(UIStrings.toggleDualscreenMode)}
+                         @click=${input.onSpanClick}>
+        </devtools-button>` : ''}
+
+      <!-- Show posture toolbar menu for foldable devices. -->
+      <div class="device-mode-empty-toolbar-element"></div>
+      ${input.showPostureItem ? html`
+        <select class="dark-text toolbar-has-dropdown-shrinkable"
+                ${autoWidthSelect(input.postureText)}
+                title=${i18nString(UIStrings.devicePosture)}
+                aria-label=${i18nString(UIStrings.devicePosture)}
+                @change=${input.onPostureChange}
+                .value=${input.postureOptions.find(o => o.selected)?.value || ''}
+                jslog=${VisualLogging.dropDown().track({change: true}).context('device-posture')}>
+          ${input.postureOptions.map(o => html`<option value=${o.value} ?selected=${o.selected} jslog=${VisualLogging.item(o.value.toLowerCase()).track({click: true})}>${o.title}</option>`)}
+        </select>` : ''}
+    </devtools-toolbar>
+    <devtools-toolbar class="device-mode-toolbar-options" wrappable>
+      <div class="device-mode-empty-toolbar-element"></div>
+      <devtools-button
+        .data=${{variant: Buttons.Button.Variant.TOOLBAR, iconName: 'dots-vertical', title: i18nString(UIStrings.moreOptions)} as Buttons.Button.ButtonData}
+        @click=${input.onMoreOptionsClick}
+        jslog=${VisualLogging.dropDown('more-options').track({click: true})}
+      ></devtools-button></devtools-toolbar>
+  `, target, {container: {
+      classes: ['device-mode-toolbar'],
+      attributes: {jslog: `${VisualLogging.toolbar('device-mode').track({resize: true})}`,
+    }
+  }});
+  // clang-format on
+};
+
+export class DeviceModeToolbar extends UI.Widget.Widget {
   private model: EmulationModel.DeviceModeModel.DeviceModeModel;
   private readonly showMediaInspectorSetting: Common.Settings.Setting<boolean>;
   private readonly showRulersSetting: Common.Settings.Setting<boolean>;
@@ -201,18 +463,16 @@ export class DeviceModeToolbar {
   private readonly showUserAgentTypeSetting: Common.Settings.Setting<boolean>;
   private autoAdjustScaleSetting: Common.Settings.Setting<boolean>;
   private readonly lastMode: Map<EmulationModel.EmulatedDevices.EmulatedDevice, EmulationModel.EmulatedDevices.Mode>;
-  readonly #element: HTMLDivElement;
   private readonly emulatedDevicesList: EmulationModel.EmulatedDevices.EmulatedDevicesList;
   private readonly persistenceSetting: Common.Settings.Setting<{device: string, orientation: string, mode: string}>;
-  private mainToolbar: UI.Toolbar.Toolbar;
-  private optionsToolbar: UI.Toolbar.Toolbar;
-  readonly #itemWidthCache = new Map<string, string>();
-  #measuringElement: HTMLSelectElement|null = null;
+  private readonly view: View;
 
   constructor(
       model: EmulationModel.DeviceModeModel.DeviceModeModel,
-      showMediaInspectorSetting: Common.Settings.Setting<boolean>,
-      showRulersSetting: Common.Settings.Setting<boolean>) {
+      showMediaInspectorSetting: Common.Settings.Setting<boolean>, showRulersSetting: Common.Settings.Setting<boolean>,
+      view: View = DEFAULT_VIEW) {
+    super();
+    this.view = view;
     this.model = model;
     this.showMediaInspectorSetting = showMediaInspectorSetting;
     this.showRulersSetting = showRulersSetting;
@@ -220,24 +480,17 @@ export class DeviceModeToolbar {
     this.deviceOutlineSetting = this.model.deviceOutlineSetting();
     this.showDeviceScaleFactorSetting =
         Common.Settings.Settings.instance().createSetting('emulation.show-device-scale-factor', false);
-    this.showDeviceScaleFactorSetting.addChangeListener(this.update, this);
+    this.showDeviceScaleFactorSetting.addChangeListener(this.requestUpdate, this);
 
     this.showUserAgentTypeSetting =
         Common.Settings.Settings.instance().createSetting('emulation.show-user-agent-type', false);
-    this.showUserAgentTypeSetting.addChangeListener(this.update, this);
+    this.showUserAgentTypeSetting.addChangeListener(this.requestUpdate, this);
 
     this.autoAdjustScaleSetting =
         Common.Settings.Settings.instance().createSetting('emulation.auto-adjust-scale', true);
 
     this.lastMode = new Map();
 
-    this.#element = document.createElement('div');
-    this.#element.classList.add('device-mode-toolbar');
-    this.#element.setAttribute('jslog', `${VisualLogging.toolbar('device-mode').track({resize: true})}`);
-
-    this.mainToolbar = this.createMainToolbar();
-    this.optionsToolbar = this.createOptionsToolbar();
-
     this.emulatedDevicesList = EmulationModel.EmulatedDevices.EmulatedDevicesList.instance();
     this.emulatedDevicesList.addEventListener(
         EmulationModel.EmulatedDevices.Events.CUSTOM_DEVICES_UPDATED, this.deviceListChanged, this);
@@ -247,56 +500,16 @@ export class DeviceModeToolbar {
     this.persistenceSetting = Common.Settings.Settings.instance().createSetting(
         'emulation.device-mode-value', {device: '', orientation: '', mode: ''});
 
-    this.model.toolbarControlsEnabledSetting().addChangeListener(this.update, this);
-    this.model.scaleSetting().addChangeListener(this.update, this);
-    this.model.uaSetting().addChangeListener(this.update, this);
-    this.model.deviceScaleFactorSetting().addChangeListener(this.update, this);
-    this.model.addEventListener(EmulationModel.DeviceModeModel.Events.UPDATED, this.update, this);
+    this.model.toolbarControlsEnabledSetting().addChangeListener(this.requestUpdate, this);
+    this.model.scaleSetting().addChangeListener(this.requestUpdate, this);
+    this.model.uaSetting().addChangeListener(this.requestUpdate, this);
+    this.model.deviceScaleFactorSetting().addChangeListener(this.requestUpdate, this);
+    this.model.addEventListener(EmulationModel.DeviceModeModel.Events.UPDATED, this.requestUpdate, this);
 
-    this.update();
+    this.performUpdate();
   }
 
-  private createEmptyToolbarElement(): HTMLDivElement {
-    const element = document.createElement('div');
-    element.classList.add('device-mode-empty-toolbar-element');
-    return element;
-  }
-
-  private createSizeInput(
-      title: string, jslogContext: string, value: string|undefined, disabled: boolean|undefined,
-      placeholder: string|undefined, onChange: (event: Event) => void): LitTemplate {
-    return html`
-        <input type="number"
-               max=${EmulationModel.DeviceModeModel.MaxDeviceSize}
-               min=${EmulationModel.DeviceModeModel.MinDeviceSize}
-               title=${title}
-               class="device-mode-size-input"
-               .disabled=${disabled ?? false}
-               jslog=${VisualLogging.textField().track({change: true}).context(jslogContext)}
-               .value=${value ?? ''}
-               placeholder=${ifDefined(placeholder)}
-               @change=${onChange}
-               @keydown=${(event: Event): void => {
-      const input = event.target as HTMLInputElement;
-      let modifiedValue = UI.UIUtils.modifiedFloatNumber(Number(input.value), event);
-      if (modifiedValue === null) {
-        return;
-      }
-      modifiedValue = Math.min(modifiedValue, EmulationModel.DeviceModeModel.MaxDeviceSize);
-      modifiedValue = Math.max(modifiedValue, EmulationModel.DeviceModeModel.MinDeviceSize);
-
-      event.preventDefault();
-      input.value = String(modifiedValue);
-      input.dispatchEvent(new Event('change'));
-    }}>`;
-  }
-
-  private createMainToolbar(): UI.Toolbar.Toolbar {
-    const mainToolbar = this.#element.createChild('devtools-toolbar', 'main-toolbar');
-    return mainToolbar as UI.Toolbar.Toolbar;
-  }
-
-  private renderMainToolbar(): void {
+  override performUpdate(): void {
     const isResponsive = this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive;
     const isFullHeight = isResponsive && this.model.isFullHeight();
     const size = this.model.appliedDeviceSize();
@@ -305,6 +518,24 @@ export class DeviceModeToolbar {
     const heightPlaceholder = String(size.height);
 
     const device = this.model.device();
+
+    if (this.model.type() === EmulationModel.DeviceModeModel.Type.Device && device) {
+      this.lastMode.set(device, (this.model.mode() as EmulationModel.EmulatedDevices.Mode));
+    }
+
+    const value = this.persistenceSetting.get();
+    const currentMode = this.model.mode();
+    if (device) {
+      value.device = device.title;
+      value.orientation = currentMode ? currentMode.orientation : '';
+      value.mode = currentMode ? currentMode.title : '';
+    } else {
+      value.device = '';
+      value.orientation = '';
+      value.mode = '';
+    }
+    this.persistenceSetting.set(value);
+
     let modeButtonTitle = i18nString(UIStrings.rotate);
     let modeButtonDisabled = false;
     if (this.model.isScreenOrientationLocked()) {
@@ -350,149 +581,64 @@ export class DeviceModeToolbar {
     const uaText = uaOptions.find(o => o.selected)?.title || '';
     const postureText = postureOptions.find(o => o.selected)?.title || '';
 
-    // clang-format off
-    render(html`
-      <div class="device-mode-empty-toolbar-element"></div>
-      ${i18nTemplate(str_, UIStrings.dimensions, {PH1: html`
-        <select class="dark-text toolbar-has-dropdown-shrinkable"
-                style=${styleMap({width: this.calculateItemWidth(deviceText)})}
-                title=${i18nString(UIStrings.deviceType)}
-                aria-label=${i18nString(UIStrings.deviceType)}
-                @change=${this.onDeviceChange.bind(this)}
-                .value=${selectedDeviceOption === deviceModeOptions.responsive ? 'Responsive' : (selectedDeviceOption?.title || 'Responsive')}
-                jslog=${VisualLogging.dropDown().track({change: true}).context('device')}>
-          <option value="Responsive" ?selected=${deviceModeOptions.responsive.selected} jslog=${VisualLogging.item(deviceModeOptions.responsive.jslogContext).track({click: true})}>
-            ${deviceModeOptions.responsive.title}
-          </option>
-          ${deviceModeOptions.standard.length > 0 ? html`
-            <optgroup label="Standard">
-              ${deviceModeOptions.standard.map(o => html`<option value=${o.title} ?selected=${o.selected} jslog=${VisualLogging.item(o.jslogContext).track({click: true})}>${o.title}</option>`)}
-            </optgroup>
-          ` : ''}
-          ${deviceModeOptions.custom.length > 0 ? html`
-            <optgroup label="Custom">
-              ${deviceModeOptions.custom.map(o => html`<option value=${o.title} ?selected=${o.selected} jslog=${VisualLogging.item(o.jslogContext).track({click: true})}>${o.title}</option>`)}
-            </optgroup>
-          ` : ''}
-          <option value="Edit" jslog=${VisualLogging.item(deviceModeOptions.edit.jslogContext).track({click: true})}>
-            ${deviceModeOptions.edit.title}
-          </option>
-        </select>`})}
-
-      ${this.createSizeInput(i18nString(UIStrings.width), 'width', widthValue, !isResponsive, '', (event: Event) => {
+    const enabled = this.model.toolbarControlsEnabledSetting().get();
+    this.contentElement.classList.toggle('disabled', !enabled);
+
+    const input: ViewInput = {
+      isResponsive,
+      isFullHeight,
+      widthValue,
+      heightValue,
+      heightPlaceholder,
+      modeButtonTitle,
+      modeButtonDisabled,
+      showSpanButton,
+      showPostureItem,
+      deviceModeOptions,
+      scaleOptions,
+      dprOptions,
+      uaOptions,
+      postureOptions,
+      selectedDeviceOption,
+      deviceText,
+      scaleText,
+      dprText,
+      uaText,
+      postureText,
+      onDeviceChange: this.onDeviceChange.bind(this),
+      onWidthChange: (event: Event) => {
         const width = Number((event.target as HTMLInputElement).value);
         if (this.autoAdjustScaleSetting.get()) {
           this.model.setWidthAndScaleToFit(width);
         } else {
           this.model.setWidth(width);
         }
-      })}
-
-      <div class="device-mode-x">×</div>
-      ${this.createSizeInput(i18nString(UIStrings.heightLeaveEmptyForFull), 'height', heightValue, !isResponsive, heightPlaceholder, (event: Event) => {
+      },
+      onHeightChange: (event: Event) => {
         const height = Number((event.target as HTMLInputElement).value);
         if (this.autoAdjustScaleSetting.get()) {
           this.model.setHeightAndScaleToFit(height);
         } else {
           this.model.setHeight(height);
         }
-      })}
-
-      <div class="device-mode-empty-toolbar-element"></div>
-      <select class="dark-text toolbar-has-dropdown-shrinkable"
-              style=${styleMap({width: this.calculateItemWidth(scaleText)})}
-              title=${i18nString(UIStrings.zoom)}
-              aria-label=${i18nString(UIStrings.zoom)}
-              @change=${this.onScaleChange.bind(this)}
-              .value=${String(scaleOptions.find(o => o.selected)?.value || '')}
-              jslog=${VisualLogging.dropDown().track({change: true}).context('scale')}>
-        ${scaleOptions.map(o => html`<option value=${o.value} ?selected=${o.selected} jslog=${VisualLogging.item(o.jslogContext).track({click: true})}>${o.title}</option>`)}
-      </select>
-
-      <devtools-button .data=${{variant: Buttons.Button.Variant.TOOLBAR, iconName: 'center-focus-weak',
-                                toggledIconName: 'center-focus-weak', toggleType: Buttons.Button.ToggleType.PRIMARY} as Buttons.Button.ButtonData}
-                       class="toolbar-button" title=${i18nString(UIStrings.autoadjustZoom)}
-                       ${bindToSetting(this.autoAdjustScaleSetting)}>
-      </devtools-button>
-
-      <div class="device-mode-empty-toolbar-element"></div>
-
-      ${this.showDeviceScaleFactorSetting.get() ? html`
-        ${i18nTemplate(str_, UIStrings.dpr, {
-          PH1: html`
-            <select class="dark-text toolbar-has-dropdown-shrinkable"
-                    style=${styleMap({width: this.calculateItemWidth(dprText)})}
-                    title=${i18nString(UIStrings.devicePixelRatio)}
-                    aria-label=${i18nString(UIStrings.devicePixelRatio)}
-                    @change=${this.onDeviceScaleChange.bind(this)}
-                    .value=${String(dprOptions.find(o => o.selected)?.value || '')}
-                    jslog=${VisualLogging.dropDown().track({change: true}).context('device-pixel-ratio')}
-                    ?disabled=${!isResponsive}>
-              ${dprOptions.map(o => html`<option value=${o.value} ?selected=${o.selected} jslog=${VisualLogging.item(o.jslogContext).track({click: true})}>${o.title}</option>`)}
-            </select>`
-        })}` : ''}
-
-      <div class="device-mode-empty-toolbar-element"></div>
-      ${this.showUserAgentTypeSetting.get() ? html`
-        <select class="dark-text toolbar-has-dropdown-shrinkable"
-                style=${styleMap({width: this.calculateItemWidth(uaText)})}
-                title=${i18nString(UIStrings.deviceType)}
-                aria-label=${i18nString(UIStrings.deviceType)}
-                @change=${this.onUAChange.bind(this)}
-                .value=${uaOptions.find(o => o.selected)?.value || ''}
-                jslog=${VisualLogging.dropDown().track({change: true}).context('device-type')}
-                ?disabled=${!isResponsive}>
-          ${uaOptions.map(o => html`<option value=${o.value} ?selected=${o.selected} jslog=${VisualLogging.item(o.jslogContext).track({click: true})}>${o.title}</option>`)}
-        </select>` : ''}
-      <select class="dark-text" ${widget(MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect, {
-        title: i18nString(UIStrings.throttling),
-        bindToGlobalConditions: true,
-      })}></select>
-      <select class="dark-text toolbar-has-dropdown-shrinkable" ${widget(
-          MobileThrottling.ThrottlingManager.SaveDataOverrideSelect)}></select>
-
-      <div class="device-mode-empty-toolbar-element"></div>
-      <devtools-button class="toolbar-button"
-                       .data=${{variant: Buttons.Button.Variant.TOOLBAR, iconName: 'screen-rotation',
-                                disabled: modeButtonDisabled} as Buttons.Button.ButtonData}
-                       jslog=${VisualLogging.action('screen-rotation').track({click: true})}
-                       @click=${this.modeMenuClicked.bind(this)}
-                       .title=${modeButtonTitle}>
-      </devtools-button>
-
-      <!-- Show dual screen toolbar -->
-      ${showSpanButton ? html`
-        <devtools-button class="toolbar-button"
-                         .data=${{variant: Buttons.Button.Variant.TOOLBAR, iconName: 'device-fold'} as Buttons.Button.ButtonData}
-                         jslog=${VisualLogging.action('device-fold').track({click: true})}
-                         .title=${i18nString(UIStrings.toggleDualscreenMode)}
-                         @click=${this.spanClicked.bind(this)}>
-        </devtools-button>` : ''}
-
-      <!-- Show posture toolbar menu for foldable devices. -->
-      <div class="device-mode-empty-toolbar-element"></div>
-      ${showPostureItem ? html`
-        <select class="dark-text toolbar-has-dropdown-shrinkable"
-                style=${styleMap({width: this.calculateItemWidth(postureText)})}
-                title=${i18nString(UIStrings.devicePosture)}
-                aria-label=${i18nString(UIStrings.devicePosture)}
-                @change=${this.onPostureChange.bind(this)}
-                .value=${postureOptions.find(o => o.selected)?.value || ''}
-                jslog=${VisualLogging.dropDown().track({change: true}).context('device-posture')}>
-          ${postureOptions.map(o => html`<option value=${o.value} ?selected=${o.selected} jslog=${VisualLogging.item(o.value.toLowerCase()).track({click: true})}>${o.title}</option>`)}
-        </select>` : ''}`, this.mainToolbar, {host: this});
-    // clang-format on
-  }
+      },
+      onScaleChange: this.onScaleChange.bind(this),
+      onDeviceScaleChange: this.onDeviceScaleChange.bind(this),
+      onUAChange: this.onUAChange.bind(this),
+      onPostureChange: this.onPostureChange.bind(this),
+      onModeMenuClick: this.modeMenuClicked.bind(this),
+      onSpanClick: this.spanClicked.bind(this),
+      onMoreOptionsClick: (event: Event) => {
+        const contextMenu = new UI.ContextMenu.ContextMenu(event);
+        this.appendOptionsMenuItems(contextMenu);
+        void contextMenu.show();
+      },
+      autoAdjustScaleSetting: this.autoAdjustScaleSetting,
+      showDeviceScaleFactorSetting: this.showDeviceScaleFactorSetting,
+      showUserAgentTypeSetting: this.showUserAgentTypeSetting,
+    };
 
-  private createOptionsToolbar(): UI.Toolbar.Toolbar {
-    const optionsToolbar = this.#element.createChild('devtools-toolbar', 'device-mode-toolbar-options');
-    optionsToolbar.wrappable = true;
-    optionsToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
-    const moreOptionsButton = new UI.Toolbar.ToolbarMenuButton(
-        this.appendOptionsMenuItems.bind(this), true, undefined, 'more-options', 'dots-vertical');
-    moreOptionsButton.setTitle(i18nString(UIStrings.moreOptions));
-    optionsToolbar.appendToolbarItem(moreOptionsButton);
-    return optionsToolbar;
+    this.view(input, {}, this.contentElement);
   }
 
   private getDevicePostureOptions(): Array<{title: string, value: string, selected: boolean}> {
@@ -737,7 +883,7 @@ export class DeviceModeToolbar {
     const value = (event.target as HTMLSelectElement).value;
     if (value === 'Edit') {
       this.emulatedDevicesList.revealCustomSetting();
-      this.renderMainToolbar();
+      this.requestUpdate();
     } else if (value === 'Responsive') {
       this.switchToResponsive();
     } else {
@@ -751,7 +897,7 @@ export class DeviceModeToolbar {
   }
 
   private deviceListChanged(): void {
-    this.renderMainToolbar();
+    this.requestUpdate();
     const device = this.model.device();
     if (!device) {
       return;
@@ -875,39 +1021,6 @@ export class DeviceModeToolbar {
     return `${(this.model.scale() * 100).toFixed(0)}`;
   }
 
-  element(): Element {
-    return this.#element;
-  }
-
-  update(): void {
-    const enabled = this.model.toolbarControlsEnabledSetting().get();
-    this.mainToolbar.setEnabled(enabled);
-    this.optionsToolbar.setEnabled(enabled);
-
-    const device = this.model.device();
-
-    if (this.model.type() === EmulationModel.DeviceModeModel.Type.Device) {
-      this.lastMode.set(
-          (this.model.device() as EmulationModel.EmulatedDevices.EmulatedDevice),
-          (this.model.mode() as EmulationModel.EmulatedDevices.Mode));
-    }
-
-    const value = this.persistenceSetting.get();
-    const currentMode = this.model.mode();
-    if (device) {
-      value.device = device.title;
-      value.orientation = currentMode ? currentMode.orientation : '';
-      value.mode = currentMode ? currentMode.title : '';
-    } else {
-      value.device = '';
-      value.orientation = '';
-      value.mode = '';
-    }
-    this.persistenceSetting.set(value);
-
-    this.renderMainToolbar();
-  }
-
   restore(): void {
     for (const device of this.allDevices()) {
       if (device.title === this.persistenceSetting.get().device) {
@@ -924,36 +1037,4 @@ export class DeviceModeToolbar {
 
     this.model.emulate(EmulationModel.DeviceModeModel.Type.Responsive, null, null);
   }
-
-  private calculateItemWidth(text: string): string {
-    if (!text) {
-      return '';
-    }
-    if (this.#itemWidthCache.has(text)) {
-      return this.#itemWidthCache.get(text) as string;
-    }
-
-    if (!this.#measuringElement) {
-      this.#measuringElement = document.createElement('select');
-      this.#measuringElement.className = 'dark-text toolbar-has-dropdown-shrinkable';
-      this.#measuringElement.style.width = 'fit-content';
-      this.#measuringElement.style.position = 'absolute';
-      this.#measuringElement.style.visibility = 'hidden';
-      this.#measuringElement.style.pointerEvents = 'none';
-      const dummyOption = document.createElement('option');
-      this.#measuringElement.appendChild(dummyOption);
-      this.#element.appendChild(this.#measuringElement);
-    }
-
-    const dummyOption = this.#measuringElement.options[0];
-    dummyOption.textContent = text;
-
-    const width = this.#measuringElement.offsetWidth;
-
-    const widthPx = width ? `${width}px` : '';
-    if (width > 0) {
-      this.#itemWidthCache.set(text, widthPx);
-    }
-    return widthPx;
-  }
 }