lighthouse 10.2.0-dev.20230518 → 10.2.0-dev.20230519

package/core/audits/layout-shift-elements.d.ts

@@ -2,9 +2,10 @@ export default LayoutShiftElements;
 declare class LayoutShiftElements extends Audit {
     /**
      * @param {LH.Artifacts} artifacts
-     * @return {LH.Audit.Product}
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
      */
-    static audit(artifacts: LH.Artifacts): LH.Audit.Product;
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
 }
 export namespace UIStrings {
     const title: string;

package/core/audits/layout-shift-elements.js

@@ -6,6 +6,7 @@
 
 import {Audit} from './audit.js';
 import * as i18n from '../lib/i18n/i18n.js';
+import {CumulativeLayoutShift} from '../computed/metrics/cumulative-layout-shift.js';
 
 const UIStrings = {
   /** Descriptive title of a diagnostic audit that provides up to the top five elements contributing to Cumulative Layout Shift. */
@@ -34,9 +35,10 @@ class LayoutShiftElements extends Audit {
 
   /**
    * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts) {
+  static async audit(artifacts, context) {
     const clsElements = artifacts.TraceElements
       .filter(element => element.traceEventType === 'layout-shift');
 
@@ -61,8 +63,14 @@ class LayoutShiftElements extends Audit {
         {nodeCount: clsElementData.length});
     }
 
+    const {cumulativeLayoutShift: clsSavings} =
+      await CumulativeLayoutShift.request(artifacts.traces[Audit.DEFAULT_PASS], context);
+
     return {
       score: 1,
+      metricSavings: {
+        CLS: clsSavings,
+      },
       notApplicable: details.items.length === 0,
       displayValue,
       details,

package/core/gather/driver/target-manager.d.ts

@@ -18,12 +18,15 @@ export class TargetManager extends TargetManager_base {
     constructor(cdpSession: LH.Puppeteer.CDPSession);
     _enabled: boolean;
     _rootCdpSession: import("../../../types/puppeteer.js").default.CDPSession;
+    _mainFrameId: string;
     /**
      * A map of target id to target/session information. Used to ensure unique
      * attached targets.
      * @type {Map<string, TargetWithSession>}
      */
     _targetIdToTargets: Map<string, TargetWithSession>;
+    /** @type {Map<string, LH.Crdp.Runtime.ExecutionContextDescription>} */
+    _executionContextIdToDescriptions: Map<string, LH.Crdp.Runtime.ExecutionContextDescription>;
     /**
      * @param {LH.Puppeteer.CDPSession} cdpSession
      */
@@ -32,6 +35,15 @@ export class TargetManager extends TargetManager_base {
      * @param {LH.Crdp.Page.FrameNavigatedEvent} frameNavigatedEvent
      */
     _onFrameNavigated(frameNavigatedEvent: LH.Crdp.Page.FrameNavigatedEvent): Promise<void>;
+    /**
+     * @param {LH.Crdp.Runtime.ExecutionContextCreatedEvent} event
+     */
+    _onExecutionContextCreated(event: LH.Crdp.Runtime.ExecutionContextCreatedEvent): void;
+    /**
+     * @param {LH.Crdp.Runtime.ExecutionContextDestroyedEvent} event
+     */
+    _onExecutionContextDestroyed(event: LH.Crdp.Runtime.ExecutionContextDestroyedEvent): void;
+    _onExecutionContextsCleared(): void;
     /**
      * @param {string} sessionId
      * @return {LH.Gatherer.FRProtocolSession}
@@ -42,6 +54,7 @@ export class TargetManager extends TargetManager_base {
      * @return {LH.Gatherer.FRProtocolSession}
      */
     rootSession(): LH.Gatherer.FRProtocolSession;
+    mainFrameExecutionContexts(): import("devtools-protocol").Protocol.Runtime.ExecutionContextDescription[];
     /**
      * Returns a listener for all protocol events from session, and augments the
      * event with the sessionId.

package/core/gather/driver/target-manager.js

@@ -40,6 +40,7 @@ class TargetManager extends ProtocolEventEmitter {
 
     this._enabled = false;
     this._rootCdpSession = cdpSession;
+    this._mainFrameId = '';
 
     /**
      * A map of target id to target/session information. Used to ensure unique
@@ -47,9 +48,14 @@ class TargetManager extends ProtocolEventEmitter {
      * @type {Map<string, TargetWithSession>}
      */
     this._targetIdToTargets = new Map();
+    /** @type {Map<string, LH.Crdp.Runtime.ExecutionContextDescription>} */
+    this._executionContextIdToDescriptions = new Map();
 
     this._onSessionAttached = this._onSessionAttached.bind(this);
     this._onFrameNavigated = this._onFrameNavigated.bind(this);
+    this._onExecutionContextCreated = this._onExecutionContextCreated.bind(this);
+    this._onExecutionContextDestroyed = this._onExecutionContextDestroyed.bind(this);
+    this._onExecutionContextsCleared = this._onExecutionContextsCleared.bind(this);
   }
 
   /**
@@ -97,6 +103,12 @@ class TargetManager extends ProtocolEventEmitter {
     return this._findSession(rootSessionId);
   }
 
+  mainFrameExecutionContexts() {
+    return [...this._executionContextIdToDescriptions.values()].filter(executionContext => {
+      return executionContext.auxData.frameId === this._mainFrameId;
+    });
+  }
+
   /**
    * @param {LH.Puppeteer.CDPSession} cdpSession
    */
@@ -153,6 +165,27 @@ class TargetManager extends ProtocolEventEmitter {
     }
   }
 
+  /**
+   * @param {LH.Crdp.Runtime.ExecutionContextCreatedEvent} event
+   */
+  _onExecutionContextCreated(event) {
+    if (event.context.name === '__puppeteer_utility_world__') return;
+    if (event.context.name === 'lighthouse_isolated_context') return;
+
+    this._executionContextIdToDescriptions.set(event.context.uniqueId, event.context);
+  }
+
+  /**
+   * @param {LH.Crdp.Runtime.ExecutionContextDestroyedEvent} event
+   */
+  _onExecutionContextDestroyed(event) {
+    this._executionContextIdToDescriptions.delete(event.executionContextUniqueId);
+  }
+
+  _onExecutionContextsCleared() {
+    this._executionContextIdToDescriptions.clear();
+  }
+
   /**
    * Returns a listener for all protocol events from session, and augments the
    * event with the sessionId.
@@ -183,10 +216,17 @@ class TargetManager extends ProtocolEventEmitter {
 
     this._enabled = true;
     this._targetIdToTargets = new Map();
+    this._executionContextIdToDescriptions = new Map();
 
     this._rootCdpSession.on('Page.frameNavigated', this._onFrameNavigated);
+    this._rootCdpSession.on('Runtime.executionContextCreated', this._onExecutionContextCreated);
+    this._rootCdpSession.on('Runtime.executionContextDestroyed', this._onExecutionContextDestroyed);
+    this._rootCdpSession.on('Runtime.executionContextsCleared', this._onExecutionContextsCleared);
 
     await this._rootCdpSession.send('Page.enable');
+    await this._rootCdpSession.send('Runtime.enable');
+
+    this._mainFrameId = (await this._rootCdpSession.send('Page.getFrameTree')).frameTree.frame.id;
 
     // Start with the already attached root session.
     await this._onSessionAttached(this._rootCdpSession);
@@ -197,14 +237,23 @@ class TargetManager extends ProtocolEventEmitter {
    */
   async disable() {
     this._rootCdpSession.off('Page.frameNavigated', this._onFrameNavigated);
+    this._rootCdpSession.off('Runtime.executionContextCreated', this._onExecutionContextCreated);
+    this._rootCdpSession.off('Runtime.executionContextDestroyed',
+      this._onExecutionContextDestroyed);
+    this._rootCdpSession.off('Runtime.executionContextsCleared', this._onExecutionContextsCleared);
 
     for (const {cdpSession, protocolListener} of this._targetIdToTargets.values()) {
       cdpSession.off('*', protocolListener);
       cdpSession.off('sessionattached', this._onSessionAttached);
     }
 
+    await this._rootCdpSession.send('Page.disable');
+    await this._rootCdpSession.send('Runtime.disable');
+
     this._enabled = false;
     this._targetIdToTargets = new Map();
+    this._executionContextIdToDescriptions = new Map();
+    this._mainFrameId = '';
   }
 }
 

package/core/gather/gatherers/global-listeners.js

@@ -11,6 +11,8 @@
  * around page unload, but this can be expanded in the future.
  */
 
+import log from 'lighthouse-logger';
+
 import FRGatherer from '../base-gatherer.js';
 
 class GlobalListeners extends FRGatherer {
@@ -61,30 +63,45 @@ class GlobalListeners extends FRGatherer {
   async getArtifact(passContext) {
     const session = passContext.driver.defaultSession;
 
-    // Get a RemoteObject handle to `window`.
-    const {result: {objectId}} = await session.sendCommand('Runtime.evaluate', {
-      expression: 'window',
-      returnByValue: false,
-    });
-    if (!objectId) {
-      throw new Error('Error fetching information about the global object');
-    }
+    /** @type {Array<LH.Artifacts.GlobalListener>} */
+    const listeners = [];
 
-    // And get all its listeners of interest.
-    const {listeners} = await session.sendCommand('DOMDebugger.getEventListeners', {objectId});
-    const filteredListeners = listeners.filter(GlobalListeners._filterForAllowlistedTypes)
-    .map(listener => {
-      const {type, scriptId, lineNumber, columnNumber} = listener;
-      return {
-        type,
-        scriptId,
-        lineNumber,
-        columnNumber,
-      };
-    });
+    for (const executionContext of passContext.driver.targetManager.mainFrameExecutionContexts()) {
+      // Get a RemoteObject handle to `window`.
+      let objectId;
+      try {
+        const {result} = await session.sendCommand('Runtime.evaluate', {
+          expression: 'window',
+          returnByValue: false,
+          uniqueContextId: executionContext.uniqueId,
+        });
+        if (!result.objectId) {
+          throw new Error('Error fetching information about the global object');
+        }
+        objectId = result.objectId;
+      } catch (err) {
+        // Execution context is no longer valid, but don't let that fail the gatherer.
+        log.warn('Execution context is no longer valid', executionContext, err);
+        continue;
+      }
+
+      // And get all its listeners of interest.
+      const response = await session.sendCommand('DOMDebugger.getEventListeners', {objectId});
+      for (const listener of response.listeners) {
+        if (GlobalListeners._filterForAllowlistedTypes(listener)) {
+          const {type, scriptId, lineNumber, columnNumber} = listener;
+          listeners.push({
+            type,
+            scriptId,
+            lineNumber,
+            columnNumber,
+          });
+        }
+      }
+    }
 
     // Dedupe listeners with same underlying data.
-    return this.dedupeListeners(filteredListeners);
+    return this.dedupeListeners(listeners);
   }
 }
 

package/core/legacy/gather/driver.d.ts

@@ -43,6 +43,7 @@ export class Driver implements LH.Gatherer.FRTransitionalDriver {
     private evaluateAsync;
     targetManager: {
         rootSession: () => Driver;
+        mainFrameExecutionContexts: () => LH.Crdp.Runtime.ExecutionContextDescription[];
         /**
          * Bind to *any* protocol event.
          * @param {'protocolevent'} event

package/core/legacy/gather/driver.js

@@ -101,6 +101,17 @@ class Driver {
       rootSession: () => {
         return this.defaultSession;
       },
+      // For legacy driver, only bother supporting access to the default execution context.
+      mainFrameExecutionContexts: () => {
+        // @ts-expect-error - undefined ids are OK for purposes of calling protocol commands like Runtime.evaluate.
+        return [/** @type {LH.Crdp.Runtime.ExecutionContextDescription} */({
+          id: undefined,
+          uniqueId: undefined,
+          origin: '',
+          name: '',
+          auxData: {isDefault: true, type: 'default', frameId: ''},
+        })];
+      },
       /**
        * Bind to *any* protocol event.
        * @param {'protocolevent'} event

package/core/lib/dependency-graph/simulator/network-analyzer.js

@@ -52,11 +52,22 @@ class NetworkAnalyzer {
   static getSummary(values) {
     values.sort((a, b) => a - b);
 
+    let median;
+    if (values.length === 0) {
+      median = values[0];
+    } else if (values.length % 2 === 0) {
+      const a = values[Math.floor((values.length - 1) / 2)];
+      const b = values[Math.floor((values.length - 1) / 2) + 1];
+      median = (a + b) / 2;
+    } else {
+      median = values[Math.floor((values.length - 1) / 2)];
+    }
+
     return {
       min: values[0],
       max: values[values.length - 1],
       avg: values.reduce((a, b) => a + b, 0) / values.length,
-      median: values[Math.floor((values.length - 1) / 2)],
+      median,
     };
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "10.2.0-dev.20230518",
+  "version": "10.2.0-dev.20230519",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {

package/types/gatherer.d.ts

@@ -47,6 +47,7 @@ declare module Gatherer {
     url: () => Promise<string>;
     targetManager: {
       rootSession(): FRProtocolSession;
+      mainFrameExecutionContexts(): Array<Crdp.Runtime.ExecutionContextDescription>;
       on(event: 'protocolevent', callback: (payload: Protocol.RawEventMessage) => void): void
       off(event: 'protocolevent', callback: (payload: Protocol.RawEventMessage) => void): void
     };