lighthouse 11.3.0-dev.20231206 → 11.3.0-dev.20231208

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

@@ -15,7 +15,6 @@
 import BaseGatherer from '../base-gatherer.js';
 import {resolveNodeIdToObjectId} from '../driver/dom.js';
 import {pageFunctions} from '../../lib/page-functions.js';
-import * as RectHelpers from '../../lib/rect-helpers.js';
 import {Sentry} from '../../lib/sentry.js';
 import Trace from './trace.js';
 import {ProcessedTrace} from '../../computed/processed-trace.js';
@@ -25,7 +24,9 @@ import {Responsiveness} from '../../computed/metrics/responsiveness.js';
 import {CumulativeLayoutShift} from '../../computed/metrics/cumulative-layout-shift.js';
 import {ExecutionContext} from '../driver/execution-context.js';
 
-/** @typedef {{nodeId: number, score?: number, animations?: {name?: string, failureReasonsMask?: number, unsupportedProperties?: string[]}[], type?: string}} TraceElementData */
+/** @typedef {{nodeId: number, animations?: {name?: string, failureReasonsMask?: number, unsupportedProperties?: string[]}[], type?: string}} TraceElementData */
+
+const MAX_LAYOUT_SHIFT_ELEMENTS = 15;
 
 /**
  * @this {HTMLElement}
@@ -63,75 +64,19 @@ class TraceElements extends BaseGatherer {
   }
 
   /**
-   * @param {Array<number>} rect
-   * @return {LH.Artifacts.Rect}
-   */
-  static traceRectToLHRect(rect) {
-    const rectArgs = {
-      x: rect[0],
-      y: rect[1],
-      width: rect[2],
-      height: rect[3],
-    };
-    return RectHelpers.addRectTopAndBottom(rectArgs);
-  }
-
-  /**
-   * This function finds the top (up to 5) elements that contribute to the CLS score of the page.
-   * Each layout shift event has a 'score' which is the amount added to the CLS as a result of the given shift(s).
-   * We calculate the score per element by taking the 'score' of each layout shift event and
-   * distributing it between all the nodes that were shifted, proportianal to the impact region of
-   * each shifted element.
-   * @param {LH.Artifacts.ProcessedTrace} processedTrace
-   * @return {Array<TraceElementData>}
+   * This function finds the top (up to 15) elements that contribute to the CLS score of the page.
+   *
+   * @param {LH.Trace} trace
+   * @param {LH.Gatherer.Context} context
+   * @return {Promise<Array<TraceElementData>>}
    */
-  static getTopLayoutShiftElements(processedTrace) {
-    /** @type {Map<number, number>} */
-    const clsPerNode = new Map();
-    const shiftEvents = CumulativeLayoutShift.getLayoutShiftEvents(processedTrace);
+  static async getTopLayoutShiftElements(trace, context) {
+    const {impactByNodeId} = await CumulativeLayoutShift.request(trace, context);
 
-    shiftEvents.forEach((event) => {
-      if (!event || !event.impactedNodes) {
-        return;
-      }
-
-      let totalAreaOfImpact = 0;
-      /** @type {Map<number, number>} */
-      const pixelsMovedPerNode = new Map();
-
-      event.impactedNodes.forEach(node => {
-        if (!node.node_id || !node.old_rect || !node.new_rect) {
-          return;
-        }
-
-        const oldRect = TraceElements.traceRectToLHRect(node.old_rect);
-        const newRect = TraceElements.traceRectToLHRect(node.new_rect);
-        const areaOfImpact = RectHelpers.getRectArea(oldRect) +
-          RectHelpers.getRectArea(newRect) -
-          RectHelpers.getRectOverlapArea(oldRect, newRect);
-
-        pixelsMovedPerNode.set(node.node_id, areaOfImpact);
-        totalAreaOfImpact += areaOfImpact;
-      });
-
-      for (const [nodeId, pixelsMoved] of pixelsMovedPerNode.entries()) {
-        let clsContribution = clsPerNode.get(nodeId) || 0;
-        clsContribution += (pixelsMoved / totalAreaOfImpact) * event.weightedScore;
-        clsPerNode.set(nodeId, clsContribution);
-      }
-    });
-
-    const topFive = [...clsPerNode.entries()]
-    .sort((a, b) => b[1] - a[1])
-    .slice(0, 5)
-    .map(([nodeId, clsContribution]) => {
-      return {
-        nodeId: nodeId,
-        score: clsContribution,
-      };
-    });
-
-    return topFive;
+    return [...impactByNodeId.entries()]
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, MAX_LAYOUT_SHIFT_ELEMENTS)
+      .map(([nodeId]) => ({nodeId}));
   }
 
   /**
@@ -265,7 +210,7 @@ class TraceElements extends BaseGatherer {
     const {mainThreadEvents} = processedTrace;
 
     const lcpNodeData = await TraceElements.getLcpElement(trace, context);
-    const clsNodeData = TraceElements.getTopLayoutShiftElements(processedTrace);
+    const clsNodeData = await TraceElements.getTopLayoutShiftElements(trace, context);
     const animatedElementData = await this.getAnimatedElements(mainThreadEvents);
     const responsivenessElementData = await TraceElements.getResponsivenessElement(trace, context);
 
@@ -311,7 +256,6 @@ class TraceElements extends BaseGatherer {
           traceElements.push({
             traceEventType,
             ...response.result.value,
-            score: backendNodeData[i].score,
             animations: backendNodeData[i].animations,
             nodeId: backendNodeId,
             type: backendNodeData[i].type,

package/core/lib/i18n/i18n.d.ts

@@ -69,9 +69,9 @@ export function lookupLocale(locales?: (string | string[]) | undefined, possible
  * Returns a function that generates `LH.IcuMessage` objects to localize the
  * messages in `fileStrings` and the shared `i18n.UIStrings`.
  * @param {string} filename
- * @param {Record<string, string>} fileStrings
+ * @param {Record<string, string>=} fileStrings
  */
-export function createIcuMessageFn(filename: string, fileStrings: Record<string, string>): (message: string, values?: Record<string, string | number> | undefined) => LH.IcuMessage;
+export function createIcuMessageFn(filename: string, fileStrings?: Record<string, string> | undefined): (message: string, values?: Record<string, string | number> | undefined) => LH.IcuMessage;
 /**
  * Returns true if the given value is a string or an LH.IcuMessage.
  * @param {unknown} value

package/core/lib/i18n/i18n.js

@@ -168,9 +168,9 @@ function lookupLocale(locales, possibleLocales) {
  * Returns a function that generates `LH.IcuMessage` objects to localize the
  * messages in `fileStrings` and the shared `i18n.UIStrings`.
  * @param {string} filename
- * @param {Record<string, string>} fileStrings
+ * @param {Record<string, string>=} fileStrings
  */
-function createIcuMessageFn(filename, fileStrings) {
+function createIcuMessageFn(filename, fileStrings = {}) {
   if (filename.startsWith('file://')) filename = url.fileURLToPath(filename);
 
   // In the common case, `filename` is an absolute path that needs to be transformed

package/core/lib/network-request.js

@@ -614,7 +614,10 @@ class NetworkRequest {
    * @return {boolean}
    */
   static isContentEncoded(record) {
-    return record.responseHeaders.some(item => item.name === 'Content-Encoding');
+    // 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));
   }
 
   /**

package/core/lib/rect-helpers.d.ts

@@ -97,4 +97,9 @@ export function filterOutRectsContainedByOthers(rects: LH.Artifacts.Rect[]): LH.
  * @return {LH.Artifacts.Rect[]}
  */
 export function filterOutTinyRects(rects: LH.Artifacts.Rect[]): LH.Artifacts.Rect[];
+/**
+ * @param {Array<number>} rect
+ * @return {LH.Artifacts.Rect}
+ */
+export function traceRectToLHRect(rect: Array<number>): LH.Artifacts.Rect;
 //# sourceMappingURL=rect-helpers.d.ts.map

package/core/lib/rect-helpers.js

@@ -232,6 +232,20 @@ function allRectsContainedWithinEachOther(rectListA, rectListB) {
   return true;
 }
 
+/**
+ * @param {Array<number>} rect
+ * @return {LH.Artifacts.Rect}
+ */
+function traceRectToLHRect(rect) {
+  const rectArgs = {
+    x: rect[0],
+    y: rect[1],
+    width: rect[2],
+    height: rect[3],
+  };
+  return addRectTopAndBottom(rectArgs);
+}
+
 export {
   rectContainsPoint,
   rectContains,
@@ -248,4 +262,5 @@ export {
   allRectsContainedWithinEachOther,
   filterOutRectsContainedByOthers,
   filterOutTinyRects,
+  traceRectToLHRect,
 };

package/core/lib/script-helpers.d.ts

@@ -41,6 +41,6 @@ export function estimateTransferSize(networkRecord: LH.Artifacts.NetworkRequest
  * @param {LH.Artifacts} artifacts
  * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
  */
-export function estimateCompressionRatioForContent(compressionRatioByUrl: Map<string, number>, url: string, artifacts: LH.Artifacts, networkRecords: Array<LH.Artifacts.NetworkRequest>): Promise<number>;
+export function estimateCompressionRatioForContent(compressionRatioByUrl: Map<string, number>, url: string, artifacts: LH.Artifacts, networkRecords: Array<LH.Artifacts.NetworkRequest>): number;
 import { NetworkRequest } from './network-request.js';
 //# sourceMappingURL=script-helpers.d.ts.map

package/core/lib/script-helpers.js

@@ -137,7 +137,7 @@ function estimateCompressedContentSize(networkRecord, totalBytes, resourceType)
  * @param {LH.Artifacts} artifacts
  * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
  */
-async function estimateCompressionRatioForContent(compressionRatioByUrl, url,
+function estimateCompressionRatioForContent(compressionRatioByUrl, url,
   artifacts, networkRecords) {
   let compressionRatio = compressionRatioByUrl.get(url);
   if (compressionRatio !== undefined) return compressionRatio;