chrome-devtools-frontend 1.0.971727 → 1.0.973342

package/config/gni/devtools_grd_files.gni

@@ -672,7 +672,7 @@ grd_files_debug_sources = [
   "front_end/entrypoints/inspector_main/RenderingOptions.js",
   "front_end/entrypoints/inspector_main/nodeIcon.css.js",
   "front_end/entrypoints/inspector_main/renderingOptions.css.js",
-  "front_end/entrypoints/lighthouse_worker/LighthouseService.js",
+  "front_end/entrypoints/lighthouse_worker/LighthouseWorkerService.js",
   "front_end/entrypoints/main/ExecutionContextSelector.js",
   "front_end/entrypoints/main/MainImpl.js",
   "front_end/entrypoints/main/SimpleApp.js",
@@ -1050,6 +1050,7 @@ grd_files_debug_sources = [
   "front_end/panels/lighthouse/LighthouseStartView.js",
   "front_end/panels/lighthouse/LighthouseStartViewFR.js",
   "front_end/panels/lighthouse/LighthouseStatusView.js",
+  "front_end/panels/lighthouse/LighthouseTimespanView.js",
   "front_end/panels/lighthouse/RadioSetting.js",
   "front_end/panels/lighthouse/lighthouseDialog.css.js",
   "front_end/panels/lighthouse/lighthousePanel.css.js",

package/front_end/core/i18n/locales/en-US.json

@@ -5819,6 +5819,9 @@
   "panels/lighthouse/LighthouseController.ts | thereMayBeStoredDataAffectingSingular": {
     "message": "There may be stored data affecting loading performance in this location: {PH1}. Audit this page in an incognito window to prevent those resources from affecting your scores."
   },
+  "panels/lighthouse/LighthouseController.ts | timespan": {
+    "message": "Timespan"
+  },
   "panels/lighthouse/LighthouseController.ts | useLegacyNavigation": {
     "message": "Audit the page using classic Lighthouse when in navigation mode."
   },
@@ -5879,9 +5882,18 @@
   "panels/lighthouse/LighthouseStartView.ts | learnMore": {
     "message": "Learn more"
   },
+  "panels/lighthouse/LighthouseStartViewFR.ts | analyzeNavigation": {
+    "message": "Analyze navigation"
+  },
+  "panels/lighthouse/LighthouseStartViewFR.ts | analyzeSnapshot": {
+    "message": "Analyze snapshot"
+  },
   "panels/lighthouse/LighthouseStartViewFR.ts | mode": {
     "message": "Mode"
   },
+  "panels/lighthouse/LighthouseStartViewFR.ts | startTimespan": {
+    "message": "Start timespan"
+  },
   "panels/lighthouse/LighthouseStatusView.ts | ahSorryWeRanIntoAnError": {
     "message": "Ah, sorry! We ran into an error."
   },
@@ -5969,6 +5981,18 @@
   "panels/lighthouse/LighthouseStatusView.ts | walmartSawAIncreaseInRevenueFor": {
     "message": "Walmart saw a 1% increase in revenue for every 100ms improvement in page load [Source: WPO Stats]"
   },
+  "panels/lighthouse/LighthouseTimespanView.ts | cancel": {
+    "message": "Cancel"
+  },
+  "panels/lighthouse/LighthouseTimespanView.ts | endTimespan": {
+    "message": "End timespan"
+  },
+  "panels/lighthouse/LighthouseTimespanView.ts | timespanStarted": {
+    "message": "Timespan started, interact with the page"
+  },
+  "panels/lighthouse/LighthouseTimespanView.ts | timespanStarting": {
+    "message": "Timespan starting…"
+  },
   "panels/media/EventDisplayTable.ts | eventDisplay": {
     "message": "Event display"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -5819,6 +5819,9 @@
   "panels/lighthouse/LighthouseController.ts | thereMayBeStoredDataAffectingSingular": {
     "message": "T̂h́êŕê ḿâý b̂é ŝt́ôŕêd́ d̂át̂á âf́f̂éĉt́îńĝ ĺôád̂ín̂ǵ p̂ér̂f́ôŕm̂án̂ćê ín̂ t́ĥíŝ ĺôćât́îón̂: {PH1}. Áûd́ît́ t̂h́îś p̂áĝé îń âń îńĉóĝńît́ô ẃîńd̂óŵ t́ô ṕr̂év̂én̂t́ t̂h́ôśê ŕêśôúr̂ćêś f̂ŕôḿ âf́f̂éĉt́îńĝ ýôúr̂ śĉór̂éŝ."
   },
+  "panels/lighthouse/LighthouseController.ts | timespan": {
+    "message": "T̂ím̂éŝṕâń"
+  },
   "panels/lighthouse/LighthouseController.ts | useLegacyNavigation": {
     "message": "Âúd̂ít̂ t́ĥé p̂áĝé ûśîńĝ ćl̂áŝśîć L̂íĝh́t̂h́ôúŝé ŵh́êń îń n̂áv̂íĝát̂íôń m̂ód̂é."
   },
@@ -5879,9 +5882,18 @@
   "panels/lighthouse/LighthouseStartView.ts | learnMore": {
     "message": "L̂éâŕn̂ ḿôŕê"
   },
+  "panels/lighthouse/LighthouseStartViewFR.ts | analyzeNavigation": {
+    "message": "Âńâĺŷźê ńâv́îǵât́îón̂"
+  },
+  "panels/lighthouse/LighthouseStartViewFR.ts | analyzeSnapshot": {
+    "message": "Âńâĺŷźê śn̂áp̂śĥót̂"
+  },
   "panels/lighthouse/LighthouseStartViewFR.ts | mode": {
     "message": "M̂ód̂é"
   },
+  "panels/lighthouse/LighthouseStartViewFR.ts | startTimespan": {
+    "message": "Ŝt́âŕt̂ t́îḿêśp̂án̂"
+  },
   "panels/lighthouse/LighthouseStatusView.ts | ahSorryWeRanIntoAnError": {
     "message": "Âh́, ŝór̂ŕŷ! Ẃê ŕâń îńt̂ó âń êŕr̂ór̂."
   },
@@ -5969,6 +5981,18 @@
   "panels/lighthouse/LighthouseStatusView.ts | walmartSawAIncreaseInRevenueFor": {
     "message": "Ŵál̂ḿâŕt̂ śâẃ â 1% ín̂ćr̂éâśê ín̂ ŕêv́êńûé f̂ór̂ év̂ér̂ý 100m̂ś îḿp̂ŕôv́êḿêńt̂ ín̂ ṕâǵê ĺôád̂ [Śôúr̂ćê: WPO Stats]"
   },
+  "panels/lighthouse/LighthouseTimespanView.ts | cancel": {
+    "message": "Ĉán̂ćêĺ"
+  },
+  "panels/lighthouse/LighthouseTimespanView.ts | endTimespan": {
+    "message": "Êńd̂ t́îḿêśp̂án̂"
+  },
+  "panels/lighthouse/LighthouseTimespanView.ts | timespanStarted": {
+    "message": "T̂ím̂éŝṕâń ŝt́âŕt̂éd̂, ín̂t́êŕâćt̂ ẃît́ĥ t́ĥé p̂áĝé"
+  },
+  "panels/lighthouse/LighthouseTimespanView.ts | timespanStarting": {
+    "message": "T̂ím̂éŝṕâń ŝt́âŕt̂ín̂ǵ…"
+  },
   "panels/media/EventDisplayTable.ts | eventDisplay": {
     "message": "Êv́êńt̂ d́îśp̂ĺâý"
   },

package/front_end/core/sdk/NetworkManager.ts

@@ -447,7 +447,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
 
   private updateNetworkRequestWithResponse(networkRequest: NetworkRequest, response: Protocol.Network.Response): void {
     if (response.url && networkRequest.url() !== response.url) {
-      networkRequest.setUrl(response.url);
+      networkRequest.setUrl(response.url as Platform.DevToolsPath.UrlString);
     }
     networkRequest.mimeType = (response.mimeType as MIME_TYPE);
     if (!networkRequest.statusCode) {
@@ -588,10 +588,12 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
           frameId,
         });
       }
-      networkRequest = this.appendRedirect(requestId, timestamp, request.url);
+      networkRequest = this.appendRedirect(requestId, timestamp, request.url as Platform.DevToolsPath.UrlString);
       this.#manager.dispatchEventToListeners(Events.RequestRedirected, networkRequest);
     } else {
-      networkRequest = NetworkRequest.create(requestId, request.url, documentURL, frameId ?? null, loaderId, initiator);
+      networkRequest = NetworkRequest.create(
+          requestId, request.url as Platform.DevToolsPath.UrlString, documentURL as Platform.DevToolsPath.UrlString,
+          frameId ?? null, loaderId, initiator);
       requestToManagerMap.set(networkRequest, this.#manager);
     }
     networkRequest.hasNetworkData = true;
@@ -716,7 +718,8 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
   }
 
   webSocketCreated({requestId, url: requestURL, initiator}: Protocol.Network.WebSocketCreatedEvent): void {
-    const networkRequest = NetworkRequest.createForWebSocket(requestId, requestURL, initiator);
+    const networkRequest =
+        NetworkRequest.createForWebSocket(requestId, requestURL as Platform.DevToolsPath.UrlString, initiator);
     requestToManagerMap.set(networkRequest, this.#manager);
     networkRequest.setResourceType(Common.ResourceType.resourceTypes.WebSocket);
     this.startNetworkRequest(networkRequest, null);
@@ -865,7 +868,9 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
     return builder;
   }
 
-  private appendRedirect(requestId: Protocol.Network.RequestId, time: number, redirectURL: string): NetworkRequest {
+  private appendRedirect(
+      requestId: Protocol.Network.RequestId, time: number,
+      redirectURL: Platform.DevToolsPath.UrlString): NetworkRequest {
     const originalNetworkRequest = this.#requestsById.get(requestId);
     if (!originalNetworkRequest) {
       throw new Error(`Could not find original network request for ${requestId}`);
@@ -968,7 +973,8 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
 
   webTransportCreated({transportId, url: requestURL, timestamp: time, initiator}:
                           Protocol.Network.WebTransportCreatedEvent): void {
-    const networkRequest = NetworkRequest.createForWebSocket(transportId, requestURL, initiator);
+    const networkRequest =
+        NetworkRequest.createForWebSocket(transportId, requestURL as Platform.DevToolsPath.UrlString, initiator);
     networkRequest.hasNetworkData = true;
     requestToManagerMap.set(networkRequest, this.#manager);
     networkRequest.setResourceType(Common.ResourceType.resourceTypes.WebTransport);
@@ -1071,7 +1077,9 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
   private createNetworkRequest(
       requestId: Protocol.Network.RequestId, frameId: Protocol.Page.FrameId, loaderId: Protocol.Network.LoaderId,
       url: string, documentURL: string, initiator: Protocol.Network.Initiator|null): NetworkRequest {
-    const request = NetworkRequest.create(requestId, url, documentURL, frameId, loaderId, initiator);
+    const request = NetworkRequest.create(
+        requestId, url as Platform.DevToolsPath.UrlString, documentURL as Platform.DevToolsPath.UrlString, frameId,
+        loaderId, initiator);
     requestToManagerMap.set(request, this.#manager);
     return request;
   }

package/front_end/core/sdk/NetworkRequest.ts

@@ -204,7 +204,7 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
     TextUtils.ContentProvider.ContentProvider {
   #requestIdInternal: string;
   #backendRequestIdInternal?: Protocol.Network.RequestId;
-  readonly #documentURLInternal: string;
+  readonly #documentURLInternal: Platform.DevToolsPath.UrlString;
   readonly #frameIdInternal: Protocol.Page.FrameId|null;
   readonly #loaderIdInternal: Protocol.Network.LoaderId|null;
   readonly #initiatorInternal: Protocol.Network.Initiator|null|undefined;
@@ -293,9 +293,9 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
   #wasIntercepted: boolean;
 
   private constructor(
-      requestId: string, backendRequestId: Protocol.Network.RequestId|undefined, url: string, documentURL: string,
-      frameId: Protocol.Page.FrameId|null, loaderId: Protocol.Network.LoaderId|null,
-      initiator: Protocol.Network.Initiator|null) {
+      requestId: string, backendRequestId: Protocol.Network.RequestId|undefined, url: Platform.DevToolsPath.UrlString,
+      documentURL: Platform.DevToolsPath.UrlString, frameId: Protocol.Page.FrameId|null,
+      loaderId: Protocol.Network.LoaderId|null, initiator: Protocol.Network.Initiator|null) {
     super();
 
     this.#requestIdInternal = requestId;
@@ -369,20 +369,23 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
   }
 
   static create(
-      backendRequestId: Protocol.Network.RequestId, url: string, documentURL: string,
-      frameId: Protocol.Page.FrameId|null, loaderId: Protocol.Network.LoaderId|null,
-      initiator: Protocol.Network.Initiator|null): NetworkRequest {
+      backendRequestId: Protocol.Network.RequestId, url: Platform.DevToolsPath.UrlString,
+      documentURL: Platform.DevToolsPath.UrlString, frameId: Protocol.Page.FrameId|null,
+      loaderId: Protocol.Network.LoaderId|null, initiator: Protocol.Network.Initiator|null): NetworkRequest {
     return new NetworkRequest(backendRequestId, backendRequestId, url, documentURL, frameId, loaderId, initiator);
   }
 
   static createForWebSocket(
-      backendRequestId: Protocol.Network.RequestId, requestURL: string,
+      backendRequestId: Protocol.Network.RequestId, requestURL: Platform.DevToolsPath.UrlString,
       initiator?: Protocol.Network.Initiator): NetworkRequest {
-    return new NetworkRequest(backendRequestId, backendRequestId, requestURL, '', null, null, initiator || null);
+    return new NetworkRequest(
+        backendRequestId, backendRequestId, requestURL, '' as Platform.DevToolsPath.UrlString, null, null,
+        initiator || null);
   }
 
   static createWithoutBackendRequest(
-      requestId: string, url: string, documentURL: string, initiator: Protocol.Network.Initiator|null): NetworkRequest {
+      requestId: string, url: Platform.DevToolsPath.UrlString, documentURL: Platform.DevToolsPath.UrlString,
+      initiator: Protocol.Network.Initiator|null): NetworkRequest {
     return new NetworkRequest(requestId, undefined, url, documentURL, null, null, initiator);
   }
 
@@ -414,13 +417,12 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
     return this.#urlInternal.startsWith('blob:');
   }
 
-  // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
-  setUrl(x: string): void {
+  setUrl(x: Platform.DevToolsPath.UrlString): void {
     if (this.#urlInternal === x) {
       return;
     }
 
-    this.#urlInternal = x as Platform.DevToolsPath.UrlString;
+    this.#urlInternal = x;
     this.#parsedURLInternal = new Common.ParsedURL.ParsedURL(x);
     this.#queryStringInternal = undefined;
     this.#parsedQueryParameters = undefined;
@@ -428,7 +430,7 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
     this.#pathInternal = undefined;
   }
 
-  get documentURL(): string {
+  get documentURL(): Platform.DevToolsPath.UrlString {
     return this.#documentURLInternal;
   }
 

package/front_end/core/sdk/ResourceTreeModel.ts

@@ -51,8 +51,6 @@ import {SDKModel} from './SDKModel.js';
 import {TargetManager} from './TargetManager.js';
 import {SecurityOriginManager} from './SecurityOriginManager.js';
 
-// TODO(crbug.com/1253323): Casts to UrlString will be removed from this file when migration to branded types is complete.
-
 export class ResourceTreeModel extends SDKModel<EventTypes> {
   readonly agent: ProtocolProxyApi.PageApi;
   readonly #securityOriginManager: SecurityOriginManager;
@@ -304,8 +302,8 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
     }
 
     const resource = new Resource(
-        this, null, url, frame.url as Platform.DevToolsPath.UrlString, frameId, data.loaderId,
-        Common.ResourceType.resourceTypes[data.resourceType], data.mimeType, data.lastModified, null);
+        this, null, url, frame.url, frameId, data.loaderId, Common.ResourceType.resourceTypes[data.resourceType],
+        data.mimeType, data.lastModified, null);
     frame.addResource(resource);
   }
 
@@ -606,7 +604,7 @@ export class ResourceTreeFrame {
   crossTargetParentFrameId: string|null;
   #loaderIdInternal: string;
   #nameInternal: string|null|undefined;
-  #urlInternal: string;
+  #urlInternal: Platform.DevToolsPath.UrlString;
   #domainAndRegistryInternal: string;
   #securityOriginInternal: string|null;
   #unreachableUrlInternal: string;
@@ -638,7 +636,7 @@ export class ResourceTreeFrame {
 
     this.#loaderIdInternal = (payload && payload.loaderId) || '';
     this.#nameInternal = payload && payload.name;
-    this.#urlInternal = (payload && payload.url) || '';
+    this.#urlInternal = ((payload && payload.url) || '') as Platform.DevToolsPath.UrlString;
     this.#domainAndRegistryInternal = (payload && payload.domainAndRegistry) || '';
     this.#securityOriginInternal = payload && payload.securityOrigin;
     this.#unreachableUrlInternal = (payload && payload.unreachableUrl) || '';
@@ -690,7 +688,7 @@ export class ResourceTreeFrame {
   navigate(framePayload: Protocol.Page.Frame): void {
     this.#loaderIdInternal = framePayload.loaderId;
     this.#nameInternal = framePayload.name;
-    this.#urlInternal = framePayload.url;
+    this.#urlInternal = framePayload.url as Platform.DevToolsPath.UrlString;
     this.#domainAndRegistryInternal = framePayload.domainAndRegistry;
     this.#securityOriginInternal = framePayload.securityOrigin;
     this.#unreachableUrlInternal = framePayload.unreachableUrl || '';
@@ -724,7 +722,7 @@ export class ResourceTreeFrame {
     return this.#nameInternal || '';
   }
 
-  get url(): string {
+  get url(): Platform.DevToolsPath.UrlString {
     return this.#urlInternal;
   }
 
@@ -847,8 +845,8 @@ export class ResourceTreeFrame {
       return;
     }
     resource = new Resource(
-        this.#model, request, request.url(), request.documentURL as Platform.DevToolsPath.UrlString, request.frameId,
-        request.loaderId, request.resourceType(), request.mimeType, null, null);
+        this.#model, request, request.url(), request.documentURL, request.frameId, request.loaderId,
+        request.resourceType(), request.mimeType, null, null);
     this.resourcesMap.set(resource.url, resource);
     this.#model.dispatchEventToListeners(Events.ResourceAdded, resource);
   }

package/front_end/core/sdk/SourceMap.ts

@@ -32,6 +32,8 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+// TODO(crbug.com/1253323): Casts to UrlString will be removed from this file when migration to branded types is complete.
+
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Common from '../common/common.js';
 import * as i18n from '../i18n/i18n.js';
@@ -143,7 +145,7 @@ export class TextSourceMap implements SourceMap {
   readonly #sourceMappingURL: string;
   readonly #baseURL: string;
   #mappingsInternal: SourceMapEntry[]|null;
-  readonly #sourceInfos: Map<string, TextSourceMap.SourceInfo>;
+  readonly #sourceInfos: Map<Platform.DevToolsPath.UrlString, TextSourceMap.SourceInfo>;
 
   /**
    * Implements Source Map V3 model. See https://github.com/google/closure-compiler/wiki/Source-Maps
@@ -201,23 +203,21 @@ export class TextSourceMap implements SourceMap {
     return this.#sourceMappingURL;
   }
 
-  sourceURLs(): string[] {
+  sourceURLs(): Platform.DevToolsPath.UrlString[] {
     return [...this.#sourceInfos.keys()];
   }
 
-  sourceContentProvider(sourceURL: string, contentType: Common.ResourceType.ResourceType):
+  sourceContentProvider(sourceURL: Platform.DevToolsPath.UrlString, contentType: Common.ResourceType.ResourceType):
       TextUtils.ContentProvider.ContentProvider {
     const info = this.#sourceInfos.get(sourceURL);
     if (info && info.content) {
       return TextUtils.StaticContentProvider.StaticContentProvider.fromString(sourceURL, contentType, info.content);
     }
-    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
-    return new CompilerSourceMappingContentProvider(
-        sourceURL as Platform.DevToolsPath.UrlString, contentType, this.#initiator);
+    return new CompilerSourceMappingContentProvider(sourceURL, contentType, this.#initiator);
   }
 
   embeddedContentByURL(sourceURL: string): string|null {
-    const entry = this.#sourceInfos.get(sourceURL);
+    const entry = this.#sourceInfos.get(sourceURL as Platform.DevToolsPath.UrlString);
     if (!entry) {
       return null;
     }
@@ -309,7 +309,7 @@ export class TextSourceMap implements SourceMap {
   }
 
   private reversedMappings(sourceURL: string): number[] {
-    const info = this.#sourceInfos.get(sourceURL);
+    const info = this.#sourceInfos.get(sourceURL as Platform.DevToolsPath.UrlString);
     if (!info) {
       return [];
     }
@@ -373,7 +373,7 @@ export class TextSourceMap implements SourceMap {
       if (url === this.#compiledURLInternal && source) {
         url += '? [sm]';
       }
-      this.#sourceInfos.set(url, new TextSourceMap.SourceInfo(source || null, null));
+      this.#sourceInfos.set(url as Platform.DevToolsPath.UrlString, new TextSourceMap.SourceInfo(source || null, null));
       sourcesList.push(url);
     }
     sourceMapToSourceList.set(sourceMap, sourcesList);

package/front_end/entrypoints/lighthouse_worker/{LighthouseService.ts → LighthouseWorkerService.ts}

@@ -11,13 +11,17 @@ function disableLoggingForTest(): void {
 }
 
 /**
+ * LegacyPort is provided to Lighthouse as the CDP connection in legacyNavigation mode.
+ * Its complement is https://github.com/GoogleChrome/lighthouse/blob/v9.3.1/lighthouse-core/gather/connections/raw.js
+ * It speaks pure CDP via notifyFrontendViaWorkerMessage
+ *
  * Any message that comes back from Lighthouse has to go via a so-called "port".
  * This class holds the relevant callbacks that Lighthouse provides and that
  * can be called in the onmessage callback of the worker, so that the frontend
  * can communicate to Lighthouse. Lighthouse itself communicates to the frontend
  * via status updates defined below.
  */
-class LighthousePort {
+class LegacyPort {
   onMessage?: (message: string) => void;
   onClose?: () => void;
   on(eventName: string, callback: (arg?: string) => void): void {
@@ -35,6 +39,10 @@ class LighthousePort {
   }
 }
 
+/**
+ * ConnectionProxy is a SDK interface, but the implementation has no knowledge it's a parallelConnection.
+ * The CDP traffic is smuggled back and forth by the system described in LighthouseProtocolService
+*/
 class ConnectionProxy implements SDK.Connections.ParallelConnectionInterface {
   sessionId: string;
   onMessage: ((arg0: Object) => void)|null;
@@ -73,14 +81,15 @@ class ConnectionProxy implements SDK.Connections.ParallelConnectionInterface {
   }
 }
 
-const port = new LighthousePort();
-let rawConnection: ConnectionProxy|undefined;
+const legacyPort = new LegacyPort();
+let cdpConnection: ConnectionProxy|undefined;
+let endTimespan: (() => unknown)|undefined;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-async function start(method: string, params: any): Promise<unknown> {
+async function invokeLH(action: string, args: any): Promise<unknown> {
   if (Root.Runtime.Runtime.queryParam('isUnderTest')) {
     disableLoggingForTest();
-    params.flags.maxWaitForLoad = 2 * 1000;
+    args.flags.maxWaitForLoad = 2 * 1000;
   }
 
   // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
@@ -92,44 +101,55 @@ async function start(method: string, params: any): Promise<unknown> {
       undefined;
 
   try {
-    const locale = await fetchLocaleData(params.locales);
-    const flags = params.flags;
+    // For timespan we only need to perform setup on startTimespan.
+    // Config, flags, locale, etc. should be stored in the closure of endTimespan.
+    if (action === 'endTimespan') {
+      if (!endTimespan) {
+        throw new Error('Cannot end a timespan before starting one');
+      }
+      const result = await endTimespan();
+      endTimespan = undefined;
+      return result;
+    }
+
+    const locale = await fetchLocaleData(args.locales);
+    const flags = args.flags;
     flags.logLevel = flags.logLevel || 'info';
     flags.channel = 'devtools';
     flags.locale = locale;
 
     // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
-    const config = self.createConfig(params.categoryIDs, flags.emulatedFormFactor);
-    const url = params.url;
+    const config = self.createConfig(args.categoryIDs, flags.emulatedFormFactor);
+    const url = args.url;
 
     // Handle legacy Lighthouse runner path.
-    if (method === 'legacyNavigation') {
+    if (action === 'navigation' && flags.legacyNavigation) {
       // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
-      const connection = self.setUpWorkerConnection(port);
+      const connection = self.setUpWorkerConnection(legacyPort);
       // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
       return await self.runLighthouse(url, flags, config, connection);
     }
 
-    const {mainTargetId, mainFrameId, mainSessionId} = params.target;
-    rawConnection = new ConnectionProxy(mainSessionId);
+    const {mainTargetId, mainFrameId, mainSessionId} = args.target;
+    cdpConnection = new ConnectionProxy(mainSessionId);
     puppeteerConnection =
-        await Puppeteer.PuppeteerConnection.getPuppeteerConnection(rawConnection, mainFrameId, mainTargetId);
+        await Puppeteer.PuppeteerConnection.getPuppeteerConnection(cdpConnection, mainFrameId, mainTargetId);
+    const {page} = puppeteerConnection;
 
-    if (method === 'snapshot') {
+    if (action === 'snapshot') {
       // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
-      return await self.runLighthouseSnapshot({
-        url,
-        config,
-        page: puppeteerConnection.page,
-      });
+      return await self.runLighthouseSnapshot({config, page});
+    }
+
+    if (action === 'startTimespan') {
+      // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
+      const timespan = await self.startLighthouseTimespan({config, page});
+      endTimespan = timespan.endTimespan;
+      return;
     }
 
     // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
-    return await self.runLighthouseNavigation({
-      url,
-      config,
-      page: puppeteerConnection.page,
-    });
+    return await self.runLighthouseNavigation(url, {config, page});
   } catch (err) {
     return ({
       fatal: true,
@@ -137,7 +157,10 @@ async function start(method: string, params: any): Promise<unknown> {
       stack: err.stack,
     });
   } finally {
-    puppeteerConnection?.browser.disconnect();
+    // endTimespan will need to use the same connection as startTimespan.
+    if (action !== 'startTimespan') {
+      puppeteerConnection?.browser.disconnect();
+    }
   }
 }
 
@@ -178,34 +201,42 @@ async function fetchLocaleData(locales: string[]): Promise<string|void> {
   return;
 }
 
+/**
+ * `notifyFrontendViaWorkerMessage` and `onFrontendMessage` work with the FE's ProtocolService.
+ *
+ * onFrontendMessage takes action-wrapped messages and either invoking lighthouse or delivering it CDP traffic.
+ * notifyFrontendViaWorkerMessage posts action-wrapped messages to the FE.
+ */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function notifyFrontendViaWorkerMessage(method: string, params: any): void {
-  self.postMessage(JSON.stringify({method, params}));
+function notifyFrontendViaWorkerMessage(action: string, args: any): void {
+  self.postMessage(JSON.stringify({action, args}));
 }
 
-self.onmessage = async(event: MessageEvent): Promise<void> => {
+async function onFrontendMessage(event: MessageEvent): Promise<void> {
   const messageFromFrontend = JSON.parse(event.data);
-  switch (messageFromFrontend.method) {
-    case 'navigation':
-    case 'timespan':
+  switch (messageFromFrontend.action) {
+    case 'startTimespan':
+    case 'endTimespan':
     case 'snapshot':
-    case 'legacyNavigation': {
-      const result = await start(messageFromFrontend.method, messageFromFrontend.params);
+    case 'navigation': {
+      const result = await invokeLH(messageFromFrontend.action, messageFromFrontend.args);
       self.postMessage(JSON.stringify({id: messageFromFrontend.id, result}));
       break;
     }
     case 'dispatchProtocolMessage': {
-      rawConnection?.onMessage?.(
-          JSON.parse(messageFromFrontend.params.message),
+      cdpConnection?.onMessage?.(
+          JSON.parse(messageFromFrontend.args.message),
       );
-      port.onMessage?.(messageFromFrontend.params.message);
+      legacyPort.onMessage?.(messageFromFrontend.args.message);
       break;
     }
     default: {
       throw new Error(`Unknown event: ${event.data}`);
     }
   }
-};
+}
+
+self.onmessage = onFrontendMessage;
 
 // Make lighthouse and traceviewer happy.
 // @ts-ignore https://github.com/GoogleChrome/lighthouse/issues/11628

package/front_end/entrypoints/lighthouse_worker/lighthouse_worker.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './LighthouseService.js';
+import './LighthouseWorkerService.js';
 import '../../third_party/lighthouse/lighthouse-dt-bundle.js';
 
 self.postMessage('workerReady');

package/front_end/models/bindings/CSSWorkspaceBinding.ts

@@ -123,24 +123,10 @@ export class CSSWorkspaceBinding implements SDK.TargetManager.SDKModelObserver<S
 
   propertyUILocation(cssProperty: SDK.CSSProperty.CSSProperty, forName: boolean): Workspace.UISourceCode.UILocation
       |null {
-    const style = cssProperty.ownerStyle;
-    if (!style || style.type !== SDK.CSSStyleDeclaration.Type.Regular || !style.styleSheetId) {
-      return null;
-    }
-    const header = style.cssModel().styleSheetHeaderForId(style.styleSheetId);
-    if (!header) {
+    const rawLocation = this.propertyRawLocation(cssProperty, forName);
+    if (!rawLocation) {
       return null;
     }
-
-    const range = forName ? cssProperty.nameRange() : cssProperty.valueRange();
-    if (!range) {
-      return null;
-    }
-
-    const lineNumber = range.startLine;
-    const columnNumber = range.startColumn;
-    const rawLocation = new SDK.CSSModel.CSSLocation(
-        header, header.lineNumberInSource(lineNumber), header.columnNumberInSource(lineNumber, columnNumber));
     return this.rawLocationToUILocation(rawLocation);
   }
 

package/front_end/models/bindings/SASSSourceMapping.ts

@@ -31,6 +31,7 @@
 import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as Workspace from '../workspace/workspace.js';
 
 import {ContentProviderBasedProject} from './ContentProviderBasedProject.js';
@@ -78,7 +79,7 @@ export class SASSSourceMapping implements SourceMapping {
     for (const sourceURL of sourceMap.sourceURLs()) {
       let binding = bindings.get(sourceURL);
       if (!binding) {
-        binding = new Binding(project, sourceURL);
+        binding = new Binding(project, sourceURL as Platform.DevToolsPath.UrlString);
         bindings.set(sourceURL, binding);
       }
       binding.addSourceMap(sourceMap, header.frameId);
@@ -163,11 +164,11 @@ const uiSourceCodeToBinding = new WeakMap<Workspace.UISourceCode.UISourceCode, B
 
 class Binding {
   readonly #project: ContentProviderBasedProject;
-  readonly #url: string;
+  readonly #url: Platform.DevToolsPath.UrlString;
   referringSourceMaps: SDK.SourceMap.TextSourceMap[];
   uiSourceCode: Workspace.UISourceCode.UISourceCode|null;
 
-  constructor(project: ContentProviderBasedProject, url: string) {
+  constructor(project: ContentProviderBasedProject, url: Platform.DevToolsPath.UrlString) {
     this.#project = project;
     this.#url = url;