core(stylesheets): disable transient stylesheet detection (#16121)

Author: adamraine

core/gather/gatherers/stylesheets.js

@@ -60,63 +60,32 @@ class Stylesheets extends BaseGatherer {
 
   /**
    * @param {LH.Gatherer.Context} context
+   * @return {Promise<LH.Artifacts['Stylesheets']>}
    */
-  async startInstrumentation(context) {
+  async getArtifact(context) {
+    const executionContext = context.driver.executionContext;
     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);
-    }
+    session.on('CSS.styleSheetAdded', this._onStylesheetAdded);
 
     await session.sendCommand('DOM.enable');
     await session.sendCommand('CSS.enable');
 
-    if (isNavigation) {
-      session.on('CSS.styleSheetAdded', this._onStylesheetAdded);
-    }
-  }
-
+    // Force style to recompute.
+    // Doesn't appear to be necessary in newer versions of Chrome.
+    await executionContext.evaluateAsync('getComputedStyle(document.body)');
 
-  /**
-   * @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());
+    const sheets = 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.

core/test/gather/gatherers/stylesheets-test.js

@@ -85,7 +85,8 @@ describe('Stylesheets gatherer', () => {
       .mockEvent('CSS.styleSheetAdded', {header: {styleSheetId: '2'}});
     context.driver.defaultSession.sendCommand
       .mockResponse('DOM.enable')
-      .mockResponse('CSS.enable')
+      // @ts-expect-error - Force events to emit.
+      .mockResponse('CSS.enable', flushAllTimersAndMicrotasks)
       .mockResponse('CSS.getStyleSheetText', () => {
         throw new Error('Sheet not found');
       })