lighthouse 11.6.0-dev.20240312 → 11.6.0-dev.20240313

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/package.json

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