lighthouse 13.5.0 → 13.6.0-dev.20261028

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

@@ -238,6 +238,21 @@ function getEffectiveSizingRule({attributesStyle, inlineStyle, matchedCSSRules},
   return null;
 }
 
+/**
+ * @param {LH.Artifacts.ImageElement} element
+ * @return {boolean}
+ */
+function needsSourceRules(element) {
+  if (element.isInShadowDOM || element.isCss) return false;
+  if (
+    ImageElements.doesHtmlAttrProvideExplicitSize(element.attributeWidth) &&
+    ImageElements.doesHtmlAttrProvideExplicitSize(element.attributeHeight)
+  ) {
+    return false;
+  }
+  return true;
+}
+
 /**
  * @param {LH.Artifacts.ImageElement} element
  * @return {number}
@@ -255,6 +270,28 @@ class ImageElements extends BaseGatherer {
     supportedModes: ['snapshot', 'timespan', 'navigation'],
   };
 
+  /**
+   * An img size attribute prevents layout shifts if it is a non-negative integer (incl zero!).
+   * @url https://html.spec.whatwg.org/multipage/embedded-content-other.html#dimension-attributes
+   * @param {string | null} attrValue
+   * @return {boolean}
+   */
+  static doesHtmlAttrProvideExplicitSize(attrValue) {
+    if (!attrValue) return false;
+
+    // First, superweird edge case of using the positive-sign. The spec _sorta_ says it's valid...
+    // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-integers
+    //   > Otherwise, if the character is … (+): Advance position to the next character.
+    //   > (The "+" is ignored, but it is not conforming.)
+    // lol.  Irrelevant though b/c Chrome (at least) doesn't ignore. It rejects this as a non-conforming value.
+    if (attrValue.startsWith('+')) return false;
+
+    // parseInt isn't exactly the same as the html's spec for parsing integers, but it's close enough
+    // https://tc39.es/ecma262/#sec-parseint-string-radix
+    const int = parseInt(attrValue, 10);
+    return int >= 0;
+  }
+
   constructor() {
     super();
     /** @type {Map<string, {naturalWidth: number, naturalHeight: number}>} */
@@ -322,24 +359,32 @@ class ImageElements extends BaseGatherer {
   async collectExtraDetails(driver, elements) {
     // Don't do more than 5s of this expensive devtools protocol work. See #11289
     let reachedGatheringBudget = false;
-    setTimeout(_ => (reachedGatheringBudget = true), 5000);
+    const timeoutId = setTimeout(_ => (reachedGatheringBudget = true), 5000);
     let skippedCount = 0;
 
-    for (const element of elements) {
-      if (reachedGatheringBudget) {
-        skippedCount++;
-        continue;
-      }
-
-      // Need source rules to determine if sized via CSS (for unsized-images).
-      if (!element.isInShadowDOM && !element.isCss) {
-        await this.fetchSourceRules(driver.defaultSession, element.node.devtoolsNodePath, element);
-      }
-      // Images within `picture` behave strangely and natural size information isn't accurate,
-      // CSS images have no natural size information at all. Try to get the actual size if we can.
-      if (element.isPicture || element.isCss || element.srcset) {
-        await this.fetchElementWithSizeInformation(driver, element);
+    try {
+      for (const element of elements) {
+        if (reachedGatheringBudget) {
+          skippedCount++;
+          continue;
+        }
+
+        // Need source rules to determine if sized via CSS (for unsized-images).
+        if (needsSourceRules(element)) {
+          await this.fetchSourceRules(
+            driver.defaultSession,
+            element.node.devtoolsNodePath,
+            element
+          );
+        }
+        // Images within `picture` behave strangely and natural size information isn't accurate,
+        // CSS images have no natural size information at all. Try to get the actual size if we can.
+        if (element.isPicture || element.isCss || element.srcset) {
+          await this.fetchElementWithSizeInformation(driver, element);
+        }
       }
+    } finally {
+      clearTimeout(timeoutId);
     }
 
     if (reachedGatheringBudget) {
@@ -369,11 +414,14 @@ class ImageElements extends BaseGatherer {
       ],
     });
 
-    await Promise.all([
-      session.sendCommand('DOM.enable'),
-      session.sendCommand('CSS.enable'),
-      session.sendCommand('DOM.getDocument', {depth: -1, pierce: true}),
-    ]);
+    const shouldFetchSourceRules = elements.some(needsSourceRules);
+    if (shouldFetchSourceRules) {
+      await Promise.all([
+        session.sendCommand('DOM.enable'),
+        session.sendCommand('CSS.enable'),
+        session.sendCommand('DOM.getDocument', {depth: -1, pierce: true}),
+      ]);
+    }
 
     // Spend our extra details budget on highest impact images.
     // Our best approximation of impact without network records is to use pixel area.
@@ -381,11 +429,14 @@ class ImageElements extends BaseGatherer {
 
     await this.collectExtraDetails(context.driver, elements);
 
-    await Promise.all([
-      session.sendCommand('DOM.disable'),
-      session.sendCommand('CSS.disable'),
-    ]);
+    if (shouldFetchSourceRules) {
+      await Promise.all([
+        session.sendCommand('DOM.disable'),
+        session.sendCommand('CSS.disable'),
+      ]);
+    }
 
+    this._naturalSizeCache.clear();
     return elements;
   }
 }

package/core/gather/gatherers/inspector-issues.js

@@ -96,6 +96,8 @@ class InspectorIssues extends BaseGatherer {
       }
     }
 
+    this._issues = [];
+
     return artifact;
   }
 }

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

@@ -67,6 +67,8 @@ class JsUsage extends BaseGatherer {
       usageByScriptId[scriptUsage.scriptId] = scriptUsage;
     }
 
+    this._scriptUsages = [];
+
     return usageByScriptId;
   }
 }

package/core/gather/gatherers/scripts.d.ts

@@ -1,13 +1,22 @@
 export default Scripts;
+export type TraceScript = {
+    scriptId: string;
+    sourceText?: string | undefined;
+    chunks?: string[] | undefined;
+    url?: string | undefined;
+    sourceUrl?: string | undefined;
+    executionContextId?: number | undefined;
+    frame?: string | undefined;
+};
 /**
  * @fileoverview Gets JavaScript file contents.
  */
 declare class Scripts extends BaseGatherer {
     static symbol: symbol;
+    /** @type {LH.Gatherer.GathererMeta<'Trace'>} */
+    meta: LH.Gatherer.GathererMeta<"Trace">;
     /** @type {LH.Crdp.Debugger.ScriptParsedEvent[]} */
     _scriptParsedEvents: LH.Crdp.Debugger.ScriptParsedEvent[];
-    /** @type {Array<string | undefined>} */
-    _scriptContents: Array<string | undefined>;
     /**
      * @param {LH.Crdp.Debugger.ScriptParsedEvent} params
      */
@@ -20,7 +29,11 @@ declare class Scripts extends BaseGatherer {
      * @param {LH.Gatherer.Context} context
      */
     stopInstrumentation(context: LH.Gatherer.Context): Promise<void>;
-    getArtifact(): Promise<import("../../index.js").Artifacts.Script[]>;
+    /**
+     * @param {LH.Gatherer.Context<'Trace'>} context
+     * @return {Promise<LH.Artifacts['Scripts']>}
+     */
+    getArtifact(context: LH.Gatherer.Context<"Trace">): Promise<LH.Artifacts["Scripts"]>;
 }
 import BaseGatherer from '../base-gatherer.js';
 //# sourceMappingURL=scripts.d.ts.map

package/core/gather/gatherers/scripts.js

@@ -5,19 +5,31 @@
  */
 
 import BaseGatherer from '../base-gatherer.js';
+import Trace from './trace.js';
+
+/**
+ * @typedef {Object} TraceScript
+ * @property {string} scriptId
+ * @property {string} [sourceText]
+ * @property {string[]} [chunks]
+ * @property {string} [url]
+ * @property {string} [sourceUrl]
+ * @property {number} [executionContextId]
+ * @property {string} [frame]
+ */
 
 /**
  * @template T, U
  * @param {Array<T>} values
- * @param {(value: T) => Promise<U>} promiseMapper
+ * @param {(value: T, index: number) => Promise<U>} promiseMapper
  * @param {boolean} runInSeries
  * @return {Promise<Array<U>>}
  */
 async function runInSeriesOrParallel(values, promiseMapper, runInSeries) {
   if (runInSeries) {
     const results = [];
-    for (const value of values) {
-      const result = await promiseMapper(value);
+    for (let i = 0; i < values.length; i++) {
+      const result = await promiseMapper(values[i], i);
       results.push(result);
     }
     return results;
@@ -27,6 +39,121 @@ async function runInSeriesOrParallel(values, promiseMapper, runInSeries) {
   }
 }
 
+/**
+ * Extracts script source text and disambiguating metadata from trace rundown events,
+ * grouped by `scriptId`.
+ * @param {LH.TraceEvent[]} traceEvents
+ * @return {Map<string, TraceScript[]>}
+ */
+function collectTraceScripts(traceEvents) {
+  /** @type {Map<string, TraceScript>} */
+  const byIsolateAndScriptId = new Map();
+
+  /**
+   * @param {NonNullable<LH.TraceEvent['args']['data']>} data
+   * @return {TraceScript}
+   */
+  const getOrCreateRecord = (data) => {
+    const scriptId = String(data.scriptId);
+    const key = `${data.isolate ?? ''}.${scriptId}`;
+    let record = byIsolateAndScriptId.get(key);
+    if (!record) {
+      record = {scriptId};
+      byIsolateAndScriptId.set(key, record);
+    }
+    return record;
+  };
+
+  for (const event of traceEvents) {
+    const data = event.args?.data;
+    if (!data || data.scriptId === undefined) continue;
+
+    if (event.cat === 'disabled-by-default-devtools.target-rundown') {
+      if (typeof data.frame === 'string') {
+        getOrCreateRecord(data).frame = data.frame;
+      }
+    } else if (event.cat === 'disabled-by-default-devtools.v8-source-rundown' &&
+        event.name === 'ScriptCatchup') {
+      const record = getOrCreateRecord(data);
+      if (typeof data.url === 'string') record.url = data.url;
+      if (typeof data.sourceUrl === 'string') record.sourceUrl = data.sourceUrl;
+      if (typeof data.executionContextId === 'number') {
+        record.executionContextId = data.executionContextId;
+      }
+    } else if (event.cat === 'disabled-by-default-devtools.v8-source-rundown-sources' &&
+        typeof data.sourceText === 'string') {
+      const record = getOrCreateRecord(data);
+      if (event.name === 'ScriptCatchup') {
+        record.sourceText = data.sourceText;
+      } else if (event.name === 'LargeScriptCatchup') {
+        if (!record.chunks || data.splitIndex === 0) record.chunks = [];
+        record.chunks.push(data.sourceText);
+      }
+    }
+  }
+
+  /** @type {Map<string, TraceScript[]>} */
+  const byScriptId = new Map();
+  for (const record of byIsolateAndScriptId.values()) {
+    if (record.chunks) record.sourceText = record.chunks.join('');
+    if (record.sourceText === undefined) continue;
+
+    let list = byScriptId.get(record.scriptId);
+    if (!list) {
+      list = [];
+      byScriptId.set(record.scriptId, list);
+    }
+    list.push(record);
+  }
+
+  return byScriptId;
+}
+
+/**
+ * @param {TraceScript} traceScript
+ * @param {LH.Crdp.Debugger.ScriptParsedEvent} script
+ * @return {boolean}
+ */
+function matchesScriptParsedEvent(traceScript, script) {
+  const frameId = script.executionContextAuxData?.frameId;
+  if (frameId && traceScript.frame !== undefined && traceScript.frame !== frameId) {
+    return false;
+  }
+  const scriptUrl = script.embedderName || script.url;
+  if (traceScript.url !== undefined &&
+      traceScript.url !== scriptUrl &&
+      traceScript.sourceUrl !== script.url) {
+    return false;
+  }
+  if (script.executionContextId !== undefined &&
+      traceScript.executionContextId !== undefined &&
+      traceScript.executionContextId !== script.executionContextId) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * @param {LH.Crdp.Debugger.ScriptParsedEvent} script
+ * @param {Map<string, TraceScript[]>} traceScriptsByScriptId
+ * @return {string|undefined}
+ */
+function findTraceScriptSource(script, traceScriptsByScriptId) {
+  const candidates = traceScriptsByScriptId.get(script.scriptId);
+  if (!candidates) return undefined;
+
+  const matches = candidates.filter((candidate) => matchesScriptParsedEvent(candidate, script));
+  if (matches.length === 1) return matches[0].sourceText;
+
+  const frameId = script.executionContextAuxData?.frameId;
+  if (matches.length > 1 && frameId) {
+    const frameMatches = matches.filter((candidate) => candidate.frame === frameId);
+    if (frameMatches.length === 1) return frameMatches[0].sourceText;
+  }
+
+  return undefined;
+}
+
 /**
  * Returns true if the script was created via our own calls
  * to Runtime.evaluate.
@@ -50,18 +177,16 @@ function isLighthouseRuntimeEvaluateScript(script) {
 class Scripts extends BaseGatherer {
   static symbol = Symbol('Scripts');
 
-  /** @type {LH.Gatherer.GathererMeta} */
+  /** @type {LH.Gatherer.GathererMeta<'Trace'>} */
   meta = {
     symbol: Scripts.symbol,
     supportedModes: ['timespan', 'navigation'],
+    dependencies: {Trace: Trace.symbol},
   };
 
   /** @type {LH.Crdp.Debugger.ScriptParsedEvent[]} */
   _scriptParsedEvents = [];
 
-  /** @type {Array<string | undefined>} */
-  _scriptContents = [];
-
   constructor() {
     super();
     this.onScriptParsed = this.onScriptParsed.bind(this);
@@ -89,26 +214,42 @@ class Scripts extends BaseGatherer {
    * @param {LH.Gatherer.Context} context
    */
   async stopInstrumentation(context) {
+    const session = context.driver.defaultSession;
+    session.off('Debugger.scriptParsed', this.onScriptParsed);
+  }
+
+  /**
+   * @param {LH.Gatherer.Context<'Trace'>} context
+   * @return {Promise<LH.Artifacts['Scripts']>}
+   */
+  async getArtifact(context) {
     const session = context.driver.defaultSession;
     const formFactor = context.baseArtifacts.HostFormFactor;
+    const traceScriptsByScriptId = collectTraceScripts(context.dependencies.Trace.traceEvents);
+    const traceSources = this._scriptParsedEvents.map(
+      (script) => findTraceScriptSource(script, traceScriptsByScriptId)
+    );
 
-    session.off('Debugger.scriptParsed', this.onScriptParsed);
+    if (traceSources.some((source) => source === undefined)) {
+      // `disableAsyncStacks()` in `prepare.js` runs after `stopInstrumentation` and calls
+      // `Debugger.disable`, so re-enable `Debugger` if we need to call `Debugger.getScriptSource`.
+      await session.sendCommand('Debugger.enable');
+    }
 
     // If run on a mobile device, be sensitive to memory limitations and only
     // request one at a time.
-    this._scriptContents = await runInSeriesOrParallel(
+    const scriptContents = await runInSeriesOrParallel(
       this._scriptParsedEvents,
-      ({scriptId}) => {
-        return session.sendCommand('Debugger.getScriptSource', {scriptId})
+      (script, i) => {
+        if (traceSources[i] !== undefined) return Promise.resolve(traceSources[i]);
+        return session.sendCommand('Debugger.getScriptSource', {scriptId: script.scriptId})
           .then((resp) => resp.scriptSource)
           .catch(() => undefined);
       },
       formFactor === 'mobile' /* runInSeries */
     );
     await session.sendCommand('Debugger.disable');
-  }
 
-  async getArtifact() {
     /** @type {LH.Artifacts['Scripts']} */
     const scripts = this._scriptParsedEvents.map((event, i) => {
       // 'embedderName' and 'url' are confusingly named, so we rewrite them here.
@@ -123,10 +264,12 @@ class Scripts extends BaseGatherer {
         // embedderName is optional on the protocol because backends like Node may not set it.
         // For our purposes, it is always set. But just in case it isn't... fallback to the url.
         url: event.embedderName || event.url,
-        content: this._scriptContents[i],
+        content: scriptContents[i],
       };
     });
 
+    this._scriptParsedEvents = [];
+
     return scripts;
   }
 }

package/core/gather/gatherers/stylesheets.js

@@ -82,6 +82,8 @@ class Stylesheets extends BaseGatherer {
 
     // Ensure we finish fetching all stylesheet contents before disabling the CSS domain
     const sheets = await Promise.all(this._sheetPromises.values());
+    this._sheetPromises.clear();
+    this._session = undefined;
 
     await session.sendCommand('CSS.disable');
     await session.sendCommand('DOM.disable');

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

@@ -21,6 +21,7 @@ import {ProcessedTrace} from '../../computed/processed-trace.js';
 import {Responsiveness} from '../../computed/metrics/responsiveness.js';
 import {CumulativeLayoutShift} from '../../computed/metrics/cumulative-layout-shift.js';
 import {TraceEngineResult} from '../../computed/trace-engine-result.js';
+import {Helpers} from '../../lib/trace-engine.js';
 import SourceMaps from './source-maps.js';
 
 /** @typedef {{nodeId: number, animations?: {name?: string, failureReasonsMask?: number, unsupportedProperties?: string[]}[], type?: string}} TraceElementData */
@@ -80,7 +81,7 @@ class TraceElements extends BaseGatherer {
     }
 
     if (navigationId) {
-      if (insightSet.navigation?.args.data?.navigationId !== navigationId) {
+      if (Helpers.Trace.navigationIDForEvent(insightSet.navigation) !== navigationId) {
         return [];
       }
     } else {

package/core/gather/gatherers/trace.d.ts

@@ -1,6 +1,12 @@
 export default Trace;
 declare class Trace extends BaseGatherer {
     static getDefaultTraceCategories(): string[];
+    /**
+     * @param {LH.Gatherer.ProtocolSession} session
+     * @param {string} handle
+     * @return {Promise<LH.Trace>}
+     */
+    static _readTraceFromStream(session: LH.Gatherer.ProtocolSession, handle: string): Promise<LH.Trace>;
     /**
      * @param {LH.Gatherer.ProtocolSession} session
      * @return {Promise<LH.Trace>}

package/core/gather/gatherers/trace.js

@@ -73,29 +73,68 @@ class Trace extends BaseGatherer {
 
   /**
    * @param {LH.Gatherer.ProtocolSession} session
+   * @param {string} handle
    * @return {Promise<LH.Trace>}
    */
-  static async endTraceAndCollectEvents(session) {
+  static async _readTraceFromStream(session, handle) {
     /** @type {Array<LH.TraceEvent>} */
     const traceEvents = [];
+    const decoder = new TextDecoder();
+    let isEof = false;
+    let remainder = '';
+
+    try {
+      while (!isEof) {
+        const response = await session.sendCommand('IO.read', {handle});
+        isEof = Boolean(response.eof);
+        remainder += response.base64Encoded ?
+          decoder.decode(Buffer.from(response.data, 'base64'), {stream: !isEof}) :
+          response.data;
+
+        // Perfetto's `ExportJson` serializes each trace event and trailing `metadata`
+        // as compact single-line JSON (with string newlines escaped as `\\n`), emitting
+        // raw `,\n` only between top-level elements of `traceEvents`.
+        // Maintain the invariant that `remainder` always starts with `{"traceEvents":[`.
+        const lastEventSep = remainder.lastIndexOf('},\n');
+        if (lastEventSep !== -1) {
+          const {traceEvents: batch} = JSON.parse(`${remainder.slice(0, lastEventSep + 1)}]}`);
+          for (const event of batch) {
+            traceEvents.push(event);
+          }
+          remainder = `{"traceEvents":[${remainder.slice(lastEventSep + 3)}`;
+        }
+      }
+    } finally {
+      await session.sendCommand('IO.close', {handle});
+    }
 
-    /**
-     * Listener for when dataCollected events fire for each trace chunk
-     * @param {LH.Crdp.Tracing.DataCollectedEvent} data
-     */
-    const dataListener = function(data) {
-      traceEvents.push(...data.value);
-    };
-    session.on('Tracing.dataCollected', dataListener);
-
-    return new Promise((resolve, reject) => {
-      session.once('Tracing.tracingComplete', _ => {
-        session.off('Tracing.dataCollected', dataListener);
-        resolve({traceEvents});
-      });
+    const traceJson = JSON.parse(remainder);
+    for (const event of traceJson.traceEvents) {
+      traceEvents.push(event);
+    }
+    traceJson.traceEvents = traceEvents;
+    return traceJson;
+  }
 
-      session.sendCommand('Tracing.end').catch(reject);
+  /**
+   * @param {LH.Gatherer.ProtocolSession} session
+   * @return {Promise<LH.Trace>}
+   */
+  static async endTraceAndCollectEvents(session) {
+    /** @type {LH.Crdp.Tracing.TracingCompleteEvent} */
+    const completeEvent = await new Promise((resolve, reject) => {
+      session.once('Tracing.tracingComplete', resolve);
+      session.sendCommand('Tracing.end').catch(err => {
+        session.off('Tracing.tracingComplete', resolve);
+        reject(err);
+      });
     });
+
+    if (!completeEvent.stream) {
+      throw new Error('Tracing.tracingComplete did not return a stream handle');
+    }
+
+    return Trace._readTraceFromStream(session, completeEvent.stream);
   }
 
   static symbol = Symbol('Trace');
@@ -115,6 +154,7 @@ class Trace extends BaseGatherer {
     await driver.defaultSession.sendCommand('Page.enable');
     await driver.defaultSession.sendCommand('Tracing.start', {
       categories: traceCategories.join(','),
+      transferMode: 'ReturnAsStream',
       options: 'sampling-frequency=10000', // 1000 is default and too slow.
     });
 

package/core/index.d.ts

@@ -68,6 +68,8 @@ export function auditFlowArtifacts(flowArtifacts: LH.UserFlow.FlowArtifacts, con
 }>;
 export function getAuditList(): string[];
 export const traceCategories: string[];
+import * as i18n from './lib/i18n/i18n.js';
 import * as LH from '../types/lh.js';
 import { UserFlow } from './user-flow.js';
+export { i18n };
 //# sourceMappingURL=index.d.ts.map

package/core/index.js

@@ -11,6 +11,7 @@ import {ReportGenerator} from '../report/generator/report-generator.js';
 import {startTimespanGather} from './gather/timespan-runner.js';
 import {snapshotGather} from './gather/snapshot-runner.js';
 import {navigationGather} from './gather/navigation-runner.js';
+import * as i18n from './lib/i18n/i18n.js';
 import * as LH from '../types/lh.js';
 
 /*
@@ -131,4 +132,5 @@ export {
   auditFlowArtifacts,
   getAuditList,
   traceCategories,
+  i18n,
 };

package/core/lib/arbitrary-equality-map.d.ts

@@ -5,9 +5,7 @@
  */
 export class ArbitraryEqualityMap {
     /**
-     * Determines whether two objects are deeply equal. Defers to lodash isEqual, but is kept here for
-     * easy usage by consumers.
-     * See https://lodash.com/docs/4.17.5#isEqual.
+     * Determines whether two objects are deeply equal.
      * @param {*} objA
      * @param {*} objB
      * @return {boolean}
@@ -44,4 +42,17 @@ export class ArbitraryEqualityMap {
      */
     _findIndexOf(key: any): number;
 }
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @param {*} a
+ * @param {*} b
+ * @param {WeakMap<object, WeakSet<object>>=} seen
+ * @return {boolean}
+ */
+declare function deepEquals(a: any, b: any, seen?: WeakMap<object, WeakSet<object>> | undefined): boolean;
+export { deepEquals as isEqual };
 //# sourceMappingURL=arbitrary-equality-map.d.ts.map