chrome-devtools-frontend 1.0.969345 → 1.0.969882

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Workspace from '../workspace/workspace.js';
@@ -31,6 +32,7 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
   private activeInternal: boolean;
   private enabled: boolean;
   private eventDescriptors: Common.EventTarget.EventDescriptor[];
+  #headerOverridesMap: Map<string, HeaderOverrideWithRegex[]> = new Map();
 
   private constructor(workspace: Workspace.Workspace.WorkspaceImpl) {
     super();
@@ -363,29 +365,97 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     }
   }
 
-  private updateInterceptionPatterns(): void {
-    void this.updateInterceptionThrottler.schedule(innerUpdateInterceptionPatterns.bind(this));
-
-    function innerUpdateInterceptionPatterns(this: NetworkPersistenceManager): Promise<void> {
-      if (!this.activeInternal || !this.projectInternal) {
-        return SDK.NetworkManager.MultitargetNetworkManager.instance().setInterceptionHandlerForPatterns(
-            [], this.interceptionHandlerBound);
+  async generateHeaderPatterns(uiSourceCode: Workspace.UISourceCode.UISourceCode):
+      Promise<{headerPatterns: Set<string>, path: string, overridesWithRegex: HeaderOverrideWithRegex[]}> {
+    const headerPatterns = new Set<string>();
+    const content = (await uiSourceCode.requestContent()).content || '';
+    let headerOverrides: HeaderOverride[] = [];
+    try {
+      headerOverrides = JSON.parse(content) as HeaderOverride[];
+      if (!headerOverrides.every(isHeaderOverride)) {
+        throw 'Type mismatch after parsing';
       }
-      const patterns = new Set<string>();
-      const indexFileName = 'index.html';
-      for (const uiSourceCode of this.projectInternal.uiSourceCodes()) {
-        const pattern = this.patternForFileSystemUISourceCode(uiSourceCode);
-        patterns.add(pattern);
-        if (pattern.endsWith('/' + indexFileName)) {
-          patterns.add(pattern.substr(0, pattern.length - indexFileName.length));
-        }
+    } catch (e) {
+      console.error('Failed to parse', uiSourceCode.url(), 'for locally overriding headers.');
+      return {headerPatterns, path: '', overridesWithRegex: []};
+    }
+    const relativePath = FileSystemWorkspaceBinding.relativePath(uiSourceCode).join('/');
+    const decodedPath = this.decodeLocalPathToUrlPath(relativePath).slice(0, -HEADERS_FILENAME.length);
+
+    const overridesWithRegex: HeaderOverrideWithRegex[] = [];
+    for (const headerOverride of headerOverrides) {
+      headerPatterns.add('http?://' + decodedPath + headerOverride.applyTo);
+
+      // Most servers have the concept of a "directory index", which is a
+      // default resource name for a request targeting a "directory", e. g.
+      // requesting "example.com/path/" would result in the same response as
+      // requesting "example.com/path/index.html". To match this behavior we
+      // generate an additional pattern without "index.html" as the longer
+      // pattern would not match against a shorter request.
+      const {head, tail} = extractDirectoryIndex(headerOverride.applyTo);
+      if (tail) {
+        headerPatterns.add('http?://' + decodedPath + head);
+
+        const pattern = escapeRegex(decodedPath + head) + '(' + escapeRegex(tail) + ')?';
+        const regex = new RegExp('^https?:\/\/' + pattern + '$');
+        overridesWithRegex.push({
+          applyToRegex: regex,
+          headers: headerOverride.headers,
+        });
+      } else {
+        const regex = new RegExp('^https?:\/\/' + escapeRegex(decodedPath + headerOverride.applyTo) + '$');
+        overridesWithRegex.push({
+          applyToRegex: regex,
+          headers: headerOverride.headers,
+        });
       }
+    }
+    return {headerPatterns, path: decodedPath, overridesWithRegex};
+  }
+
+  async updateInterceptionPatternsForTests(): Promise<void> {
+    await this.#innerUpdateInterceptionPatterns();
+  }
+
+  private updateInterceptionPatterns(): void {
+    void this.updateInterceptionThrottler.schedule(this.#innerUpdateInterceptionPatterns.bind(this));
+  }
 
+  async #innerUpdateInterceptionPatterns(): Promise<void> {
+    this.#headerOverridesMap.clear();
+    if (!this.activeInternal || !this.projectInternal) {
       return SDK.NetworkManager.MultitargetNetworkManager.instance().setInterceptionHandlerForPatterns(
-          Array.from(patterns).map(
-              pattern => ({urlPattern: pattern, requestStage: Protocol.Fetch.RequestStage.Response})),
-          this.interceptionHandlerBound);
+          [], this.interceptionHandlerBound);
+    }
+    let patterns = new Set<string>();
+    for (const uiSourceCode of this.projectInternal.uiSourceCodes()) {
+      const pattern = this.patternForFileSystemUISourceCode(uiSourceCode);
+      if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES) &&
+          uiSourceCode.name() === HEADERS_FILENAME) {
+        const {headerPatterns, path, overridesWithRegex} = await this.generateHeaderPatterns(uiSourceCode);
+        if (headerPatterns.size > 0) {
+          patterns = new Set([...patterns, ...headerPatterns]);
+          this.#headerOverridesMap.set(path, overridesWithRegex);
+        }
+      } else {
+        patterns.add(pattern);
+      }
+      // Most servers have the concept of a "directory index", which is a
+      // default resource name for a request targeting a "directory", e. g.
+      // requesting "example.com/path/" would result in the same response as
+      // requesting "example.com/path/index.html". To match this behavior we
+      // generate an additional pattern without "index.html" as the longer
+      // pattern would not match against a shorter request.
+      const {head, tail} = extractDirectoryIndex(pattern);
+      if (tail) {
+        patterns.add(head);
+      }
     }
+
+    return SDK.NetworkManager.MultitargetNetworkManager.instance().setInterceptionHandlerForPatterns(
+        Array.from(patterns).map(
+            pattern => ({urlPattern: pattern, requestStage: Protocol.Fetch.RequestStage.Response})),
+        this.interceptionHandlerBound);
   }
 
   private async onUISourceCodeRemoved(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
@@ -409,7 +479,7 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     await this.unbind(uiSourceCode);
   }
 
-  private async setProject(project: Workspace.Workspace.Project|null): Promise<void> {
+  async setProject(project: Workspace.Workspace.Project|null): Promise<void> {
     if (project === this.projectInternal) {
       return;
     }
@@ -452,6 +522,49 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     }
   }
 
+  mergeHeaders(baseHeaders: Protocol.Fetch.HeaderEntry[], overrideHeaders: Protocol.Network.Headers):
+      Protocol.Fetch.HeaderEntry[] {
+    const result: Protocol.Fetch.HeaderEntry[] = [];
+    const headerMap = new Map<string, string>();
+    for (const header of baseHeaders) {
+      headerMap.set(header.name, header.value);
+    }
+    for (const [headerName, headerValue] of Object.entries(overrideHeaders)) {
+      headerMap.set(headerName, headerValue);
+    }
+    headerMap.forEach((headerValue, headerName) => {
+      result.push({name: headerName, value: headerValue});
+    });
+    return result;
+  }
+
+  #maybeMergeHeadersForPathSegment(path: string, requestUrl: string, headers: Protocol.Fetch.HeaderEntry[]):
+      Protocol.Fetch.HeaderEntry[] {
+    const headerOverrides = this.#headerOverridesMap.get(path) || [];
+    for (const headerOverride of headerOverrides) {
+      if (headerOverride.applyToRegex.test(requestUrl)) {
+        headers = this.mergeHeaders(headers, headerOverride.headers);
+      }
+    }
+    return headers;
+  }
+
+  handleHeaderInterception(interceptedRequest: SDK.NetworkManager.InterceptedRequest): Protocol.Fetch.HeaderEntry[] {
+    let result: Protocol.Fetch.HeaderEntry[] = interceptedRequest.responseHeaders || [];
+    const urlSegments = this.encodedPathFromUrl(interceptedRequest.request.url).split('/');
+    // Traverse the hierarchy of overrides from the most general to the most
+    // specific. Check with empty string first to match overrides applying to
+    // all domains.
+    // e.g. '', 'www.example.com/', 'www.example.com/path/', ...
+    let path = '';
+    result = this.#maybeMergeHeadersForPathSegment(path, interceptedRequest.request.url, result);
+    for (const segment of urlSegments) {
+      path += segment + '/';
+      result = this.#maybeMergeHeadersForPathSegment(path, interceptedRequest.request.url, result);
+    }
+    return result;
+  }
+
   private async interceptionHandler(interceptedRequest: SDK.NetworkManager.InterceptedRequest): Promise<void> {
     const method = interceptedRequest.request.method;
     if (!this.activeInternal || (method !== 'GET' && method !== 'POST')) {
@@ -460,9 +573,16 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     const proj = this.projectInternal as FileSystem;
     const path = proj.fileSystemPath() + '/' + this.encodedPathFromUrl(interceptedRequest.request.url);
     const fileSystemUISourceCode = proj.uiSourceCodeForURL(path);
-    if (!fileSystemUISourceCode) {
+    let responseHeaders: Protocol.Fetch.HeaderEntry[] = [];
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
+      responseHeaders = this.handleHeaderInterception(interceptedRequest);
+    }
+    if (!fileSystemUISourceCode && !responseHeaders.length) {
       return;
     }
+    if (!responseHeaders.length) {
+      responseHeaders = interceptedRequest.responseHeaders || [];
+    }
 
     let mimeType = '';
     if (interceptedRequest.responseHeaders) {
@@ -477,32 +597,41 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     if (!mimeType) {
       const expectedResourceType =
           Common.ResourceType.resourceTypes[interceptedRequest.resourceType] || Common.ResourceType.resourceTypes.Other;
-      mimeType = fileSystemUISourceCode.mimeType();
+      mimeType = fileSystemUISourceCode?.mimeType() || '';
       if (Common.ResourceType.ResourceType.fromMimeType(mimeType) !== expectedResourceType) {
         mimeType = expectedResourceType.canonicalMimeType();
       }
     }
-    const project = fileSystemUISourceCode.project() as FileSystem;
-
-    this.originalResponseContentPromises.set(
-        fileSystemUISourceCode, interceptedRequest.responseBody().then(response => {
-          if (response.error || response.content === null) {
-            return null;
-          }
-          if (response.encoded) {
-            const text = atob(response.content);
-            const data = new Uint8Array(text.length);
-            for (let i = 0; i < text.length; ++i) {
-              data[i] = text.charCodeAt(i);
-            }
-            return new TextDecoder('utf-8').decode(data);
-          }
-          return response.content;
-        }));
 
-    const blob = await project.requestFileBlob(fileSystemUISourceCode);
-    if (blob) {
-      void interceptedRequest.continueRequestWithContent(new Blob([blob], {type: mimeType}));
+    if (fileSystemUISourceCode) {
+      this.originalResponseContentPromises.set(
+          fileSystemUISourceCode, interceptedRequest.responseBody().then(response => {
+            if (response.error || response.content === null) {
+              return null;
+            }
+            if (response.encoded) {
+              const text = atob(response.content);
+              const data = new Uint8Array(text.length);
+              for (let i = 0; i < text.length; ++i) {
+                data[i] = text.charCodeAt(i);
+              }
+              return new TextDecoder('utf-8').decode(data);
+            }
+            return response.content;
+          }));
+
+      const project = fileSystemUISourceCode.project() as FileSystem;
+      const blob = await project.requestFileBlob(fileSystemUISourceCode);
+      if (blob) {
+        void interceptedRequest.continueRequestWithContent(
+            new Blob([blob], {type: mimeType}), /* encoded */ false, responseHeaders);
+      }
+    } else {
+      const responseBody = await interceptedRequest.responseBody();
+      if (!responseBody.error && responseBody.content) {
+        void interceptedRequest.continueRequestWithContent(
+            new Blob([responseBody.content], {type: mimeType}), /* encoded */ true, responseHeaders);
+      }
     }
   }
 }
@@ -512,6 +641,8 @@ const RESERVED_FILENAMES = new Set<string>([
   'com8', 'com9', 'lpt1', 'lpt2', 'lpt3', 'lpt4', 'lpt5', 'lpt6', 'lpt7', 'lpt8', 'lpt9',
 ]);
 
+const HEADERS_FILENAME = '.headers';
+
 // TODO(crbug.com/1167717): Make this a const enum again
 // eslint-disable-next-line rulesdir/const_enum
 export enum Events {
@@ -521,3 +652,36 @@ export enum Events {
 export type EventTypes = {
   [Events.ProjectChanged]: Workspace.Workspace.Project|null,
 };
+
+interface HeaderOverride {
+  applyTo: string;
+  headers: Protocol.Network.Headers;
+}
+
+interface HeaderOverrideWithRegex {
+  applyToRegex: RegExp;
+  headers: Protocol.Network.Headers;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isHeaderOverride(arg: any): arg is HeaderOverride {
+  if (!(arg && arg.applyTo && typeof (arg.applyTo === 'string') && arg.headers && Object.keys(arg.headers).length)) {
+    return false;
+  }
+  return Object.values(arg.headers).every(value => typeof value === 'string');
+}
+
+export function escapeRegex(pattern: string): string {
+  return Platform.StringUtilities.escapeCharacters(pattern, '[]{}()\\.^$+|-,?').replaceAll('*', '.*');
+}
+
+export function extractDirectoryIndex(pattern: string): {head: string, tail?: string} {
+  const lastSlash = pattern.lastIndexOf('/');
+  const tail = lastSlash >= 0 ? pattern.slice(lastSlash + 1) : pattern;
+  const head = lastSlash >= 0 ? pattern.slice(0, lastSlash + 1) : '';
+  const regex = new RegExp('^' + escapeRegex(tail) + '$');
+  if (regex.test('index.html') || regex.test('index.htm') || regex.test('index.php')) {
+    return {head, tail};
+  }
+  return {head: pattern};
+}

package/front_end/models/timeline_model/TimelineFrameModel.ts

@@ -138,10 +138,10 @@ export class TimelineFrameModel {
     }
     this.lastBeginFrame = startTime;
 
-    this.beginFrameQueue.addFrameIfNotExists(seqId, startTime, false);
+    this.beginFrameQueue.addFrameIfNotExists(seqId, startTime, false, false);
   }
 
-  handleDroppedFrame(startTime: number, seqId: number): void {
+  handleDroppedFrame(startTime: number, seqId: number, isPartial: boolean): void {
     if (!this.lastFrame) {
       this.startFrame(startTime);
     }
@@ -149,8 +149,9 @@ export class TimelineFrameModel {
     // This line handles the case where no BeginFrame event is issued for
     // the dropped frame. In this situation, add a BeginFrame to the queue
     // as if it actually occurred.
-    this.beginFrameQueue.addFrameIfNotExists(seqId, startTime, true);
+    this.beginFrameQueue.addFrameIfNotExists(seqId, startTime, true, isPartial);
     this.beginFrameQueue.setDropped(seqId, true);
+    this.beginFrameQueue.setPartial(seqId, isPartial);
   }
 
   handleDrawFrame(startTime: number, seqId: number): void {
@@ -187,6 +188,9 @@ export class TimelineFrameModel {
         if (frame.isDropped) {
           this.lastFrame.dropped = true;
         }
+        if (frame.isPartial) {
+          this.lastFrame.isPartial = true;
+        }
       }
     }
     this.mainFrameCommitted = false;
@@ -318,7 +322,7 @@ export class TimelineFrameModel {
     } else if (event.name === RecordType.NeedsBeginFrameChanged) {
       this.handleNeedFrameChanged(timestamp, event.args['data'] && event.args['data']['needsBeginFrame']);
     } else if (event.name === RecordType.DroppedFrame) {
-      this.handleDroppedFrame(timestamp, event.args['frameSeqId']);
+      this.handleDroppedFrame(timestamp, event.args['frameSeqId'], event.args['hasPartialUpdate']);
     }
   }
 
@@ -426,6 +430,7 @@ export class TimelineFrame {
   cpuTime: number;
   idle: boolean;
   dropped: boolean;
+  isPartial: boolean;
   layerTree: TracingFrameLayerTree|null;
   paints: LayerPaintEvent[];
   mainFrameId: number|undefined;
@@ -439,6 +444,7 @@ export class TimelineFrame {
     this.cpuTime = 0;
     this.idle = false;
     this.dropped = false;
+    this.isPartial = false;
     this.layerTree = null;
     this.paints = [];
     this.mainFrameId = undefined;
@@ -545,10 +551,12 @@ class BeginFrameInfo {
   seqId: number;
   startTime: number;
   isDropped: boolean;
-  constructor(seqId: number, startTime: number, isDropped: boolean) {
+  isPartial: boolean;
+  constructor(seqId: number, startTime: number, isDropped: boolean, isPartial: boolean) {
     this.seqId = seqId;
     this.startTime = startTime;
     this.isDropped = isDropped;
+    this.isPartial = isPartial;
   }
 }
 
@@ -570,9 +578,9 @@ export class TimelineFrameBeginFrameQueue {
   }
 
   // Add a BeginFrame to the queue, if it does not already exit.
-  addFrameIfNotExists(seqId: number, startTime: number, isDropped: boolean): void {
+  addFrameIfNotExists(seqId: number, startTime: number, isDropped: boolean, isPartial: boolean): void {
     if (!(seqId in this.mapFrames)) {
-      this.mapFrames[seqId] = new BeginFrameInfo(seqId, startTime, isDropped);
+      this.mapFrames[seqId] = new BeginFrameInfo(seqId, startTime, isDropped, isPartial);
       this.queueFrames.push(seqId);
     }
   }
@@ -584,6 +592,12 @@ export class TimelineFrameBeginFrameQueue {
     }
   }
 
+  setPartial(seqId: number, isPartial: boolean): void {
+    if (seqId in this.mapFrames) {
+      this.mapFrames[seqId].isPartial = isPartial;
+    }
+  }
+
   processPendingBeginFramesOnDrawFrame(seqId: number): BeginFrameInfo[] {
     const framesToVisualize: BeginFrameInfo[] = [];
 

package/front_end/panels/application/components/ReportsGrid.ts

@@ -19,6 +19,21 @@ const UIStrings = {
   *(https://developers.google.com/web/updates/2018/09/reportingapi#sending)
   */
   noReportsToDisplay: 'No reports to display',
+  /**
+  *@description Column header for a table displaying Reporting API reports.
+  *Status is one of 'Queued', 'Pending', 'MarkedForRemoval' or 'Success'.
+  */
+  status: 'Status',
+  /**
+  *@description Column header for a table displaying Reporting API reports.
+  *Destination is the name of the endpoint the report is being sent to.
+  */
+  destination: 'Destination',
+  /**
+  *@description Column header for a table displaying Reporting API reports.
+  *The column contains the timestamp of when a report was generated.
+  */
+  generatedAt: 'Generated at',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/ReportsGrid.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -38,7 +53,7 @@ export class ReportsGridStatusHeader extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
-      ${i18n.i18n.lockedString('Status')}
+      ${i18nString(UIStrings.status)}
       <x-link href="https://web.dev/reporting-api/#report-status">
         <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
           iconName: 'help_outline',
@@ -93,7 +108,7 @@ export class ReportsGrid extends HTMLElement {
         },
         {
           id: 'status',
-          title: i18n.i18n.lockedString('Status'),
+          title: i18nString(UIStrings.status),
           widthWeighting: 20,
           hideable: false,
           visible: true,
@@ -103,14 +118,14 @@ export class ReportsGrid extends HTMLElement {
         },
         {
           id: 'destination',
-          title: i18n.i18n.lockedString('Destination'),
+          title: i18nString(UIStrings.destination),
           widthWeighting: 20,
           hideable: false,
           visible: true,
         },
         {
           id: 'timestamp',
-          title: i18n.i18n.lockedString('Timestamp'),
+          title: i18nString(UIStrings.generatedAt),
           widthWeighting: 20,
           hideable: false,
           visible: true,

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -125,6 +125,14 @@ const UIStrings = {
   *@description Text of checkbox to reset storage features prior to running audits in Lighthouse
   */
   clearStorage: 'Clear storage',
+  /**
+   * @description Text of checkbox to use the legacy Lighthouse navigation mode
+   */
+  legacyNavigation: 'Legacy navigation',
+  /**
+   * @description Tooltip text that appears when hovering over the 'Legacy navigation' checkbox in the settings pane opened by clicking the setting cog in the start view of the audits panel
+   */
+  useLegacyNavigation: 'Audit the page using classic Lighthouse when in navigation mode.',
   /**
   * @description Tooltip text of checkbox to reset storage features prior to running audits in
   * Lighthouse. Resetting the storage clears/empties it to a neutral state.
@@ -277,7 +285,11 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     return navigationEntry.url;
   }
 
-  getFlags(): {internalDisableDeviceScreenEmulation: boolean, emulatedFormFactor: (string|undefined)} {
+  getFlags(): {
+    internalDisableDeviceScreenEmulation: boolean,
+    emulatedFormFactor: (string|undefined),
+    legacyNavigation: boolean,
+  } {
     const flags = {
       // DevTools handles all the emulation. This tells Lighthouse to not bother with emulation.
       internalDisableDeviceScreenEmulation: true,
@@ -288,6 +300,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     return flags as {
       internalDisableDeviceScreenEmulation: boolean,
       emulatedFormFactor: (string | undefined),
+      legacyNavigation: boolean,
     };
   }
 
@@ -433,6 +446,17 @@ export const RuntimeSettings: RuntimeSetting[] = [
     options: undefined,
     learnMore: undefined,
   },
+  {
+    setting: Common.Settings.Settings.instance().createSetting(
+        'lighthouse.legacy_navigation', true, Common.Settings.SettingStorageType.Synced),
+    title: i18nLazyString(UIStrings.legacyNavigation),
+    description: i18nLazyString(UIStrings.useLegacyNavigation),
+    setFlags: (flags: Flags, value: string|boolean): void => {
+      flags.legacyNavigation = value;
+    },
+    options: undefined,
+    learnMore: undefined,
+  },
 ];
 
 // TODO(crbug.com/1167717): Make this a const enum again

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -11,6 +11,11 @@ import type * as ReportRenderer from './LighthouseReporterTypes.js';
 let lastId = 1;
 
 export class ProtocolService {
+  private targetInfo?: {
+    mainSessionId: string,
+    mainTargetId: string,
+    mainFrameId: string,
+  };
   private rawConnection?: ProtocolClient.InspectorBackend.Connection;
   private lighthouseWorkerPromise?: Promise<Worker>;
   private lighthouseMessageUpdateCallback?: ((arg0: string) => void);
@@ -19,26 +24,53 @@ export class ProtocolService {
     await SDK.TargetManager.TargetManager.instance().suspendAllTargets();
     const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
     if (!mainTarget) {
-      throw new Error('Unable to find main target required for LightHouse');
+      throw new Error('Unable to find main target required for Lighthouse');
     }
     const childTargetManager = mainTarget.model(SDK.ChildTargetManager.ChildTargetManager);
     if (!childTargetManager) {
-      throw new Error('Unable to find child target manager required for LightHouse');
+      throw new Error('Unable to find child target manager required for Lighthouse');
     }
-    this.rawConnection = await childTargetManager.createParallelConnection(message => {
+    const resourceTreeModel = mainTarget.model(SDK.ResourceTreeModel.ResourceTreeModel);
+    if (!resourceTreeModel) {
+      throw new Error('Unable to find resource tree model required for Lighthouse');
+    }
+    const mainFrame = resourceTreeModel.mainFrame;
+    if (!mainFrame) {
+      throw new Error('Unable to find main frame required for Lighthouse');
+    }
+
+    const {connection, sessionId} = await childTargetManager.createParallelConnection(message => {
       if (typeof message === 'string') {
         message = JSON.parse(message);
       }
       this.dispatchProtocolMessage(message);
     });
+
+    this.rawConnection = connection;
+    this.targetInfo = {
+      mainTargetId: await childTargetManager.getParentTargetId(),
+      mainFrameId: mainFrame.id,
+      mainSessionId: sessionId,
+    };
   }
 
   getLocales(): readonly string[] {
     return [i18n.DevToolsLocale.DevToolsLocale.instance().locale];
   }
 
-  startLighthouse(auditURL: string, categoryIDs: string[], flags: Object): Promise<ReportRenderer.RunnerResult> {
-    return this.sendWithResponse('start', {url: auditURL, categoryIDs, flags, locales: this.getLocales()});
+  async startLighthouse(auditURL: string, categoryIDs: string[], flags: Record<string, Object|undefined>):
+      Promise<ReportRenderer.RunnerResult> {
+    if (!this.targetInfo) {
+      throw new Error('Unable to get target info required for Lighthouse');
+    }
+    const mode = flags.legacyNavigation ? 'start' : 'navigate';
+    return this.sendWithResponse(mode, {
+      url: auditURL,
+      categoryIDs,
+      flags,
+      locales: this.getLocales(),
+      target: this.targetInfo,
+    });
   }
 
   async detach(): Promise<void> {

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -113,6 +113,7 @@ export class StartView extends UI.Widget.Widget {
   }
 
   private render(): void {
+    this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.legacy_navigation', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear_storage', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.throttling', this.settingsToolbarInternal);
 

package/front_end/panels/lighthouse/LighthouseStatusView.ts

@@ -321,7 +321,7 @@ export class StatusView {
   }
 
   private getPhaseForMessage(message: string): StatusPhase|null {
-    return StatusPhases.find(phase => message.startsWith(phase.statusMessagePrefix)) || null;
+    return StatusPhases.find(phase => phase.statusMessageRegex.test(message)) || null;
   }
 
   private resetProgressBarClasses(): void {
@@ -457,7 +457,7 @@ export interface StatusPhase {
   id: string;
   progressBarClass: string;
   message: () => Common.UIString.LocalizedString;
-  statusMessagePrefix: string;
+  statusMessageRegex: RegExp;
 }
 
 export const StatusPhases: StatusPhase[] = [
@@ -465,19 +465,19 @@ export const StatusPhases: StatusPhase[] = [
     id: 'loading',
     progressBarClass: 'loading',
     message: i18nLazyString(UIStrings.lighthouseIsLoadingThePage),
-    statusMessagePrefix: 'Loading page',
+    statusMessageRegex: /^(Loading page|Navigating to)/,
   },
   {
     id: 'gathering',
     progressBarClass: 'gathering',
     message: i18nLazyString(UIStrings.lighthouseIsGatheringInformation),
-    statusMessagePrefix: 'Gathering',
+    statusMessageRegex: /^(Gathering|Computing artifact)/,
   },
   {
     id: 'auditing',
     progressBarClass: 'auditing',
     message: i18nLazyString(UIStrings.almostThereLighthouseIsNow),
-    statusMessagePrefix: 'Auditing',
+    statusMessageRegex: /^Auditing/,
   },
 ];