chrome-devtools-frontend 1.0.972865 → 1.0.973253

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",

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,15 +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
@@ -95,7 +103,7 @@ async function start(method: string, params: any): Promise<unknown> {
   try {
     // For timespan we only need to perform setup on startTimespan.
     // Config, flags, locale, etc. should be stored in the closure of endTimespan.
-    if (method === 'endTimespan') {
+    if (action === 'endTimespan') {
       if (!endTimespan) {
         throw new Error('Cannot end a timespan before starting one');
       }
@@ -104,35 +112,36 @@ async function start(method: string, params: any): Promise<unknown> {
       return result;
     }
 
-    const locale = await fetchLocaleData(params.locales);
-    const flags = params.flags;
+    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 === 'navigation' && flags.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 {page} = puppeteerConnection =
-        await Puppeteer.PuppeteerConnection.getPuppeteerConnection(rawConnection, mainFrameId, mainTargetId);
+    const {mainTargetId, mainFrameId, mainSessionId} = args.target;
+    cdpConnection = new ConnectionProxy(mainSessionId);
+    puppeteerConnection =
+        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({config, page});
     }
 
-    if (method === 'startTimespan') {
+    if (action === 'startTimespan') {
       // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
       const timespan = await self.startLighthouseTimespan({config, page});
       endTimespan = timespan.endTimespan;
@@ -149,7 +158,7 @@ async function start(method: string, params: any): Promise<unknown> {
     });
   } finally {
     // endTimespan will need to use the same connection as startTimespan.
-    if (method !== 'startTimespan') {
+    if (action !== 'startTimespan') {
       puppeteerConnection?.browser.disconnect();
     }
   }
@@ -192,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) {
+  switch (messageFromFrontend.action) {
     case 'startTimespan':
     case 'endTimespan':
     case 'snapshot':
     case 'navigation': {
-      const result = await start(messageFromFrontend.method, messageFromFrontend.params);
+      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/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/LighthouseProtocolService.ts

@@ -8,6 +8,40 @@ 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 {
@@ -16,13 +50,16 @@ export interface LighthouseRun {
   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);
 
@@ -52,7 +89,7 @@ export class ProtocolService {
       this.dispatchProtocolMessage(message);
     });
 
-    this.rawConnection = connection;
+    this.parallelConnection = connection;
     this.targetInfo = {
       mainTargetId: await childTargetManager.getParentTargetId(),
       mainFrameId: mainFrame.id,
@@ -103,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();
   }
@@ -140,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)});
     }
   }
 
@@ -160,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;
@@ -187,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++;
@@ -214,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/third_party/codemirror.next/bundle.ts

@@ -30,7 +30,7 @@ export {ensureSyntaxTree, indentOnInput, indentUnit,Language, LanguageSupport, s
 export {bracketMatching} from '@codemirror/matchbrackets';
 export {Panel, showPanel} from '@codemirror/panel';
 export {Range, RangeSet, RangeSetBuilder} from '@codemirror/rangeset';
-export {selectNextOccurrence} from '@codemirror/search';
+export { highlightSelectionMatches,selectNextOccurrence} from '@codemirror/search';
 export {
   Annotation, AnnotationType, ChangeDesc, ChangeSet, ChangeSpec, Compartment,
   EditorSelection, EditorState, EditorStateConfig, Extension, Facet, MapMode