chrome-devtools-frontend 1.0.1621678 → 1.0.1624409

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -10,12 +10,12 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 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 uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 
-import * as EmulationComponents from './components/components.js';
 const UIStrings = {
   /**
    * @description Title of the device dimensions selection item in the Device Mode Toolbar.
@@ -194,9 +194,13 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
  * 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: UI.Toolbar.ToolbarButton|UI.Toolbar.ToolbarMenuButton, title: string): void {
-  button.setTitle(title);
-  button.element.title = title;
+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 {
@@ -211,19 +215,19 @@ 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!: UI.Toolbar.ToolbarButton;
-  private postureItem!: UI.Toolbar.ToolbarComboBox;
-  private modeButton!: UI.Toolbar.ToolbarButton;
-  private widthInput: EmulationComponents.DeviceSizeInputElement.SizeInputElement;
-  private heightInput: EmulationComponents.DeviceSizeInputElement.SizeInputElement;
-  private deviceScaleItem!: UI.Toolbar.ToolbarComboBox;
-  private deviceScaleItems: UI.Toolbar.ToolbarItem[] = [];
-  private deviceSelectItem!: UI.Toolbar.ToolbarComboBox;
-  private scaleItem!: UI.Toolbar.ToolbarComboBox;
-  private uaItem!: UI.Toolbar.ToolbarComboBox;
+  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?: UI.Toolbar.ToolbarItem;
+  private xItem?: HTMLElement;
   private cachedModelType?: EmulationModel.DeviceModeModel.Type;
   private cachedScale?: number;
   private cachedModelDevice?: EmulationModel.EmulatedDevices.EmulatedDevice|null;
@@ -250,10 +254,9 @@ export class DeviceModeToolbar {
         Common.Settings.Settings.instance().createSetting('emulation.auto-adjust-scale', true);
 
     this.lastMode = new Map();
-    this.widthInput = new EmulationComponents.DeviceSizeInputElement.SizeInputElement(
-        i18nString(UIStrings.width), {jslogContext: 'width'});
-    this.heightInput = new EmulationComponents.DeviceSizeInputElement.SizeInputElement(
-        i18nString(UIStrings.heightLeaveEmptyForFull), {jslogContext: 'height'});
+
+    this.widthInput = this.createSizeInput(i18nString(UIStrings.width), 'width');
+    this.heightInput = this.createSizeInput(i18nString(UIStrings.heightLeaveEmptyForFull), 'height');
 
     this.#element = document.createElement('div');
     this.#element.classList.add('device-mode-toolbar');
@@ -287,98 +290,158 @@ export class DeviceModeToolbar {
     }
   }
 
+  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);
+  }
+
   private createEmptyToolbarElement(): HTMLDivElement {
     const element = document.createElement('div');
     element.classList.add('device-mode-empty-toolbar-element');
     return element;
   }
 
+  private createSizeInput(title: string, jslogContext: string): HTMLInputElement {
+    const input = document.createElement('input');
+    input.type = 'number';
+    input.max = String(EmulationModel.DeviceModeModel.MaxDeviceSize);
+    input.min = String(EmulationModel.DeviceModeModel.MinDeviceSize);
+    input.title = title;
+    input.classList.add('device-mode-size-input');
+    input.setAttribute('jslog', `${VisualLogging.textField().track({change: true}).context(jslogContext)}`);
+
+    input.addEventListener('keydown', (event: Event) => {
+      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'));
+    });
+    return input;
+  }
+
   private createMainToolbar(): UI.Toolbar.Toolbar {
     const mainToolbar = this.#element.createChild('devtools-toolbar', 'main-toolbar');
 
-    mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
-    this.deviceSelectItem = new UI.Toolbar.ToolbarComboBox(
-        this.onDeviceChange.bind(this), i18nString(UIStrings.deviceType), 'dark-text', 'device');
-    this.deviceSelectItem.turnShrinkable();
-    const dimensionsSpan =
-        uiI18n.getFormatLocalizedString(str_, UIStrings.dimensions, {PH1: this.deviceSelectItem.element});
+    mainToolbar.append(this.createEmptyToolbarElement());
+    this.deviceSelectItem = document.createElement('select');
+    this.deviceSelectItem.classList.add('dark-text', 'toolbar-has-dropdown-shrinkable');
+    this.deviceSelectItem.title = i18nString(UIStrings.deviceType);
+    UI.ARIAUtils.setLabel(this.deviceSelectItem, i18nString(UIStrings.deviceType));
+    this.deviceSelectItem.addEventListener('change', this.onDeviceChange.bind(this));
+    this.deviceSelectItem.setAttribute('jslog', `${VisualLogging.dropDown().track({change: true}).context('device')}`);
+    const dimensionsSpan = uiI18n.getFormatLocalizedString(str_, UIStrings.dimensions, {PH1: this.deviceSelectItem});
     mainToolbar.append(...dimensionsSpan.childNodes);
-    mainToolbar.appendToolbarItem(this.deviceSelectItem);
+    mainToolbar.append(this.deviceSelectItem);
 
-    this.widthInput.addEventListener('sizechanged', ({size: width}) => {
+    this.widthInput.addEventListener('change', () => {
+      const width = Number(this.widthInput.value);
       if (this.autoAdjustScaleSetting.get()) {
         this.model.setWidthAndScaleToFit(width);
       } else {
         this.model.setWidth(width);
       }
     });
-    this.heightInput.addEventListener('sizechanged', ({size: height}) => {
+    this.heightInput.addEventListener('change', () => {
+      const height = Number(this.heightInput.value);
       if (this.autoAdjustScaleSetting.get()) {
         this.model.setHeightAndScaleToFit(height);
       } else {
         this.model.setHeight(height);
       }
     });
-    mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.widthInput));
-    const xElement = document.createElement('div');
-    xElement.classList.add('device-mode-x');
-    xElement.textContent = '×';
-    this.xItem = new UI.Toolbar.ToolbarItem(xElement);
-    mainToolbar.appendToolbarItem(this.xItem);
-    mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.heightInput));
-
-    mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
-    this.scaleItem =
-        new UI.Toolbar.ToolbarComboBox(this.onScaleChange.bind(this), i18nString(UIStrings.zoom), 'dark-text', 'scale');
-    this.scaleItem.turnShrinkable();
-    mainToolbar.appendToolbarItem(this.scaleItem);
+    mainToolbar.append(this.widthInput);
+    this.xItem = document.createElement('div');
+    this.xItem.classList.add('device-mode-x');
+    this.xItem.textContent = '×';
+    mainToolbar.append(this.xItem);
+    mainToolbar.append(this.heightInput);
+
+    mainToolbar.append(this.createEmptyToolbarElement());
+    this.scaleItem = document.createElement('select');
+    this.scaleItem.classList.add('dark-text', 'toolbar-has-dropdown-shrinkable');
+    this.scaleItem.title = i18nString(UIStrings.zoom);
+    UI.ARIAUtils.setLabel(this.scaleItem, i18nString(UIStrings.zoom));
+    this.scaleItem.addEventListener('change', this.onScaleChange.bind(this));
+    this.scaleItem.setAttribute('jslog', `${VisualLogging.dropDown().track({change: true}).context('scale')}`);
+    mainToolbar.append(this.scaleItem);
 
     const autoAdjustScaleButton = new UI.Toolbar.ToolbarSettingToggle(
         this.autoAdjustScaleSetting, 'center-focus-weak', i18nString(UIStrings.autoadjustZoom));
     mainToolbar.appendToolbarItem(autoAdjustScaleButton);
 
-    mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
+    mainToolbar.append(this.createEmptyToolbarElement());
 
-    this.deviceScaleItem = new UI.Toolbar.ToolbarComboBox(
-        this.onDeviceScaleChange.bind(this), i18nString(UIStrings.devicePixelRatio), 'dark-text', 'device-pixel-ratio');
-    this.deviceScaleItem.turnShrinkable();
-    const deviceScaleSpan = uiI18n.getFormatLocalizedString(str_, UIStrings.dpr, {PH1: this.deviceScaleItem.element});
+    this.deviceScaleItem = document.createElement('select');
+    this.deviceScaleItem.classList.add('dark-text', 'toolbar-has-dropdown-shrinkable');
+    this.deviceScaleItem.title = i18nString(UIStrings.devicePixelRatio);
+    UI.ARIAUtils.setLabel(this.deviceScaleItem, i18nString(UIStrings.devicePixelRatio));
+    this.deviceScaleItem.addEventListener('change', this.onDeviceScaleChange.bind(this));
+    this.deviceScaleItem.setAttribute(
+        'jslog', `${VisualLogging.dropDown().track({change: true}).context('device-pixel-ratio')}`);
+    const deviceScaleSpan = uiI18n.getFormatLocalizedString(str_, UIStrings.dpr, {PH1: this.deviceScaleItem});
     for (const node of Array.from(deviceScaleSpan.childNodes)) {
-      const item = node === this.deviceScaleItem.element ? this.deviceScaleItem :
-                                                           new UI.Toolbar.ToolbarText(node.textContent || '');
-      item.setVisible(this.showDeviceScaleFactorSetting.get());
-      this.deviceScaleItems.push(item);
-      mainToolbar.appendToolbarItem(item);
+      if (node === this.deviceScaleItem) {
+        this.deviceScaleItem.classList.toggle('hidden', !this.showDeviceScaleFactorSetting.get());
+        this.deviceScaleItems.push(this.deviceScaleItem);
+        mainToolbar.append(this.deviceScaleItem);
+      } else {
+        const item = new UI.Toolbar.ToolbarText(node.textContent || '');
+        item.setVisible(this.showDeviceScaleFactorSetting.get());
+        this.deviceScaleItems.push(item.element);
+        mainToolbar.appendToolbarItem(item);
+      }
     }
-    mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
-    this.uaItem = new UI.Toolbar.ToolbarComboBox(
-        this.onUAChange.bind(this), i18nString(UIStrings.deviceType), 'dark-text', 'device-type');
-    this.uaItem.turnShrinkable();
-    this.uaItem.setVisible(this.showUserAgentTypeSetting.get());
-    mainToolbar.appendToolbarItem(this.uaItem);
+    mainToolbar.append(this.createEmptyToolbarElement());
+    this.uaItem = document.createElement('select');
+    this.uaItem.classList.add('dark-text', 'toolbar-has-dropdown-shrinkable');
+    this.uaItem.title = i18nString(UIStrings.deviceType);
+    UI.ARIAUtils.setLabel(this.uaItem, i18nString(UIStrings.deviceType));
+    this.uaItem.addEventListener('change', this.onUAChange.bind(this));
+    this.uaItem.setAttribute('jslog', `${VisualLogging.dropDown().track({change: true}).context('device-type')}`);
+    this.uaItem.classList.toggle('hidden', !this.showUserAgentTypeSetting.get());
+    mainToolbar.append(this.uaItem);
 
     MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.createForGlobalConditions(
         mainToolbar, i18nString(UIStrings.throttling));
     const saveDataItem = MobileThrottling.ThrottlingManager.throttlingManager().createSaveDataOverrideSelector();
-    saveDataItem.turnShrinkable();
-    mainToolbar.appendToolbarItem(saveDataItem);
+    saveDataItem.classList.add('dark-text', 'toolbar-has-dropdown-shrinkable');
+    mainToolbar.append(saveDataItem);
 
-    mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
-    this.modeButton = new UI.Toolbar.ToolbarButton('', 'screen-rotation', undefined, 'screen-rotation');
-    this.modeButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.modeMenuClicked, this);
-    mainToolbar.appendToolbarItem(this.modeButton);
+    mainToolbar.append(this.createEmptyToolbarElement());
+    this.modeButton = new Buttons.Button.Button();
+    this.modeButton.classList.add('toolbar-button');
+    this.modeButton.data = {variant: Buttons.Button.Variant.ICON, iconName: 'screen-rotation'};
+    this.modeButton.setAttribute('jslog', `${VisualLogging.action('screen-rotation').track({click: true})}`);
+    this.modeButton.addEventListener('click', this.modeMenuClicked.bind(this));
+    mainToolbar.append(this.modeButton);
 
     // Show dual screen toolbar.
-    this.spanButton = new UI.Toolbar.ToolbarButton('', 'device-fold', undefined, 'device-fold');
-    this.spanButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.spanClicked, this);
-    mainToolbar.appendToolbarItem(this.spanButton);
+    this.spanButton = new Buttons.Button.Button();
+    this.spanButton.classList.add('toolbar-button');
+    this.spanButton.data = {variant: Buttons.Button.Variant.ICON, iconName: 'device-fold'};
+    this.spanButton.setAttribute('jslog', `${VisualLogging.action('device-fold').track({click: true})}`);
+    this.spanButton.addEventListener('click', this.spanClicked.bind(this));
+    mainToolbar.append(this.spanButton);
 
     // Show posture toolbar menu for foldable devices.
-    mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
-    this.postureItem = new UI.Toolbar.ToolbarComboBox(
-        this.onPostureChange.bind(this), i18nString(UIStrings.devicePosture), 'dark-text', 'device-posture');
-    this.postureItem.turnShrinkable();
-    mainToolbar.appendToolbarItem(this.postureItem);
+    mainToolbar.append(this.createEmptyToolbarElement());
+    this.postureItem = document.createElement('select');
+    this.postureItem.classList.add('dark-text', 'toolbar-has-dropdown-shrinkable');
+    this.postureItem.title = i18nString(UIStrings.devicePosture);
+    UI.ARIAUtils.setLabel(this.postureItem, i18nString(UIStrings.devicePosture));
+    this.postureItem.addEventListener('change', this.onPostureChange.bind(this));
+    this.postureItem.setAttribute(
+        'jslog', `${VisualLogging.dropDown().track({change: true}).context('device-posture')}`);
+    mainToolbar.append(this.postureItem);
 
     return mainToolbar;
   }
@@ -400,19 +463,19 @@ export class DeviceModeToolbar {
   }
 
   private updateDevicePostureItems(): void {
-    this.postureItem.removeOptions();
+    this.postureItem.replaceChildren();
     for (const option of this.getDevicePostureOptions()) {
-      this.postureItem.createOption(option.title, option.value, option.title.toLowerCase());
+      this.appendOption(this.postureItem, option.title, option.value, option.title.toLowerCase());
     }
     const currentPosture = this.currentDevicePosture();
-    if (this.postureItem.element.value !== currentPosture) {
-      this.postureItem.element.value = currentPosture;
+    if (this.postureItem.value !== currentPosture) {
+      this.postureItem.value = currentPosture;
     }
     this.resizeItem(this.postureItem);
   }
 
   private onPostureChange(): void {
-    const value = this.postureItem.element.value;
+    const value = this.postureItem.value;
     if (value !== this.currentDevicePosture()) {
       this.spanClicked();
     }
@@ -461,20 +524,20 @@ export class DeviceModeToolbar {
   }
 
   private updateScaleMenuItems(): void {
-    this.scaleItem.removeOptions();
+    this.scaleItem.replaceChildren();
     const options = this.getScaleOptions();
     for (const option of options) {
-      this.scaleItem.createOption(option.title, String(option.value), option.jslogContext);
+      this.appendOption(this.scaleItem, option.title, String(option.value), option.jslogContext);
     }
     const selected = options.find(o => o.selected);
     if (selected) {
-      this.scaleItem.element.value = String(selected.value);
+      this.scaleItem.value = String(selected.value);
     }
     this.resizeItem(this.scaleItem, true);
   }
 
   private onScaleChange(): void {
-    const value = Number(this.scaleItem.selectedOption()?.value);
+    const value = Number(this.scaleItem.value);
     this.model.scaleSetting().set(value);
   }
 
@@ -509,20 +572,20 @@ export class DeviceModeToolbar {
   }
 
   private updateDeviceScaleMenuItems(): void {
-    this.deviceScaleItem.removeOptions();
+    this.deviceScaleItem.replaceChildren();
     const options = this.getDeviceScaleFactorOptions();
     for (const option of options) {
-      this.deviceScaleItem.createOption(option.title, String(option.value), option.jslogContext);
+      this.appendOption(this.deviceScaleItem, option.title, String(option.value), option.jslogContext);
     }
     const selected = options.find(o => o.selected);
     if (selected) {
-      this.deviceScaleItem.element.value = String(selected.value);
+      this.deviceScaleItem.value = String(selected.value);
     }
     this.resizeItem(this.deviceScaleItem, true);
   }
 
   private onDeviceScaleChange(): void {
-    const value = Number(this.deviceScaleItem.selectedOption()?.value);
+    const value = Number(this.deviceScaleItem.value);
     this.model.deviceScaleFactorSetting().set(value);
   }
 
@@ -544,20 +607,20 @@ export class DeviceModeToolbar {
   }
 
   private updateUserAgentMenuItems(): void {
-    this.uaItem.removeOptions();
+    this.uaItem.replaceChildren();
     const options = this.getUserAgentOptions();
     for (const option of options) {
-      this.uaItem.createOption(option.title, option.value, option.jslogContext);
+      this.appendOption(this.uaItem, option.title, option.value, option.jslogContext);
     }
     const selected = options.find(o => o.selected);
     if (selected) {
-      this.uaItem.element.value = selected.value;
+      this.uaItem.value = selected.value;
     }
     this.resizeItem(this.uaItem);
   }
 
   private onUAChange(): void {
-    const value = this.uaItem.selectedOption()?.value as EmulationModel.DeviceModeModel.UA;
+    const value = this.uaItem.value as EmulationModel.DeviceModeModel.UA;
     this.model.uaSetting().set(value);
     this.resizeItem(this.uaItem);
   }
@@ -685,15 +748,15 @@ export class DeviceModeToolbar {
   }
 
   private updateDeviceMenuItems(): void {
-    this.deviceSelectItem.removeOptions();
+    this.deviceSelectItem.replaceChildren();
     const options = this.getDeviceModeOptions();
 
-    this.deviceSelectItem.createOption(options.responsive.title, 'Responsive', options.responsive.jslogContext);
+    this.appendOption(this.deviceSelectItem, options.responsive.title, 'Responsive', options.responsive.jslogContext);
 
     appendGroup.call(this, options.standard, 'Standard');
     appendGroup.call(this, options.custom, 'Custom');
 
-    this.deviceSelectItem.createOption(options.edit.title, 'Edit', options.edit.jslogContext);
+    this.appendOption(this.deviceSelectItem, options.edit.title, 'Edit', options.edit.jslogContext);
 
     this.updateDeviceSelection();
 
@@ -705,28 +768,24 @@ export class DeviceModeToolbar {
       const optGroup = document.createElement('optgroup');
       optGroup.label = label;
       for (const item of group) {
-        const option = document.createElement('option');
-        option.value = item.title;
-        option.text = item.title;
-        option.setAttribute('jslog', `${VisualLogging.item(item.jslogContext).track({click: true})}`);
-        optGroup.appendChild(option);
+        this.appendOption(optGroup, item.title, item.title, item.jslogContext);
       }
-      this.deviceSelectItem.addOption(optGroup);
+      this.deviceSelectItem.appendChild(optGroup);
     }
   }
 
   private updateDeviceSelection(): void {
     const device = this.model.device();
     if (this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
-      this.deviceSelectItem.element.value = 'Responsive';
+      this.deviceSelectItem.value = 'Responsive';
     } else if (device) {
-      this.deviceSelectItem.element.value = device.title;
+      this.deviceSelectItem.value = device.title;
     }
     this.resizeItem(this.deviceSelectItem);
   }
 
   private onDeviceChange(): void {
-    const value = this.deviceSelectItem.selectedOption()?.value;
+    const value = this.deviceSelectItem.value;
     if (value === 'Edit') {
       this.emulatedDevicesList.revealCustomSetting();
       this.updateDeviceSelection();
@@ -764,9 +823,9 @@ export class DeviceModeToolbar {
   private updateDeviceScaleFactorVisibility(): void {
     if (this.deviceScaleItem) {
       const visible = this.showDeviceScaleFactorSetting.get();
-      this.deviceScaleItem.setVisible(visible);
+      this.deviceScaleItem.classList.toggle('hidden', !visible);
       for (const item of this.deviceScaleItems) {
-        item.setVisible(visible);
+        item.classList.toggle('hidden', !visible);
       }
     }
   }
@@ -774,7 +833,7 @@ export class DeviceModeToolbar {
   private updateUserAgentTypeVisibility(): void {
     if (this.uaItem) {
       const visible = this.showUserAgentTypeSetting.get();
-      this.uaItem.setVisible(visible);
+      this.uaItem.classList.toggle('hidden', !visible);
       if (visible) {
         this.resizeItem(this.uaItem);
       }
@@ -802,9 +861,7 @@ export class DeviceModeToolbar {
     return;
   }
 
-  private modeMenuClicked(event: {
-    data: Event,
-  }): void {
+  private modeMenuClicked(event: Event): void {
     if (this.model.isScreenOrientationLocked()) {
       return;
     }
@@ -847,9 +904,9 @@ export class DeviceModeToolbar {
       return;
     }
 
-    const contextMenu = new UI.ContextMenu.ContextMenu(event.data, {
-      x: this.modeButton.element.getBoundingClientRect().left,
-      y: this.modeButton.element.getBoundingClientRect().top + (this.modeButton.element as HTMLElement).offsetHeight,
+    const contextMenu = new UI.ContextMenu.ContextMenu(event, {
+      x: this.modeButton.getBoundingClientRect().left,
+      y: this.modeButton.getBoundingClientRect().top + this.modeButton.offsetHeight,
     });
     addOrientation(EmulationModel.EmulatedDevices.Vertical, i18nString(UIStrings.portrait));
     addOrientation(EmulationModel.EmulatedDevices.Horizontal, i18nString(UIStrings.landscape));
@@ -902,20 +959,20 @@ export class DeviceModeToolbar {
       this.widthInput.disabled = this.model.type() !== EmulationModel.DeviceModeModel.Type.Responsive;
 
       this.heightInput.disabled = this.model.type() !== EmulationModel.DeviceModeModel.Type.Responsive;
-      this.deviceScaleItem.setEnabled(this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive);
-      this.uaItem.setEnabled(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.setEnabled(true);
+        this.modeButton.disabled = false;
         setTitleForButton(this.modeButton, i18nString(UIStrings.rotate));
       } else {
-        this.modeButton.setEnabled(false);
+        this.modeButton.disabled = true;
       }
     }
 
     const size = this.model.appliedDeviceSize();
-    this.widthInput.size = String(size.width);
-    this.heightInput.size =
+    this.widthInput.value = String(size.width);
+    this.heightInput.value =
         this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive && this.model.isFullHeight() ?
         '' :
         String(size.height);
@@ -928,14 +985,14 @@ export class DeviceModeToolbar {
 
     const deviceScale = this.model.appliedDeviceScaleFactor();
     if (deviceScale !== this.cachedDeviceScale) {
-      this.deviceScaleItem.element.value = String(deviceScale);
+      this.deviceScaleItem.value = String(deviceScale);
       this.cachedDeviceScale = deviceScale;
       this.resizeItem(this.deviceScaleItem, true);
     }
 
     const uaType = this.model.appliedUserAgentType();
     if (uaType !== this.cachedUaType) {
-      this.uaItem.element.value = uaType;
+      this.uaItem.value = uaType;
       this.cachedUaType = uaType;
       this.updateDeviceScaleMenuItems();
       this.resizeItem(this.uaItem);
@@ -948,7 +1005,7 @@ export class DeviceModeToolbar {
       const device = this.model.device();
       if (device) {
         const modeCount = device ? device.modes.length : 0;
-        this.modeButton.setEnabled(modeCount >= 2);
+        this.modeButton.disabled = modeCount < 2;
         setTitleForButton(
             this.modeButton,
             modeCount === 2 ? i18nString(UIStrings.rotate) : i18nString(UIStrings.screenOrientationOptions));
@@ -957,15 +1014,15 @@ export class DeviceModeToolbar {
     }
 
     if (device?.isDualScreen) {
-      this.spanButton.setVisible(true);
-      this.postureItem.setVisible(false);
+      this.spanButton.classList.toggle('hidden', false);
+      this.postureItem.classList.toggle('hidden', true);
     } else if (device?.isFoldableScreen) {
-      this.spanButton.setVisible(false);
-      this.postureItem.setVisible(true);
+      this.spanButton.classList.toggle('hidden', true);
+      this.postureItem.classList.toggle('hidden', false);
       this.updateDevicePostureItems();
     } else {
-      this.spanButton.setVisible(false);
-      this.postureItem.setVisible(false);
+      this.spanButton.classList.toggle('hidden', true);
+      this.postureItem.classList.toggle('hidden', true);
     }
     setTitleForButton(this.spanButton, i18nString(UIStrings.toggleDualscreenMode));
 
@@ -996,16 +1053,16 @@ export class DeviceModeToolbar {
     // disable the rotate button to prevent user-initiated rotation.
     // When unlocked, restore the button to its normal state.
     if (this.model.isScreenOrientationLocked()) {
-      this.modeButton.setEnabled(false);
+      this.modeButton.disabled = true;
       setTitleForButton(this.modeButton, i18nString(UIStrings.screenOrientationLocked));
     } else if (this.cachedModelDevice) {
       const modeCount = this.cachedModelDevice.modes.length;
-      this.modeButton.setEnabled(modeCount >= 2);
+      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.setEnabled(true);
+      this.modeButton.disabled = false;
       setTitleForButton(this.modeButton, i18nString(UIStrings.rotate));
     }
   }
@@ -1027,13 +1084,13 @@ export class DeviceModeToolbar {
     this.model.emulate(EmulationModel.DeviceModeModel.Type.Responsive, null, null);
   }
 
-  private resizeItem(item: UI.Toolbar.ToolbarComboBox, stripParens = false): void {
-    const selectedOption = item.selectedOption();
+  private resizeItem(item: HTMLSelectElement, stripParens = false): void {
+    const selectedOption = item.options[item.selectedIndex];
     if (!selectedOption) {
       return;
     }
 
-    const dummySelect = item.element.cloneNode(false) as HTMLSelectElement;
+    const dummySelect = item.cloneNode(false) as HTMLSelectElement;
     const dummyOption = selectedOption.cloneNode(true) as HTMLOptionElement;
 
     if (stripParens) {
@@ -1049,8 +1106,8 @@ export class DeviceModeToolbar {
     dummySelect.style.visibility = 'hidden';
     dummySelect.style.pointerEvents = 'none';
 
-    item.element.parentElement?.appendChild(dummySelect);
-    item.element.style.width = dummySelect.offsetWidth + 'px';
+    item.parentElement?.appendChild(dummySelect);
+    item.style.width = dummySelect.offsetWidth + 'px';
     dummySelect.remove();
   }
 }

package/front_end/panels/emulation/deviceModeView.css

@@ -25,6 +25,31 @@
   font-size: 16px;
 }
 
+.device-mode-size-input {
+  /*
+   * 4 characters for the maximum size of the value,
+   * 2 characters for the width of the step-buttons,
+   * 2 pixels padding between the characters and the
+   * step-buttons.
+   */
+  width: calc(4ch + 2ch + 2px);
+  max-height: 18px;
+  border: var(--sys-color-neutral-outline);
+  border-radius: 4px;
+  margin: 0 2px;
+  text-align: center;
+  font-size: inherit;
+  font-family: inherit;
+}
+
+.device-mode-size-input:disabled {
+  user-select: none;
+}
+
+.device-mode-size-input:focus::-webkit-input-placeholder {
+  color: transparent;
+}
+
 .device-mode-empty-toolbar-element {
   width: 0;
 }