chrome-devtools-frontend 1.0.1625079 → 1.0.1625854

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -188,25 +188,10 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/emulation/DeviceModeToolbar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {ref, classMap} = Directives;
+const {ifDefined, styleMap} = Directives;
 const {widget} = UI.Widget;
 const {bindToSetting} = UI.UIUtils;
 
-/**
- * Even though the emulation panel uses all UI elements, the tooltips are not supported.
- * That's because the emulation elements are rendered around the page context, rather
- * than in the DevTools panel itself. Therefore, we need to fall back to using the
- * built-in tooltip by setting the title attribute on the button's element.
- */
-function setTitleForButton(button: Buttons.Button.Button|UI.Toolbar.ToolbarMenuButton, title: string): void {
-  if (button instanceof UI.Toolbar.ToolbarMenuButton) {
-    button.setTitle(title);
-    button.element.title = title;
-  } else {
-    button.title = title;
-  }
-}
-
 export class DeviceModeToolbar {
   private model: EmulationModel.DeviceModeModel.DeviceModeModel;
   private readonly showMediaInspectorSetting: Common.Settings.Setting<boolean>;
@@ -219,23 +204,10 @@ export class DeviceModeToolbar {
   readonly #element: HTMLDivElement;
   private readonly emulatedDevicesList: EmulationModel.EmulatedDevices.EmulatedDevicesList;
   private readonly persistenceSetting: Common.Settings.Setting<{device: string, orientation: string, mode: string}>;
-  private spanButton!: Buttons.Button.Button;
-  private postureItem!: HTMLSelectElement;
-  private modeButton!: Buttons.Button.Button;
-  private widthInput!: HTMLInputElement;
-  private heightInput!: HTMLInputElement;
-  private deviceScaleItem!: HTMLSelectElement;
-  private deviceScaleItems: HTMLElement[] = [];
-  private deviceSelectItem!: HTMLSelectElement;
-  private scaleItem!: HTMLSelectElement;
-  private uaItem!: HTMLSelectElement;
-  private cachedDeviceScale!: number|null;
-  private cachedUaType!: string|null;
-  private xItem?: HTMLElement;
-  private cachedModelType?: EmulationModel.DeviceModeModel.Type;
-  private cachedScale?: number;
-  private cachedModelDevice?: EmulationModel.EmulatedDevices.EmulatedDevice|null;
-  private cachedModelMode?: EmulationModel.EmulatedDevices.Mode|null;
+  private mainToolbar: UI.Toolbar.Toolbar;
+  private optionsToolbar: UI.Toolbar.Toolbar;
+  readonly #itemWidthCache = new Map<string, string>();
+  #measuringElement: HTMLSelectElement|null = null;
 
   constructor(
       model: EmulationModel.DeviceModeModel.DeviceModeModel,
@@ -248,11 +220,11 @@ 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.updateDeviceScaleFactorVisibility, this);
+    this.showDeviceScaleFactorSetting.addChangeListener(this.update, this);
 
     this.showUserAgentTypeSetting =
         Common.Settings.Settings.instance().createSetting('emulation.show-user-agent-type', false);
-    this.showUserAgentTypeSetting.addChangeListener(this.updateUserAgentTypeVisibility, this);
+    this.showUserAgentTypeSetting.addChangeListener(this.update, this);
 
     this.autoAdjustScaleSetting =
         Common.Settings.Settings.instance().createSetting('emulation.auto-adjust-scale', true);
@@ -263,8 +235,8 @@ export class DeviceModeToolbar {
     this.#element.classList.add('device-mode-toolbar');
     this.#element.setAttribute('jslog', `${VisualLogging.toolbar('device-mode').track({resize: true})}`);
 
-    const mainToolbar = this.createMainToolbar();
-    const optionsToolbar = this.createOptionsToolbar();
+    this.mainToolbar = this.createMainToolbar();
+    this.optionsToolbar = this.createOptionsToolbar();
 
     this.emulatedDevicesList = EmulationModel.EmulatedDevices.EmulatedDevicesList.instance();
     this.emulatedDevicesList.addEventListener(
@@ -275,28 +247,9 @@ export class DeviceModeToolbar {
     this.persistenceSetting = Common.Settings.Settings.instance().createSetting(
         'emulation.device-mode-value', {device: '', orientation: '', mode: ''});
 
-    this.model.toolbarControlsEnabledSetting().addChangeListener(updateToolbarsEnabled);
-    updateToolbarsEnabled();
-
-    this.updateDeviceMenuItems();
-    this.updateScaleMenuItems();
-    this.updateDeviceScaleMenuItems();
-    this.updateUserAgentMenuItems();
-    this.updateDevicePostureItems();
-
-    function updateToolbarsEnabled(): void {
-      const enabled = model.toolbarControlsEnabledSetting().get();
-      mainToolbar.setEnabled(enabled);
-      optionsToolbar.setEnabled(enabled);
-    }
-  }
+    this.model.toolbarControlsEnabledSetting().addChangeListener(this.update, this);
 
-  private appendOption(parentElement: HTMLElement, title: string, value: string, jslogContext: string): void {
-    const option = document.createElement('option');
-    option.text = title;
-    option.value = value;
-    option.setAttribute('jslog', `${VisualLogging.item(jslogContext).track({click: true})}`);
-    parentElement.appendChild(option);
+    this.update();
   }
 
   private createEmptyToolbarElement(): HTMLDivElement {
@@ -307,7 +260,7 @@ export class DeviceModeToolbar {
 
   private createSizeInput(
       title: string, jslogContext: string, value: string|undefined, disabled: boolean|undefined,
-      refCallback: (el: Element|undefined) => void, onChange: () => void): LitTemplate {
+      placeholder: string|undefined, onChange: (event: Event) => void): LitTemplate {
     return html`
         <input type="number"
                max=${EmulationModel.DeviceModeModel.MaxDeviceSize}
@@ -317,8 +270,8 @@ export class DeviceModeToolbar {
                .disabled=${disabled ?? false}
                jslog=${VisualLogging.textField().track({change: true}).context(jslogContext)}
                .value=${value ?? ''}
+               placeholder=${ifDefined(placeholder)}
                @change=${onChange}
-               ${ref(refCallback)}
                @keydown=${(event: Event): void => {
       const input = event.target as HTMLInputElement;
       let modifiedValue = UI.UIUtils.modifiedFloatNumber(Number(input.value), event);
@@ -336,50 +289,120 @@ export class DeviceModeToolbar {
 
   private createMainToolbar(): UI.Toolbar.Toolbar {
     const mainToolbar = this.#element.createChild('devtools-toolbar', 'main-toolbar');
+    return mainToolbar as UI.Toolbar.Toolbar;
+  }
+
+  private renderMainToolbar(): void {
+    const isResponsive = this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive;
+    const isFullHeight = isResponsive && this.model.isFullHeight();
+    const size = this.model.appliedDeviceSize();
+    const widthValue = String(size.width);
+    const heightValue = isFullHeight ? '' : String(size.height);
+    const heightPlaceholder = String(size.height);
+
+    const device = this.model.device();
+    let modeButtonTitle = i18nString(UIStrings.rotate);
+    let modeButtonDisabled = false;
+    if (this.model.isScreenOrientationLocked()) {
+      modeButtonDisabled = true;
+      modeButtonTitle = i18nString(UIStrings.screenOrientationLocked);
+    } else if (device) {
+      const modeCount = device.modes.length;
+      modeButtonDisabled = modeCount < 2;
+      modeButtonTitle = modeCount === 2 ? i18nString(UIStrings.rotate) : i18nString(UIStrings.screenOrientationOptions);
+    } else if (isResponsive) {
+      modeButtonDisabled = false;
+      modeButtonTitle = i18nString(UIStrings.rotate);
+    } else {
+      modeButtonDisabled = true;
+    }
+
+    const showSpanButton = Boolean(device?.isDualScreen);
+    const showPostureItem = Boolean(!device?.isDualScreen && device?.isFoldableScreen);
+
+    const deviceModeOptions = this.getDeviceModeOptions();
+    const scaleOptions = this.getScaleOptions();
+    const dprOptions = this.getDeviceScaleFactorOptions();
+    const uaOptions = this.getUserAgentOptions();
+    const postureOptions = this.getDevicePostureOptions();
+
+    const selectedDeviceOption = [
+      deviceModeOptions.responsive,
+      ...deviceModeOptions.standard,
+      ...deviceModeOptions.custom,
+    ].find(o => o.selected);
+    const deviceText = selectedDeviceOption ? selectedDeviceOption.title : deviceModeOptions.responsive.title;
+
+    let scaleText = scaleOptions.find(o => o.selected)?.title || '';
+    if (scaleText.includes(' (')) {
+      scaleText = scaleText.substring(0, scaleText.indexOf(' ('));
+    }
+
+    let dprText = dprOptions.find(o => o.selected)?.title || '';
+    if (dprText.includes(' (')) {
+      dprText = dprText.substring(0, dprText.indexOf(' ('));
+    }
+
+    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)}
-                jslog=${VisualLogging.dropDown().track({change: true}).context('device')}
-                ${ref(el => { this.deviceSelectItem = el as HTMLSelectElement; })}>
+                .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', this.widthInput?.value, this.widthInput?.disabled,
-        el => { this.widthInput = el as HTMLInputElement; },
-        () => {
-          const width = Number(this.widthInput.value);
-          if (this.autoAdjustScaleSetting.get()) {
-            this.model.setWidthAndScaleToFit(width);
-          } else {
-            this.model.setWidth(width);
-          }
-        })}
-
-      <div class="device-mode-x" ${ref(el => { this.xItem = el as HTMLElement; })}>×</div>
-      ${this.createSizeInput(
-        i18nString(UIStrings.heightLeaveEmptyForFull), 'height', this.heightInput?.value, this.heightInput?.disabled,
-        el => { this.heightInput = el as HTMLInputElement; },
-        () => {
-          const height = Number(this.heightInput.value);
-          if (this.autoAdjustScaleSetting.get()) {
-            this.model.setHeightAndScaleToFit(height);
-          } else {
-            this.model.setHeight(height);
-          }
-        })}
+      ${this.createSizeInput(i18nString(UIStrings.width), 'width', widthValue, !isResponsive, '', (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) => {
+        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)}
-              jslog=${VisualLogging.dropDown().track({change: true}).context('scale')}
-              ${ref((el: Element|undefined) => { this.scaleItem = el as HTMLSelectElement; })}>
+              .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',
@@ -390,28 +413,33 @@ export class DeviceModeToolbar {
 
       <div class="device-mode-empty-toolbar-element"></div>
 
-      <span>
+      ${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')}
-                    ${ref(el => { this.deviceScaleItem = el as HTMLSelectElement; })}>
+                    ?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>`
-        })}
-      </span>
+        })}` : ''}
 
       <div class="device-mode-empty-toolbar-element"></div>
-      <select class="dark-text toolbar-has-dropdown-shrinkable
-                     ${classMap({hidden: !this.showUserAgentTypeSetting.get()})}"
-              title=${i18nString(UIStrings.deviceType)}
-              aria-label=${i18nString(UIStrings.deviceType)}
-              @change=${this.onUAChange.bind(this)}
-              jslog=${VisualLogging.dropDown().track({change: true}).context('device-type')}
-              ${ref(el => { this.uaItem = el as HTMLSelectElement; })}>
-      </select>
+      ${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,
@@ -421,45 +449,35 @@ export class DeviceModeToolbar {
 
       <div class="device-mode-empty-toolbar-element"></div>
       <devtools-button class="toolbar-button"
-                       .data=${{variant: Buttons.Button.Variant.ICON, iconName: 'screen-rotation'} as Buttons.Button.ButtonData}
+                       .data=${{variant: Buttons.Button.Variant.TOOLBAR, iconName: 'screen-rotation'} as Buttons.Button.ButtonData}
                        jslog=${VisualLogging.action('screen-rotation').track({click: true})}
                        @click=${this.modeMenuClicked.bind(this)}
-                       ${ref(el => { this.modeButton = el as Buttons.Button.Button; })}>
+                       .title=${modeButtonTitle}
+                       .disabled=${modeButtonDisabled}>
       </devtools-button>
 
       <!-- Show dual screen toolbar -->
-      <devtools-button class="toolbar-button"
-                       .data=${{variant: Buttons.Button.Variant.ICON, iconName: 'device-fold'} as Buttons.Button.ButtonData}
-                       jslog=${VisualLogging.action('device-fold').track({click: true})}
-                       @click=${this.spanClicked.bind(this)}
-                       ${ref(el => { this.spanButton = el as Buttons.Button.Button; })}>
-      </devtools-button>
+      ${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>
-      <select class="dark-text toolbar-has-dropdown-shrinkable"
-              title=${i18nString(UIStrings.devicePosture)}
-              aria-label=${i18nString(UIStrings.devicePosture)}
-              @change=${this.onPostureChange.bind(this)}
-              jslog=${VisualLogging.dropDown().track({change: true}).context('device-posture')}
-              ${ref(el => { this.postureItem = el as HTMLSelectElement; })}>
-      </select>`,
-      mainToolbar);
+      ${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
-    const deviceScaleSpan = this.deviceScaleItem.parentElement as HTMLElement;
-    for (const node of Array.from(deviceScaleSpan.childNodes)) {
-      if (node instanceof HTMLElement) {
-        this.deviceScaleItems.push(node);
-      } else if (node instanceof Text) {
-        const span = document.createElement('span');
-        span.classList.add('toolbar-text');
-        span.appendChild(node);
-        this.deviceScaleItems.push(span);
-      }
-    }
-    deviceScaleSpan.replaceWith(...this.deviceScaleItems);
-    this.updateDeviceScaleFactorVisibility();
-    return mainToolbar;
   }
 
   private createOptionsToolbar(): UI.Toolbar.Toolbar {
@@ -478,20 +496,8 @@ export class DeviceModeToolbar {
     return ['Continuous', 'Folded'].map(title => ({title, value: title, selected: currentPosture === title}));
   }
 
-  private updateDevicePostureItems(): void {
-    this.postureItem.replaceChildren();
-    for (const option of this.getDevicePostureOptions()) {
-      this.appendOption(this.postureItem, option.title, option.value, option.title.toLowerCase());
-    }
-    const currentPosture = this.currentDevicePosture();
-    if (this.postureItem.value !== currentPosture) {
-      this.postureItem.value = currentPosture;
-    }
-    this.resizeItem(this.postureItem);
-  }
-
-  private onPostureChange(): void {
-    const value = this.postureItem.value;
+  private onPostureChange(event: Event): void {
+    const value = (event.target as HTMLSelectElement).value;
     if (value !== this.currentDevicePosture()) {
       this.spanClicked();
     }
@@ -539,21 +545,8 @@ export class DeviceModeToolbar {
     });
   }
 
-  private updateScaleMenuItems(): void {
-    this.scaleItem.replaceChildren();
-    const options = this.getScaleOptions();
-    for (const option of options) {
-      this.appendOption(this.scaleItem, option.title, String(option.value), option.jslogContext);
-    }
-    const selected = options.find(o => o.selected);
-    if (selected) {
-      this.scaleItem.value = String(selected.value);
-    }
-    this.resizeItem(this.scaleItem, true);
-  }
-
-  private onScaleChange(): void {
-    const value = Number(this.scaleItem.value);
+  private onScaleChange(event: Event): void {
+    const value = Number((event.target as HTMLSelectElement).value);
     this.model.scaleSetting().set(value);
   }
 
@@ -587,21 +580,8 @@ export class DeviceModeToolbar {
     });
   }
 
-  private updateDeviceScaleMenuItems(): void {
-    this.deviceScaleItem.replaceChildren();
-    const options = this.getDeviceScaleFactorOptions();
-    for (const option of options) {
-      this.appendOption(this.deviceScaleItem, option.title, String(option.value), option.jslogContext);
-    }
-    const selected = options.find(o => o.selected);
-    if (selected) {
-      this.deviceScaleItem.value = String(selected.value);
-    }
-    this.resizeItem(this.deviceScaleItem, true);
-  }
-
-  private onDeviceScaleChange(): void {
-    const value = Number(this.deviceScaleItem.value);
+  private onDeviceScaleChange(event: Event): void {
+    const value = Number((event.target as HTMLSelectElement).value);
     this.model.deviceScaleFactorSetting().set(value);
   }
 
@@ -622,23 +602,9 @@ export class DeviceModeToolbar {
           }));
   }
 
-  private updateUserAgentMenuItems(): void {
-    this.uaItem.replaceChildren();
-    const options = this.getUserAgentOptions();
-    for (const option of options) {
-      this.appendOption(this.uaItem, option.title, option.value, option.jslogContext);
-    }
-    const selected = options.find(o => o.selected);
-    if (selected) {
-      this.uaItem.value = selected.value;
-    }
-    this.resizeItem(this.uaItem);
-  }
-
-  private onUAChange(): void {
-    const value = this.uaItem.value as EmulationModel.DeviceModeModel.UA;
+  private onUAChange(event: Event): void {
+    const value = (event.target as HTMLSelectElement).value as EmulationModel.DeviceModeModel.UA;
     this.model.uaSetting().set(value);
-    this.resizeItem(this.uaItem);
   }
 
   private appendOptionsMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
@@ -763,48 +729,11 @@ export class DeviceModeToolbar {
     };
   }
 
-  private updateDeviceMenuItems(): void {
-    this.deviceSelectItem.replaceChildren();
-    const options = this.getDeviceModeOptions();
-
-    this.appendOption(this.deviceSelectItem, options.responsive.title, 'Responsive', options.responsive.jslogContext);
-
-    appendGroup.call(this, options.standard, 'Standard');
-    appendGroup.call(this, options.custom, 'Custom');
-
-    this.appendOption(this.deviceSelectItem, options.edit.title, 'Edit', options.edit.jslogContext);
-
-    this.updateDeviceSelection();
-
-    function appendGroup(
-        this: DeviceModeToolbar, group: Array<{title: string, jslogContext: string}>, label: string): void {
-      if (!group.length) {
-        return;
-      }
-      const optGroup = document.createElement('optgroup');
-      optGroup.label = label;
-      for (const item of group) {
-        this.appendOption(optGroup, item.title, item.title, item.jslogContext);
-      }
-      this.deviceSelectItem.appendChild(optGroup);
-    }
-  }
-
-  private updateDeviceSelection(): void {
-    const device = this.model.device();
-    if (this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
-      this.deviceSelectItem.value = 'Responsive';
-    } else if (device) {
-      this.deviceSelectItem.value = device.title;
-    }
-    this.resizeItem(this.deviceSelectItem);
-  }
-
-  private onDeviceChange(): void {
-    const value = this.deviceSelectItem.value;
+  private onDeviceChange(event: Event): void {
+    const value = (event.target as HTMLSelectElement).value;
     if (value === 'Edit') {
       this.emulatedDevicesList.revealCustomSetting();
-      this.updateDeviceSelection();
+      this.renderMainToolbar();
     } else if (value === 'Responsive') {
       this.switchToResponsive();
     } else {
@@ -818,7 +747,7 @@ export class DeviceModeToolbar {
   }
 
   private deviceListChanged(): void {
-    this.updateDeviceMenuItems();
+    this.renderMainToolbar();
     const device = this.model.device();
     if (!device) {
       return;
@@ -836,26 +765,6 @@ export class DeviceModeToolbar {
     }
   }
 
-  private updateDeviceScaleFactorVisibility(): void {
-    if (this.deviceScaleItem) {
-      const visible = this.showDeviceScaleFactorSetting.get();
-      this.deviceScaleItem.classList.toggle('hidden', !visible);
-      for (const item of this.deviceScaleItems) {
-        item.classList.toggle('hidden', !visible);
-      }
-    }
-  }
-
-  private updateUserAgentTypeVisibility(): void {
-    if (this.uaItem) {
-      const visible = this.showUserAgentTypeSetting.get();
-      this.uaItem.classList.toggle('hidden', !visible);
-      if (visible) {
-        this.resizeItem(this.uaItem);
-      }
-    }
-  }
-
   private spanClicked(): void {
     const device = this.model.device();
 
@@ -916,13 +825,10 @@ export class DeviceModeToolbar {
       return;
     }
 
-    if (!this.modeButton) {
-      return;
-    }
-
+    const modeButton = event.target as HTMLElement;
     const contextMenu = new UI.ContextMenu.ContextMenu(event, {
-      x: this.modeButton.getBoundingClientRect().left,
-      y: this.modeButton.getBoundingClientRect().top + this.modeButton.offsetHeight,
+      x: modeButton.getBoundingClientRect().left,
+      y: modeButton.getBoundingClientRect().top + modeButton.offsetHeight,
     });
     addOrientation(EmulationModel.EmulatedDevices.Vertical, i18nString(UIStrings.portrait));
     addOrientation(EmulationModel.EmulatedDevices.Horizontal, i18nString(UIStrings.landscape));
@@ -970,77 +876,11 @@ export class DeviceModeToolbar {
   }
 
   update(): void {
-    if (this.model.type() !== this.cachedModelType) {
-      this.cachedModelType = this.model.type();
-      this.widthInput.disabled = this.model.type() !== EmulationModel.DeviceModeModel.Type.Responsive;
-
-      this.heightInput.disabled = this.model.type() !== EmulationModel.DeviceModeModel.Type.Responsive;
-      this.deviceScaleItem.disabled = this.model.type() !== EmulationModel.DeviceModeModel.Type.Responsive;
-      this.uaItem.disabled = this.model.type() !== EmulationModel.DeviceModeModel.Type.Responsive;
-
-      if (this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
-        this.modeButton.disabled = false;
-        setTitleForButton(this.modeButton, i18nString(UIStrings.rotate));
-      } else {
-        this.modeButton.disabled = true;
-      }
-    }
-
-    const size = this.model.appliedDeviceSize();
-    this.widthInput.value = String(size.width);
-    this.heightInput.value =
-        this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive && this.model.isFullHeight() ?
-        '' :
-        String(size.height);
-    this.heightInput.placeholder = String(size.height);
-
-    if (this.model.scale() !== this.cachedScale) {
-      this.updateScaleMenuItems();
-      this.cachedScale = this.model.scale();
-    }
-
-    const deviceScale = this.model.appliedDeviceScaleFactor();
-    if (deviceScale !== this.cachedDeviceScale) {
-      this.deviceScaleItem.value = String(deviceScale);
-      this.cachedDeviceScale = deviceScale;
-      this.resizeItem(this.deviceScaleItem, true);
-    }
-
-    const uaType = this.model.appliedUserAgentType();
-    if (uaType !== this.cachedUaType) {
-      this.uaItem.value = uaType;
-      this.cachedUaType = uaType;
-      this.updateDeviceScaleMenuItems();
-      this.resizeItem(this.uaItem);
-    }
+    const enabled = this.model.toolbarControlsEnabledSetting().get();
+    this.mainToolbar.setEnabled(enabled);
+    this.optionsToolbar.setEnabled(enabled);
 
     const device = this.model.device();
-    this.updateDeviceSelection();
-
-    if (this.model.device() !== this.cachedModelDevice) {
-      const device = this.model.device();
-      if (device) {
-        const modeCount = device ? device.modes.length : 0;
-        this.modeButton.disabled = modeCount < 2;
-        setTitleForButton(
-            this.modeButton,
-            modeCount === 2 ? i18nString(UIStrings.rotate) : i18nString(UIStrings.screenOrientationOptions));
-      }
-      this.cachedModelDevice = device;
-    }
-
-    if (device?.isDualScreen) {
-      this.spanButton.classList.toggle('hidden', false);
-      this.postureItem.classList.toggle('hidden', true);
-    } else if (device?.isFoldableScreen) {
-      this.spanButton.classList.toggle('hidden', true);
-      this.postureItem.classList.toggle('hidden', false);
-      this.updateDevicePostureItems();
-    } else {
-      this.spanButton.classList.toggle('hidden', true);
-      this.postureItem.classList.toggle('hidden', true);
-    }
-    setTitleForButton(this.spanButton, i18nString(UIStrings.toggleDualscreenMode));
 
     if (this.model.type() === EmulationModel.DeviceModeModel.Type.Device) {
       this.lastMode.set(
@@ -1048,39 +888,20 @@ export class DeviceModeToolbar {
           (this.model.mode() as EmulationModel.EmulatedDevices.Mode));
     }
 
-    if (this.model.mode() !== this.cachedModelMode && this.model.type() !== EmulationModel.DeviceModeModel.Type.None) {
-      this.cachedModelMode = this.model.mode();
-      const value = this.persistenceSetting.get();
-      const device = this.model.device();
-      if (device) {
-        value.device = device.title;
-        const mode = this.model.mode();
-        value.orientation = mode ? mode.orientation : '';
-        value.mode = mode ? mode.title : '';
-      } else {
-        value.device = '';
-        value.orientation = '';
-        value.mode = '';
-      }
-      this.persistenceSetting.set(value);
+    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);
 
-    // When screen orientation is locked by the page (via screen.orientation.lock()),
-    // disable the rotate button to prevent user-initiated rotation.
-    // When unlocked, restore the button to its normal state.
-    if (this.model.isScreenOrientationLocked()) {
-      this.modeButton.disabled = true;
-      setTitleForButton(this.modeButton, i18nString(UIStrings.screenOrientationLocked));
-    } else if (this.cachedModelDevice) {
-      const modeCount = this.cachedModelDevice.modes.length;
-      this.modeButton.disabled = modeCount < 2;
-      setTitleForButton(
-          this.modeButton,
-          modeCount === 2 ? i18nString(UIStrings.rotate) : i18nString(UIStrings.screenOrientationOptions));
-    } else if (this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
-      this.modeButton.disabled = false;
-      setTitleForButton(this.modeButton, i18nString(UIStrings.rotate));
-    }
+    this.renderMainToolbar();
   }
 
   restore(): void {
@@ -1100,30 +921,35 @@ export class DeviceModeToolbar {
     this.model.emulate(EmulationModel.DeviceModeModel.Type.Responsive, null, null);
   }
 
-  private resizeItem(item: HTMLSelectElement, stripParens = false): void {
-    const selectedOption = item.options[item.selectedIndex];
-    if (!selectedOption) {
-      return;
+  private calculateItemWidth(text: string): string {
+    if (!text) {
+      return '';
+    }
+    if (this.#itemWidthCache.has(text)) {
+      return this.#itemWidthCache.get(text) as string;
     }
 
-    const dummySelect = item.cloneNode(false) as HTMLSelectElement;
-    const dummyOption = selectedOption.cloneNode(true) as HTMLOptionElement;
-
-    if (stripParens) {
-      const parensIndex = dummyOption.text.indexOf(' (');
-      if (parensIndex >= 0) {
-        dummyOption.text = dummyOption.text.substring(0, parensIndex);
-      }
+    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);
     }
 
-    dummySelect.appendChild(dummyOption);
-    dummySelect.style.width = 'fit-content';
-    dummySelect.style.position = 'absolute';
-    dummySelect.style.visibility = 'hidden';
-    dummySelect.style.pointerEvents = 'none';
+    const dummyOption = this.#measuringElement.options[0];
+    dummyOption.textContent = text;
+
+    const width = this.#measuringElement.offsetWidth;
 
-    item.parentElement?.appendChild(dummySelect);
-    item.style.width = dummySelect.offsetWidth + 'px';
-    dummySelect.remove();
+    const widthPx = width ? `${width}px` : '';
+    if (width > 0) {
+      this.#itemWidthCache.set(text, widthPx);
+    }
+    return widthPx;
   }
 }