From d10ea2da9d825fe32d9b19c15836759e46537e39 Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Wed, 17 Jul 2024 10:54:04 -0500
Subject: [PATCH] core(stylesheets): disable transient stylesheet detection

---
 core/gather/gatherers/stylesheets.js          | 47 ++++---------------
 .../test/gather/gatherers/stylesheets-test.js |  3 +-
 2 files changed, 10 insertions(+), 40 deletions(-)

diff --git a/core/gather/gatherers/stylesheets.js b/core/gather/gatherers/stylesheets.js
index e08b6926e03f..e5cbfd369787 100644
--- a/core/gather/gatherers/stylesheets.js
+++ b/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.
diff --git a/core/test/gather/gatherers/stylesheets-test.js b/core/test/gather/gatherers/stylesheets-test.js
index 29206f428450..d6eeaba438b8 100644
--- a/core/test/gather/gatherers/stylesheets-test.js
+++ b/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');
       })