chrome-devtools-frontend 1.0.1595925 → 1.0.1596535

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);
   }
 }

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -12,6 +12,7 @@ import * as EmulationModel from '../../models/emulation/emulation.js';
 import type * as LighthouseModel from '../../models/lighthouse/lighthouse.js';
 import * as Emulation from '../emulation/emulation.js';
 
+import type {RunOverrides} from './LighthousePanel.js';
 import type {LighthouseRun as LighthouseRunType, ProtocolService} from './LighthouseProtocolService.js';
 
 const UIStrings = {
@@ -567,9 +568,9 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     };
   }
 
-  getCategoryIDs(): string[] {
+  getCategoryIDs(): CategoryId[] {
     const {mode} = this.getFlags();
-    const categoryIDs = [];
+    const categoryIDs: CategoryId[] = [];
     for (const preset of Presets) {
       if (mode && !preset.supportedModes.includes(mode)) {
         continue;
@@ -639,7 +640,12 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     }
   }
 
-  async startLighthouse(): Promise<void> {
+  /**
+   * Starts a LH run. By default it will use the categories based on what the
+   * user has selected in the UI, but these can be overridden by passing in the
+   * category IDs, in which case these take priority.
+   */
+  async startLighthouse(overrides?: RunOverrides): Promise<void> {
     if (this.lastAction) {
       await this.lastAction;
     }
@@ -651,7 +657,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
       }
 
       const inspectedURL = await this.getInspectedURL({force: true});
-      const categoryIDs = this.getCategoryIDs();
+      const categoryIDs = overrides?.categoryIds ?? this.getCategoryIDs();
       const flags = this.getFlags();
 
       this.recordMetrics(flags, categoryIDs);
@@ -861,9 +867,11 @@ export interface EventTypes {
   [Events.AuditProgressChanged]: AuditProgressChangedEvent;
 }
 
+export type CategoryId = 'performance'|'accessibility'|'best-practices'|'seo';
+
 export interface Preset {
   setting: Common.Settings.Setting<boolean>;
-  configID: string;
+  configID: CategoryId;
   title: () => Common.UIString.LocalizedString;
   description: () => Common.UIString.LocalizedString;
   supportedModes: string[];

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -13,10 +13,11 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {
   type AuditProgressChangedEvent,
+  type CategoryId,
   Events,
   LighthouseController,
   type PageAuditabilityChangedEvent,
-  type PageWarningsChangedEvent,
+  type PageWarningsChangedEvent
 } from './LighthouseController.js';
 import lighthousePanelStyles from './lighthousePanel.css.js';
 import {ProtocolService} from './LighthouseProtocolService.js';
@@ -70,7 +71,6 @@ export class LighthousePanel extends UI.Panel.Panel {
   private warningText: Nullable<string>;
   private unauditableExplanation: Nullable<string>;
   private readonly cachedRenderedReports: Map<LighthouseModel.ReporterTypes.ReportJSON, HTMLElement>;
-  private readonly dropTarget: UI.DropTarget.DropTarget;
   private readonly auditResultsElement: HTMLElement;
   private clearButton!: UI.Toolbar.ToolbarButton;
   private newButton!: UI.Toolbar.ToolbarButton;
@@ -94,7 +94,7 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.unauditableExplanation = null;
     this.cachedRenderedReports = new Map();
 
-    this.dropTarget = new UI.DropTarget.DropTarget(
+    new UI.DropTarget.DropTarget(
         this.contentElement, [UI.DropTarget.Type.File], i18nString(UIStrings.dropLighthouseJsonHere),
         this.handleDrop.bind(this));
 
@@ -147,14 +147,17 @@ export class LighthousePanel extends UI.Panel.Panel {
     }
   }
 
-  async handleCompleteRun(): Promise<void> {
+  async handleCompleteRun(overrides?: RunOverrides):
+      Promise<{report: LighthouseModel.ReporterTypes.ReportJSON | null}> {
     try {
-      await this.controller.startLighthouse();
+      await this.controller.startLighthouse(overrides);
       this.renderStatusView();
       const {lhr, artifacts} = await this.controller.collectLighthouseResults();
       this.buildReportUI(lhr, artifacts);
+      return {report: lhr};
     } catch (err) {
       this.handleError(err);
+      return {report: null};
     }
   }
 
@@ -379,4 +382,18 @@ export class LighthousePanel extends UI.Panel.Panel {
       event.handled = true;
     }
   }
+
+  static async executeLighthouseRecording(
+      overrides?: RunOverrides,
+      ): Promise<LighthouseModel.ReporterTypes.ReportJSON|null> {
+    const panel = LighthousePanel.instance();
+    await UI.ViewManager.ViewManager.instance().showView('lighthouse');
+
+    const {report} = await panel.handleCompleteRun(overrides);
+    return report;
+  }
+}
+
+export interface RunOverrides {
+  categoryIds: CategoryId[];
 }

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -906,8 +906,15 @@ export class HeapSnapshotObjectNode extends HeapSnapshotGenericObjectNode {
     if (this.cycledWithAncestorGridNode) {
       div.classList.add('cycled-ancestor-node');
     }
-    div.prepend(UI.Fragment.html`<span class="property-name ${nameClass}">${name}</span>
-  <span class="grayed">${this.edgeNodeSeparator()}</span>`);
+    const property = document.createElement('span');
+    property.classList.add('property-name', nameClass);
+    property.textContent = name;
+
+    const separator = document.createElement('span');
+    separator.classList.add('grayed');
+    separator.textContent = this.edgeNodeSeparator();
+
+    div.prepend(property, separator);
   }
 
   edgeNodeSeparator(): string {
@@ -1170,7 +1177,8 @@ export class HeapSnapshotConstructorNode extends HeapSnapshotGridNode {
   override createCell(columnId: string): HTMLElement {
     const cell = columnId === 'object' ? super.createCell(columnId) : this.createValueCell(columnId);
     if (columnId === 'object' && this.count > 1) {
-      cell.appendChild(UI.Fragment.html`<span class="objects-count">×${this.data.count}</span>`);
+      const template = html`<span class="objects-count">×${this.data.count}</span>`;
+      render(template, cell);
     }
     return cell;
   }

package/front_end/panels/recorder/components/StepView.ts

@@ -362,7 +362,6 @@ function renderStepActions(input: ViewInput): Lit.TemplateResult|null {
       }}
       jslog=${VisualLogging.dropDown('step-actions').track({click: true})}
       .iconName=${'dots-vertical'}
-      }
     ></devtools-menu-button>
   `;
   // clang-format on
@@ -459,7 +458,6 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
               <div class="subtitle" title=${subtitle}>${subtitle}</div>
             </div>
           </div>
-          <div class="filler"></div>
           ${renderStepActions(input)}
         </div>
         <div class="details">