lighthouse 11.7.0 → 12.0.0-dev.20240422

package/core/gather/driver/wait-for-condition.js

@@ -498,9 +498,8 @@ async function waitForFullyLoaded(session, networkMonitor, options) {
       if (await isPageHung(session)) {
         log.warn('waitFor', 'Page appears to be hung, killing JavaScript...');
         // We don't await these, as we want to exit with PAGE_HUNG
-        void session.sendCommand('Emulation.setScriptExecutionDisabled', {value: true})
-          .catch(_ => {});
-        void session.sendCommand('Runtime.terminateExecution').catch(_ => {});
+        void session.sendCommandAndIgnore('Emulation.setScriptExecutionDisabled', {value: true});
+        void session.sendCommandAndIgnore('Runtime.terminateExecution');
         throw new LighthouseError(LighthouseError.errors.PAGE_HUNG);
       }
 

package/core/gather/driver.d.ts

@@ -14,6 +14,10 @@ export class Driver implements LH.Gatherer.Driver {
     /** @type {Fetcher|undefined} */
     _fetcher: Fetcher | undefined;
     defaultSession: import("../../types/gatherer.js").default.ProtocolSession;
+    fatalRejection: {
+        promise: Promise<never>;
+        rej: (_: Error) => void;
+    };
     /** @return {LH.Gatherer.Driver['executionContext']} */
     get executionContext(): ExecutionContext;
     get fetcher(): any;
@@ -23,6 +27,14 @@ export class Driver implements LH.Gatherer.Driver {
     url(): Promise<string>;
     /** @return {Promise<void>} */
     connect(): Promise<void>;
+    /**
+     * If the target crashes, we can't continue gathering.
+     *
+     * FWIW, if the target unexpectedly detaches (eg the user closed the tab), pptr will
+     * catch that and reject into our this._cdpSession.send, which we'll alrady handle appropriately
+     * @return {void}
+     */
+    listenForCrashes(): void;
     /** @return {Promise<void>} */
     disconnect(): Promise<void>;
 }

package/core/gather/driver.js

@@ -8,6 +8,7 @@ import log from 'lighthouse-logger';
 
 import {ExecutionContext} from './driver/execution-context.js';
 import {TargetManager} from './driver/target-manager.js';
+import {LighthouseError} from '../lib/lh-error.js';
 import {Fetcher} from './fetcher.js';
 import {NetworkMonitor} from './driver/network-monitor.js';
 
@@ -26,6 +27,7 @@ const throwingSession = {
   once: throwNotConnectedFn,
   off: throwNotConnectedFn,
   sendCommand: throwNotConnectedFn,
+  sendCommandAndIgnore: throwNotConnectedFn,
   dispose: throwNotConnectedFn,
 };
 
@@ -46,6 +48,12 @@ class Driver {
     this._fetcher = undefined;
 
     this.defaultSession = throwingSession;
+
+    // Poor man's Promise.withResolvers()
+    /** @param {Error} _ */
+    let rej = _ => {};
+    const promise = /** @type {Promise<never>} */ (new Promise((_, theRej) => rej = theRej));
+    this.fatalRejection = {promise, rej};
   }
 
   /** @return {LH.Gatherer.Driver['executionContext']} */
@@ -85,11 +93,30 @@ class Driver {
     this._networkMonitor = new NetworkMonitor(this._targetManager);
     await this._networkMonitor.enable();
     this.defaultSession = this._targetManager.rootSession();
+    this.listenForCrashes();
     this._executionContext = new ExecutionContext(this.defaultSession);
     this._fetcher = new Fetcher(this.defaultSession);
     log.timeEnd(status);
   }
 
+  /**
+   * If the target crashes, we can't continue gathering.
+   *
+   * FWIW, if the target unexpectedly detaches (eg the user closed the tab), pptr will
+   * catch that and reject into our this._cdpSession.send, which we'll alrady handle appropriately
+   * @return {void}
+   */
+  listenForCrashes() {
+    this.defaultSession.on('Inspector.targetCrashed', async _ => {
+      log.error('Driver', 'Inspector.targetCrashed');
+      // Manually detach so no more CDP traffic is attempted.
+      // Don't await, else our rejection will be a 'Target closed' protocol error on cross-talk CDP calls.
+      void this.defaultSession.dispose();
+      this.fatalRejection.rej(new LighthouseError(LighthouseError.errors.TARGET_CRASHED));
+    });
+  }
+
+
   /** @return {Promise<void>} */
   async disconnect() {
     if (this.defaultSession === throwingSession) return;

package/core/gather/gatherers/accessibility.js

@@ -43,16 +43,15 @@ async function runA11yChecks() {
       'area-alt': {enabled: false},
       'aria-allowed-role': {enabled: true},
       'aria-braille-equivalent': {enabled: false},
-      'aria-conditional-attr': {enabled: false},
-      'aria-deprecated-role': {enabled: false},
+      'aria-conditional-attr': {enabled: true},
+      'aria-deprecated-role': {enabled: true},
       'aria-dialog-name': {enabled: true},
-      'aria-prohibited-attr': {enabled: false},
+      'aria-prohibited-attr': {enabled: true},
       'aria-roledescription': {enabled: false},
       'aria-treeitem-name': {enabled: true},
       'aria-text': {enabled: true},
       'audio-caption': {enabled: false},
       'blink': {enabled: false},
-      'duplicate-id-active': {enabled: true},
       'duplicate-id': {enabled: false},
       'empty-heading': {enabled: true},
       'frame-focusable-content': {enabled: false},
@@ -79,8 +78,7 @@ async function runA11yChecks() {
       'tabindex': {enabled: true},
       'table-duplicate-name': {enabled: true},
       'table-fake-caption': {enabled: true},
-      // TODO: https://github.com/GoogleChrome/lighthouse/issues/15824
-      // 'target-size': {enabled: true},
+      'target-size': {enabled: true},
       'td-has-header': {enabled: true},
     },
   });

package/core/gather/gatherers/css-usage.d.ts

@@ -1,26 +1,5 @@
 export default CSSUsage;
 declare class CSSUsage extends BaseGatherer {
-    /** @type {LH.Gatherer.ProtocolSession|undefined} */
-    _session: LH.Gatherer.ProtocolSession | undefined;
-    /** @type {Map<string, Promise<LH.Artifacts.CSSStyleSheetInfo|Error>>} */
-    _sheetPromises: Map<string, Promise<LH.Artifacts.CSSStyleSheetInfo | Error>>;
-    /**
-     * Initialize as undefined so we can assert results are fetched.
-     * @type {LH.Crdp.CSS.RuleUsage[]|undefined}
-     */
-    _ruleUsage: LH.Crdp.CSS.RuleUsage[] | undefined;
-    /**
-     * @param {LH.Crdp.CSS.StyleSheetAddedEvent} event
-     */
-    _onStylesheetAdded(event: LH.Crdp.CSS.StyleSheetAddedEvent): void;
-    /**
-     * @param {LH.Gatherer.Context} context
-     */
-    startInstrumentation(context: LH.Gatherer.Context): Promise<void>;
-    /**
-     * @param {LH.Gatherer.Context} context
-     */
-    stopInstrumentation(context: LH.Gatherer.Context): Promise<void>;
     /**
      * @param {LH.Gatherer.Context} context
      * @return {Promise<LH.Artifacts['CSSUsage']>}

package/core/gather/gatherers/css-usage.js

@@ -8,145 +8,35 @@
  * @fileoverview Tracks unused CSS rules.
  */
 
-import log from 'lighthouse-logger';
-
 import BaseGatherer from '../base-gatherer.js';
-import {Sentry} from '../../lib/sentry.js';
 
 class CSSUsage extends BaseGatherer {
-  constructor() {
-    super();
-    /** @type {LH.Gatherer.ProtocolSession|undefined} */
-    this._session = undefined;
-    /** @type {Map<string, Promise<LH.Artifacts.CSSStyleSheetInfo|Error>>} */
-    this._sheetPromises = new Map();
-    /**
-     * Initialize as undefined so we can assert results are fetched.
-     * @type {LH.Crdp.CSS.RuleUsage[]|undefined}
-     */
-    this._ruleUsage = undefined;
-    this._onStylesheetAdded = this._onStylesheetAdded.bind(this);
-  }
-
   /** @type {LH.Gatherer.GathererMeta} */
   meta = {
-    supportedModes: ['snapshot', 'timespan', 'navigation'],
+    supportedModes: ['snapshot', 'navigation'],
   };
 
-  /**
-   * @param {LH.Crdp.CSS.StyleSheetAddedEvent} event
-   */
-  _onStylesheetAdded(event) {
-    if (!this._session) throw new Error('Session not initialized');
-    const styleSheetId = event.header.styleSheetId;
-    const sheetPromise = this._session.sendCommand('CSS.getStyleSheetText', {styleSheetId})
-      .then(content => ({
-        header: event.header,
-        content: content.text,
-      }))
-      .catch(/** @param {Error} err */ (err) => {
-        log.warn(
-          'CSSUsage',
-          `Error fetching content of stylesheet with URL "${event.header.sourceURL}"`
-        );
-        Sentry.captureException(err, {
-          tags: {
-            gatherer: 'CSSUsage',
-          },
-          extra: {
-            url: event.header.sourceURL,
-          },
-          level: 'error',
-        });
-        return err;
-      });
-    this._sheetPromises.set(styleSheetId, sheetPromise);
-  }
-
   /**
    * @param {LH.Gatherer.Context} context
+   * @return {Promise<LH.Artifacts['CSSUsage']>}
    */
-  async startInstrumentation(context) {
+  async getArtifact(context) {
     const session = context.driver.defaultSession;
-    this._session = session;
-
-    // Calling `CSS.enable` will emit events for stylesheets currently on the page.
-    // We want to ignore these events in navigation mode because they are not relevant to the
-    // navigation that is about to happen. Adding the event listener *after* calling `CSS.enable`
-    // ensures that the events for pre-existing stylesheets are ignored.
-    const isNavigation = context.gatherMode === 'navigation';
-    if (!isNavigation) {
-      session.on('CSS.styleSheetAdded', this._onStylesheetAdded);
-    }
+    const executionContext = context.driver.executionContext;
 
     await session.sendCommand('DOM.enable');
     await session.sendCommand('CSS.enable');
     await session.sendCommand('CSS.startRuleUsageTracking');
 
-    if (isNavigation) {
-      session.on('CSS.styleSheetAdded', this._onStylesheetAdded);
-    }
-  }
-
-
-  /**
-   * @param {LH.Gatherer.Context} context
-   */
-  async stopInstrumentation(context) {
-    const session = context.driver.defaultSession;
-    const coverageResponse = await session.sendCommand('CSS.stopRuleUsageTracking');
-    this._ruleUsage = coverageResponse.ruleUsage;
-    session.off('CSS.styleSheetAdded', this._onStylesheetAdded);
-
-    // Ensure we finish fetching all stylesheet contents before disabling the CSS domain
-    await Promise.all(this._sheetPromises.values());
+    // Force style to recompute.
+    // Doesn't appear to be necessary in newer versions of Chrome.
+    await executionContext.evaluateAsync('getComputedStyle(document.body)');
 
+    const {ruleUsage} = await session.sendCommand('CSS.stopRuleUsageTracking');
     await session.sendCommand('CSS.disable');
     await session.sendCommand('DOM.disable');
-  }
-
-  /**
-   * @param {LH.Gatherer.Context} context
-   * @return {Promise<LH.Artifacts['CSSUsage']>}
-   */
-  async getArtifact(context) {
-    const executionContext = context.driver.executionContext;
-
-    if (context.gatherMode === 'snapshot') {
-      await this.startInstrumentation(context);
-
-      // Force style to recompute.
-      // Doesn't appear to be necessary in newer versions of Chrome.
-      await executionContext.evaluateAsync('getComputedStyle(document.body)');
-
-      await this.stopInstrumentation(context);
-    }
-
-    /** @type {Map<string, LH.Artifacts.CSSStyleSheetInfo>} */
-    const dedupedStylesheets = new Map();
-    const sheets = await Promise.all(this._sheetPromises.values());
-
-    for (const sheet of sheets) {
-      // Erroneous sheets will be reported via sentry and the log.
-      // We can ignore them here without throwing a fatal error.
-      if (sheet instanceof Error) {
-        continue;
-      }
-
-      // Exclude empty stylesheets.
-      if (sheet.header.length === 0) {
-        continue;
-      }
-
-      dedupedStylesheets.set(sheet.content, sheet);
-    }
-
-    if (!this._ruleUsage) throw new Error('Issue collecting rule usages');
 
-    return {
-      rules: this._ruleUsage,
-      stylesheets: Array.from(dedupedStylesheets.values()),
-    };
+    return ruleUsage;
   }
 }
 

package/core/gather/gatherers/root-causes.d.ts

@@ -3,10 +3,10 @@ declare class RootCauses extends BaseGatherer {
     static symbol: symbol;
     /**
      * @param {LH.Gatherer.Driver} driver
-     * @param {LH.Artifacts.TraceEngineResult} traceEngineResult
+     * @param {LH.Artifacts.TraceEngineResult['data']} traceParsedData
      * @return {Promise<LH.Artifacts.TraceEngineRootCauses>}
      */
-    static runRootCauseAnalysis(driver: LH.Gatherer.Driver, traceEngineResult: LH.Artifacts.TraceEngineResult): Promise<LH.Artifacts.TraceEngineRootCauses>;
+    static runRootCauseAnalysis(driver: LH.Gatherer.Driver, traceParsedData: LH.Artifacts.TraceEngineResult['data']): Promise<LH.Artifacts.TraceEngineRootCauses>;
     /** @type {LH.Gatherer.GathererMeta<'Trace'>} */
     meta: LH.Gatherer.GathererMeta<'Trace'>;
     /**

package/core/gather/gatherers/root-causes.js

@@ -21,10 +21,10 @@ class RootCauses extends BaseGatherer {
 
   /**
    * @param {LH.Gatherer.Driver} driver
-   * @param {LH.Artifacts.TraceEngineResult} traceEngineResult
+   * @param {LH.Artifacts.TraceEngineResult['data']} traceParsedData
    * @return {Promise<LH.Artifacts.TraceEngineRootCauses>}
    */
-  static async runRootCauseAnalysis(driver, traceEngineResult) {
+  static async runRootCauseAnalysis(driver, traceParsedData) {
     await driver.defaultSession.sendCommand('DOM.enable');
     await driver.defaultSession.sendCommand('CSS.enable');
 
@@ -112,9 +112,10 @@ class RootCauses extends BaseGatherer {
       layoutShifts: {},
     };
     const rootCausesEngine = new TraceEngine.RootCauses(protocolInterface);
-    const layoutShiftEvents = traceEngineResult.LayoutShifts.clusters.flatMap(c => c.events);
+    const layoutShiftEvents = traceParsedData.LayoutShifts.clusters.flatMap(c => c.events);
     for (const event of layoutShiftEvents) {
-      const r = await rootCausesEngine.layoutShifts.rootCausesForEvent(traceEngineResult, event);
+      // @ts-expect-error The data we do get in the trace processor is still enough here
+      const r = await rootCausesEngine.layoutShifts.rootCausesForEvent(traceParsedData, event);
       if (!r) continue;
 
       for (const cause of r.fontChanges) {
@@ -137,7 +138,7 @@ class RootCauses extends BaseGatherer {
   async getArtifact(context) {
     const trace = context.dependencies.Trace;
     const traceEngineResult = await TraceEngineResult.request({trace}, context);
-    return RootCauses.runRootCauseAnalysis(context.driver, traceEngineResult);
+    return RootCauses.runRootCauseAnalysis(context.driver, traceEngineResult.data);
   }
 }
 

package/core/gather/gatherers/stylesheets.d.ts

@@ -0,0 +1,26 @@
+export default Stylesheets;
+declare class Stylesheets extends BaseGatherer {
+    /** @type {LH.Gatherer.ProtocolSession|undefined} */
+    _session: LH.Gatherer.ProtocolSession | undefined;
+    /** @type {Map<string, Promise<LH.Artifacts.CSSStyleSheetInfo|null>>} */
+    _sheetPromises: Map<string, Promise<LH.Artifacts.CSSStyleSheetInfo | null>>;
+    /**
+     * @param {LH.Crdp.CSS.StyleSheetAddedEvent} event
+     */
+    _onStylesheetAdded(event: LH.Crdp.CSS.StyleSheetAddedEvent): void;
+    /**
+     * @param {LH.Gatherer.Context} context
+     */
+    startInstrumentation(context: LH.Gatherer.Context): Promise<void>;
+    /**
+     * @param {LH.Gatherer.Context} context
+     */
+    stopInstrumentation(context: LH.Gatherer.Context): Promise<void>;
+    /**
+     * @param {LH.Gatherer.Context} context
+     * @return {Promise<LH.Artifacts['Stylesheets']>}
+     */
+    getArtifact(context: LH.Gatherer.Context): Promise<LH.Artifacts['Stylesheets']>;
+}
+import BaseGatherer from '../base-gatherer.js';
+//# sourceMappingURL=stylesheets.d.ts.map

package/core/gather/gatherers/stylesheets.js

@@ -0,0 +1,138 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Collects all stylesheets and their contents.
+ */
+
+import log from 'lighthouse-logger';
+
+import BaseGatherer from '../base-gatherer.js';
+import {Sentry} from '../../lib/sentry.js';
+
+class Stylesheets extends BaseGatherer {
+  constructor() {
+    super();
+    /** @type {LH.Gatherer.ProtocolSession|undefined} */
+    this._session = undefined;
+    /** @type {Map<string, Promise<LH.Artifacts.CSSStyleSheetInfo|null>>} */
+    this._sheetPromises = new Map();
+    this._onStylesheetAdded = this._onStylesheetAdded.bind(this);
+  }
+
+  /** @type {LH.Gatherer.GathererMeta} */
+  meta = {
+    supportedModes: ['snapshot', 'timespan', 'navigation'],
+  };
+
+  /**
+   * @param {LH.Crdp.CSS.StyleSheetAddedEvent} event
+   */
+  _onStylesheetAdded(event) {
+    if (!this._session) throw new Error('Session not initialized');
+    const styleSheetId = event.header.styleSheetId;
+    const sheetPromise = this._session.sendCommand('CSS.getStyleSheetText', {styleSheetId})
+      .then(content => ({
+        header: event.header,
+        content: content.text,
+      }))
+      .catch(err => {
+        log.warn(
+          'Stylesheets',
+          `Error fetching content of stylesheet with URL "${event.header.sourceURL}"`
+        );
+        Sentry.captureException(err, {
+          tags: {
+            gatherer: 'Stylesheets',
+          },
+          extra: {
+            url: event.header.sourceURL,
+          },
+          level: 'error',
+        });
+        return null;
+      });
+    this._sheetPromises.set(styleSheetId, sheetPromise);
+  }
+
+  /**
+   * @param {LH.Gatherer.Context} context
+   */
+  async startInstrumentation(context) {
+    const session = context.driver.defaultSession;
+    this._session = session;
+
+    // Calling `CSS.enable` will emit events for stylesheets currently on the page.
+    // We want to ignore these events in navigation mode because they are not relevant to the
+    // navigation that is about to happen. Adding the event listener *after* calling `CSS.enable`
+    // ensures that the events for pre-existing stylesheets are ignored.
+    const isNavigation = context.gatherMode === 'navigation';
+    if (!isNavigation) {
+      session.on('CSS.styleSheetAdded', this._onStylesheetAdded);
+    }
+
+    await session.sendCommand('DOM.enable');
+    await session.sendCommand('CSS.enable');
+
+    if (isNavigation) {
+      session.on('CSS.styleSheetAdded', this._onStylesheetAdded);
+    }
+  }
+
+
+  /**
+   * @param {LH.Gatherer.Context} context
+   */
+  async stopInstrumentation(context) {
+    const session = context.driver.defaultSession;
+    session.off('CSS.styleSheetAdded', this._onStylesheetAdded);
+
+    // Ensure we finish fetching all stylesheet contents before disabling the CSS domain
+    await Promise.all(this._sheetPromises.values());
+
+    await session.sendCommand('CSS.disable');
+    await session.sendCommand('DOM.disable');
+  }
+
+  /**
+   * @param {LH.Gatherer.Context} context
+   * @return {Promise<LH.Artifacts['Stylesheets']>}
+   */
+  async getArtifact(context) {
+    const executionContext = context.driver.executionContext;
+
+    if (context.gatherMode === 'snapshot') {
+      await this.startInstrumentation(context);
+
+      // Force style to recompute.
+      // Doesn't appear to be necessary in newer versions of Chrome.
+      await executionContext.evaluateAsync('getComputedStyle(document.body)');
+
+      await this.stopInstrumentation(context);
+    }
+
+    /** @type {Map<string, LH.Artifacts.CSSStyleSheetInfo>} */
+    const dedupedStylesheets = new Map();
+    const sheets = await Promise.all(this._sheetPromises.values());
+
+    for (const sheet of sheets) {
+      // Erroneous sheets will be reported via sentry and the log.
+      // We can ignore them here without throwing a fatal error.
+      if (!sheet) continue;
+
+      // Exclude empty stylesheets.
+      if (sheet.header.length === 0) {
+        continue;
+      }
+
+      dedupedStylesheets.set(sheet.content, sheet);
+    }
+
+    return Array.from(dedupedStylesheets.values());
+  }
+}
+
+export default Stylesheets;

package/core/gather/gatherers/trace-elements.d.ts

@@ -9,37 +9,28 @@ export type TraceElementData = {
     type?: string;
 };
 declare class TraceElements extends BaseGatherer {
-    /**
-     * This function finds the top (up to 15) elements that shift on the page.
-     *
-     * @param {LH.Trace} trace
-     * @param {LH.Gatherer.Context} context
-     * @return {Promise<Array<{nodeId: number}>>}
-     */
-    static getTopLayoutShiftElements(trace: LH.Trace, context: LH.Gatherer.Context): Promise<Array<{
-        nodeId: number;
-    }>>;
     /**
      * We want to a single representative node to represent the shift, so let's pick
      * the one with the largest impact (size x distance moved).
      *
      * @param {LH.Artifacts.TraceImpactedNode[]} impactedNodes
      * @param {Map<number, number>} impactByNodeId
+     * @param {import('../../lib/trace-engine.js').SaneSyntheticLayoutShift} event Only for debugging
      * @return {number|undefined}
      */
-    static getBiggestImpactNodeForShiftEvent(impactedNodes: LH.Artifacts.TraceImpactedNode[], impactByNodeId: Map<number, number>): number | undefined;
+    static getBiggestImpactNodeForShiftEvent(impactedNodes: LH.Artifacts.TraceImpactedNode[], impactByNodeId: Map<number, number>, event: import('../../lib/trace-engine.js').SaneSyntheticLayoutShift): number | undefined;
     /**
      * This function finds the top (up to 15) layout shifts on the page, and returns
      * the id of the largest impacted node of each shift, along with any related nodes
      * that may have caused the shift.
      *
      * @param {LH.Trace} trace
-     * @param {LH.Artifacts.TraceEngineResult} traceEngineResult
+     * @param {LH.Artifacts.TraceEngineResult['data']} traceEngineResult
      * @param {LH.Artifacts.TraceEngineRootCauses} rootCauses
      * @param {LH.Gatherer.Context} context
      * @return {Promise<Array<{nodeId: number}>>}
      */
-    static getTopLayoutShifts(trace: LH.Trace, traceEngineResult: LH.Artifacts.TraceEngineResult, rootCauses: LH.Artifacts.TraceEngineRootCauses, context: LH.Gatherer.Context): Promise<Array<{
+    static getTopLayoutShifts(trace: LH.Trace, traceEngineResult: LH.Artifacts.TraceEngineResult['data'], rootCauses: LH.Artifacts.TraceEngineRootCauses, context: LH.Gatherer.Context): Promise<Array<{
         nodeId: number;
     }>>;
     /**