lighthouse 11.4.0 → 11.5.0

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

@@ -23,10 +23,13 @@ import {LighthouseError} from '../../lib/lh-error.js';
 import {Responsiveness} from '../../computed/metrics/responsiveness.js';
 import {CumulativeLayoutShift} from '../../computed/metrics/cumulative-layout-shift.js';
 import {ExecutionContext} from '../driver/execution-context.js';
+import RootCauses from './root-causes.js';
+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;
 
 /**
  * @this {HTMLElement}
@@ -44,10 +47,10 @@ function getNodeDetailsData() {
 /* c8 ignore stop */
 
 class TraceElements extends BaseGatherer {
-  /** @type {LH.Gatherer.GathererMeta<'Trace'>} */
+  /** @type {LH.Gatherer.GathererMeta<'Trace'|'RootCauses'>} */
   meta = {
     supportedModes: ['timespan', 'navigation'],
-    dependencies: {Trace: Trace.symbol},
+    dependencies: {Trace: Trace.symbol, RootCauses: RootCauses.symbol},
   };
 
   /** @type {Map<string, string>} */
@@ -64,11 +67,11 @@ class TraceElements extends BaseGatherer {
   }
 
   /**
-   * This function finds the top (up to 15) elements that contribute to the CLS score of the page.
+   * 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<TraceElementData>>}
+   * @return {Promise<Array<{nodeId: number}>>}
    */
   static async getTopLayoutShiftElements(trace, context) {
     const {impactByNodeId} = await CumulativeLayoutShift.request(trace, context);
@@ -79,6 +82,66 @@ class TraceElements extends BaseGatherer {
       .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).
+   *
+   * @param {LH.Artifacts.TraceImpactedNode[]} impactedNodes
+   * @param {Map<number, number>} impactByNodeId
+   * @return {number|undefined}
+   */
+  static getBiggestImpactNodeForShiftEvent(impactedNodes, impactByNodeId) {
+    let biggestImpactNodeId;
+    let biggestImpactNodeScore = Number.NEGATIVE_INFINITY;
+    for (const node of impactedNodes) {
+      const impactScore = impactByNodeId.get(node.node_id);
+      if (impactScore !== undefined && impactScore > biggestImpactNodeScore) {
+        biggestImpactNodeId = node.node_id;
+        biggestImpactNodeScore = impactScore;
+      }
+    }
+    return biggestImpactNodeId;
+  }
+
+  /**
+   * This function finds the top (up to 15) layout shifts on the page, and returns
+   * the id of the largest impacted node of each shift, along with any related nodes
+   * that may have caused the shift.
+   *
+   * @param {LH.Trace} trace
+   * @param {LH.Artifacts.TraceEngineResult} traceEngineResult
+   * @param {LH.Artifacts.TraceEngineRootCauses} rootCauses
+   * @param {LH.Gatherer.Context} context
+   * @return {Promise<Array<{nodeId: number}>>}
+   */
+  static async getTopLayoutShifts(trace, traceEngineResult, rootCauses, context) {
+    const {impactByNodeId} = await CumulativeLayoutShift.request(trace, context);
+    const clusters = traceEngineResult.LayoutShifts.clusters ?? [];
+    const layoutShiftEvents = clusters.flatMap(c => c.events);
+
+    return layoutShiftEvents
+      .sort((a, b) => b.args.data.weighted_score_delta - a.args.data.weighted_score_delta)
+      .slice(0, MAX_LAYOUT_SHIFTS)
+      .flatMap(event => {
+        const nodeIds = [];
+        const biggestImpactedNodeId =
+          this.getBiggestImpactNodeForShiftEvent(event.args.data.impacted_nodes, impactByNodeId);
+        if (biggestImpactedNodeId !== undefined) {
+          nodeIds.push(biggestImpactedNodeId);
+        }
+
+        const index = layoutShiftEvents.indexOf(event);
+        const shiftRootCauses = rootCauses.layoutShifts[index];
+        if (shiftRootCauses) {
+          for (const cause of shiftRootCauses.unsizedMedia) {
+            nodeIds.push(cause.node.backendNodeId);
+          }
+        }
+
+        return nodeIds.map(nodeId => ({nodeId}));
+      });
+  }
+
   /**
    * @param {LH.Trace} trace
    * @param {LH.Gatherer.Context} context
@@ -195,61 +258,77 @@ class TraceElements extends BaseGatherer {
   }
 
   /**
-   * @param {LH.Gatherer.Context<'Trace'>} context
+   * @param {LH.Gatherer.ProtocolSession} session
+   * @param {number} backendNodeId
+   */
+  async getNodeDetails(session, backendNodeId) {
+    try {
+      const objectId = await resolveNodeIdToObjectId(session, backendNodeId);
+      if (!objectId) return null;
+
+      const deps = ExecutionContext.serializeDeps([
+        pageFunctions.getNodeDetails,
+        getNodeDetailsData,
+      ]);
+      return await session.sendCommand('Runtime.callFunctionOn', {
+        objectId,
+        functionDeclaration: `function () {
+          ${deps}
+          return getNodeDetailsData.call(this);
+        }`,
+        returnByValue: true,
+        awaitPromise: true,
+      });
+    } catch (err) {
+      Sentry.captureException(err, {
+        tags: {gatherer: 'TraceElements'},
+        level: 'error',
+      });
+    }
+
+    return null;
+  }
+
+  /**
+   * @param {LH.Gatherer.Context<'Trace'|'RootCauses'>} context
    * @return {Promise<LH.Artifacts.TraceElement[]>}
    */
   async getArtifact(context) {
     const session = context.driver.defaultSession;
 
     const trace = context.dependencies.Trace;
-    if (!trace) {
-      throw new Error('Trace is missing!');
-    }
+    const traceEngineResult = await TraceEngineResult.request({trace}, context);
+    const rootCauses = context.dependencies.RootCauses;
 
     const processedTrace = await ProcessedTrace.request(trace, context);
     const {mainThreadEvents} = processedTrace;
 
     const lcpNodeData = await TraceElements.getLcpElement(trace, context);
-    const clsNodeData = await TraceElements.getTopLayoutShiftElements(trace, context);
+    const shiftElementsNodeData = await TraceElements.getTopLayoutShiftElements(trace, context);
+    const shiftsData = await TraceElements.getTopLayoutShifts(
+      trace, traceEngineResult, 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', clsNodeData],
+      ['layout-shift-element', shiftElementsNodeData],
+      ['layout-shift', shiftsData],
       ['animation', animatedElementData],
       ['responsiveness', responsivenessElementData ? [responsivenessElementData] : []],
     ]);
 
+    /** @type {Map<number, LH.Crdp.Runtime.CallFunctionOnResponse | null>} */
+    const callFunctionOnCache = new Map();
     const traceElements = [];
     for (const [traceEventType, backendNodeData] of backendNodeDataMap) {
       for (let i = 0; i < backendNodeData.length; i++) {
         const backendNodeId = backendNodeData[i].nodeId;
-        let response;
-        try {
-          const objectId = await resolveNodeIdToObjectId(session, backendNodeId);
-          if (!objectId) continue;
-
-          const deps = ExecutionContext.serializeDeps([
-            pageFunctions.getNodeDetails,
-            getNodeDetailsData,
-          ]);
-          response = await session.sendCommand('Runtime.callFunctionOn', {
-            objectId,
-            functionDeclaration: `function () {
-              ${deps}
-              return getNodeDetailsData.call(this);
-            }`,
-            returnByValue: true,
-            awaitPromise: true,
-          });
-        } catch (err) {
-          Sentry.captureException(err, {
-            tags: {gatherer: 'TraceElements'},
-            level: 'error',
-          });
-          continue;
+        let response = callFunctionOnCache.get(backendNodeId);
+        if (response === undefined) {
+          response = await this.getNodeDetails(session, backendNodeId);
+          callFunctionOnCache.set(backendNodeId, response);
         }
 
         if (response?.result?.value) {

package/core/gather/gatherers/trace.js

@@ -56,9 +56,12 @@ class Trace extends BaseGatherer {
       'disabled-by-default-devtools.timeline.frame',
       'latencyInfo',
 
-      // A bug introduced in M92 causes these categories to crash targets on Linux.
-      // See https://github.com/GoogleChrome/lighthouse/issues/12835 for full investigation.
-      // 'disabled-by-default-v8.cpu_profiler',
+      // For CLS root causes.
+      'disabled-by-default-devtools.timeline.invalidationTracking',
+
+      // Not used by Lighthouse (yet) but included for users that want JS samples when looking at
+      // a trace collected by Lighthouse (e.g. "View Trace" workflow in DevTools)
+      'disabled-by-default-v8.cpu_profiler',
     ];
   }
 

package/core/gather/navigation-runner.js

@@ -303,7 +303,7 @@ async function navigationGather(page, requestor, options = {}) {
         page,
         resolvedConfig,
         requestor: normalizedRequestor,
-        computedCache: new Map(),
+        computedCache,
       };
       const {baseArtifacts} = await _setup(context);
 

package/core/gather/session.js

@@ -10,6 +10,17 @@ import {LighthouseError} from '../lib/lh-error.js';
 
 // Controls how long to wait for a response after sending a DevTools protocol command.
 const DEFAULT_PROTOCOL_TIMEOUT = 30000;
+const PPTR_BUFFER = 50;
+
+/**
+ * Puppeteer timeouts must fit into an int32 and the maximum timeout for `setTimeout` is a *signed*
+ * int32. However, this also needs to account for the puppeteer buffer we add to the timeout later.
+ *
+ * So this is defined as the max *signed* int32 minus PPTR_BUFFER.
+ *
+ * In human terms, this timeout is ~25 days which is as good as infinity for all practical purposes.
+ */
+const MAX_TIMEOUT = 2147483647 - PPTR_BUFFER;
 
 /** @typedef {LH.Protocol.StrictEventEmitterClass<LH.CrdpEvents>} CrdpEventMessageEmitter */
 const CrdpEventEmitter = /** @type {CrdpEventMessageEmitter} */ (EventEmitter);
@@ -70,6 +81,7 @@ class ProtocolSession extends CrdpEventEmitter {
    * @param {number} ms
    */
   setNextProtocolTimeout(ms) {
+    if (ms > MAX_TIMEOUT) ms = MAX_TIMEOUT;
     this._nextProtocolTimeout = ms;
   }
 
@@ -86,15 +98,16 @@ class ProtocolSession extends CrdpEventEmitter {
     /** @type {NodeJS.Timer|undefined} */
     let timeout;
     const timeoutPromise = new Promise((resolve, reject) => {
-      if (timeoutMs === Infinity) return;
-
       // eslint-disable-next-line max-len
       timeout = setTimeout(reject, timeoutMs, new LighthouseError(LighthouseError.errors.PROTOCOL_TIMEOUT, {
         protocolMethod: method,
       }));
     });
 
-    const resultPromise = this._cdpSession.send(method, ...params);
+    const resultPromise = this._cdpSession.send(method, ...params, {
+      // Add 50ms to the Puppeteer timeout to ensure the Lighthouse timeout finishes first.
+      timeout: timeoutMs + PPTR_BUFFER,
+    });
     const resultWithTimeoutPromise = Promise.race([resultPromise, timeoutPromise]);
 
     return resultWithTimeoutPromise.finally(() => {

package/core/lib/i18n/i18n.js

@@ -17,6 +17,7 @@ import {LH_ROOT} from '../../../shared/root.js';
 import {isIcuMessage, formatMessage, DEFAULT_LOCALE} from '../../../shared/localization/format.js';
 import {getModulePath} from '../../../shared/esm-utils.js';
 
+/* eslint-disable max-len */
 const UIStrings = {
   /** Used to show the duration in milliseconds that something lasted. The `{timeInMs}` placeholder will be replaced with the time duration, shown in milliseconds (e.g. 63 ms) */
   ms: '{timeInMs, number, milliseconds}\xa0ms',
@@ -113,6 +114,7 @@ const UIStrings = {
   /** Table item value for the severity of a high impact, or dangerous vulnerability. Part of a ranking scale in the form: low, medium, high. */
   itemSeverityHigh: 'High',
 };
+/* eslint-enable max-len */
 
 /**
  * Look up the best available locale for the requested language through these fall backs:

package/core/lib/lighthouse-compatibility.js

@@ -36,6 +36,10 @@ function upgradeLhrForCompatibility(lhr) {
       audit.scoreDisplayMode = 'notApplicable';
     }
 
+    if (audit.scoreDisplayMode === 'informative') {
+      audit.score = 1;
+    }
+
     if (audit.details) {
       // Turn `auditDetails.type` of undefined (LHR <4.2) and 'diagnostic' (LHR <5.0)
       // into 'debugdata' (LHR ≥5.0).

package/core/lib/network-request.js

@@ -616,8 +616,16 @@ class NetworkRequest {
   static isContentEncoded(record) {
     // FYI: older devtools logs (like our test fixtures) seems to be lower case, while modern logs
     // are Cased-Like-This.
-    const pattern = /^content-encoding$/i;
-    return record.responseHeaders.some(item => item.name.match(pattern));
+    const patterns = global.isLightrider ? [
+      /^x-original-content-encoding$/i,
+    ] : [
+      /^content-encoding$/i,
+      /^x-content-encoding-over-network$/i,
+    ];
+    const compressionTypes = ['gzip', 'br', 'deflate'];
+    return record.responseHeaders.some(header =>
+      patterns.some(p => header.name.match(p)) && compressionTypes.includes(header.value)
+    );
   }
 
   /**

package/core/lib/polyfill-dom-rect.d.ts

@@ -0,0 +1,2 @@
+export function polyfillDOMRect(): void;
+//# sourceMappingURL=polyfill-dom-rect.d.ts.map

package/core/lib/polyfill-dom-rect.js

@@ -0,0 +1,111 @@
+// @ts-nocheck
+/* eslint-disable */
+
+function polyfillDOMRect() {
+  // devtools assumes clientside :(
+
+  // Everything else in here is the DOMRect polyfill
+  // https://raw.githubusercontent.com/JakeChampion/polyfill-library/master/polyfills/DOMRect/polyfill.js
+
+  (function (global) {
+    function number(v) {
+      return v === undefined ? 0 : Number(v);
+    }
+
+    function different(u, v) {
+      return u !== v && !(isNaN(u) && isNaN(v));
+    }
+
+    function DOMRect(xArg, yArg, wArg, hArg) {
+      let x, y, width, height, left, right, top, bottom;
+
+      x = number(xArg);
+      y = number(yArg);
+      width = number(wArg);
+      height = number(hArg);
+
+      Object.defineProperties(this, {
+        x: {
+          get: function () { return x; },
+          set: function (newX) {
+            if (different(x, newX)) {
+              x = newX;
+              left = right = undefined;
+            }
+          },
+          enumerable: true
+        },
+        y: {
+          get: function () { return y; },
+          set: function (newY) {
+            if (different(y, newY)) {
+              y = newY;
+              top = bottom = undefined;
+            }
+          },
+          enumerable: true
+        },
+        width: {
+          get: function () { return width; },
+          set: function (newWidth) {
+            if (different(width, newWidth)) {
+              width = newWidth;
+              left = right = undefined;
+            }
+          },
+          enumerable: true
+        },
+        height: {
+          get: function () { return height; },
+          set: function (newHeight) {
+            if (different(height, newHeight)) {
+              height = newHeight;
+              top = bottom = undefined;
+            }
+          },
+          enumerable: true
+        },
+        left: {
+          get: function () {
+            if (left === undefined) {
+              left = x + Math.min(0, width);
+            }
+            return left;
+          },
+          enumerable: true
+        },
+        right: {
+          get: function () {
+            if (right === undefined) {
+              right = x + Math.max(0, width);
+            }
+            return right;
+          },
+          enumerable: true
+        },
+        top: {
+          get: function () {
+            if (top === undefined) {
+              top = y + Math.min(0, height);
+            }
+            return top;
+          },
+          enumerable: true
+        },
+        bottom: {
+          get: function () {
+            if (bottom === undefined) {
+              bottom = y + Math.max(0, height);
+            }
+            return bottom;
+          },
+          enumerable: true
+        }
+      });
+    }
+
+    globalThis.DOMRect = DOMRect;
+  })(globalThis);
+}
+
+export {polyfillDOMRect};

package/core/lib/trace-engine.d.ts

@@ -0,0 +1,7 @@
+/** @type {import('../../types/trace-engine.js').TraceProcessor & typeof import('../../types/trace-engine.js').TraceProcessor} */
+export const TraceProcessor: import('../../types/trace-engine.js').TraceProcessor & typeof import('../../types/trace-engine.js').TraceProcessor;
+/** @type {import('../../types/trace-engine.js').TraceHandlers} */
+export const TraceHandlers: any;
+/** @type {import('../../types/trace-engine.js').RootCauses & typeof import('../../types/trace-engine.js').RootCauses} */
+export const RootCauses: import('../../types/trace-engine.js').RootCauses & typeof import('../../types/trace-engine.js').RootCauses;
+//# sourceMappingURL=trace-engine.d.ts.map

package/core/lib/trace-engine.js

@@ -0,0 +1,19 @@
+// @ts-expect-error missing types
+import * as TraceEngine from '@paulirish/trace_engine';
+
+import {polyfillDOMRect} from './polyfill-dom-rect.js';
+
+polyfillDOMRect();
+
+/** @type {import('../../types/trace-engine.js').TraceProcessor & typeof import('../../types/trace-engine.js').TraceProcessor} */
+const TraceProcessor = TraceEngine.Processor.TraceProcessor;
+/** @type {import('../../types/trace-engine.js').TraceHandlers} */
+const TraceHandlers = TraceEngine.Handlers.ModelHandlers;
+/** @type {import('../../types/trace-engine.js').RootCauses & typeof import('../../types/trace-engine.js').RootCauses} */
+const RootCauses = TraceEngine.RootCauses.RootCauses.RootCauses;
+
+export {
+  TraceProcessor,
+  TraceHandlers,
+  RootCauses,
+};

package/core/scripts/download-chrome.sh

@@ -75,4 +75,21 @@ curl "$url" -Lo chrome.zip && unzip -q chrome.zip && rm chrome.zip
 mv * "$chrome_out"
 cd - && rm -rf .tmp-download
 
+echo "OUTPUT DIR: $chrome_out"
 ls "$chrome_out"
+
+echo "";
+echo "Verifying CHROME_PATH...";
+
+if ! [ -f $CHROME_PATH ]; then
+  echo "CHROME_PATH does not point to a valid file"
+  exit 1
+else
+  echo "CHROME_PATH is good!"
+fi
+
+# TODO: Find a convenient way to check the version in windows
+if [ "$machine" != "MinGw" ]; then
+  echo "CHROME_PATH version:"
+  $CHROME_PATH --version
+fi