lighthouse 11.6.0-dev.20240312 → 11.6.0-dev.20240314

package/core/audits/metrics/interaction-to-next-paint.js

@@ -70,9 +70,7 @@ class InteractionToNextPaint extends Audit {
       return {score: null, notApplicable: true};
     }
 
-    // TODO: remove workaround once 103.0.5052.0 is sufficiently released.
-    const timing = interactionEvent.name === 'FallbackTiming' ?
-        interactionEvent.duration : interactionEvent.args.data.duration;
+    const timing = interactionEvent.args.data.duration;
 
     return {
       score: Audit.computeLogNormalScore({p10: context.options.p10, median: context.options.median},

package/core/audits/work-during-interaction.js

@@ -14,7 +14,6 @@ import {taskGroups} from '../lib/tracehouse/task-groups.js';
 import {TraceProcessor} from '../lib/tracehouse/trace-processor.js';
 import {getExecutionTimingsByURL} from '../lib/tracehouse/task-summary.js';
 import InteractionToNextPaint from './metrics/interaction-to-next-paint.js';
-import {LighthouseError} from '../lib/lh-error.js';
 
 /** @typedef {import('../computed/metrics/responsiveness.js').EventTimingEvent} EventTimingEvent */
 /** @typedef {import('../lib/tracehouse/main-thread-tasks.js').TaskNode} TaskNode */
@@ -243,13 +242,6 @@ class WorkDuringInteraction extends Audit {
         metricSavings: {INP: 0},
       };
     }
-    // TODO: remove workaround once 103.0.5052.0 is sufficiently released.
-    if (interactionEvent.name === 'FallbackTiming') {
-      throw new LighthouseError(
-        LighthouseError.errors.UNSUPPORTED_OLD_CHROME,
-        {featureName: 'detailed EventTiming trace events'}
-      );
-    }
 
     const auditDetailsItems = [];
 

package/core/computed/metrics/responsiveness.d.ts

@@ -38,21 +38,13 @@ export type EventTimingEvent = LH.Trace.AsyncEvent & {
         data: EventTimingData;
     };
 };
-/**
- * A fallback EventTiming placeholder, used if updated EventTiming events are not available.
- * TODO: Remove once 103.0.5052.0 is sufficiently released.
- */
-export type FallbackTimingEvent = {
-    name: 'FallbackTiming';
-    duration: number;
-};
 declare const ResponsivenessComputed: typeof Responsiveness & {
     request: (dependencies: {
         trace: LH.Trace;
         settings: LH.Audit.Context['settings'];
     }, context: import("../../../types/utility-types.js").default.ImmutableObject<{
         computedCache: Map<string, import("../../lib/arbitrary-equality-map.js").ArbitraryEqualityMap>;
-    }>) => Promise<EventTimingEvent | FallbackTimingEvent | null>;
+    }>) => Promise<EventTimingEvent | null>;
 };
 declare class Responsiveness {
     /**
@@ -70,18 +62,18 @@ declare class Responsiveness {
      * one interaction had this duration by returning the first found.
      * @param {ResponsivenessEvent} responsivenessEvent
      * @param {LH.Trace} trace
-     * @return {EventTimingEvent|FallbackTimingEvent}
+     * @return {EventTimingEvent}
      */
-    static findInteractionEvent(responsivenessEvent: ResponsivenessEvent, { traceEvents }: LH.Trace): EventTimingEvent | FallbackTimingEvent;
+    static findInteractionEvent(responsivenessEvent: ResponsivenessEvent, { traceEvents }: LH.Trace): EventTimingEvent;
     /**
      * @param {{trace: LH.Trace, settings: LH.Audit.Context['settings']}} data
      * @param {LH.Artifacts.ComputedContext} context
-     * @return {Promise<EventTimingEvent|FallbackTimingEvent|null>}
+     * @return {Promise<EventTimingEvent|null>}
      */
     static compute_(data: {
         trace: LH.Trace;
         settings: LH.Audit.Context['settings'];
-    }, context: LH.Artifacts.ComputedContext): Promise<EventTimingEvent | FallbackTimingEvent | null>;
+    }, context: LH.Artifacts.ComputedContext): Promise<EventTimingEvent | null>;
 }
 import { ProcessedTrace } from '../processed-trace.js';
 //# sourceMappingURL=responsiveness.d.ts.map

package/core/computed/metrics/responsiveness.js

@@ -24,14 +24,10 @@
  * @property {number} interactionId
  */
 /** @typedef {LH.Trace.AsyncEvent & {name: 'EventTiming', args: {data: EventTimingData}}} EventTimingEvent */
-/**
- * A fallback EventTiming placeholder, used if updated EventTiming events are not available.
- * TODO: Remove once 103.0.5052.0 is sufficiently released.
- * @typedef {{name: 'FallbackTiming', duration: number}} FallbackTimingEvent
- */
 
 import {ProcessedTrace} from '../processed-trace.js';
 import {makeComputedArtifact} from '../computed-artifact.js';
+import {LighthouseError} from '../../lib/lh-error.js';
 
 const KEYBOARD_EVENTS = new Set(['keydown', 'keypress', 'keyup']);
 const CLICK_TAP_DRAG_EVENTS = new Set([
@@ -79,7 +75,7 @@ class Responsiveness {
    * one interaction had this duration by returning the first found.
    * @param {ResponsivenessEvent} responsivenessEvent
    * @param {LH.Trace} trace
-   * @return {EventTimingEvent|FallbackTimingEvent}
+   * @return {EventTimingEvent}
    */
   static findInteractionEvent(responsivenessEvent, {traceEvents}) {
     const candidates = traceEvents.filter(/** @return {evt is EventTimingEvent} */ evt => {
@@ -87,15 +83,15 @@ class Responsiveness {
       return evt.name === 'EventTiming' && evt.ph !== 'e';
     });
 
-    // If trace is from < m103, the timestamps cannot be trusted, so we craft a fallback
-    // <m103 traces (bad) had a   args.frame
+    // If trace is from < m103, the timestamps cannot be trusted
+    // <m103 traces (bad) had a   args.frame (we used to provide a fallback trace event, but not
+    //                                        any more)
     // m103+ traces (good) have a args.data.frame (https://crrev.com/c/3632661)
-    // TODO(compat): remove FallbackTiming handling when we don't care about <m103
     if (candidates.length && candidates.every(candidate => !candidate.args.data?.frame)) {
-      return {
-        name: 'FallbackTiming',
-        duration: responsivenessEvent.args.data.maxDuration,
-      };
+      throw new LighthouseError(
+        LighthouseError.errors.UNSUPPORTED_OLD_CHROME,
+        {featureName: 'detailed EventTiming trace events'}
+      );
     }
 
     const {maxDuration, interactionType} = responsivenessEvent.args.data;
@@ -136,7 +132,7 @@ class Responsiveness {
   /**
    * @param {{trace: LH.Trace, settings: LH.Audit.Context['settings']}} data
    * @param {LH.Artifacts.ComputedContext} context
-   * @return {Promise<EventTimingEvent|FallbackTimingEvent|null>}
+   * @return {Promise<EventTimingEvent|null>}
    */
   static async compute_(data, context) {
     const {settings, trace} = data;

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

@@ -12,15 +12,7 @@ declare class CSSUsage extends BaseGatherer {
     /**
      * @param {LH.Crdp.CSS.StyleSheetAddedEvent} event
      */
-    _onStylesheetAdded(event: LH.Crdp.CSS.StyleSheetAddedEvent): Promise<void>;
-    /**
-     * @param {LH.Gatherer.Context} context
-     */
-    startCSSUsageTracking(context: LH.Gatherer.Context): Promise<void>;
-    /**
-     * @param {LH.Gatherer.Context} context
-     */
-    stopCSSUsageTracking(context: LH.Gatherer.Context): Promise<void>;
+    _onStylesheetAdded(event: LH.Crdp.CSS.StyleSheetAddedEvent): void;
     /**
      * @param {LH.Gatherer.Context} context
      */

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

@@ -36,7 +36,7 @@ class CSSUsage extends BaseGatherer {
   /**
    * @param {LH.Crdp.CSS.StyleSheetAddedEvent} event
    */
-  async _onStylesheetAdded(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})
@@ -66,41 +66,43 @@ class CSSUsage extends BaseGatherer {
   /**
    * @param {LH.Gatherer.Context} context
    */
-  async startCSSUsageTracking(context) {
+  async startInstrumentation(context) {
     const session = context.driver.defaultSession;
     this._session = session;
-    session.on('CSS.styleSheetAdded', this._onStylesheetAdded);
+
+    // 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');
     await session.sendCommand('CSS.startRuleUsageTracking');
+
+    if (isNavigation) {
+      session.on('CSS.styleSheetAdded', this._onStylesheetAdded);
+    }
   }
 
 
   /**
    * @param {LH.Gatherer.Context} context
    */
-  async stopCSSUsageTracking(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);
-  }
 
-  /**
-   * @param {LH.Gatherer.Context} context
-   */
-  async startInstrumentation(context) {
-    if (context.gatherMode !== 'timespan') return;
-    await this.startCSSUsageTracking(context);
-  }
+    // Ensure we finish fetching all stylesheet contents before disabling the CSS domain
+    await Promise.all(this._sheetPromises.values());
 
-  /**
-   * @param {LH.Gatherer.Context} context
-   */
-  async stopInstrumentation(context) {
-    if (context.gatherMode !== 'timespan') return;
-    await this.stopCSSUsageTracking(context);
+    await session.sendCommand('CSS.disable');
+    await session.sendCommand('DOM.disable');
   }
 
   /**
@@ -108,17 +110,16 @@ class CSSUsage extends BaseGatherer {
    * @return {Promise<LH.Artifacts['CSSUsage']>}
    */
   async getArtifact(context) {
-    const session = context.driver.defaultSession;
     const executionContext = context.driver.executionContext;
 
-    if (context.gatherMode !== 'timespan') {
-      await this.startCSSUsageTracking(context);
+    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.stopCSSUsageTracking(context);
+      await this.stopInstrumentation(context);
     }
 
     /** @type {Map<string, LH.Artifacts.CSSStyleSheetInfo>} */
@@ -140,9 +141,6 @@ class CSSUsage extends BaseGatherer {
       dedupedStylesheets.set(sheet.content, sheet);
     }
 
-    await session.sendCommand('CSS.disable');
-    await session.sendCommand('DOM.disable');
-
     if (!this._ruleUsage) throw new Error('Issue collecting rule usages');
 
     return {

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

@@ -124,9 +124,7 @@ class RootCauses extends BaseGatherer {
       rootCauses.layoutShifts[layoutShiftEvents.indexOf(event)] = r;
     }
 
-    // Yeah this gatherer enabled it, and so you'd think it should disable it too...
-    // ...but we don't give gatherers their own session so this stomps on others.
-    // await driver.defaultSession.sendCommand('DOM.disable');
+    await driver.defaultSession.sendCommand('DOM.disable');
     await driver.defaultSession.sendCommand('CSS.disable');
 
     return rootCauses;

package/core/gather/gatherers/trace-elements.js

@@ -155,7 +155,7 @@ class TraceElements extends BaseGatherer {
     const {settings} = context;
     try {
       const responsivenessEvent = await Responsiveness.request({trace, settings}, context);
-      if (!responsivenessEvent || responsivenessEvent.name === 'FallbackTiming') return;
+      if (!responsivenessEvent) return;
       return {nodeId: responsivenessEvent.args.data.nodeId};
     } catch {
       // Don't let responsiveness errors sink the rest of the gatherer.

package/package.json

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