chrome-devtools-frontend 1.0.1593518 → 1.0.1595090

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

package/front_end/panels/lighthouse/LighthouseReportSelector.ts

@@ -5,10 +5,9 @@
 
 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 type * as ReportRenderer from './LighthouseReporterTypes.js';
-
 const UIStrings = {
   /**
    * @description Title of combo box in audits report selector
@@ -102,7 +101,9 @@ export class Item {
   private readonly showLandingCallback: () => void;
   private readonly element: HTMLOptionElement;
 
-  constructor(lighthouseResult: ReportRenderer.ReportJSON, renderReport: () => void, showLandingCallback: () => void) {
+  constructor(
+      lighthouseResult: LighthouseModel.ReporterTypes.ReportJSON, renderReport: () => void,
+      showLandingCallback: () => void) {
     this.renderReport = renderReport;
     this.showLandingCallback = showLandingCallback;
 

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -11,6 +11,7 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import {Link} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 
 import {type LighthouseController, type Preset, Presets, RuntimeSettings} from './LighthouseController.js';
 import type {LighthousePanel} from './LighthousePanel.js';
@@ -55,6 +56,78 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const renderStartView = (
+    _input: Record<string, never>,
+    output: {
+      helpText?: HTMLElement,
+      warningText?: HTMLElement,
+      modeFormElements?: HTMLElement,
+      deviceTypeFormElements?: HTMLElement,
+      categoriesFormElements?: HTMLElement,
+    },
+    target: HTMLElement,
+    ): void => {
+  // clang-format off
+  render(
+    html`
+      <form class="lighthouse-start-view">
+        <header class="hbox">
+          <div class="lighthouse-logo"></div>
+          <div class="lighthouse-title">
+            ${i18nString(UIStrings.generateLighthouseReport)}
+          </div>
+          <div class="lighthouse-start-button-container"></div>
+        </header>
+        <div
+          ${Directives.ref(e => {
+            output.helpText = e as HTMLElement;
+          })}
+          class="lighthouse-help-text hidden"
+        ></div>
+        <div class="lighthouse-options hbox">
+          <div class="lighthouse-form-section">
+            <div
+              class="lighthouse-form-elements"
+              ${Directives.ref(e => {
+                output.modeFormElements = e as HTMLElement;
+              })}
+            ></div>
+          </div>
+          <div class="lighthouse-form-section">
+            <div
+              class="lighthouse-form-elements"
+              ${Directives.ref(e => {
+                output.deviceTypeFormElements = e as HTMLElement;
+              })}
+            ></div>
+          </div>
+          <div class="lighthouse-form-categories">
+            <fieldset class="lighthouse-form-section lighthouse-form-categories-fieldset">
+              <legend class="lighthouse-form-section-label">
+                ${i18nString(UIStrings.categories)}
+              </legend>
+              <div
+                class="lighthouse-form-elements"
+                ${Directives.ref(e => {
+                  output.categoriesFormElements = e as HTMLElement;
+                })}
+              ></div>
+            </fieldset>
+          </div>
+        </div>
+        <div
+          ${Directives.ref(e => {
+            output.warningText = e as HTMLElement;
+          })}
+          class="lighthouse-warning-text hidden"
+        ></div>
+      </form>
+    `,
+    target,
+  );
+  // clang-format on
+};
+
 export class StartView extends UI.Widget.Widget {
   private controller: LighthouseController;
   private panel: LighthousePanel;
@@ -145,13 +218,11 @@ export class StartView extends UI.Widget.Widget {
     }
   }
 
-  private populateFormControls(fragment: UI.Fragment.Fragment, mode?: string): void {
+  private populateFormControls(deviceTypeFormElements: Element, categoryFormElements: Element, mode?: string): void {
     // Populate the device type
-    const deviceTypeFormElements = fragment.$('device-type-form-elements');
     this.populateRuntimeSettingAsRadio('lighthouse.device-type', i18nString(UIStrings.device), deviceTypeFormElements);
 
     // Populate the categories
-    const categoryFormElements = fragment.$('categories-form-elements') as HTMLElement;
 
     this.checkboxes = [];
     for (const preset of Presets) {
@@ -174,44 +245,34 @@ export class StartView extends UI.Widget.Widget {
     this.populateRuntimeSettingAsToolbarDropdown('lighthouse.throttling', this.#settingsToolbar);
 
     const {mode} = this.controller.getFlags();
-    this.populateStartButton(mode);
 
-    const fragment = UI.Fragment.Fragment.build`
-<form class="lighthouse-start-view">
-  <header class="hbox">
-    <div class="lighthouse-logo"></div>
-    <h1 class="lighthouse-title">${i18nString(UIStrings.generateLighthouseReport)}</h1>
-    <div class="lighthouse-start-button-container" $="start-button-container">${this.startButton}</div>
-  </header>
-  <div $="help-text" class="lighthouse-help-text hidden"></div>
-  <div class="lighthouse-options hbox">
-    <div class="lighthouse-form-section">
-      <div class="lighthouse-form-elements" $="mode-form-elements"></div>
-    </div>
-    <div class="lighthouse-form-section">
-      <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
-    </div>
-    <div class="lighthouse-form-categories">
-      <fieldset class="lighthouse-form-section lighthouse-form-categories-fieldset">
-        <legend class="lighthouse-form-section-label">${i18nString(UIStrings.categories)}</legend>
-        <div class="lighthouse-form-elements" $="categories-form-elements"></div>
-      </fieldset>
-    </div>
-  </div>
-  <div $="warning-text" class="lighthouse-warning-text hidden"></div>
-</form>
-    `;
-
-    this.helpText = fragment.$('help-text');
-    this.warningText = fragment.$('warning-text');
-
-    const modeFormElements = fragment.$('mode-form-elements');
-    this.populateRuntimeSettingAsRadio('lighthouse.mode', i18nString(UIStrings.mode), modeFormElements);
+    const output = {
+      helpText: undefined as HTMLElement | undefined,
+      warningText: undefined as HTMLElement | undefined,
+      modeFormElements: undefined as HTMLElement | undefined,
+      deviceTypeFormElements: undefined as HTMLElement | undefined,
+      categoriesFormElements: undefined as HTMLElement | undefined,
+    };
+
+    renderStartView(
+        {},
+        output,
+        this.contentElement,
+    );
 
-    this.populateFormControls(fragment, mode);
+    this.helpText = output.helpText;
+    this.warningText = output.warningText;
 
-    this.contentElement.textContent = '';
-    this.contentElement.append(fragment.element());
+    const modeFormElements = output.modeFormElements;
+    const deviceTypeFormElements = output.deviceTypeFormElements;
+    const categoriesFormElements = output.categoriesFormElements;
+
+    if (!modeFormElements || !deviceTypeFormElements || !categoriesFormElements) {
+      throw new Error('Required elements not found in template');
+    }
+
+    this.populateRuntimeSettingAsRadio('lighthouse.mode', i18nString(UIStrings.mode), modeFormElements);
+    this.populateFormControls(deviceTypeFormElements, categoriesFormElements, mode);
 
     this.refresh();
   }

package/front_end/panels/lighthouse/LighthouseTimespanView.ts

@@ -7,6 +7,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 
 import lighthouseDialogStyles from './lighthouseDialog.css.js';
 import type {LighthousePanel} from './LighthousePanel.js';
@@ -37,6 +38,43 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseTimespanView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const renderTimespanView = (
+    input: {
+      cancelButton: Element,
+      endButton: Element,
+    },
+    output: {
+      statusHeader?: HTMLElement,
+      contentContainer?: HTMLElement,
+    },
+    target: ShadowRoot,
+    ): void => {
+  // clang-format off
+  render(
+    html`
+      <div class="lighthouse-view vbox">
+        <span
+          ${Directives.ref(e => {
+            output.statusHeader = e as HTMLElement;
+          })}
+          class="header"
+        ></span>
+        <span
+          ${Directives.ref(e => {
+            output.contentContainer = e as HTMLElement;
+          })}
+          class="lighthouse-dialog-text"
+        ></span>
+        <div class="lighthouse-action-buttons hbox">
+          ${input.cancelButton} ${input.endButton}
+        </div>
+      </div>
+    `,
+    target,
+  );
+  // clang-format on
+};
+
 export class TimespanView extends UI.Dialog.Dialog {
   private panel: LighthousePanel;
   private statusHeader: Element|null;
@@ -90,20 +128,21 @@ export class TimespanView extends UI.Dialog.Dialog {
       className: 'cancel',
       jslogContext: 'lighthouse.cancel',
     });
-    const fragment = UI.Fragment.Fragment.build`
-  <div class="lighthouse-view vbox">
-  <span $="status-header" class="header"></span>
-  <span $="call-to-action" class="lighthouse-dialog-text"></span>
-  <div class="lighthouse-action-buttons hbox">
-  ${cancelButton}
-  ${this.endButton}
-  </div>
-  </div>
-  `;
-
-    this.statusHeader = fragment.$('status-header');
-    this.contentContainer = fragment.$('call-to-action');
-    dialogRoot.appendChild(fragment.element());
+
+    const output = {
+      statusHeader: undefined as HTMLElement | undefined,
+      contentContainer: undefined as HTMLElement | undefined,
+    };
+
+    renderTimespanView(
+        {
+          cancelButton,
+          endButton: this.endButton,
+        },
+        output, dialogRoot);
+
+    this.statusHeader = output.statusHeader ?? null;
+    this.contentContainer = output.contentContainer ?? null;
 
     this.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
     this.setMaxContentSize(new Geometry.Size(500, 400));

package/front_end/panels/lighthouse/RadioSetting.ts

@@ -2,10 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import type * as Common from '../../core/common/common.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 
+const {ifDefined} = Directives;
 interface RadioOption {
   value: string;
   label: () => Common.UIString.LocalizedString;
@@ -28,25 +31,36 @@ export class RadioSetting {
     UI.ARIAUtils.markAsRadioGroup(this.element);
 
     this.radioElements = [];
-    for (const option of this.options) {
-      const fragment = UI.Fragment.Fragment.build`
-  <label $="label" class="lighthouse-radio">
-  <input $="input" type="radio" value=${option.value} name=${setting.name}>
-  <span $="span" class="lighthouse-radio-text">${option.label()}</span>
-  </label>
-  `;
-
-      this.element.appendChild(fragment.element());
-
-      const tooltip = option.tooltip?.() || description;
-      if (description) {
-        UI.Tooltip.Tooltip.install(fragment.$('input') as HTMLElement, tooltip);
-        UI.Tooltip.Tooltip.install(fragment.$('span') as HTMLElement, tooltip);
-      }
-      const radioElement = fragment.$('input') as HTMLInputElement;
-      radioElement.addEventListener('change', this.valueChanged.bind(this));
-      this.radioElements.push(radioElement);
-    }
+    // clang-format off
+    render(
+      html`
+        ${this.options.map(option => {
+          const tooltip = option.tooltip?.() || description;
+          return html`
+            <label class="lighthouse-radio">
+              <input
+                type="radio"
+                value=${option.value}
+                name=${setting.name}
+                @change=${this.valueChanged.bind(this)}
+                title=${ifDefined(description ? tooltip : undefined)}
+                ${Directives.ref(el => {
+                    this.radioElements.push(el as HTMLInputElement);
+                  }
+                )}
+              />
+              <span
+                class="lighthouse-radio-text"
+               title=${ifDefined(description ? tooltip : undefined)}
+                >${option.label()}</span
+              >
+            </label>
+          `;
+        })}
+      `,
+      this.element,
+    );
+    // clang-format on
 
     this.ignoreChangeEvents = false;
     this.selectedIndex = -1;

package/front_end/panels/lighthouse/lighthouse.ts

@@ -7,21 +7,21 @@ import '../../third_party/lighthouse/report-assets/report-generator.mjs';
 import * as LighthouseController from './LighthouseController.js';
 import * as LighthousePanel from './LighthousePanel.js';
 import * as LighthouseProtocolService from './LighthouseProtocolService.js';
-import * as LighthouseReporterTypes from './LighthouseReporterTypes.js';
 import * as LighthouseReportRenderer from './LighthouseReportRenderer.js';
 import * as LighthouseReportSelector from './LighthouseReportSelector.js';
 import * as LighthouseStartView from './LighthouseStartView.js';
 import * as LighthouseStatusView from './LighthouseStatusView.js';
+import * as LighthouseTimespanView from './LighthouseTimespanView.js';
 import * as RadioSetting from './RadioSetting.js';
 
 export {
   LighthouseController,
   LighthousePanel,
   LighthouseProtocolService,
-  LighthouseReporterTypes,
   LighthouseReportRenderer,
   LighthouseReportSelector,
   LighthouseStartView,
   LighthouseStatusView,
+  LighthouseTimespanView,
   RadioSetting,
 };