chrome-devtools-frontend 1.0.1595925 → 1.0.1596260

package/front_end/panels/application/ServiceWorkersView.ts

@@ -10,6 +10,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import {Link} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -227,17 +228,8 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     othersView.show(othersDiv);
     const othersSection = othersView.appendSection(i18nString(UIStrings.serviceWorkersFromOtherOrigins));
     const othersSectionRow = othersSection.appendRow();
-    const seeOthers =
-        UI.Fragment
-            .html`<a class="devtools-link" role="link" tabindex="0" href="chrome://serviceworker-internals" target="_blank" style="display: inline; cursor: pointer;">${
-                i18nString(UIStrings.seeAllRegistrations)}</a>`;
-    seeOthers.setAttribute('jslog', `${VisualLogging.link('view-all').track({click: true})}`);
-    self.onInvokeElement(seeOthers, event => {
-      const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
-      rootTarget &&
-          void rootTarget.targetAgent().invoke_createTarget({url: 'chrome://serviceworker-internals?devtools'});
-      event.consume(true);
-    });
+    const seeOthers = Link.create(
+        'chrome://serviceworker-internals', i18nString(UIStrings.seeAllRegistrations), undefined, 'view-all');
     othersSectionRow.appendChild(seeOthers);
 
     this.toolbar.appendToolbarItem(

package/front_end/panels/developer_resources/DeveloperResourcesListView.ts

@@ -104,7 +104,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
     if (!filter?.regex) {
       return '';
     }
-    const matches = filter.regex.exec(textContent ?? '');
+    const matches = filter.regex.exec(textContent);
     if (!matches?.length) {
       return '';
     }

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -294,7 +294,14 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 };
 
 export class ComputedStyleWidget extends UI.Widget.VBox {
-  #computedStyleModel?: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+  /**
+   * We store these because they are used when calculating the dimensions for the image preview.
+   * When we need to get those dimensions, we try to resolve them against the
+   * node fresh (in case the dimensions have changed), but if that doesn't work,
+   * we fallback to the precomputed ones, which helps to deal with situations
+   * where the node might have been removed from the DOM.
+   */
+  #storedNodeFeatures: Components.ImagePreview.PrecomputedFeatures|null = null;
   #nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle|null = null;
   #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null = null;
   #propertyTraces: Map<string, SDK.CSSProperty.CSSProperty[]>|null = null;
@@ -363,7 +370,8 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
           return null;
         },
         async () => {
-          return await Components.ImagePreview.loadPrecomputedFeatures(this.#computedStyleModel?.node);
+          const liveFeatures = await Components.ImagePreview.loadPrecomputedFeatures(this.#nodeStyle?.node);
+          return liveFeatures ?? this.#storedNodeFeatures ?? undefined;
         });
 
     this.#updateView({hasMatches: true});
@@ -430,7 +438,13 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
 
   set nodeStyle(nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle|null) {
     this.#nodeStyle = nodeStyle;
-    this.requestUpdate();
+    if (nodeStyle) {
+      // Make sure we get the node features before we request an update so we
+      // don't run the update before we have the features fetched.
+      void this.#storeNodeFeatures(nodeStyle.node).then(() => this.requestUpdate());
+    } else {
+      this.requestUpdate();
+    }
   }
 
   get matchedStyles(): SDK.CSSMatchedStyles.CSSMatchedStyles|null {
@@ -447,13 +461,13 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
-  get computedStyleModel(): ComputedStyleModule.ComputedStyleModel.ComputedStyleModel|undefined {
-    return this.#computedStyleModel;
-  }
-
-  set computedStyleModel(computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel) {
-    this.#computedStyleModel = computedStyleModel;
-    this.requestUpdate();
+  async #storeNodeFeatures(node: SDK.DOMModel.DOMNode|null): Promise<void> {
+    if (node) {
+      const features = await Components.ImagePreview.loadPrecomputedFeatures(node);
+      this.#storedNodeFeatures = features ?? null;
+    } else {
+      this.#storedNodeFeatures = null;
+    }
   }
 
   #shouldGroupStyles(): boolean {
@@ -483,10 +497,6 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles): Promise<void> {
     this.imagePreviewPopover.hide();
     this.linkifier.reset();
-    const cssModel = this.#computedStyleModel?.cssModel();
-    if (!cssModel) {
-      return;
-    }
 
     const uniqueProperties = [...nodeStyle.computedStyle.keys()];
     uniqueProperties.sort(propertySorter);
@@ -526,8 +536,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null): Promise<void> {
     this.imagePreviewPopover.hide();
     this.linkifier.reset();
-    const cssModel = this.#computedStyleModel?.cssModel();
-    if (!nodeStyle || !matchedStyles || !cssModel) {
+    if (!nodeStyle || !matchedStyles) {
       this.#updateView({hasMatches: false});
       return;
     }

package/front_end/panels/elements/ElementsPanel.ts

@@ -316,7 +316,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.stylesWidget = new StylesSidebarPane(this.#computedStyleModel);
     this.#computedStyleWidget = new ComputedStyleWidget();
-    this.#computedStyleWidget.computedStyleModel = this.#computedStyleModel;
     this.#computedStyleModel.addEventListener(
         ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.#updateComputedStyles, this);
     this.#computedStyleModel.addEventListener(

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1575,11 +1575,17 @@ export class GridTemplateRenderer extends rendererBase(SDK.CSSPropertyParserMatc
 
     const indent = Common.Settings.Settings.instance().moduleSetting('text-editor-indent').get();
     const container = document.createDocumentFragment();
-    for (const line of match.lines) {
-      const value = Renderer.render(line, context);
-      const lineBreak = UI.Fragment.html`<br /><span class='styles-clipboard-only'>${indent.repeat(2)}</span>`;
-      container.append(lineBreak, ...value.nodes);
-    }
+
+    const template = html`
+      ${match.lines.map(line => {
+      const lines = Renderer.render(line, context).nodes;
+      return html`
+        <span class='styles-clipboard-only'>${indent.repeat(2)}</span>
+        ${lines}`;
+    })}
+    `;
+
+    render(template, container);
     return [container];
   }
 }

package/front_end/panels/elements/nodeStackTraceWidget.css

@@ -6,6 +6,6 @@
 @scope to (devtools-widget > *) {
   .stack-trace {
     font-size: 11px !important; /* stylelint-disable-line declaration-no-important */
-    font-family: Menlo, monospace;
+    font-family: Menlo, var(--monospace-font-family);
   }
 }

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -161,11 +161,6 @@ const UIStrings = {
    * @description Title of button in the Device Mode Toolbar which rotates the device 90 degrees.
    */
   rotate: 'Rotate',
-  /**
-   * @description Fallback/default text used for the name of a custom device when no name has been
-   * provided by the user.
-   */
-  none: 'None',
   /**
    * @description Tooltip of the rotate/screen orientation button.
    */
@@ -185,6 +180,10 @@ const UIStrings = {
    * posture e.g. Continuous, Folded.
    */
   devicePosture: 'Device posture',
+  /**
+   * @description Title of the network throttling selection in the Device Mode Toolbar.
+   */
+  throttling: 'Throttling',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/emulation/DeviceModeToolbar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -213,18 +212,17 @@ export class DeviceModeToolbar {
   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.ToolbarMenuButton;
+  private postureItem!: UI.Toolbar.ToolbarComboBox;
   private modeButton!: UI.Toolbar.ToolbarButton;
   private widthInput: EmulationComponents.DeviceSizeInputElement.SizeInputElement;
   private heightInput: EmulationComponents.DeviceSizeInputElement.SizeInputElement;
-  private deviceScaleItem!: UI.Toolbar.ToolbarMenuButton;
-  private deviceSelectItem!: UI.Toolbar.ToolbarMenuButton;
-  private scaleItem!: UI.Toolbar.ToolbarMenuButton;
-  private uaItem!: UI.Toolbar.ToolbarMenuButton;
+  private deviceScaleItem!: UI.Toolbar.ToolbarComboBox;
+  private deviceSelectItem!: UI.Toolbar.ToolbarComboBox;
+  private scaleItem!: UI.Toolbar.ToolbarComboBox;
+  private uaItem!: UI.Toolbar.ToolbarComboBox;
   private cachedDeviceScale!: number|null;
   private cachedUaType!: string|null;
   private xItem?: UI.Toolbar.ToolbarItem;
-  private throttlingConditionsItem?: UI.Toolbar.ToolbarMenuButton;
   private cachedModelType?: EmulationModel.DeviceModeModel.Type;
   private cachedScale?: number;
   private cachedModelDevice?: EmulationModel.EmulatedDevices.EmulatedDevice|null;
@@ -275,6 +273,12 @@ export class DeviceModeToolbar {
     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);
@@ -292,10 +296,9 @@ export class DeviceModeToolbar {
     const mainToolbar = this.#element.createChild('devtools-toolbar', 'main-toolbar');
 
     mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
-    this.deviceSelectItem =
-        new UI.Toolbar.ToolbarMenuButton(this.appendDeviceMenuItems.bind(this), undefined, undefined, 'device');
+    this.deviceSelectItem = new UI.Toolbar.ToolbarComboBox(
+        this.onDeviceChange.bind(this), i18nString(UIStrings.deviceType), 'dark-text', 'device');
     this.deviceSelectItem.turnShrinkable();
-    this.deviceSelectItem.setDarkText();
     const dimensionsSpan =
         uiI18n.getFormatLocalizedString(str_, UIStrings.dimensions, {PH1: this.deviceSelectItem.element});
     mainToolbar.append(...dimensionsSpan.childNodes);
@@ -325,10 +328,8 @@ export class DeviceModeToolbar {
 
     mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
     this.scaleItem =
-        new UI.Toolbar.ToolbarMenuButton(this.appendScaleMenuItems.bind(this), undefined, undefined, 'scale');
-    setTitleForButton(this.scaleItem, i18nString(UIStrings.zoom));
+        new UI.Toolbar.ToolbarComboBox(this.onScaleChange.bind(this), i18nString(UIStrings.zoom), 'dark-text', 'scale');
     this.scaleItem.turnShrinkable();
-    this.scaleItem.setDarkText();
     mainToolbar.appendToolbarItem(this.scaleItem);
 
     const autoAdjustScaleButton = new UI.Toolbar.ToolbarSettingToggle(
@@ -337,28 +338,22 @@ export class DeviceModeToolbar {
 
     mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
 
-    this.deviceScaleItem = new UI.Toolbar.ToolbarMenuButton(
-        this.appendDeviceScaleMenuItems.bind(this), undefined, undefined, 'device-pixel-ratio');
+    this.deviceScaleItem = new UI.Toolbar.ToolbarComboBox(
+        this.onDeviceScaleChange.bind(this), i18nString(UIStrings.devicePixelRatio), 'dark-text', 'device-pixel-ratio');
     this.deviceScaleItem.turnShrinkable();
     this.deviceScaleItem.setVisible(this.showDeviceScaleFactorSetting.get());
-    setTitleForButton(this.deviceScaleItem, i18nString(UIStrings.devicePixelRatio));
-    this.deviceScaleItem.setDarkText();
     const deviceScaleSpan = uiI18n.getFormatLocalizedString(str_, UIStrings.dpr, {PH1: this.deviceScaleItem.element});
     mainToolbar.append(...deviceScaleSpan.childNodes);
     mainToolbar.appendToolbarItem(this.deviceScaleItem);
     mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
-    this.uaItem =
-        new UI.Toolbar.ToolbarMenuButton(this.appendUserAgentMenuItems.bind(this), undefined, undefined, 'device-type');
+    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());
-    setTitleForButton(this.uaItem, i18nString(UIStrings.deviceType));
-    this.uaItem.setDarkText();
     mainToolbar.appendToolbarItem(this.uaItem);
 
-    this.throttlingConditionsItem =
-        MobileThrottling.ThrottlingManager.throttlingManager().createMobileThrottlingButton();
-    this.throttlingConditionsItem.turnShrinkable();
-    mainToolbar.appendToolbarItem(this.throttlingConditionsItem);
+    MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.createForGlobalConditions(
+        mainToolbar, i18nString(UIStrings.throttling));
     const saveDataItem = MobileThrottling.ThrottlingManager.throttlingManager().createSaveDataOverrideSelector();
     saveDataItem.turnShrinkable();
     mainToolbar.appendToolbarItem(saveDataItem);
@@ -375,11 +370,9 @@ export class DeviceModeToolbar {
 
     // Show posture toolbar menu for foldable devices.
     mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
-    this.postureItem = new UI.Toolbar.ToolbarMenuButton(
-        this.appendDevicePostureItems.bind(this), undefined, undefined, 'device-posture');
+    this.postureItem = new UI.Toolbar.ToolbarComboBox(
+        this.onPostureChange.bind(this), i18nString(UIStrings.devicePosture), 'dark-text', 'device-posture');
     this.postureItem.turnShrinkable();
-    this.postureItem.setDarkText();
-    setTitleForButton(this.postureItem, i18nString(UIStrings.devicePosture));
     mainToolbar.appendToolbarItem(this.postureItem);
 
     return mainToolbar;
@@ -401,11 +394,22 @@ export class DeviceModeToolbar {
     return ['Continuous', 'Folded'].map(title => ({title, value: title, selected: currentPosture === title}));
   }
 
-  private appendDevicePostureItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+  private updateDevicePostureItems(): void {
+    this.postureItem.removeOptions();
     for (const option of this.getDevicePostureOptions()) {
-      contextMenu.defaultSection().appendCheckboxItem(
-          option.title, this.spanClicked.bind(this),
-          {checked: option.selected, jslogContext: option.title.toLowerCase()});
+      this.postureItem.createOption(option.title, option.value, option.title.toLowerCase());
+    }
+    const currentPosture = this.currentDevicePosture();
+    if (this.postureItem.element.value !== currentPosture) {
+      this.postureItem.element.value = currentPosture;
+    }
+    this.resizeItem(this.postureItem);
+  }
+
+  private onPostureChange(): void {
+    const value = this.postureItem.element.value;
+    if (value !== this.currentDevicePosture()) {
+      this.spanClicked();
     }
   }
 
@@ -451,15 +455,21 @@ export class DeviceModeToolbar {
     });
   }
 
-  private appendScaleMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
-    for (const option of this.getScaleOptions()) {
-      contextMenu.defaultSection().appendCheckboxItem(
-          option.title, this.onScaleMenuChanged.bind(this, option.value),
-          {checked: option.selected, jslogContext: option.jslogContext});
+  private updateScaleMenuItems(): void {
+    this.scaleItem.removeOptions();
+    const options = this.getScaleOptions();
+    for (const option of options) {
+      this.scaleItem.createOption(option.title, String(option.value), option.jslogContext);
+    }
+    const selected = options.find(o => o.selected);
+    if (selected) {
+      this.scaleItem.element.value = String(selected.value);
     }
+    this.resizeItem(this.scaleItem, true);
   }
 
-  private onScaleMenuChanged(value: number): void {
+  private onScaleChange(): void {
+    const value = Number(this.scaleItem.selectedOption()?.value);
     this.model.scaleSetting().set(value);
   }
 
@@ -493,13 +503,22 @@ export class DeviceModeToolbar {
     });
   }
 
-  private appendDeviceScaleMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
-    const deviceScaleFactorSetting = this.model.deviceScaleFactorSetting();
-    for (const option of this.getDeviceScaleFactorOptions()) {
-      contextMenu.defaultSection().appendCheckboxItem(
-          option.title, deviceScaleFactorSetting.set.bind(deviceScaleFactorSetting, option.value),
-          {checked: option.selected, jslogContext: option.jslogContext});
+  private updateDeviceScaleMenuItems(): void {
+    this.deviceScaleItem.removeOptions();
+    const options = this.getDeviceScaleFactorOptions();
+    for (const option of options) {
+      this.deviceScaleItem.createOption(option.title, String(option.value), option.jslogContext);
     }
+    const selected = options.find(o => o.selected);
+    if (selected) {
+      this.deviceScaleItem.element.value = String(selected.value);
+    }
+    this.resizeItem(this.deviceScaleItem, true);
+  }
+
+  private onDeviceScaleChange(): void {
+    const value = Number(this.deviceScaleItem.selectedOption()?.value);
+    this.model.deviceScaleFactorSetting().set(value);
   }
 
   private getUserAgentOptions():
@@ -519,13 +538,23 @@ export class DeviceModeToolbar {
           }));
   }
 
-  private appendUserAgentMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
-    const uaSetting = this.model.uaSetting();
-    for (const option of this.getUserAgentOptions()) {
-      contextMenu.defaultSection().appendCheckboxItem(
-          option.title, uaSetting.set.bind(uaSetting, option.value),
-          {checked: option.selected, jslogContext: option.jslogContext});
+  private updateUserAgentMenuItems(): void {
+    this.uaItem.removeOptions();
+    const options = this.getUserAgentOptions();
+    for (const option of options) {
+      this.uaItem.createOption(option.title, option.value, option.jslogContext);
     }
+    const selected = options.find(o => o.selected);
+    if (selected) {
+      this.uaItem.element.value = selected.value;
+    }
+    this.resizeItem(this.uaItem);
+  }
+
+  private onUAChange(): void {
+    const value = this.uaItem.selectedOption()?.value as EmulationModel.DeviceModeModel.UA;
+    this.model.uaSetting().set(value);
+    this.resizeItem(this.uaItem);
   }
 
   private appendOptionsMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
@@ -650,40 +679,66 @@ export class DeviceModeToolbar {
     };
   }
 
-  private appendDeviceMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+  private updateDeviceMenuItems(): void {
+    this.deviceSelectItem.removeOptions();
     const options = this.getDeviceModeOptions();
 
-    contextMenu.headerSection().appendCheckboxItem(
-        options.responsive.title, this.switchToResponsive.bind(this),
-        {checked: options.responsive.selected, jslogContext: options.responsive.jslogContext});
+    this.deviceSelectItem.createOption(options.responsive.title, 'Responsive', options.responsive.jslogContext);
 
-    appendGroup.call(this, options.standard);
-    appendGroup.call(this, options.custom);
+    appendGroup.call(this, options.standard, 'Standard');
+    appendGroup.call(this, options.custom, 'Custom');
 
-    contextMenu.footerSection().appendItem(
-        options.edit.title, this.emulatedDevicesList.revealCustomSetting.bind(this.emulatedDevicesList),
-        {jslogContext: options.edit.jslogContext});
-
-    function appendGroup(this: DeviceModeToolbar, group: Array<{
-                           device: EmulationModel.EmulatedDevices.EmulatedDevice,
-                           title: string,
-                           selected: boolean,
-                           jslogContext: string,
-                         }>): void {
+    this.deviceSelectItem.createOption(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 section = contextMenu.section();
+      const optGroup = document.createElement('optgroup');
+      optGroup.label = label;
       for (const item of group) {
-        section.appendCheckboxItem(item.title, this.emulateDevice.bind(this, item.device), {
-          checked: item.selected,
-          jslogContext: item.jslogContext,
-        });
+        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.deviceSelectItem.addOption(optGroup);
+    }
+  }
+
+  private updateDeviceSelection(): void {
+    const device = this.model.device();
+    if (this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
+      this.deviceSelectItem.element.value = 'Responsive';
+    } else if (device) {
+      this.deviceSelectItem.element.value = device.title;
+    }
+    this.resizeItem(this.deviceSelectItem);
+  }
+
+  private onDeviceChange(): void {
+    const value = this.deviceSelectItem.selectedOption()?.value;
+    if (value === 'Edit') {
+      this.emulatedDevicesList.revealCustomSetting();
+      this.updateDeviceSelection();
+    } else if (value === 'Responsive') {
+      this.switchToResponsive();
+    } else {
+      for (const device of this.allDevices()) {
+        if (device.title === value) {
+          this.emulateDevice(device);
+          break;
+        }
       }
     }
   }
 
   private deviceListChanged(): void {
+    this.updateDeviceMenuItems();
     const device = this.model.device();
     if (!device) {
       return;
@@ -709,7 +764,11 @@ export class DeviceModeToolbar {
 
   private updateUserAgentTypeVisibility(): void {
     if (this.uaItem) {
-      this.uaItem.setVisible(this.showUserAgentTypeSetting.get());
+      const visible = this.showUserAgentTypeSetting.get();
+      this.uaItem.setVisible(visible);
+      if (visible) {
+        this.resizeItem(this.uaItem);
+      }
     }
   }
 
@@ -854,31 +913,27 @@ export class DeviceModeToolbar {
     this.heightInput.placeholder = String(size.height);
 
     if (this.model.scale() !== this.cachedScale) {
-      this.scaleItem.setText(`${this.getPrettyZoomPercentage()}%`);
+      this.updateScaleMenuItems();
       this.cachedScale = this.model.scale();
     }
 
     const deviceScale = this.model.appliedDeviceScaleFactor();
     if (deviceScale !== this.cachedDeviceScale) {
-      this.deviceScaleItem.setText(`${deviceScale.toFixed(1)}`);
+      this.deviceScaleItem.element.value = String(deviceScale);
       this.cachedDeviceScale = deviceScale;
+      this.resizeItem(this.deviceScaleItem, true);
     }
 
     const uaType = this.model.appliedUserAgentType();
     if (uaType !== this.cachedUaType) {
-      this.uaItem.setText(uaType);
+      this.uaItem.element.value = uaType;
       this.cachedUaType = uaType;
+      this.updateDeviceScaleMenuItems();
+      this.resizeItem(this.uaItem);
     }
 
-    let deviceItemTitle: string = i18nString(UIStrings.none);
-    if (this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
-      deviceItemTitle = i18nString(UIStrings.responsive);
-    }
     const device = this.model.device();
-    if (this.model.type() === EmulationModel.DeviceModeModel.Type.Device && device) {
-      deviceItemTitle = device.title;
-    }
-    this.deviceSelectItem.setText(deviceItemTitle);
+    this.updateDeviceSelection();
 
     if (this.model.device() !== this.cachedModelDevice) {
       const device = this.model.device();
@@ -898,7 +953,7 @@ export class DeviceModeToolbar {
     } else if (device?.isFoldableScreen) {
       this.spanButton.setVisible(false);
       this.postureItem.setVisible(true);
-      this.postureItem.setText(this.currentDevicePosture());
+      this.updateDevicePostureItems();
     } else {
       this.spanButton.setVisible(false);
       this.postureItem.setVisible(false);
@@ -962,4 +1017,31 @@ 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();
+    if (!selectedOption) {
+      return;
+    }
+
+    const dummySelect = item.element.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);
+      }
+    }
+
+    dummySelect.appendChild(dummyOption);
+    dummySelect.style.width = 'fit-content';
+    dummySelect.style.position = 'absolute';
+    dummySelect.style.visibility = 'hidden';
+    dummySelect.style.pointerEvents = 'none';
+
+    item.element.parentElement?.appendChild(dummySelect);
+    item.element.style.width = dummySelect.offsetWidth + 'px';
+    dummySelect.remove();
+  }
 }

package/front_end/panels/greendev/GreenDevPanel.css

@@ -117,7 +117,7 @@
   margin-top: 8px;
   padding-top: 8px;
   border-top: 1px solid #eee;
-  font-family: monospace;
+  font-family: var(--monospace-font-family);
 }
 
 .thought, .action {
@@ -169,7 +169,7 @@
 
 .green-dev-floaty-dialog-node-description {
   font-size: 11px;
-  font-family: monospace;
+  font-family: var(--monospace-font-family);
   color: #0b57d0;
   background-color: #d3e3fd;
   padding: 2px 8px;

package/front_end/panels/issues/AffectedPermissionElementsView.ts

@@ -5,7 +5,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
-import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
 
 import {AffectedElementsView} from './AffectedElementsView.js';
 
@@ -31,16 +31,19 @@ export class AffectedPermissionElementsView extends AffectedElementsView {
   async #appendAffectedElements(issues: Iterable<IssuesManager.PermissionElementIssue.PermissionElementIssue>):
       Promise<void> {
     let count = 0;
+    // clang-format off
+    const templates = [];
     for (const issue of issues) {
       for (const element of issue.elements()) {
-        const rowElement = UI.Fragment.html`
-    <tr>
-      ${await this.createElementCell(element, this.issue.getCategory())}
-    </tr>`;
-        this.affectedResources.appendChild(rowElement);
         count++;
+        templates.push(html`<tr>
+          ${await this.createElementCell(element, this.issue.getCategory())}
+        </tr>`);
       }
     }
+    // clang-format on
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`${templates}`, this.affectedResources);
     this.updateAffectedResourceCount(count);
   }
 }