lighthouse 11.7.0-dev.20240416 → 11.7.0-dev.20240418

package/core/config/default-config.js

@@ -13,10 +13,6 @@ import * as i18n from '../lib/i18n/i18n.js';
 const UIStrings = {
   /** Title of the Performance category of audits. Equivalent to 'Web performance', this term is inclusive of all web page speed and loading optimization topics. Also used as a label of a score gauge; try to limit to 20 characters. */
   performanceCategoryTitle: 'Performance',
-  /** Title of the Budgets section of the Performance Category. 'Budgets' refers to a budget (like a financial budget), but applied to the amount of resources on a page, rather than money. */
-  budgetsGroupTitle: 'Budgets',
-  /** Description of the Budgets section of the Performance category. Within this section the budget results are displayed. */
-  budgetsGroupDescription: 'Performance budgets set standards for the performance of your site.',
   /** Title of the speed metrics section of the Performance category. Within this section are various speed metrics which quantify the pageload performance into values presented in seconds and milliseconds. */
   metricGroupTitle: 'Metrics',
   /** Title of an opportunity sub-section of the Performance category. Within this section are audits with imperative titles that suggest actions the user can take to improve the time of the first initial render of the webpage. */
@@ -136,6 +132,7 @@ const defaultConfig = {
     {id: 'Scripts', gatherer: 'scripts'},
     {id: 'SourceMaps', gatherer: 'source-maps'},
     {id: 'Stacks', gatherer: 'stacks'},
+    {id: 'Stylesheets', gatherer: 'stylesheets'},
     {id: 'TraceElements', gatherer: 'trace-elements'},
     {id: 'ViewportDimensions', gatherer: 'viewport-dimensions'},
 
@@ -183,8 +180,6 @@ const defaultConfig = {
     'network-server-latency',
     'main-thread-tasks',
     'metrics',
-    'performance-budget',
-    'timing-budget',
     'resource-summary',
     'third-party-summary',
     'third-party-facades',
@@ -202,12 +197,15 @@ const defaultConfig = {
     'accessibility/aria-allowed-attr',
     'accessibility/aria-allowed-role',
     'accessibility/aria-command-name',
+    'accessibility/aria-conditional-attr',
+    'accessibility/aria-deprecated-role',
     'accessibility/aria-dialog-name',
     'accessibility/aria-hidden-body',
     'accessibility/aria-hidden-focus',
     'accessibility/aria-input-field-name',
     'accessibility/aria-meter-name',
     'accessibility/aria-progressbar-name',
+    'accessibility/aria-prohibited-attr',
     'accessibility/aria-required-attr',
     'accessibility/aria-required-children',
     'accessibility/aria-required-parent',
@@ -312,10 +310,6 @@ const defaultConfig = {
     'metrics': {
       title: str_(UIStrings.metricGroupTitle),
     },
-    'budgets': {
-      title: str_(UIStrings.budgetsGroupTitle),
-      description: str_(UIStrings.budgetsGroupDescription),
-    },
     'diagnostics': {
       title: str_(UIStrings.diagnosticsGroupTitle),
       description: str_(UIStrings.diagnosticsGroupDescription),
@@ -437,10 +431,6 @@ const defaultConfig = {
         {id: 'work-during-interaction', weight: 0, group: 'diagnostics'},
         {id: 'bf-cache', weight: 0, group: 'diagnostics'},
 
-        // Budget audits.
-        {id: 'performance-budget', weight: 0, group: 'budgets'},
-        {id: 'timing-budget', weight: 0, group: 'budgets'},
-
         // Audits past this point contain useful data but are not displayed with other audits.
         {id: 'network-requests', weight: 0, group: 'hidden'},
         {id: 'network-rtt', weight: 0, group: 'hidden'},
@@ -468,12 +458,15 @@ const defaultConfig = {
         {id: 'aria-allowed-attr', weight: 10, group: 'a11y-aria'},
         {id: 'aria-allowed-role', weight: 1, group: 'a11y-aria'},
         {id: 'aria-command-name', weight: 7, group: 'a11y-aria'},
+        {id: 'aria-conditional-attr', weight: 7, group: 'a11y-aria'},
+        {id: 'aria-deprecated-role', weight: 1, group: 'a11y-aria'},
         {id: 'aria-dialog-name', weight: 7, group: 'a11y-aria'},
         {id: 'aria-hidden-body', weight: 10, group: 'a11y-aria'},
         {id: 'aria-hidden-focus', weight: 7, group: 'a11y-aria'},
         {id: 'aria-input-field-name', weight: 7, group: 'a11y-aria'},
         {id: 'aria-meter-name', weight: 7, group: 'a11y-aria'},
         {id: 'aria-progressbar-name', weight: 7, group: 'a11y-aria'},
+        {id: 'aria-prohibited-attr', weight: 7, group: 'a11y-aria'},
         {id: 'aria-required-attr', weight: 10, group: 'a11y-aria'},
         {id: 'aria-required-children', weight: 10, group: 'a11y-aria'},
         {id: 'aria-required-parent', weight: 10, group: 'a11y-aria'},

package/core/gather/gatherers/accessibility.js

@@ -43,10 +43,10 @@ async function runA11yChecks() {
       'area-alt': {enabled: false},
       'aria-allowed-role': {enabled: true},
       'aria-braille-equivalent': {enabled: false},
-      'aria-conditional-attr': {enabled: false},
-      'aria-deprecated-role': {enabled: false},
+      'aria-conditional-attr': {enabled: true},
+      'aria-deprecated-role': {enabled: true},
       'aria-dialog-name': {enabled: true},
-      'aria-prohibited-attr': {enabled: false},
+      'aria-prohibited-attr': {enabled: true},
       'aria-roledescription': {enabled: false},
       'aria-treeitem-name': {enabled: true},
       'aria-text': {enabled: true},

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

@@ -1,26 +1,5 @@
 export default CSSUsage;
 declare class CSSUsage extends BaseGatherer {
-    /** @type {LH.Gatherer.ProtocolSession|undefined} */
-    _session: LH.Gatherer.ProtocolSession | undefined;
-    /** @type {Map<string, Promise<LH.Artifacts.CSSStyleSheetInfo|Error>>} */
-    _sheetPromises: Map<string, Promise<LH.Artifacts.CSSStyleSheetInfo | Error>>;
-    /**
-     * Initialize as undefined so we can assert results are fetched.
-     * @type {LH.Crdp.CSS.RuleUsage[]|undefined}
-     */
-    _ruleUsage: LH.Crdp.CSS.RuleUsage[] | undefined;
-    /**
-     * @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['CSSUsage']>}

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

@@ -8,145 +8,35 @@
  * @fileoverview Tracks unused CSS rules.
  */
 
-import log from 'lighthouse-logger';
-
 import BaseGatherer from '../base-gatherer.js';
-import {Sentry} from '../../lib/sentry.js';
 
 class CSSUsage extends BaseGatherer {
-  constructor() {
-    super();
-    /** @type {LH.Gatherer.ProtocolSession|undefined} */
-    this._session = undefined;
-    /** @type {Map<string, Promise<LH.Artifacts.CSSStyleSheetInfo|Error>>} */
-    this._sheetPromises = new Map();
-    /**
-     * Initialize as undefined so we can assert results are fetched.
-     * @type {LH.Crdp.CSS.RuleUsage[]|undefined}
-     */
-    this._ruleUsage = undefined;
-    this._onStylesheetAdded = this._onStylesheetAdded.bind(this);
-  }
-
   /** @type {LH.Gatherer.GathererMeta} */
   meta = {
-    supportedModes: ['snapshot', 'timespan', 'navigation'],
+    supportedModes: ['snapshot', '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(/** @param {Error} err */ (err) => {
-        log.warn(
-          'CSSUsage',
-          `Error fetching content of stylesheet with URL "${event.header.sourceURL}"`
-        );
-        Sentry.captureException(err, {
-          tags: {
-            gatherer: 'CSSUsage',
-          },
-          extra: {
-            url: event.header.sourceURL,
-          },
-          level: 'error',
-        });
-        return err;
-      });
-    this._sheetPromises.set(styleSheetId, sheetPromise);
-  }
-
   /**
    * @param {LH.Gatherer.Context} context
+   * @return {Promise<LH.Artifacts['CSSUsage']>}
    */
-  async startInstrumentation(context) {
+  async getArtifact(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);
-    }
+    const executionContext = context.driver.executionContext;
 
     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 stopInstrumentation(context) {
-    const session = context.driver.defaultSession;
-    const coverageResponse = await session.sendCommand('CSS.stopRuleUsageTracking');
-    this._ruleUsage = coverageResponse.ruleUsage;
-    session.off('CSS.styleSheetAdded', this._onStylesheetAdded);
-
-    // Ensure we finish fetching all stylesheet contents before disabling the CSS domain
-    await Promise.all(this._sheetPromises.values());
+    // Force style to recompute.
+    // Doesn't appear to be necessary in newer versions of Chrome.
+    await executionContext.evaluateAsync('getComputedStyle(document.body)');
 
+    const {ruleUsage} = await session.sendCommand('CSS.stopRuleUsageTracking');
     await session.sendCommand('CSS.disable');
     await session.sendCommand('DOM.disable');
-  }
-
-  /**
-   * @param {LH.Gatherer.Context} context
-   * @return {Promise<LH.Artifacts['CSSUsage']>}
-   */
-  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 instanceof Error) {
-        continue;
-      }
-
-      // Exclude empty stylesheets.
-      if (sheet.header.length === 0) {
-        continue;
-      }
-
-      dedupedStylesheets.set(sheet.content, sheet);
-    }
-
-    if (!this._ruleUsage) throw new Error('Issue collecting rule usages');
 
-    return {
-      rules: this._ruleUsage,
-      stylesheets: Array.from(dedupedStylesheets.values()),
-    };
+    return ruleUsage;
   }
 }
 

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);