chrome-devtools-frontend 1.0.971727 → 1.0.973342

package/front_end/models/har/HARFormat.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Platform from '../../core/platform/platform.js';
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 class HARBase {
@@ -197,7 +199,7 @@ export class HAREntry extends HARBase {
 
 class HARRequest extends HARBase {
   method: string;
-  url: string;
+  url: Platform.DevToolsPath.UrlString;
   httpVersion: string;
   cookies: HARCookie[];
   headers: HARHeader[];
@@ -209,7 +211,7 @@ class HARRequest extends HARBase {
   constructor(data: any) {
     super(data);
     this.method = String(data['method']);
-    this.url = String(data['url']);
+    this.url = String(data['url']) as Platform.DevToolsPath.UrlString;
     this.httpVersion = String(data['httpVersion']);
     this.cookies = Array.isArray(data['cookies']) ? data['cookies'].map(cookie => new HARCookie(cookie)) : [];
     this.headers = Array.isArray(data['headers']) ? data['headers'].map(header => new HARHeader(header)) : [];

package/front_end/models/har/Importer.ts

@@ -38,7 +38,6 @@ export class Importer {
           lineNumber: initiatorEntry.lineNumber,
         };
       }
-
       const request = SDK.NetworkRequest.NetworkRequest.createWithoutBackendRequest(
           'har-' + requests.length, entry.request.url, documentURL, initiator);
       const page = pageref ? pages.get(pageref) : undefined;

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/models/workspace_diff/WorkspaceDiff.ts

@@ -13,6 +13,11 @@ interface DiffRequestOptions {
   shouldFormatDiff: boolean;
 }
 
+interface DiffResponse {
+  diff: Diff.Diff.DiffArray;
+  formattedCurrentMapping?: FormatterModule.ScriptFormatter.FormatterSourceMapping;
+}
+
 export class WorkspaceDiffImpl extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private readonly uiSourceCodeDiffs: WeakMap<Workspace.UISourceCode.UISourceCode, UISourceCodeDiff>;
   private readonly loadingUISourceCodes:
@@ -35,7 +40,7 @@ export class WorkspaceDiffImpl extends Common.ObjectWrapper.ObjectWrapper<EventT
   }
 
   requestDiff(uiSourceCode: Workspace.UISourceCode.UISourceCode, diffRequestOptions: DiffRequestOptions):
-      Promise<Diff.Diff.DiffArray|null> {
+      Promise<DiffResponse|null> {
     return this.uiSourceCodeDiff(uiSourceCode).requestDiff(diffRequestOptions);
   }
 
@@ -185,7 +190,7 @@ export type EventTypes = {
 
 export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourceCodeDiffEventTypes> {
   private uiSourceCode: Workspace.UISourceCode.UISourceCode;
-  private requestDiffPromise: Promise<Diff.Diff.DiffArray|null>|null;
+  private requestDiffPromise: Promise<DiffResponse|null>|null;
   private pendingChanges: number|null;
   dispose: boolean;
   constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
@@ -218,7 +223,7 @@ export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourc
     }
   }
 
-  requestDiff(diffRequestOptions: DiffRequestOptions): Promise<Diff.Diff.DiffArray|null> {
+  requestDiff(diffRequestOptions: DiffRequestOptions): Promise<DiffResponse|null> {
     if (!this.requestDiffPromise) {
       this.requestDiffPromise = this.innerRequestDiff(diffRequestOptions);
     }
@@ -237,7 +242,7 @@ export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourc
     return content.content || ('error' in content && content.error) || '';
   }
 
-  private async innerRequestDiff({shouldFormatDiff}: DiffRequestOptions): Promise<Diff.Diff.DiffArray|null> {
+  private async innerRequestDiff({shouldFormatDiff}: DiffRequestOptions): Promise<DiffResponse|null> {
     if (this.dispose) {
       return null;
     }
@@ -270,15 +275,22 @@ export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourc
     if (current === null || baseline === null) {
       return null;
     }
+    let formattedCurrentMapping;
     if (shouldFormatDiff) {
       baseline = (await FormatterModule.ScriptFormatter.format(
                       this.uiSourceCode.contentType(), this.uiSourceCode.mimeType(), baseline))
                      .formattedContent;
-      current = (await FormatterModule.ScriptFormatter.format(
-                     this.uiSourceCode.contentType(), this.uiSourceCode.mimeType(), current))
-                    .formattedContent;
+      const formatCurrentResult = await FormatterModule.ScriptFormatter.format(
+          this.uiSourceCode.contentType(), this.uiSourceCode.mimeType(), current);
+      current = formatCurrentResult.formattedContent;
+      formattedCurrentMapping = formatCurrentResult.formattedMapping;
     }
-    return Diff.Diff.DiffWrapper.lineDiff(baseline.split(/\r\n|\n|\r/), current.split(/\r\n|\n|\r/));
+    const reNewline = /\r\n?|\n/;
+    const diff = Diff.Diff.DiffWrapper.lineDiff(baseline.split(reNewline), current.split(reNewline));
+    return {
+      diff,
+      formattedCurrentMapping,
+    };
   }
 }
 

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/changes/ChangesView.ts

@@ -173,7 +173,7 @@ export class ChangesView extends UI.Widget.VBox {
     }
 
     if (!this.selectedUISourceCode) {
-      this.renderDiffRows(null);
+      this.renderDiffRows();
       return;
     }
     const uiSourceCode = this.selectedUISourceCode;
@@ -181,12 +181,12 @@ export class ChangesView extends UI.Widget.VBox {
       this.hideDiff(i18nString(UIStrings.binaryData));
       return;
     }
-    const diff = await this.workspaceDiff.requestDiff(
+    const diffResponse = await this.workspaceDiff.requestDiff(
         uiSourceCode, {shouldFormatDiff: Root.Runtime.experiments.isEnabled('preciseChanges')});
     if (this.selectedUISourceCode !== uiSourceCode) {
       return;
     }
-    this.renderDiffRows(diff);
+    this.renderDiffRows(diffResponse?.diff);
   }
 
   private hideDiff(message: string): void {
@@ -197,7 +197,7 @@ export class ChangesView extends UI.Widget.VBox {
     this.emptyWidget.showWidget();
   }
 
-  private renderDiffRows(diff: Diff.Diff.DiffArray|null): void {
+  private renderDiffRows(diff?: Diff.Diff.DiffArray): void {
     if (!diff || (diff.length === 1 && diff[0][0] === Diff.Diff.Operation.Equal)) {
       this.hideDiff(i18nString(UIStrings.noChanges));
     } else {

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1043,16 +1043,22 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     if (!url) {
       return false;
     }
-    const changedLines = this.#urlToChangeTracker.get(url)?.changedLines;
-    if (!changedLines) {
+    const changeTracker = this.#urlToChangeTracker.get(url);
+    if (!changeTracker) {
       return false;
     }
+    const {changedLines, formattedCurrentMapping} = changeTracker;
     const uiLocation = Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(property, true);
     if (!uiLocation) {
       return false;
     }
-    // UILocation's lineNumber starts at 0, but changedLines start at 1.
-    return changedLines.has(uiLocation.lineNumber + 1);
+    if (!formattedCurrentMapping) {
+      // UILocation's lineNumber starts at 0, but changedLines start at 1.
+      return changedLines.has(uiLocation.lineNumber + 1);
+    }
+    const formattedLineNumber =
+        formattedCurrentMapping.originalToFormatted(uiLocation.lineNumber, uiLocation.columnNumber)[0];
+    return changedLines.has(formattedLineNumber + 1);
   }
 
   private async refreshChangedLines(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
@@ -1060,28 +1066,33 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     if (!changeTracker) {
       return;
     }
-    const diff = await WorkspaceDiff.WorkspaceDiff.workspaceDiff().requestDiff(uiSourceCode, {shouldFormatDiff: true});
+    const diffResponse =
+        await WorkspaceDiff.WorkspaceDiff.workspaceDiff().requestDiff(uiSourceCode, {shouldFormatDiff: true});
     const changedLines = new Set<number>();
-    if (diff && diff.length > 0) {
-      const {rows} = DiffView.DiffView.buildDiffRows(diff);
-      for (const row of rows) {
-        if (row.type === DiffView.DiffView.RowType.Addition) {
-          changedLines.add(row.currentLineNumber);
-        }
+    changeTracker.changedLines = changedLines;
+    if (!diffResponse) {
+      return;
+    }
+    const {diff, formattedCurrentMapping} = diffResponse;
+    const {rows} = DiffView.DiffView.buildDiffRows(diff);
+    for (const row of rows) {
+      if (row.type === DiffView.DiffView.RowType.Addition) {
+        changedLines.add(row.currentLineNumber);
       }
     }
-    changeTracker.changedLines = changedLines;
+    changeTracker.formattedCurrentMapping = formattedCurrentMapping;
   }
 
   private async getFormattedChanges(): Promise<string> {
     let allChanges = '';
     for (const [url, {uiSourceCode}] of this.#urlToChangeTracker) {
-      const diff =
+      const diffResponse =
           await WorkspaceDiff.WorkspaceDiff.workspaceDiff().requestDiff(uiSourceCode, {shouldFormatDiff: true});
-      if (!diff || diff.length < 2) {
+      // Diff array with real diff will contain at least 2 lines.
+      if (!diffResponse || diffResponse?.diff.length < 2) {
         continue;
       }
-      const changes = await formatCSSChangesFromDiff(diff);
+      const changes = await formatCSSChangesFromDiff(diffResponse.diff);
       if (changes.length > 0) {
         allChanges += `/* ${escapeUrlAsCssComment(url)} */\n\n${changes}\n\n`;
       }
@@ -1231,6 +1242,7 @@ type ChangeTracker = {
   uiSourceCode: Workspace.UISourceCode.UISourceCode,
   changedLines: Set<number>,
   diffChangeCallback: () => Promise<void>,
+  formattedCurrentMapping?: Formatter.ScriptFormatter.FormatterSourceMapping,
 };
 
 export async function formatCSSChangesFromDiff(diff: Diff.Diff.DiffArray): Promise<string> {

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