lighthouse 11.7.0-dev.20240416 → 11.7.0-dev.20240417

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/lib/i18n/i18n.d.ts

@@ -19,7 +19,6 @@ export namespace UIStrings {
     const columnRequests: string;
     const columnName: string;
     const columnSource: string;
-    const columnOverBudget: string;
     const columnElement: string;
     const columnStartTime: string;
     const columnDuration: string;

package/core/lib/i18n/i18n.js

@@ -57,8 +57,6 @@ const UIStrings = {
   columnName: 'Name',
   /** Label for a column in a data table; entries will be the locations of JavaScript or CSS code, e.g. the name of a Javascript package or module. */
   columnSource: 'Source',
-  /** Label for a column in a data table; entries will be how much a predetermined budget has been exeeded by. Depending on the context, this number could represent an excess in quantity or size of network requests, or, an excess in the duration of time that it takes for the page to load.*/
-  columnOverBudget: 'Over Budget',
   /** Label for a column in a data table; entries will be a representation of a DOM element. */
   columnElement: 'Element',
   /** Label for a column in a data table; entries will be the number of milliseconds since the page started loading. */

package/core/runner.js

@@ -298,7 +298,6 @@ class Runner {
         auditMode: undefined,
         output: undefined,
         channel: undefined,
-        budgets: undefined,
       };
       const normalizedGatherSettings = Object.assign({}, artifacts.settings, overrides);
       const normalizedAuditSettings = Object.assign({}, settings, overrides);