chrome-devtools-frontend 1.0.1593518 → 1.0.1593959

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -10,6 +10,7 @@ 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 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';
@@ -19,8 +20,14 @@ const UIStrings = {
   /**
    * @description Title of the device dimensions selection item in the Device Mode Toolbar.
    * webpage in pixels.
+   * @example {Responsive} PH1
    */
-  dimensions: 'Dimensions',
+  dimensions: 'Dimensions: {PH1}',
+  /**
+   * @description Title of the device pixel ratio selection item in the Device Mode Toolbar.
+   * @example {2.0} PH1
+   */
+  dpr: 'DPR: {PH1}',
   /**
    * @description Title of the width input textbox in the Device Mode Toolbar, for the width of the
    * webpage in pixels.
@@ -53,12 +60,12 @@ const UIStrings = {
    */
   moreOptions: 'More options',
   /**
-   * @description A context menu item in the Device Mode Toolbar. This is a command to resize the
-   * webpage preview to fit the current window. The placeholder is the percentage of full-size that
-   * will be displayed after fitting.
+   * @description A menu item in the drop-down box that allows the user to select the zoom level.
+   * Labels the value which corresponds to the 'fit to window' zoom level, represented by the
+   * placeholder, which is a number. In the Device Mode Toolbar.
    * @example {30.0} PH1
    */
-  fitToWindowF: 'Fit to window ({PH1}%)',
+  fitToWindowPercentage: '{PH1}% (fit to window)',
   /**
    * @description A checkbox setting that appears in the context menu for the zoom level, in the
    * Device Mode Toolbar.
@@ -70,7 +77,7 @@ const UIStrings = {
    * placeholder, which is a number. In the Device Mode Toolbar.
    * @example {4.3} PH1
    */
-  defaultF: 'Default: {PH1}',
+  defaultF: '{PH1} (default)',
   /**
    * @description Command to hide the frame (like a picture frame) around the mobile device screen.
    */
@@ -163,6 +170,11 @@ const UIStrings = {
    * @description Tooltip of the rotate/screen orientation button.
    */
   screenOrientationOptions: 'Screen orientation options',
+  /**
+   * @description Tooltip shown on the rotate button when screen orientation is locked by the page
+   * via screen.orientation.lock().
+   */
+  screenOrientationLocked: 'Screen orientation is locked by the page',
   /**
    * @description Tooltip for a button which turns on/off dual-screen mode, which emulates devices
    * like tablets which have two screens.
@@ -284,6 +296,9 @@ export class DeviceModeToolbar {
         new UI.Toolbar.ToolbarMenuButton(this.appendDeviceMenuItems.bind(this), undefined, undefined, 'device');
     this.deviceSelectItem.turnShrinkable();
     this.deviceSelectItem.setDarkText();
+    const dimensionsSpan =
+        uiI18n.getFormatLocalizedString(str_, UIStrings.dimensions, {PH1: this.deviceSelectItem.element});
+    mainToolbar.append(...dimensionsSpan.childNodes);
     mainToolbar.appendToolbarItem(this.deviceSelectItem);
 
     this.widthInput.addEventListener('sizechanged', ({size: width}) => {
@@ -315,6 +330,11 @@ export class DeviceModeToolbar {
     this.scaleItem.turnShrinkable();
     this.scaleItem.setDarkText();
     mainToolbar.appendToolbarItem(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()));
 
     this.deviceScaleItem = new UI.Toolbar.ToolbarMenuButton(
@@ -323,6 +343,8 @@ export class DeviceModeToolbar {
     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 =
@@ -374,11 +396,16 @@ export class DeviceModeToolbar {
     return optionsToolbar;
   }
 
+  private getDevicePostureOptions(): Array<{title: string, value: string, selected: boolean}> {
+    const currentPosture = this.currentDevicePosture();
+    return ['Continuous', 'Folded'].map(title => ({title, value: title, selected: currentPosture === title}));
+  }
+
   private appendDevicePostureItems(contextMenu: UI.ContextMenu.ContextMenu): void {
-    for (const title of ['Continuous', 'Folded']) {
+    for (const option of this.getDevicePostureOptions()) {
       contextMenu.defaultSection().appendCheckboxItem(
-          title, this.spanClicked.bind(this),
-          {checked: title === this.currentDevicePosture(), jslogContext: title.toLowerCase()});
+          option.title, this.spanClicked.bind(this),
+          {checked: option.selected, jslogContext: option.title.toLowerCase()});
     }
   }
 
@@ -392,27 +419,43 @@ export class DeviceModeToolbar {
     return 'Continuous';
   }
 
-  private appendScaleMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+  private getScaleOptions(): Array<{title: string, value: number, selected: boolean, jslogContext: string}> {
+    const values = [0.5, 0.75, 1, 1.25, 1.5, 2];
+    let fitValue: number|null = null;
     if (this.model.type() === EmulationModel.DeviceModeModel.Type.Device) {
-      contextMenu.footerSection().appendItem(
-          i18nString(UIStrings.fitToWindowF, {PH1: this.getPrettyFitZoomPercentage()}),
-          this.onScaleMenuChanged.bind(this, this.model.fitScale()), {jslogContext: 'fit-to-window'});
-    }
-    contextMenu.footerSection().appendCheckboxItem(
-        i18nString(UIStrings.autoadjustZoom), this.onAutoAdjustScaleChanged.bind(this),
-        {checked: this.autoAdjustScaleSetting.get(), jslogContext: 'auto-adjust-zoom'});
-    const boundAppendScaleItem = appendScaleItem.bind(this);
-    boundAppendScaleItem('50%', 0.5);
-    boundAppendScaleItem('75%', 0.75);
-    boundAppendScaleItem('100%', 1);
-    boundAppendScaleItem('125%', 1.25);
-    boundAppendScaleItem('150%', 1.5);
-    boundAppendScaleItem('200%', 2);
-
-    function appendScaleItem(this: DeviceModeToolbar, title: string, value: number): void {
+      fitValue = this.model.fitScale();
+      const fitValuePct = (fitValue * 100).toFixed(0);
+      let found = false;
+      for (let i = 0; i < values.length; ++i) {
+        if ((values[i] * 100).toFixed(0) === fitValuePct) {
+          found = true;
+          values[i] = fitValue;
+          break;
+        }
+      }
+      if (!found) {
+        values.push(fitValue);
+        values.sort((a, b) => a - b);
+      }
+    }
+
+    const currentScale = this.model.scaleSetting().get();
+    return values.map(value => {
+      let title = (value * 100).toFixed(0) + '%';
+      let jslogContext = title;
+      if (value === fitValue) {
+        title = i18nString(UIStrings.fitToWindowPercentage, {PH1: (value * 100).toFixed(0)});
+        jslogContext = 'fit-to-window';
+      }
+      return {title, value, selected: currentScale === value, jslogContext};
+    });
+  }
+
+  private appendScaleMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+    for (const option of this.getScaleOptions()) {
       contextMenu.defaultSection().appendCheckboxItem(
-          title, this.onScaleMenuChanged.bind(this, value),
-          {checked: this.model.scaleSetting().get() === value, jslogContext: title});
+          option.title, this.onScaleMenuChanged.bind(this, option.value),
+          {checked: option.selected, jslogContext: option.jslogContext});
     }
   }
 
@@ -420,41 +463,68 @@ export class DeviceModeToolbar {
     this.model.scaleSetting().set(value);
   }
 
-  private onAutoAdjustScaleChanged(): void {
-    this.autoAdjustScaleSetting.set(!this.autoAdjustScaleSetting.get());
-  }
-
-  private appendDeviceScaleMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+  private getDeviceScaleFactorOptions():
+      Array<{title: string, value: number, selected: boolean, jslogContext: string}> {
     const deviceScaleFactorSetting = this.model.deviceScaleFactorSetting();
     const defaultValue = this.model.uaSetting().get() === EmulationModel.DeviceModeModel.UA.MOBILE ||
             this.model.uaSetting().get() === EmulationModel.DeviceModeModel.UA.MOBILE_NO_TOUCH ?
         EmulationModel.DeviceModeModel.defaultMobileScaleFactor :
         window.devicePixelRatio;
-    appendDeviceScaleFactorItem(
-        contextMenu.headerSection(), i18nString(UIStrings.defaultF, {PH1: defaultValue}), 0, 'dpr-default');
-    appendDeviceScaleFactorItem(contextMenu.defaultSection(), '1', 1, 'dpr-1');
-    appendDeviceScaleFactorItem(contextMenu.defaultSection(), '2', 2, 'dpr-2');
-    appendDeviceScaleFactorItem(contextMenu.defaultSection(), '3', 3, 'dpr-3');
+    const values = [1, 2, 3];
+    if (!values.includes(defaultValue)) {
+      values.push(defaultValue);
+      values.sort((a, b) => a - b);
+    }
+
+    const currentDPR = deviceScaleFactorSetting.get();
+    return values.map(value => {
+      let title = String(value);
+      let jslogContext = `dpr-${value}`;
+      if (value === defaultValue) {
+        title = i18nString(UIStrings.defaultF, {PH1: value});
+        jslogContext = 'dpr-default';
+      }
+      return {
+        title,
+        value: value === defaultValue ? 0 : value,
+        selected: currentDPR === value || (value === defaultValue && currentDPR === 0),
+        jslogContext
+      };
+    });
+  }
 
-    function appendDeviceScaleFactorItem(
-        section: UI.ContextMenu.Section, title: string, value: number, jslogContext: string): void {
-      section.appendCheckboxItem(
-          title, deviceScaleFactorSetting.set.bind(deviceScaleFactorSetting, value),
-          {checked: deviceScaleFactorSetting.get() === value, jslogContext});
+  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 appendUserAgentMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+  private getUserAgentOptions():
+      Array<{title: string, value: EmulationModel.DeviceModeModel.UA, selected: boolean, jslogContext: string}> {
     const uaSetting = this.model.uaSetting();
-    appendUAItem(EmulationModel.DeviceModeModel.UA.MOBILE, EmulationModel.DeviceModeModel.UA.MOBILE);
-    appendUAItem(EmulationModel.DeviceModeModel.UA.MOBILE_NO_TOUCH, EmulationModel.DeviceModeModel.UA.MOBILE_NO_TOUCH);
-    appendUAItem(EmulationModel.DeviceModeModel.UA.DESKTOP, EmulationModel.DeviceModeModel.UA.DESKTOP);
-    appendUAItem(EmulationModel.DeviceModeModel.UA.DESKTOP_TOUCH, EmulationModel.DeviceModeModel.UA.DESKTOP_TOUCH);
+    const currentUserAgent = uaSetting.get();
+    return [
+      EmulationModel.DeviceModeModel.UA.MOBILE,
+      EmulationModel.DeviceModeModel.UA.MOBILE_NO_TOUCH,
+      EmulationModel.DeviceModeModel.UA.DESKTOP,
+      EmulationModel.DeviceModeModel.UA.DESKTOP_TOUCH,
+    ].map(value => ({
+            title: value,
+            value,
+            selected: currentUserAgent === value,
+            jslogContext: Platform.StringUtilities.toKebabCase(value)
+          }));
+  }
 
-    function appendUAItem(title: string, value: EmulationModel.DeviceModeModel.UA): void {
+  private appendUserAgentMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+    const uaSetting = this.model.uaSetting();
+    for (const option of this.getUserAgentOptions()) {
       contextMenu.defaultSection().appendCheckboxItem(
-          title, uaSetting.set.bind(uaSetting, value),
-          {checked: uaSetting.get() === value, jslogContext: Platform.StringUtilities.toKebabCase(value)});
+          option.title, uaSetting.set.bind(uaSetting, option.value),
+          {checked: option.selected, jslogContext: option.jslogContext});
     }
   }
 
@@ -539,25 +609,75 @@ export class DeviceModeToolbar {
     return this.standardDevices().concat(this.customDevices());
   }
 
+  private getDeviceModeOptions(): {
+    responsive: {title: string, selected: boolean, jslogContext: string},
+    standard: Array<{
+      device: EmulationModel.EmulatedDevices.EmulatedDevice,
+      title: string,
+      selected: boolean,
+      jslogContext: string,
+    }>,
+    custom: Array<{
+      device: EmulationModel.EmulatedDevices.EmulatedDevice,
+      title: string,
+      selected: boolean,
+      jslogContext: string,
+    }>,
+    edit: {title: string, jslogContext: string},
+  } {
+    return {
+      responsive: {
+        title: i18nString(UIStrings.responsive),
+        selected: this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive,
+        jslogContext: 'responsive'
+      },
+      standard: this.standardDevices().map(device => ({
+                                             device,
+                                             title: device.title,
+                                             selected: this.model.device() === device,
+                                             jslogContext: Platform.StringUtilities.toKebabCase(device.title)
+                                           })),
+      custom: this.customDevices().map(device => ({
+                                         device,
+                                         title: device.title,
+                                         selected: this.model.device() === device,
+                                         jslogContext: Platform.StringUtilities.toKebabCase(device.title)
+                                       })),
+      edit: {
+        title: i18nString(UIStrings.edit),
+        jslogContext: 'edit',
+      }
+    };
+  }
+
   private appendDeviceMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+    const options = this.getDeviceModeOptions();
+
     contextMenu.headerSection().appendCheckboxItem(
-        i18nString(UIStrings.responsive), this.switchToResponsive.bind(this),
-        {checked: this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive, jslogContext: 'responsive'});
-    appendGroup.call(this, this.standardDevices());
-    appendGroup.call(this, this.customDevices());
-    contextMenu.footerSection().appendItem(
-        i18nString(UIStrings.edit), this.emulatedDevicesList.revealCustomSetting.bind(this.emulatedDevicesList),
-        {jslogContext: 'edit'});
+        options.responsive.title, this.switchToResponsive.bind(this),
+        {checked: options.responsive.selected, jslogContext: options.responsive.jslogContext});
+
+    appendGroup.call(this, options.standard);
+    appendGroup.call(this, options.custom);
 
-    function appendGroup(this: DeviceModeToolbar, devices: EmulationModel.EmulatedDevices.EmulatedDevice[]): void {
-      if (!devices.length) {
+    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 {
+      if (!group.length) {
         return;
       }
       const section = contextMenu.section();
-      for (const device of devices) {
-        section.appendCheckboxItem(device.title, this.emulateDevice.bind(this, device), {
-          checked: this.model.device() === device,
-          jslogContext: Platform.StringUtilities.toKebabCase(device.title),
+      for (const item of group) {
+        section.appendCheckboxItem(item.title, this.emulateDevice.bind(this, item.device), {
+          checked: item.selected,
+          jslogContext: item.jslogContext,
         });
       }
     }
@@ -617,6 +737,9 @@ export class DeviceModeToolbar {
   private modeMenuClicked(event: {
     data: Event,
   }): void {
+    if (this.model.isScreenOrientationLocked()) {
+      return;
+    }
     const device = this.model.device();
     const model = this.model;
     const autoAdjustScaleSetting = this.autoAdjustScaleSetting;
@@ -737,7 +860,7 @@ export class DeviceModeToolbar {
 
     const deviceScale = this.model.appliedDeviceScaleFactor();
     if (deviceScale !== this.cachedDeviceScale) {
-      this.deviceScaleItem.setText(`DPR: ${deviceScale.toFixed(1)}`);
+      this.deviceScaleItem.setText(`${deviceScale.toFixed(1)}`);
       this.cachedDeviceScale = deviceScale;
     }
 
@@ -755,7 +878,7 @@ export class DeviceModeToolbar {
     if (this.model.type() === EmulationModel.DeviceModeModel.Type.Device && device) {
       deviceItemTitle = device.title;
     }
-    this.deviceSelectItem.setText(`${i18nString(UIStrings.dimensions)}: ${deviceItemTitle}`);
+    this.deviceSelectItem.setText(deviceItemTitle);
 
     if (this.model.device() !== this.cachedModelDevice) {
       const device = this.model.device();
@@ -804,6 +927,23 @@ export class DeviceModeToolbar {
       }
       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.setEnabled(false);
+      setTitleForButton(this.modeButton, i18nString(UIStrings.screenOrientationLocked));
+    } else if (this.cachedModelDevice) {
+      const modeCount = this.cachedModelDevice.modes.length;
+      this.modeButton.setEnabled(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);
+      setTitleForButton(this.modeButton, i18nString(UIStrings.rotate));
+    }
   }
 
   restore(): void {

package/front_end/panels/issues/HiddenIssuesRow.ts

@@ -66,7 +66,7 @@ export class HiddenIssuesRow extends UI.TreeOutline.TreeElement {
   #view: View;
 
   constructor(view: View = DEFAULT_VIEW) {
-    super(undefined, true);
+    super(undefined, true, 'hidden-issues');
     this.#view = view;
     this.toggleOnClick = true;
     this.listItemElement.classList.add('issue-category', 'hidden-issues');

package/front_end/panels/issues/IssueKindView.ts

@@ -5,6 +5,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
@@ -64,7 +65,7 @@ export class IssueKindView extends UI.TreeOutline.TreeElement {
   #issueCount: HTMLElement;
 
   constructor(kind: IssuesManager.Issue.IssueKind) {
-    super(undefined, true);
+    super(undefined, true, Platform.StringUtilities.toKebabCase(kind));
     this.#kind = kind;
     this.#issueCount = document.createElement('span');
 

package/front_end/panels/issues/IssueView.ts

@@ -6,7 +6,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
 import type {AggregatedIssue} from '../../models/issues_manager/IssueAggregator.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
@@ -24,7 +24,6 @@ import {AffectedDescendantsWithinSelectElementView} from './AffectedDescendantsW
 import {AffectedDirectivesView} from './AffectedDirectivesView.js';
 import {AffectedDocumentsInQuirksModeView} from './AffectedDocumentsInQuirksModeView.js';
 import {AffectedElementsView} from './AffectedElementsView.js';
-import {AffectedElementsWithLowContrastView} from './AffectedElementsWithLowContrastView.js';
 import {AffectedHeavyAdView} from './AffectedHeavyAdView.js';
 import {AffectedMetadataAllowedSitesView} from './AffectedMetadataAllowedSitesView.js';
 import {AffectedPartitioningBlobURLView} from './AffectedPartitioningBlobURLView.js';
@@ -230,7 +229,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
   #contentCreated = false;
 
   constructor(issue: AggregatedIssue, description: IssuesManager.MarkdownIssueDescription.IssueDescription) {
-    super();
+    super(undefined, undefined, Platform.StringUtilities.toKebabCase(issue.getCategory()));
     this.#issue = issue;
     this.#description = description;
     this.#throttle = new Common.Throttler.Throttler(250);
@@ -251,7 +250,6 @@ export class IssueView extends UI.TreeOutline.TreeElement {
       new AffectedDirectivesView(this, this.#issue, 'directives-details'),
       new AffectedBlockedByResponseView(this, this.#issue, 'blocked-by-response-details'),
       new AffectedSharedArrayBufferIssueDetailsView(this, this.#issue, 'sab-details'),
-      new AffectedElementsWithLowContrastView(this, this.#issue, 'low-contrast-details'),
       new CorsIssueDetailsView(this, this.#issue, 'cors-details'),
       new GenericIssueDetailsView(this, this.#issue, 'generic-details'),
       new AffectedDocumentsInQuirksModeView(this, this.#issue, 'affected-documents'),

package/front_end/panels/issues/IssuesPane.ts

@@ -7,7 +7,7 @@ import '../../ui/legacy/legacy.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -121,7 +121,7 @@ class IssueCategoryView extends UI.TreeOutline.TreeElement {
   #category: IssuesManager.Issue.IssueCategory;
 
   constructor(category: IssuesManager.Issue.IssueCategory) {
-    super();
+    super(undefined, undefined, Platform.StringUtilities.toKebabCase(category));
     this.#category = category;
 
     this.toggleOnClick = true;

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -9,10 +9,10 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 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 {LighthouseRun as LighthouseRunType, ProtocolService} from './LighthouseProtocolService.js';
-import type {RunnerResult} from './LighthouseReporterTypes.js';
 
 const UIStrings = {
   /**
@@ -236,7 +236,7 @@ class LighthouseRun {
     }
   }
 
-  async collect(): Promise<RunnerResult> {
+  async collect(): Promise<LighthouseModel.ReporterTypes.RunnerResult> {
     try {
       const lighthouseResponse = await this.protocolService.collectLighthouseResults(
           {inspectedURL: this.inspectedURL, categoryIDs: this.categoryIDs, flags: this.flags});
@@ -663,7 +663,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     return await this.lastAction;
   }
 
-  async collectLighthouseResults(): Promise<RunnerResult> {
+  async collectLighthouseResults(): Promise<LighthouseModel.ReporterTypes.RunnerResult> {
     if (!this.currentLighthouseRun) {
       throw new Error('Lighthouse is not started');
     }

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -7,6 +7,7 @@ import '../../ui/legacy/legacy.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as LighthouseModel from '../../models/lighthouse/lighthouse.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -19,7 +20,6 @@ import {
 } from './LighthouseController.js';
 import lighthousePanelStyles from './lighthousePanel.css.js';
 import {ProtocolService} from './LighthouseProtocolService.js';
-import type {ReportJSON, RunnerResultArtifacts} from './LighthouseReporterTypes.js';
 import {LighthouseReportRenderer} from './LighthouseReportRenderer.js';
 import {Item, ReportSelector} from './LighthouseReportSelector.js';
 import {StartView} from './LighthouseStartView.js';
@@ -69,7 +69,7 @@ export class LighthousePanel extends UI.Panel.Panel {
   private readonly timespanView: TimespanView;
   private warningText: Nullable<string>;
   private unauditableExplanation: Nullable<string>;
-  private readonly cachedRenderedReports: Map<ReportJSON, HTMLElement>;
+  private readonly cachedRenderedReports: Map<LighthouseModel.ReporterTypes.ReportJSON, HTMLElement>;
   private readonly dropTarget: UI.DropTarget.DropTarget;
   private readonly auditResultsElement: HTMLElement;
   private clearButton!: UI.Toolbar.ToolbarButton;
@@ -296,7 +296,9 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.statusView.toggleCancelButton(true);
   }
 
-  private renderReport(lighthouseResult: ReportJSON, artifacts?: RunnerResultArtifacts): void {
+  private renderReport(
+      lighthouseResult: LighthouseModel.ReporterTypes.ReportJSON,
+      artifacts?: LighthouseModel.ReporterTypes.RunnerResultArtifacts): void {
     this.toggleSettingsDisplay(false);
     this.contentElement.classList.toggle('in-progress', false);
     this.startView.hideWidget();
@@ -319,7 +321,9 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.cachedRenderedReports.set(lighthouseResult, reportContainer);
   }
 
-  private buildReportUI(lighthouseResult: ReportJSON, artifacts?: RunnerResultArtifacts): void {
+  private buildReportUI(
+      lighthouseResult: LighthouseModel.ReporterTypes.ReportJSON,
+      artifacts?: LighthouseModel.ReporterTypes.RunnerResultArtifacts): void {
     if (lighthouseResult === null) {
       return;
     }
@@ -355,7 +359,7 @@ export class LighthousePanel extends UI.Panel.Panel {
     if (!data['lighthouseVersion']) {
       return;
     }
-    this.buildReportUI(data as ReportJSON);
+    this.buildReportUI(data as LighthouseModel.ReporterTypes.ReportJSON);
   }
 
   override elementsToRestoreScrollPositionsFor(): Element[] {

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -7,8 +7,7 @@ import type * as Platform from '../../core/platform/platform.js';
 import type * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
-
-import type * as ReportRenderer from './LighthouseReporterTypes.js';
+import type * as LighthouseModel from '../../models/lighthouse/lighthouse.js';
 
 /**
  * @file
@@ -149,7 +148,8 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
     });
   }
 
-  async collectLighthouseResults(currentLighthouseRun: LighthouseRun): Promise<ReportRenderer.RunnerResult> {
+  async collectLighthouseResults(currentLighthouseRun: LighthouseRun):
+      Promise<LighthouseModel.ReporterTypes.RunnerResult> {
     const {inspectedURL, categoryIDs, flags} = currentLighthouseRun;
 
     if (!this.mainSessionId || !this.rootTargetId) {
@@ -289,10 +289,10 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
 
   /** sendWithResponse currently only handles the original startLighthouse request and LHR-filled response. */
   private async sendWithResponse(action: string, args: Record<string, string|string[]|object|undefined> = {}):
-      Promise<ReportRenderer.RunnerResult> {
+      Promise<LighthouseModel.ReporterTypes.RunnerResult> {
     const worker = await this.ensureWorkerExists();
     const messageId = lastId++;
-    const messageResult = new Promise<ReportRenderer.RunnerResult>(resolve => {
+    const messageResult = new Promise<LighthouseModel.ReporterTypes.RunnerResult>(resolve => {
       const workerListener = (event: MessageEvent): void => {
         const lighthouseMessage = event.data;
 

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -6,6 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as LighthouseModel from '../../models/lighthouse/lighthouse.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as LighthouseReport from '../../third_party/lighthouse/report/report.js';
@@ -15,9 +16,6 @@ import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as PanelsCommon from '../common/common.js';
 
-import type {
-  NodeDetailsJSON, ReportJSON, RunnerResultArtifacts, SourceLocationDetailsJSON} from './LighthouseReporterTypes.js';
-
 const MaxLengthForLinks = 40;
 
 interface RenderReportOpts {
@@ -26,8 +24,9 @@ interface RenderReportOpts {
 }
 
 export class LighthouseReportRenderer {
-  static renderLighthouseReport(lhr: ReportJSON, artifacts?: RunnerResultArtifacts, opts?: RenderReportOpts):
-      HTMLElement {
+  static renderLighthouseReport(
+      lhr: LighthouseModel.ReporterTypes.ReportJSON, artifacts?: LighthouseModel.ReporterTypes.RunnerResultArtifacts,
+      opts?: RenderReportOpts): HTMLElement {
     let onViewTrace: (() => Promise<void>)|undefined = undefined;
     if (artifacts) {
       onViewTrace = async () => {
@@ -134,7 +133,7 @@ export class LighthouseReportRenderer {
 
     for (const origElement of el.getElementsByClassName('lh-node')) {
       const origHTMLElement = origElement as HTMLElement;
-      const detailsItem = origHTMLElement.dataset as unknown as NodeDetailsJSON;
+      const detailsItem = origHTMLElement.dataset as unknown as LighthouseModel.ReporterTypes.NodeDetailsJSON;
       if (!detailsItem.path) {
         continue;
       }
@@ -165,7 +164,7 @@ export class LighthouseReportRenderer {
   static async linkifySourceLocationDetails(el: Element): Promise<void> {
     for (const origElement of el.getElementsByClassName('lh-source-location')) {
       const origHTMLElement = origElement as HTMLElement;
-      const detailsItem = origHTMLElement.dataset as SourceLocationDetailsJSON;
+      const detailsItem = origHTMLElement.dataset as LighthouseModel.ReporterTypes.SourceLocationDetailsJSON;
       if (!detailsItem.sourceUrl || !detailsItem.sourceLine || !detailsItem.sourceColumn) {
         continue;
       }