chrome-devtools-frontend 1.0.972361 → 1.0.973446

package/front_end/models/persistence/FileSystemWorkspaceBinding.ts

@@ -79,9 +79,9 @@ export class FileSystemWorkspaceBinding {
     return fileSystem.supportsAutomapping();
   }
 
-  static completeURL(project: Workspace.Workspace.Project, relativePath: string): string {
+  static completeURL(project: Workspace.Workspace.Project, relativePath: string): Platform.DevToolsPath.UrlString {
     const fsProject = project as FileSystem;
-    return fsProject.fileSystemBaseURL + relativePath;
+    return Common.ParsedURL.ParsedURL.concatenate(fsProject.fileSystemBaseURL, relativePath);
   }
 
   static fileSystemPath(projectId: string): string {
@@ -155,7 +155,7 @@ export class FileSystemWorkspaceBinding {
 
 export class FileSystem extends Workspace.Workspace.ProjectStore {
   readonly fileSystemInternal: PlatformFileSystem;
-  readonly fileSystemBaseURL: string;
+  readonly fileSystemBaseURL: Platform.DevToolsPath.UrlString;
   private readonly fileSystemParentURL: string;
   private readonly fileSystemWorkspaceBinding: FileSystemWorkspaceBinding;
   private readonly fileSystemPathInternal: string;
@@ -171,7 +171,7 @@ export class FileSystem extends Workspace.Workspace.ProjectStore {
     super(workspace, id, Workspace.Workspace.projectTypes.FileSystem, displayName);
 
     this.fileSystemInternal = isolatedFileSystem;
-    this.fileSystemBaseURL = this.fileSystemInternal.path() + '/';
+    this.fileSystemBaseURL = Common.ParsedURL.ParsedURL.concatenate(this.fileSystemInternal.path(), '/');
     this.fileSystemParentURL = this.fileSystemBaseURL.substr(0, fileSystemPath.lastIndexOf('/') + 1);
     this.fileSystemWorkspaceBinding = fileSystemWorkspaceBinding;
     this.fileSystemPathInternal = fileSystemPath;

package/front_end/models/persistence/IsolatedFileSystem.ts

@@ -81,7 +81,6 @@ export class IsolatedFileSystem extends PlatformFileSystem {
 
   constructor(
       manager: IsolatedFileSystemManager, path: string, embedderPath: string, domFileSystem: FileSystem, type: string) {
-    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
     super(path, type);
     this.manager = manager;
     this.embedderPathInternal = embedderPath;

package/front_end/models/text_utils/StaticContentProvider.ts

@@ -14,9 +14,9 @@ export class StaticContentProvider implements ContentProvider {
   private readonly lazyContent: () => Promise<DeferredContent>;
 
   constructor(
-      contentURL: string, contentType: Common.ResourceType.ResourceType, lazyContent: () => Promise<DeferredContent>) {
-    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
-    this.contentURLInternal = contentURL as Platform.DevToolsPath.UrlString;
+      contentURL: Platform.DevToolsPath.UrlString, contentType: Common.ResourceType.ResourceType,
+      lazyContent: () => Promise<DeferredContent>) {
+    this.contentURLInternal = contentURL;
     this.contentTypeInternal = contentType;
     this.lazyContent = lazyContent;
   }
@@ -27,7 +27,8 @@ export class StaticContentProvider implements ContentProvider {
       content: string,
       isEncoded: boolean,
     }> => Promise.resolve({content, isEncoded: false});
-    return new StaticContentProvider(contentURL, contentType, lazyContent);
+    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
+    return new StaticContentProvider(contentURL as Platform.DevToolsPath.UrlString, contentType, lazyContent);
   }
 
   contentURL(): Platform.DevToolsPath.UrlString {

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -381,7 +381,8 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
 
   private createRequest(entry: Protocol.CacheStorage.DataEntry): SDK.NetworkRequest.NetworkRequest {
     const request = SDK.NetworkRequest.NetworkRequest.createWithoutBackendRequest(
-        'cache-storage-' + entry.requestURL, entry.requestURL, '', null);
+        'cache-storage-' + entry.requestURL, entry.requestURL as Platform.DevToolsPath.UrlString,
+        '' as Platform.DevToolsPath.UrlString, null);
     request.requestMethod = entry.requestMethod;
     request.setRequestHeaders(entry.requestHeaders);
     request.statusCode = entry.responseStatus;

package/front_end/panels/elements/components/LayoutPane.ts

@@ -270,7 +270,7 @@ export class LayoutPane extends HTMLElement {
         </span>
       </label>
       <label @keyup=${onColorLabelKeyUp} @keydown=${onColorLabelKeyDown} tabindex="0" title=${i18nString(UIStrings.chooseElementOverlayColor)} class="color-picker-label" style="background: ${element.color};">
-        <input @change=${onColorChange} @input=${onColorChange} class="color-picker" type="color" value=${element.color} />
+        <input @change=${onColorChange} @input=${onColorChange} tabindex="-1" class="color-picker" type="color" value=${element.color} />
       </label>
       <button tabindex="0" @click=${onElementClick} title=${i18nString(UIStrings.showElementInTheElementsPanel)} class="show-element"></button>
     </div>`;

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

@@ -8,15 +8,58 @@ import * as SDK from '../../core/sdk/sdk.js';
 
 import type * as ReportRenderer from './LighthouseReporterTypes.js';
 
+/**
+ * @overview
+                                                   ┌────────────┐
+                                                   │CDP Backend │
+                                                   └────────────┘
+                                                        │ ▲
+                                                        │ │ parallelConnection
+                          ┌┐                            ▼ │                     ┌┐
+                          ││   dispatchProtocolMessage     sendProtocolMessage  ││
+                          ││                     │          ▲                   ││
+          ProtocolService ││                     |          │                   ││
+                          ││    sendWithResponse ▼          │                   ││
+                          ││              │    send          onWorkerMessage    ││
+                          └┘              │    │                 ▲              └┘
+          worker boundary - - - - - - - - ┼ - -│- - - - - - - - -│- - - - - - - - - - - -
+                          ┌┐              ▼    ▼                 │                    ┌┐
+                          ││   onFrontendMessage      notifyFrontendViaWorkerMessage  ││
+                          ││                   │       ▲                              ││
+                          ││                   ▼       │                              ││
+LighthouseWorkerService   ││          Either ConnectionProxy or LegacyPort            ││
+                          ││                           │ ▲                            ││
+                          ││     ┌─────────────────────┼─┼───────────────────────┐    ││
+                          ││     │  Lighthouse    ┌────▼──────┐                  │    ││
+                          ││     │                │connection │                  │    ││
+                          ││     │                └───────────┘                  │    ││
+                          └┘     └───────────────────────────────────────────────┘    └┘
+
+ * All messages traversing the worker boundary are action-wrapped.
+ * All messages over the parallelConnection speak pure CDP.
+ * All messages within ConnectionProxy/LegacyPort speak pure CDP.
+ * The foundational CDP connection is `parallelConnection`.
+ * All connections within the worker are not actual ParallelConnection's.
+*/
+
 let lastId = 1;
 
+export interface LighthouseRun {
+  inspectedURL: string;
+  categoryIDs: string[];
+  flags: Record<string, Object|undefined>;
+}
+
+/**
+ * ProtocolService manages a connection between the frontend (Lighthouse panel) and the Lighthouse worker.
+ */
 export class ProtocolService {
   private targetInfo?: {
     mainSessionId: string,
     mainTargetId: string,
     mainFrameId: string,
   };
-  private rawConnection?: ProtocolClient.InspectorBackend.Connection;
+  private parallelConnection?: ProtocolClient.InspectorBackend.Connection;
   private lighthouseWorkerPromise?: Promise<Worker>;
   private lighthouseMessageUpdateCallback?: ((arg0: string) => void);
 
@@ -46,7 +89,7 @@ export class ProtocolService {
       this.dispatchProtocolMessage(message);
     });
 
-    this.rawConnection = connection;
+    this.parallelConnection = connection;
     this.targetInfo = {
       mainTargetId: await childTargetManager.getParentTargetId(),
       mainFrameId: mainFrame.id,
@@ -58,19 +101,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(),
@@ -80,20 +140,20 @@ export class ProtocolService {
 
   async detach(): Promise<void> {
     const oldLighthouseWorker = this.lighthouseWorkerPromise;
-    const oldRawConnection = this.rawConnection;
+    const oldParallelConnection = this.parallelConnection;
 
     // When detaching, make sure that we remove the old promises, before we
     // perform any async cleanups. That way, if there is a message coming from
     // lighthouse while we are in the process of cleaning up, we shouldn't deliver
     // them to the backend.
     this.lighthouseWorkerPromise = undefined;
-    this.rawConnection = undefined;
+    this.parallelConnection = undefined;
 
     if (oldLighthouseWorker) {
       (await oldLighthouseWorker).terminate();
     }
-    if (oldRawConnection) {
-      await oldRawConnection.disconnect();
+    if (oldParallelConnection) {
+      await oldParallelConnection.disconnect();
     }
     await SDK.TargetManager.TargetManager.instance().resumeAllTargets();
   }
@@ -117,7 +177,7 @@ export class ProtocolService {
       method?: string,
     };
     if (protocolMessage.sessionId || (protocolMessage.method && protocolMessage.method.startsWith('Target'))) {
-      void this.sendWithoutResponse('dispatchProtocolMessage', {message: JSON.stringify(message)});
+      void this.send('dispatchProtocolMessage', {message: JSON.stringify(message)});
     }
   }
 
@@ -137,18 +197,7 @@ export class ProtocolService {
           return;
         }
 
-        const lighthouseMessage = JSON.parse(event.data);
-
-        if (lighthouseMessage.method === 'statusUpdate') {
-          if (this.lighthouseMessageUpdateCallback && lighthouseMessage.params &&
-              'message' in lighthouseMessage.params) {
-            this.lighthouseMessageUpdateCallback(lighthouseMessage.params.message as string);
-          }
-        } else if (lighthouseMessage.method === 'sendProtocolMessage') {
-          if (lighthouseMessage.params && 'message' in lighthouseMessage.params) {
-            this.sendProtocolMessage(lighthouseMessage.params.message as string);
-          }
-        }
+        this.onWorkerMessage(event);
       });
     });
     return this.lighthouseWorkerPromise;
@@ -164,19 +213,34 @@ export class ProtocolService {
     return worker;
   }
 
+  private onWorkerMessage(event: MessageEvent): void {
+    const lighthouseMessage = JSON.parse(event.data);
+
+    if (lighthouseMessage.action === 'statusUpdate') {
+      if (this.lighthouseMessageUpdateCallback && lighthouseMessage.args && 'message' in lighthouseMessage.args) {
+        this.lighthouseMessageUpdateCallback(lighthouseMessage.args.message as string);
+      }
+    } else if (lighthouseMessage.action === 'sendProtocolMessage') {
+      if (lighthouseMessage.args && 'message' in lighthouseMessage.args) {
+        this.sendProtocolMessage(lighthouseMessage.args.message as string);
+      }
+    }
+  }
+
   private sendProtocolMessage(message: string): void {
-    if (this.rawConnection) {
-      this.rawConnection.sendRawMessage(message);
+    if (this.parallelConnection) {
+      this.parallelConnection.sendRawMessage(message);
     }
   }
 
-  private async sendWithoutResponse(method: string, params: {[x: string]: string|string[]|Object} = {}): Promise<void> {
+  private async send(action: string, args: {[x: string]: string|string[]|Object} = {}): Promise<void> {
     const worker = await this.ensureWorkerExists();
     const messageId = lastId++;
-    worker.postMessage(JSON.stringify({id: messageId, method, params: {...params, id: messageId}}));
+    worker.postMessage(JSON.stringify({id: messageId, action, args: {...args, id: messageId}}));
   }
 
-  private async sendWithResponse(method: string, params: {[x: string]: string|string[]|Object} = {}):
+  /** sendWithResponse currently only handles the original startLighthouse request and LHR-filled response. */
+  private async sendWithResponse(action: string, args: {[x: string]: string|string[]|Object} = {}):
       Promise<ReportRenderer.RunnerResult> {
     const worker = await this.ensureWorkerExists();
     const messageId = lastId++;
@@ -191,7 +255,7 @@ export class ProtocolService {
       };
       worker.addEventListener('message', workerListener);
     });
-    worker.postMessage(JSON.stringify({id: messageId, method, params: {...params, id: messageId}}));
+    worker.postMessage(JSON.stringify({id: messageId, action, args: {...args, id: messageId}}));
 
     return messageResult;
   }

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