chrome-devtools-frontend 1.0.972361 → 1.0.972865

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -113,11 +113,15 @@ const UIStrings = {
    */
   runLighthouseInMode: 'Run Lighthouse in navigation, timespan, or snapshot mode',
   /**
-   * @description Text for Lighthouse navigation mode.
+   * @description Label of a radio option for a Lighthouse mode that audits a page navigation.
    */
   navigation: 'Navigation',
   /**
-   * @description Text for Lighthouse snapshot mode.
+   * @description Label of a radio option for a Lighthouse mode that audits user interactions over a period of time.
+   */
+  timespan: 'Timespan',
+  /**
+   * @description Label of a radio option for a Lighthouse mode that audits the current page state.
    */
   snapshot: 'Snapshot',
   /**
@@ -305,6 +309,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     internalDisableDeviceScreenEmulation: boolean,
     emulatedFormFactor: (string|undefined),
     legacyNavigation: boolean,
+    mode: string,
   } {
     const flags = {
       // DevTools handles all the emulation. This tells Lighthouse to not bother with emulation.
@@ -317,6 +322,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
       internalDisableDeviceScreenEmulation: boolean,
       emulatedFormFactor: (string | undefined),
       legacyNavigation: boolean,
+      mode: string,
     };
   }
 
@@ -447,6 +453,7 @@ export const RuntimeSettings: RuntimeSetting[] = [
     },
     options: [
       {label: i18nLazyString(UIStrings.navigation), value: 'navigation'},
+      {label: i18nLazyString(UIStrings.timespan), value: 'timespan'},
       {label: i18nLazyString(UIStrings.snapshot), value: 'snapshot'},
     ],
     learnMore: undefined,
@@ -495,6 +502,8 @@ export enum Events {
   PageAuditabilityChanged = 'PageAuditabilityChanged',
   PageWarningsChanged = 'PageWarningsChanged',
   AuditProgressChanged = 'AuditProgressChanged',
+  RequestLighthouseTimespanStart = 'RequestLighthouseTimespanStart',
+  RequestLighthouseTimespanEnd = 'RequestLighthouseTimespanEnd',
   RequestLighthouseStart = 'RequestLighthouseStart',
   RequestLighthouseCancel = 'RequestLighthouseCancel',
 }
@@ -515,6 +524,8 @@ export type EventTypes = {
   [Events.PageAuditabilityChanged]: PageAuditabilityChangedEvent,
   [Events.PageWarningsChanged]: PageWarningsChangedEvent,
   [Events.AuditProgressChanged]: AuditProgressChangedEvent,
+  [Events.RequestLighthouseTimespanStart]: boolean,
+  [Events.RequestLighthouseTimespanEnd]: boolean,
   [Events.RequestLighthouseStart]: boolean,
   [Events.RequestLighthouseCancel]: void,
 };

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -14,6 +14,7 @@ import * as Emulation from '../emulation/emulation.js';
 import type {AuditProgressChangedEvent, PageAuditabilityChangedEvent, PageWarningsChangedEvent} from './LighthouseController.js';
 import {Events, LighthouseController} from './LighthouseController.js';
 import lighthousePanelStyles from './lighthousePanel.css.js';
+import type {LighthouseRun} from './LighthouseProtocolService.js';
 import {ProtocolService} from './LighthouseProtocolService.js';
 
 import type {ReportJSON, RunnerResultArtifacts} from './LighthouseReporterTypes.js';
@@ -23,6 +24,7 @@ import {Item, ReportSelector} from './LighthouseReportSelector.js';
 import {StartView} from './LighthouseStartView.js';
 import {StartViewFR} from './LighthouseStartViewFR.js';
 import {StatusView} from './LighthouseStatusView.js';
+import {TimespanView} from './LighthouseTimespanView.js';
 
 const UIStrings = {
   /**
@@ -65,6 +67,7 @@ export class LighthousePanel extends UI.Panel.Panel {
   private readonly controller: LighthouseController;
   private readonly startView: StartView;
   private readonly statusView: StatusView;
+  private readonly timespanView: TimespanView|null;
   private warningText: Nullable<string>;
   private unauditableExplanation: Nullable<string>;
   private readonly cachedRenderedReports: Map<ReportJSON, HTMLElement>;
@@ -81,6 +84,7 @@ export class LighthousePanel extends UI.Panel.Panel {
     network: {conditions: SDK.NetworkManager.Conditions},
   };
   private isLHAttached?: boolean;
+  private currentLighthouseRun?: LighthouseRun;
 
   private constructor() {
     super('lighthouse');
@@ -89,8 +93,10 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.controller = new LighthouseController(this.protocolService);
     if (Root.Runtime.experiments.isEnabled('lighthousePanelFR')) {
       this.startView = new StartViewFR(this.controller);
+      this.timespanView = new TimespanView(this.controller);
     } else {
       this.startView = new StartView(this.controller);
+      this.timespanView = null;
     }
     this.statusView = new StatusView(this.controller);
 
@@ -105,12 +111,10 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.controller.addEventListener(Events.PageAuditabilityChanged, this.refreshStartAuditUI.bind(this));
     this.controller.addEventListener(Events.PageWarningsChanged, this.refreshWarningsUI.bind(this));
     this.controller.addEventListener(Events.AuditProgressChanged, this.refreshStatusUI.bind(this));
-    this.controller.addEventListener(Events.RequestLighthouseStart, _event => {
-      void this.startLighthouse();
-    });
-    this.controller.addEventListener(Events.RequestLighthouseCancel, _event => {
-      void this.cancelLighthouse();
-    });
+    this.controller.addEventListener(Events.RequestLighthouseTimespanStart, this.onLighthouseTimespanStart.bind(this));
+    this.controller.addEventListener(Events.RequestLighthouseTimespanEnd, this.onLighthouseTimespanEnd.bind(this));
+    this.controller.addEventListener(Events.RequestLighthouseStart, this.onLighthouseStart.bind(this));
+    this.controller.addEventListener(Events.RequestLighthouseCancel, this.onLighthouseCancel.bind(this));
 
     this.renderToolbar();
     this.auditResultsElement = this.contentElement.createChild('div', 'lighthouse-results-container');
@@ -132,6 +136,27 @@ export class LighthousePanel extends UI.Panel.Panel {
     return Events;
   }
 
+  private async onLighthouseTimespanStart(): Promise<void> {
+    this.timespanView?.show(this.contentElement);
+    await this.startLighthouse();
+    this.timespanView?.ready();
+  }
+
+  private async onLighthouseTimespanEnd(): Promise<void> {
+    this.timespanView?.hide();
+    await this.collectLighthouseResults();
+  }
+
+  private async onLighthouseStart(): Promise<void> {
+    await this.startLighthouse();
+    await this.collectLighthouseResults();
+  }
+
+  private async onLighthouseCancel(): Promise<void> {
+    this.timespanView?.hide();
+    void this.cancelLighthouse();
+  }
+
   private refreshWarningsUI(evt: Common.EventTarget.EventTargetEvent<PageWarningsChangedEvent>): void {
     // PageWarningsChanged fires multiple times during an audit, which we want to ignore.
     if (this.isLHAttached) {
@@ -148,6 +173,8 @@ export class LighthousePanel extends UI.Panel.Panel {
       return;
     }
 
+    this.startView.updateStartButton();
+
     this.unauditableExplanation = evt.data.helpText;
     this.startView.setUnauditableExplanation(evt.data.helpText);
     this.startView.setStartButtonEnabled(!evt.data.helpText);
@@ -348,11 +375,30 @@ export class LighthousePanel extends UI.Panel.Panel {
       const categoryIDs = this.controller.getCategoryIDs();
       const flags = this.controller.getFlags();
 
+      this.currentLighthouseRun = {inspectedURL, categoryIDs, flags};
+
       await this.setupEmulationAndProtocolConnection();
 
-      this.renderStatusView(inspectedURL);
+      if (flags.mode === 'timespan') {
+        await this.protocolService.startTimespan(this.currentLighthouseRun);
+      }
+
+    } catch (err) {
+      await this.resetEmulationAndProtocolConnection();
+      if (err instanceof Error) {
+        this.statusView.renderBugReport(err);
+      }
+    }
+  }
+
+  private async collectLighthouseResults(): Promise<void> {
+    try {
+      if (!this.currentLighthouseRun) {
+        throw new Error('Lighthouse is not started');
+      }
+      this.renderStatusView(this.currentLighthouseRun.inspectedURL);
 
-      const lighthouseResponse = await this.protocolService.startLighthouse(inspectedURL, categoryIDs, flags);
+      const lighthouseResponse = await this.protocolService.collectLighthouseResults(this.currentLighthouseRun);
 
       if (lighthouseResponse && lighthouseResponse.fatal) {
         const error = new Error(lighthouseResponse.message);
@@ -375,10 +421,13 @@ export class LighthousePanel extends UI.Panel.Panel {
       if (err instanceof Error) {
         this.statusView.renderBugReport(err);
       }
+    } finally {
+      this.currentLighthouseRun = undefined;
     }
   }
 
   private async cancelLighthouse(): Promise<void> {
+    this.currentLighthouseRun = undefined;
     this.statusView.updateStatus(i18nString(UIStrings.cancelling));
     await this.resetEmulationAndProtocolConnection();
     this.renderStartView();

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -10,6 +10,12 @@ import type * as ReportRenderer from './LighthouseReporterTypes.js';
 
 let lastId = 1;
 
+export interface LighthouseRun {
+  inspectedURL: string;
+  categoryIDs: string[];
+  flags: Record<string, Object|undefined>;
+}
+
 export class ProtocolService {
   private targetInfo?: {
     mainSessionId: string,
@@ -58,19 +64,36 @@ export class ProtocolService {
     return [i18n.DevToolsLocale.DevToolsLocale.instance().locale];
   }
 
-  async startLighthouse(auditURL: string, categoryIDs: string[], flags: Record<string, Object|undefined>):
-      Promise<ReportRenderer.RunnerResult> {
+  async startTimespan(currentLighthouseRun: LighthouseRun): Promise<void> {
+    const {inspectedURL, categoryIDs, flags} = currentLighthouseRun;
+
+    if (!this.targetInfo) {
+      throw new Error('Unable to get target info required for Lighthouse');
+    }
+
+    await this.sendWithResponse('startTimespan', {
+      url: inspectedURL,
+      categoryIDs,
+      flags,
+      locales: this.getLocales(),
+      target: this.targetInfo,
+    });
+  }
+
+  async collectLighthouseResults(currentLighthouseRun: LighthouseRun): Promise<ReportRenderer.RunnerResult> {
+    const {inspectedURL, categoryIDs, flags} = currentLighthouseRun;
+
     if (!this.targetInfo) {
       throw new Error('Unable to get target info required for Lighthouse');
     }
 
     let mode = flags.mode as string;
-    if (mode === 'navigation' && flags.legacyNavigation) {
-      mode = 'legacyNavigation';
+    if (mode === 'timespan') {
+      mode = 'endTimespan';
     }
 
     return this.sendWithResponse(mode, {
-      url: auditURL,
+      url: inspectedURL,
       categoryIDs,
       flags,
       locales: this.getLocales(),

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -41,9 +41,9 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class StartView extends UI.Widget.Widget {
-  private controller: LighthouseController;
+  protected controller: LighthouseController;
   private readonly settingsToolbarInternal: UI.Toolbar.Toolbar;
-  private startButton!: HTMLButtonElement;
+  protected startButton!: HTMLButtonElement;
   private helpText?: Element;
   private warningText?: Element;
   private shouldConfirm?: boolean;
@@ -173,6 +173,10 @@ export class StartView extends UI.Widget.Widget {
     this.contentElement.style.overflow = 'auto';
   }
 
+  updateStartButton(): void {
+    // Do nothing in default case.
+  }
+
   onResize(): void {
     const useNarrowLayout = this.contentElement.offsetWidth < 560;
     const startViewEl = this.contentElement.querySelector('.lighthouse-start-view');

package/front_end/panels/lighthouse/LighthouseStartViewFR.ts

@@ -4,14 +4,28 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import type * as Platform from '../../core/platform/platform.js';
 
 import {StartView} from './LighthouseStartView.js';
+import {Events} from './LighthouseController.js';
 
 const UIStrings = {
   /**
    * @description Text that refers to the Lighthouse mode
    */
   mode: 'Mode',
+  /**
+   * @description Label for a button to start analyzing a page navigation with Lighthouse
+   */
+  analyzeNavigation: 'Analyze navigation',
+  /**
+   * @description Label for a button to start analyzing the current page state with Lighthouse
+   */
+  analyzeSnapshot: 'Analyze snapshot',
+  /**
+   * @description Label for a button that ends a Lighthouse timespan
+   */
+  startTimespan: 'Start timespan',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStartViewFR.ts', UIStrings);
@@ -35,5 +49,52 @@ export class StartViewFR extends StartView {
 
     const form = this.contentElement.querySelector('form');
     form?.appendChild(fragment.element());
+    this.updateStartButton();
+  }
+
+  updateStartButton(): void {
+    const {mode} = this.controller.getFlags();
+
+    let label: Platform.UIString.LocalizedString;
+    let callback: () => void;
+
+    if (mode === 'timespan') {
+      label = i18nString(UIStrings.startTimespan);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseTimespanStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    } else if (mode === 'snapshot') {
+      label = i18nString(UIStrings.analyzeSnapshot);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    } else {
+      label = i18nString(UIStrings.analyzeNavigation);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    }
+
+    this.startButton = UI.UIUtils.createTextButton(
+        label,
+        callback,
+        /* className */ '',
+        /* primary */ true,
+    );
+
+    const startButtonContainer = this.contentElement.querySelector('.lighthouse-start-button-container');
+    if (startButtonContainer) {
+      startButtonContainer.textContent = '';
+      startButtonContainer.appendChild(this.startButton);
+    }
   }
 }

package/front_end/panels/lighthouse/LighthouseTimespanView.ts

@@ -0,0 +1,99 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import type {LighthouseController} from './LighthouseController.js';
+import {Events} from './LighthouseController.js';
+import lighthouseDialogStyles from './lighthouseDialog.css.js';
+
+const UIStrings = {
+  /**
+   * @description Header indicating that a Lighthouse timespan is starting.
+   */
+  timespanStarting: 'Timespan starting…',
+  /**
+   * @description Header indicating that a Lighthouse timespan has started.
+   */
+  timespanStarted: 'Timespan started, interact with the page',
+  /**
+   * @description Label for a button that ends a Lighthouse timespan.
+   */
+  endTimespan: 'End timespan',
+  /**
+   * @description Label for a button that cancels a Lighthouse timespan.
+   */
+  cancel: 'Cancel',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseTimespanView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class TimespanView extends UI.Dialog.Dialog {
+  private controller: LighthouseController;
+  private statusHeader: Element|null;
+  private endButton: HTMLButtonElement|null;
+
+  constructor(controller: LighthouseController) {
+    super();
+    this.controller = controller;
+    this.statusHeader = null;
+    this.endButton = null;
+    this.setDimmed(true);
+    this.setCloseOnEscape(false);
+    this.setOutsideClickCallback(event => event.consume(true));
+    this.render();
+  }
+
+  show(dialogRenderElement: Element): void {
+    this.reset();
+    super.show(dialogRenderElement);
+  }
+
+  reset(): void {
+    if (this.statusHeader && this.endButton) {
+      this.statusHeader.textContent = i18nString(UIStrings.timespanStarting);
+      this.endButton.disabled = true;
+    }
+  }
+
+  ready(): void {
+    if (this.statusHeader && this.endButton) {
+      this.statusHeader.textContent = i18nString(UIStrings.timespanStarted);
+      this.endButton.disabled = false;
+      this.endButton.focus();
+    }
+  }
+
+  render(): void {
+    const dialogRoot = UI.Utils.createShadowRootWithCoreStyles(
+        this.contentElement, {cssFile: [lighthouseDialogStyles], delegatesFocus: undefined});
+
+    this.endButton = UI.UIUtils.createTextButton(i18nString(UIStrings.endTimespan), this.endTimespan.bind(this));
+    const cancelButton = UI.UIUtils.createTextButton(i18nString(UIStrings.cancel), this.cancel.bind(this));
+    const fragment = UI.Fragment.Fragment.build`
+  <div class="lighthouse-view vbox">
+  <h2 $="status-header"></h2>
+  ${this.endButton}
+  ${cancelButton}
+  </div>
+  `;
+
+    this.statusHeader = fragment.$('status-header');
+    dialogRoot.appendChild(fragment.element());
+
+    this.setSizeBehavior(UI.GlassPane.SizeBehavior.SetExactWidthMaxHeight);
+    this.setMaxContentSize(new UI.Geometry.Size(500, 400));
+    this.reset();
+  }
+
+  private endTimespan(): void {
+    this.controller.dispatchEventToListeners(Events.RequestLighthouseTimespanEnd, false);
+  }
+
+  private cancel(): void {
+    this.controller.dispatchEventToListeners(Events.RequestLighthouseCancel);
+  }
+}

package/front_end/panels/sources/NavigatorView.ts

@@ -854,10 +854,8 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     }
 
     if (project.type() === Workspace.Workspace.projectTypes.FileSystem) {
-      // TODO(crbug.com/1253323): Cast to RawPathString will be removed when migration to branded types is complete.
       const folderPath = Common.ParsedURL.ParsedURL.urlToRawPathString(
-          Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.completeURL(project, path) as
-              Platform.DevToolsPath.UrlString,
+          Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.completeURL(project, path),
           Host.Platform.isWin());
       contextMenu.revealSection().appendItem(
           i18nString(UIStrings.openFolder),