lighthouse 11.7.1 → 12.0.0

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/root-causes.d.ts

@@ -3,10 +3,10 @@ declare class RootCauses extends BaseGatherer {
     static symbol: symbol;
     /**
      * @param {LH.Gatherer.Driver} driver
-     * @param {LH.Artifacts.TraceEngineResult} traceEngineResult
+     * @param {LH.Artifacts.TraceEngineResult['data']} traceParsedData
      * @return {Promise<LH.Artifacts.TraceEngineRootCauses>}
      */
-    static runRootCauseAnalysis(driver: LH.Gatherer.Driver, traceEngineResult: LH.Artifacts.TraceEngineResult): Promise<LH.Artifacts.TraceEngineRootCauses>;
+    static runRootCauseAnalysis(driver: LH.Gatherer.Driver, traceParsedData: LH.Artifacts.TraceEngineResult['data']): Promise<LH.Artifacts.TraceEngineRootCauses>;
     /** @type {LH.Gatherer.GathererMeta<'Trace'>} */
     meta: LH.Gatherer.GathererMeta<'Trace'>;
     /**

package/core/gather/gatherers/root-causes.js

@@ -21,10 +21,10 @@ class RootCauses extends BaseGatherer {
 
   /**
    * @param {LH.Gatherer.Driver} driver
-   * @param {LH.Artifacts.TraceEngineResult} traceEngineResult
+   * @param {LH.Artifacts.TraceEngineResult['data']} traceParsedData
    * @return {Promise<LH.Artifacts.TraceEngineRootCauses>}
    */
-  static async runRootCauseAnalysis(driver, traceEngineResult) {
+  static async runRootCauseAnalysis(driver, traceParsedData) {
     await driver.defaultSession.sendCommand('DOM.enable');
     await driver.defaultSession.sendCommand('CSS.enable');
 
@@ -112,9 +112,10 @@ class RootCauses extends BaseGatherer {
       layoutShifts: {},
     };
     const rootCausesEngine = new TraceEngine.RootCauses(protocolInterface);
-    const layoutShiftEvents = traceEngineResult.LayoutShifts.clusters.flatMap(c => c.events);
+    const layoutShiftEvents = traceParsedData.LayoutShifts.clusters.flatMap(c => c.events);
     for (const event of layoutShiftEvents) {
-      const r = await rootCausesEngine.layoutShifts.rootCausesForEvent(traceEngineResult, event);
+      // @ts-expect-error The data we do get in the trace processor is still enough here
+      const r = await rootCausesEngine.layoutShifts.rootCausesForEvent(traceParsedData, event);
       if (!r) continue;
 
       for (const cause of r.fontChanges) {
@@ -137,7 +138,7 @@ class RootCauses extends BaseGatherer {
   async getArtifact(context) {
     const trace = context.dependencies.Trace;
     const traceEngineResult = await TraceEngineResult.request({trace}, context);
-    return RootCauses.runRootCauseAnalysis(context.driver, traceEngineResult);
+    return RootCauses.runRootCauseAnalysis(context.driver, traceEngineResult.data);
   }
 }
 

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/gather/gatherers/trace-elements.d.ts

@@ -9,16 +9,6 @@ export type TraceElementData = {
     type?: string;
 };
 declare class TraceElements extends BaseGatherer {
-    /**
-     * This function finds the top (up to 15) elements that shift on the page.
-     *
-     * @param {LH.Trace} trace
-     * @param {LH.Gatherer.Context} context
-     * @return {Promise<Array<{nodeId: number}>>}
-     */
-    static getTopLayoutShiftElements(trace: LH.Trace, context: LH.Gatherer.Context): Promise<Array<{
-        nodeId: number;
-    }>>;
     /**
      * We want to a single representative node to represent the shift, so let's pick
      * the one with the largest impact (size x distance moved).
@@ -35,12 +25,12 @@ declare class TraceElements extends BaseGatherer {
      * that may have caused the shift.
      *
      * @param {LH.Trace} trace
-     * @param {LH.Artifacts.TraceEngineResult} traceEngineResult
+     * @param {LH.Artifacts.TraceEngineResult['data']} traceEngineResult
      * @param {LH.Artifacts.TraceEngineRootCauses} rootCauses
      * @param {LH.Gatherer.Context} context
      * @return {Promise<Array<{nodeId: number}>>}
      */
-    static getTopLayoutShifts(trace: LH.Trace, traceEngineResult: LH.Artifacts.TraceEngineResult, rootCauses: LH.Artifacts.TraceEngineRootCauses, context: LH.Gatherer.Context): Promise<Array<{
+    static getTopLayoutShifts(trace: LH.Trace, traceEngineResult: LH.Artifacts.TraceEngineResult['data'], rootCauses: LH.Artifacts.TraceEngineRootCauses, context: LH.Gatherer.Context): Promise<Array<{
         nodeId: number;
     }>>;
     /**

package/core/gather/gatherers/trace-elements.js

@@ -28,7 +28,6 @@ import {TraceEngineResult} from '../../computed/trace-engine-result.js';
 
 /** @typedef {{nodeId: number, animations?: {name?: string, failureReasonsMask?: number, unsupportedProperties?: string[]}[], type?: string}} TraceElementData */
 
-const MAX_LAYOUT_SHIFT_ELEMENTS = 15;
 const MAX_LAYOUT_SHIFTS = 15;
 
 /**
@@ -66,22 +65,6 @@ class TraceElements extends BaseGatherer {
     if (name) this.animationIdToName.set(id, name);
   }
 
-  /**
-   * This function finds the top (up to 15) elements that shift on the page.
-   *
-   * @param {LH.Trace} trace
-   * @param {LH.Gatherer.Context} context
-   * @return {Promise<Array<{nodeId: number}>>}
-   */
-  static async getTopLayoutShiftElements(trace, context) {
-    const {impactByNodeId} = await CumulativeLayoutShift.request(trace, context);
-
-    return [...impactByNodeId.entries()]
-      .sort((a, b) => b[1] - a[1])
-      .slice(0, MAX_LAYOUT_SHIFT_ELEMENTS)
-      .map(([nodeId]) => ({nodeId}));
-  }
-
   /**
    * We want to a single representative node to represent the shift, so let's pick
    * the one with the largest impact (size x distance moved).
@@ -139,7 +122,7 @@ class TraceElements extends BaseGatherer {
    * that may have caused the shift.
    *
    * @param {LH.Trace} trace
-   * @param {LH.Artifacts.TraceEngineResult} traceEngineResult
+   * @param {LH.Artifacts.TraceEngineResult['data']} traceEngineResult
    * @param {LH.Artifacts.TraceEngineRootCauses} rootCauses
    * @param {LH.Gatherer.Context} context
    * @return {Promise<Array<{nodeId: number}>>}
@@ -338,16 +321,14 @@ class TraceElements extends BaseGatherer {
     const {mainThreadEvents} = processedTrace;
 
     const lcpNodeData = await TraceElements.getLcpElement(trace, context);
-    const shiftElementsNodeData = await TraceElements.getTopLayoutShiftElements(trace, context);
     const shiftsData = await TraceElements.getTopLayoutShifts(
-      trace, traceEngineResult, rootCauses, context);
+      trace, traceEngineResult.data, rootCauses, context);
     const animatedElementData = await this.getAnimatedElements(mainThreadEvents);
     const responsivenessElementData = await TraceElements.getResponsivenessElement(trace, context);
 
     /** @type {Map<string, TraceElementData[]>} */
     const backendNodeDataMap = new Map([
       ['largest-contentful-paint', lcpNodeData ? [lcpNodeData] : []],
-      ['layout-shift-element', shiftElementsNodeData],
       ['layout-shift', shiftsData],
       ['animation', animatedElementData],
       ['responsiveness', responsivenessElementData ? [responsivenessElementData] : []],

package/core/gather/navigation-runner.js

@@ -92,7 +92,9 @@ async function _navigate(navigationContext) {
     return {requestedUrl, mainDocumentUrl, navigationError: undefined};
   } catch (err) {
     if (!(err instanceof LighthouseError)) throw err;
-    if (err.code !== 'NO_FCP' && err.code !== 'PAGE_HUNG') throw err;
+    if (err.code !== 'NO_FCP' && err.code !== 'PAGE_HUNG' && err.code !== 'TARGET_CRASHED') {
+      throw err;
+    }
     if (typeof requestor !== 'string') throw err;
 
     // TODO: Make the urls optional here so we don't need to throw an error with a callback requestor.

package/core/gather/session.d.ts

@@ -40,6 +40,14 @@ export class ProtocolSession extends ProtocolSession_base implements LH.Gatherer
      * @return {Promise<LH.CrdpCommands[C]['returnType']>}
      */
     sendCommand<C extends keyof import("puppeteer-core").ProtocolMapping.Commands>(method: C, ...params: import("puppeteer-core").ProtocolMapping.Commands[C]["paramsType"]): Promise<import("puppeteer-core").ProtocolMapping.Commands[C]["returnType"]>;
+    /**
+     * Send and if there's an error response, do not reject.
+     * @template {keyof LH.CrdpCommands} C
+     * @param {C} method
+     * @param {LH.CrdpCommands[C]['paramsType']} params
+     * @return {Promise<void>}
+     */
+    sendCommandAndIgnore<C_1 extends keyof import("puppeteer-core").ProtocolMapping.Commands>(method: C_1, ...params: import("puppeteer-core").ProtocolMapping.Commands[C_1]["paramsType"]): Promise<void>;
     /**
      * Disposes of a session so that it can no longer talk to Chrome.
      * @return {Promise<void>}

package/core/gather/session.js

@@ -100,6 +100,7 @@ class ProtocolSession extends CrdpEventEmitter {
     /** @type {NodeJS.Timer|undefined} */
     let timeout;
     const timeoutPromise = new Promise((resolve, reject) => {
+      // Unexpected setTimeout invocation to preserve the error stack. https://github.com/GoogleChrome/lighthouse/issues/13332
       // eslint-disable-next-line max-len
       timeout = setTimeout(reject, timeoutMs, new LighthouseError(LighthouseError.errors.PROTOCOL_TIMEOUT, {
         protocolMethod: method,
@@ -120,6 +121,18 @@ class ProtocolSession extends CrdpEventEmitter {
     });
   }
 
+  /**
+   * Send and if there's an error response, do not reject.
+   * @template {keyof LH.CrdpCommands} C
+   * @param {C} method
+   * @param {LH.CrdpCommands[C]['paramsType']} params
+   * @return {Promise<void>}
+   */
+  sendCommandAndIgnore(method, ...params) {
+    return this.sendCommand(method, ...params)
+      .catch(e => log.verbose('session', method, e.message)).then(_ => void 0);
+  }
+
   /**
    * Disposes of a session so that it can no longer talk to Chrome.
    * @return {Promise<void>}
@@ -127,7 +140,7 @@ class ProtocolSession extends CrdpEventEmitter {
   async dispose() {
     // @ts-expect-error Puppeteer expects the handler params to be type `unknown`
     this._cdpSession.off('*', this._handleProtocolEvent);
-    await this._cdpSession.detach();
+    await this._cdpSession.detach().catch(e => log.verbose('session', 'detach failed', e.message));
   }
 }
 

package/core/lib/emulation.js

@@ -128,7 +128,7 @@ function enableNetworkThrottling(session, throttlingSettings) {
  * @return {Promise<void>}
  */
 function clearNetworkThrottling(session) {
-  return session.sendCommand('Network.emulateNetworkConditions', NO_THROTTLING_METRICS);
+  return session.sendCommandAndIgnore('Network.emulateNetworkConditions', NO_THROTTLING_METRICS);
 }
 
 /**
@@ -146,7 +146,7 @@ function enableCPUThrottling(session, throttlingSettings) {
  * @return {Promise<void>}
  */
 function clearCPUThrottling(session) {
-  return session.sendCommand('Emulation.setCPUThrottlingRate', NO_CPU_THROTTLE_METRICS);
+  return session.sendCommandAndIgnore('Emulation.setCPUThrottlingRate', NO_CPU_THROTTLE_METRICS);
 }
 
 export {

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/lib/lantern/cpu-node.d.ts

@@ -6,11 +6,17 @@ export class CPUNode<T = any> extends BaseNode<T> {
     /**
      * @param {LH.TraceEvent} parentEvent
      * @param {LH.TraceEvent[]=} childEvents
+     * @param {number=} correctedEndTs
      */
-    constructor(parentEvent: LH.TraceEvent, childEvents?: LH.TraceEvent[] | undefined);
+    constructor(parentEvent: LH.TraceEvent, childEvents?: LH.TraceEvent[] | undefined, correctedEndTs?: number | undefined);
     _event: LH.TraceEvent;
     _childEvents: LH.TraceEvent[];
+    _correctedEndTs: number | undefined;
     get type(): "cpu";
+    /**
+     * @return {number}
+     */
+    get duration(): number;
     /**
      * @return {LH.TraceEvent}
      */

package/core/lib/lantern/cpu-node.js

@@ -15,13 +15,15 @@ class CPUNode extends BaseNode {
   /**
    * @param {LH.TraceEvent} parentEvent
    * @param {LH.TraceEvent[]=} childEvents
+   * @param {number=} correctedEndTs
    */
-  constructor(parentEvent, childEvents = []) {
+  constructor(parentEvent, childEvents = [], correctedEndTs) {
     const nodeId = `${parentEvent.tid}.${parentEvent.ts}`;
     super(nodeId);
 
     this._event = parentEvent;
     this._childEvents = childEvents;
+    this._correctedEndTs = correctedEndTs;
   }
 
   get type() {
@@ -39,9 +41,17 @@ class CPUNode extends BaseNode {
    * @return {number}
    */
   get endTime() {
+    if (this._correctedEndTs) return this._correctedEndTs;
     return this._event.ts + this._event.dur;
   }
 
+  /**
+   * @return {number}
+   */
+  get duration() {
+    return this.endTime - this.startTime;
+  }
+
   /**
    * @return {LH.TraceEvent}
    */
@@ -83,7 +93,7 @@ class CPUNode extends BaseNode {
    * @return {CPUNode}
    */
   cloneWithoutRelationships() {
-    return new CPUNode(this._event, this._childEvents);
+    return new CPUNode(this._event, this._childEvents, this._correctedEndTs);
   }
 }
 

package/core/lib/lantern/lantern-error.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export class LanternError extends Error {
+}
+//# sourceMappingURL=lantern-error.d.ts.map

package/core/lib/lantern/lantern-error.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+class LanternError extends Error {}
+
+export {LanternError};