chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/models/trace/helpers/TreeHelpers.ts

@@ -27,6 +27,7 @@ export interface TraceEntryTree {
   maxDepth: number;
 }
 
+/** Node in the graph that defines all parent/child relationships. */
 export interface TraceEntryNode {
   entry: Types.Events.Event;
   depth: number;
@@ -36,69 +37,105 @@ export interface TraceEntryNode {
   children: TraceEntryNode[];
 }
 
+export interface AINodeSerialized {
+  name: string;
+  dur?: number;
+  self?: number;
+  children?: AINodeSerialized[];
+  url?: string;
+  selected?: boolean;
+}
+
 /**
- * Represents a node in a trace entry tree, simplified for AI Assistance processing.
+ * Node in a graph simplified for AI Assistance processing. The graph mirrors the TraceEntryNode one.
+ * Huge tip of the hat to Victor Porof for prototyping this with some great work: https://crrev.com/c/5711249
  */
-export class TraceEntryNodeForAI {
+export class AINode {
+  // event: Types.Events.Event; // Set in the constructor.
+  name: string;
+  duration?: Types.Timing.MilliSeconds;
+  selfDuration?: Types.Timing.MilliSeconds;
   id?: TraceEntryNodeId;
-  domain?: string;
-  line?: number;
-  column?: number;
-  function?: string;
-  children?: TraceEntryNodeForAI[];
+  children?: AINode[];
+  url?: string;
   selected?: boolean;
 
-  constructor(
-      public type: string, public start: Types.Timing.MilliSeconds, public end?: Types.Timing.MilliSeconds,
-      public totalTime?: Types.Timing.MilliSeconds, public selfTime?: Types.Timing.MilliSeconds) {
-  }
+  constructor(public event: Types.Events.Event) {
+    this.name = event.name;
+    this.duration = event.dur === undefined ? undefined : microSecondsToMilliseconds(event.dur);
 
-  static #fromTraceEvent(event: Types.Events.Event): TraceEntryNodeForAI {
-    const start = microSecondsToMilliseconds(event.ts);
-    const duration = event.dur === undefined ? undefined : microSecondsToMilliseconds(event.dur);
-    const nodeForAI = new TraceEntryNodeForAI(event.name, start, duration);
     if (Types.Events.isProfileCall(event)) {
-      nodeForAI.function = event.callFrame.functionName || '(anonymous)';
-      try {
-        const url = new URL(event.callFrame.url);
-        nodeForAI.domain = url.origin;
-        nodeForAI.line = event.callFrame.lineNumber;
-        nodeForAI.column = event.callFrame.columnNumber;
-      } catch (e) {
-      }
+      this.name = event.callFrame.functionName || '(anonymous)';
+      this.url = event.callFrame.url;
     }
-    return nodeForAI;
+  }
+
+  // Manually handle how nodes in this tree are serialized. We'll drop serveral properties that we don't need in the JSON string.
+  // FYI: toJSON() is invoked implicitly via JSON.stringify()
+  toJSON(): AINodeSerialized {
+    return {
+      selected: this.selected,
+      name: this.name,
+      url: this.url,
+      // Round milliseconds because we don't need the precision
+      dur: this.duration === undefined ? undefined : Math.round(this.duration * 10) / 10,
+      self: this.selfDuration === undefined ? undefined : Math.round(this.selfDuration * 10) / 10,
+      children: this.children?.length ? this.children : undefined,
+    };
+  }
+
+  static #fromTraceEvent(event: Types.Events.Event): AINode {
+    return new AINode(event);
   }
 
   /**
-   * Builds a TraceEntryNodeForAI tree from a TraceEntryNode tree and marks the selected node.
+   * Builds a TraceEntryNodeForAI tree from a node and marks the selected node. Primary entrypoint from EntriesFilter
    */
-  static #fromTraceEntryTree(node: TraceEntryNode, selectedEntryNode: TraceEntryNode): TraceEntryNodeForAI {
-    const nodeForAI = TraceEntryNodeForAI.#fromTraceEvent(node.entry);
-    nodeForAI.id = node.id;
-    if (node === selectedEntryNode) {
-      nodeForAI.selected = true;
-    }
-    nodeForAI.selfTime = node.selfTime === undefined ? undefined : microSecondsToMilliseconds(node.selfTime);
-    for (const child of node.children) {
-      nodeForAI.children ??= [];
-      nodeForAI.children.push(TraceEntryNodeForAI.#fromTraceEntryTree(child, selectedEntryNode));
+  static fromEntryNode(selectedNode: TraceEntryNode, entryIsVisibleInTimeline: (event: Types.Events.Event) => boolean):
+      AINode {
+    /**
+     * Builds a AINode tree from a TraceEntryNode tree and marks the selected node.
+     */
+    function fromEntryNodeAndTree(node: TraceEntryNode): AINode {
+      const aiNode = AINode.#fromTraceEvent(node.entry);
+      aiNode.id = node.id;
+      if (node === selectedNode) {
+        aiNode.selected = true;
+      }
+      aiNode.selfDuration = node.selfTime === undefined ? undefined : microSecondsToMilliseconds(node.selfTime);
+      for (const child of node.children) {
+        aiNode.children ??= [];
+        aiNode.children.push(fromEntryNodeAndTree(child));
+      }
+      return aiNode;
     }
-    return nodeForAI;
-  }
 
-  static fromSelectedEntryNode(selectedEntryNode: TraceEntryNode): TraceEntryNodeForAI {
-    function getRoot(node: TraceEntryNode): TraceEntryNode {
-      if (node.parent) {
-        return getRoot(node.parent);
+    function findTopMostVisibleAncestor(node: TraceEntryNode): TraceEntryNode {
+      const parentNodes = [node];
+      let parent = node.parent;
+      while (parent) {
+        parentNodes.unshift(parent);
+        parent = parent.parent;
       }
-      return node;
+      return parentNodes.find(node => entryIsVisibleInTimeline(node.entry)) ?? node;
     }
 
-    return TraceEntryNodeForAI.#fromTraceEntryTree(getRoot(selectedEntryNode), selectedEntryNode);
+    const topMostVisibleRoot = findTopMostVisibleAncestor(selectedNode);
+    const aiNode = fromEntryNodeAndTree(topMostVisibleRoot);
+
+    // If our root wasn't visible, this could return an array of multiple RunTasks.
+    // But with a visible root, we safely get back the exact same root, now with its descendent tree updated.
+    // Filter to ensure our tree here only has "visible" entries
+    const [filteredAiNodeRoot] = AINode.#filterRecursive([aiNode], node => {
+      if (node.event.name === 'V8.CompileCode' || node.event.name === 'UpdateCounters') {
+        return false;
+      }
+      return entryIsVisibleInTimeline(node.event);
+    });
+    return filteredAiNodeRoot;
   }
 
-  static getSelectedNodeForTraceEntryTreeForAI(node: TraceEntryNodeForAI): TraceEntryNodeForAI|null {
+  static getSelectedNodeWithinTree(node: AINode): AINode|null {
     if (node.selected) {
       return node;
     }
@@ -106,13 +143,66 @@ export class TraceEntryNodeForAI {
       return null;
     }
     for (const child of node.children) {
-      const returnedNode = TraceEntryNodeForAI.getSelectedNodeForTraceEntryTreeForAI(child);
+      const returnedNode = AINode.getSelectedNodeWithinTree(child);
       if (returnedNode) {
         return returnedNode;
       }
     }
     return null;
   }
+
+  static #filterRecursive(list: AINode[], predicate: (node: AINode) => boolean): AINode[] {
+    let done;
+    do {
+      done = true;
+      const filtered: AINode[] = [];
+      for (const node of list) {
+        if (predicate(node)) {
+          // Keep it
+          filtered.push(node);
+        } else if (node.children) {
+          filtered.push(...node.children);
+          done = false;
+        }
+      }
+      list = filtered;
+    } while (!done);
+
+    for (const node of list) {
+      if (node.children) {
+        node.children = AINode.#filterRecursive(node.children, predicate);
+      }
+    }
+    return list;
+  }
+
+  static #removeInexpensiveNodesRecursively(
+      list: AINode[],
+      options?: {minDuration?: number, minSelf?: number, minJsDuration?: number, minJsSelf?: number}): AINode[] {
+    const minDuration = options?.minDuration ?? 0;
+    const minSelf = options?.minSelf ?? 0;
+    const minJsDuration = options?.minJsDuration ?? 0;
+    const minJsSelf = options?.minJsSelf ?? 0;
+
+    const isJS = (node: AINode): boolean => Boolean(node.url);
+    const longEnough = (node: AINode): boolean =>
+        node.duration === undefined || node.duration >= (isJS(node) ? minJsDuration : minDuration);
+    const selfLongEnough = (node: AINode): boolean =>
+        node.selfDuration === undefined || node.selfDuration >= (isJS(node) ? minJsSelf : minSelf);
+
+    return AINode.#filterRecursive(list, node => longEnough(node) && selfLongEnough(node));
+  }
+
+  // Invoked from DrJonesPerformanceAgent
+  sanitize(): void {
+    if (this.children) {
+      this.children = AINode.#removeInexpensiveNodesRecursively(this.children, {
+        minDuration: Types.Timing.MilliSeconds(1),
+        minJsDuration: Types.Timing.MilliSeconds(1),
+        minJsSelf: Types.Timing.MilliSeconds(0.1),
+      });
+    }
+  }
 }
 
 class TraceEntryNodeIdTag {

package/front_end/models/trace/insights/{CumulativeLayoutShift.test.ts → CLSCulprits.test.ts}

@@ -8,7 +8,7 @@ import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {InsightRunners} from './insights.js';
+import {Models} from './insights.js';
 
 export async function processTrace(testContext: Mocha.Suite|Mocha.Context|null, traceFile: string) {
   const {parsedTrace, insights} = await TraceLoader.traceEngine(testContext, traceFile);
@@ -22,12 +22,12 @@ export async function processTrace(testContext: Mocha.Suite|Mocha.Context|null,
 // Root cause invalidation window.
 const INVALIDATION_WINDOW = Helpers.Timing.secondsToMicroseconds(Types.Timing.Seconds(0.5));
 
-describeWithEnvironment('CumulativeLayoutShift', function() {
+describeWithEnvironment('CLSCulprits', function() {
   describe('non composited animations', function() {
     it('gets the correct non composited animations', async function() {
       const {data, insights} = await processTrace(this, 'non-composited-animation.json.gz');
       const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
-      const insight = getInsightOrError('CumulativeLayoutShift', insights, firstNav);
+      const insight = getInsightOrError('CLSCulprits', insights, firstNav);
       const {animationFailures} = insight;
 
       const simpleAnimation = data.Animations.animations.find(animation => {
@@ -37,18 +37,18 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
         return animation.args.data.beginEvent.args.data.displayName === 'top';
       });
 
-      const expected: InsightRunners.CumulativeLayoutShift.NoncompositedAnimationFailure[] = [
+      const expected: Models.CLSCulprits.NoncompositedAnimationFailure[] = [
         {
           name: 'simple-animation',
-          failureReasons: [InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
+          failureReasons: [Models.CLSCulprits.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
           unsupportedProperties: ['color'],
           animation: simpleAnimation,
         },
         {
           name: 'top',
           failureReasons: [
-            InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.TARGET_HAS_INVALID_COMPOSITING_STATE,
-            InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY,
+            Models.CLSCulprits.AnimationFailureReasons.TARGET_HAS_INVALID_COMPOSITING_STATE,
+            Models.CLSCulprits.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY,
           ],
           unsupportedProperties: ['top'],
           animation: top,
@@ -60,7 +60,7 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
     it.skip('[crbug.com/370382177]: gets the correct non composited animations for shift', async function() {
       const {data, insights} = await processTrace(this, 'non-composited-animation-shift.json.gz');
       const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
-      const insight = getInsightOrError('CumulativeLayoutShift', insights, firstNav);
+      const insight = getInsightOrError('CLSCulprits', insights, firstNav);
       const {shifts, animationFailures} = insight;
 
       const simpleAnimation = data.Animations.animations.find(animation => {
@@ -70,30 +70,30 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
         return animation.args.data.beginEvent.args.data.displayName === 'top';
       });
 
-      const shiftAnimations: InsightRunners.CumulativeLayoutShift.NoncompositedAnimationFailure[] = [];
+      const shiftAnimations: Models.CLSCulprits.NoncompositedAnimationFailure[] = [];
       shifts.forEach(entry => {
         shiftAnimations.push(...entry.nonCompositedAnimations);
       });
-      const expectedWithShift: InsightRunners.CumulativeLayoutShift.NoncompositedAnimationFailure[] = [
+      const expectedWithShift: Models.CLSCulprits.NoncompositedAnimationFailure[] = [
         {
           name: 'simple-animation',
-          failureReasons: [InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
+          failureReasons: [Models.CLSCulprits.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
           unsupportedProperties: ['height', 'color', 'top'],
           animation: simpleAnimation,
         },
       ];
       assert.deepStrictEqual(shiftAnimations, expectedWithShift);
 
-      const expectedAll: InsightRunners.CumulativeLayoutShift.NoncompositedAnimationFailure[] = [
+      const expectedAll: Models.CLSCulprits.NoncompositedAnimationFailure[] = [
         {
           name: 'simple-animation',
-          failureReasons: [InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
+          failureReasons: [Models.CLSCulprits.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
           unsupportedProperties: ['height', 'color', 'top'],
           animation: simpleAnimation,
         },
         {
           name: 'top',
-          failureReasons: [InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
+          failureReasons: [Models.CLSCulprits.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
           unsupportedProperties: ['top'],
           animation: top,
         },
@@ -105,7 +105,7 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
     it('returns no insights when there are no non-composited animations', async function() {
       const {data, insights} = await processTrace(this, 'lcp-images.json.gz');
       const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
-      const insight = getInsightOrError('CumulativeLayoutShift', insights, firstNav);
+      const insight = getInsightOrError('CLSCulprits', insights, firstNav);
       const {animationFailures} = insight;
 
       assert.isEmpty(animationFailures);
@@ -115,7 +115,7 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
     it('returns correct layout shifts', async function() {
       const {data, insights} = await processTrace(this, 'cls-single-frame.json.gz');
       const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
-      const insight = getInsightOrError('CumulativeLayoutShift', insights, firstNav);
+      const insight = getInsightOrError('CLSCulprits', insights, firstNav);
       const {shifts} = insight;
 
       assert.exists(shifts);
@@ -127,7 +127,7 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
         // Trace has a single iframe that gets created before the first layout shift and causes a layout shift.
         const {data, insights} = await processTrace(this, 'iframe-shift.json.gz');
         const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
-        const insight = getInsightOrError('CumulativeLayoutShift', insights, firstNav);
+        const insight = getInsightOrError('CLSCulprits', insights, firstNav);
         const {shifts} = insight;
 
         assert.exists(shifts);
@@ -159,7 +159,7 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
         // Trace has font load before the second layout shift.
         const {data, insights} = await processTrace(this, 'iframe-shift.json.gz');
         const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
-        const insight = getInsightOrError('CumulativeLayoutShift', insights, firstNav);
+        const insight = getInsightOrError('CLSCulprits', insights, firstNav);
         const {shifts} = insight;
 
         assert.exists(shifts);
@@ -189,13 +189,35 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
         assert.isOk(shift3);
         assert.isEmpty(shift3[1].fontRequests);
       });
+
+      it('handles potential unsized images root cause correctly', async function() {
+        const {data, insights} = await processTrace(this, 'unsized-images.json.gz');
+        const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
+        const insight = getInsightOrError('CLSCulprits', insights, firstNav);
+        const {shifts} = insight;
+        assert.exists(shifts);
+        assert.strictEqual(shifts.size, 2);
+
+        const unsizedImages = data.LayoutShifts.layoutImageUnsizedEvents;
+        assert.strictEqual(unsizedImages.length, 2);
+
+        const layoutShiftEvents = Array.from(shifts.entries());
+        const shift1 = layoutShiftEvents.at(0);
+        assert.isOk(shift1);
+        // Root cause should match the nodeId of the unsized images events.
+        assert.strictEqual(shift1[1].unsizedImages[0], unsizedImages[0].args.data.nodeId);
+
+        const shift2 = layoutShiftEvents.at(1);
+        assert.isOk(shift2);
+        assert.strictEqual(shift2[1].unsizedImages[0], unsizedImages[1].args.data.nodeId);
+      });
     });
   });
   describe('clusters', function() {
     it('returns clusters correctly', async function() {
       const {data, insights} = await processTrace(this, 'iframe-shift.json.gz');
       const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
-      const insight = getInsightOrError('CumulativeLayoutShift', insights, firstNav);
+      const insight = getInsightOrError('CLSCulprits', insights, firstNav);
       const {shifts, clusters} = insight;
 
       assert.exists(clusters);
@@ -211,7 +233,7 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
 
     it('returns clusters correctly for non-navigations', async function() {
       const {insights} = await processTrace(this, 'cls-no-nav.json.gz');
-      const insight = getInsightOrError('CumulativeLayoutShift', insights);
+      const insight = getInsightOrError('CLSCulprits', insights);
       const {shifts, clusters} = insight;
 
       assert.exists(clusters);

package/front_end/models/trace/insights/{CumulativeLayoutShift.ts → CLSCulprits.ts}

@@ -2,13 +2,28 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
+import type * as Protocol from '../../../generated/protocol.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
+import type {InsightModel, InsightSetContext, RequiredData} from './types.js';
 
-export type CLSInsightResult = InsightResult<{
+const UIStrings = {
+  /** Title of an insight that provides details about why elements shift/move on the page. The causes for these shifts are referred to as culprits ("reasons"). */
+  title: 'Layout shift culprits',
+  /**
+   * @description Description of a DevTools insight that identifies the reasons that elements shift on the page.
+   * This is displayed after a user expands the section to see more. No character length limits.
+   */
+  description:
+      'Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://web.dev/articles/optimize-cls), such as elements being added, removed, or their fonts changing as the page loads.',
+};
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/CLSCulprits.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export type CLSCulpritsInsightModel = InsightModel<{
   animationFailures: readonly NoncompositedAnimationFailure[],
   shifts: Map<Types.Events.SyntheticLayoutShift, LayoutShiftRootCausesData>,
   clusters: Types.Events.SyntheticLayoutShiftCluster[],
@@ -146,17 +161,23 @@ const ACTIONABLE_FAILURE_REASONS = [
 
 // 500ms window.
 // Use this window to consider events and requests that may have caused a layout shift.
-const INVALIDATION_WINDOW = Helpers.Timing.secondsToMicroseconds(Types.Timing.Seconds(0.5));
+const ROOT_CAUSE_WINDOW = Helpers.Timing.secondsToMicroseconds(Types.Timing.Seconds(0.5));
 
 export interface LayoutShiftRootCausesData {
   iframeIds: string[];
   fontRequests: Types.Events.SyntheticNetworkRequest[];
   nonCompositedAnimations: NoncompositedAnimationFailure[];
+  unsizedImages: Protocol.DOM.BackendNodeId[];
 }
 
-function isInInvalidationWindow(event: Types.Events.Event, targetEvent: Types.Events.Event): boolean {
+/**
+ * Returns if an event happens within the root cause window, before the target event.
+ *          ROOT_CAUSE_WINDOW               v target event
+ *        |------------------------|=======================
+ */
+function isInRootCauseWindow(event: Types.Events.Event, targetEvent: Types.Events.Event): boolean {
   const eventEnd = event.dur ? event.ts + event.dur : event.ts;
-  return eventEnd < targetEvent.ts && eventEnd >= targetEvent.ts - INVALIDATION_WINDOW;
+  return eventEnd < targetEvent.ts && eventEnd >= targetEvent.ts - ROOT_CAUSE_WINDOW;
 }
 
 export function getNonCompositedFailure(animationEvent: Types.Events.SyntheticAnimationPair):
@@ -205,14 +226,14 @@ function getNonCompositedFailureRootCauses(
     }
     allAnimationFailures.push(...failures);
 
-    const nextPrePaint = getNextPrePaintEvent(prePaintEvents, animation);
+    const nextPrePaint = getNextEvent(prePaintEvents, animation) as Types.Events.PrePaint | null;
     // If no following prePaint, this is not a root cause.
     if (!nextPrePaint) {
       continue;
     }
 
-    // If the animation event is outside the INVALIDATION_WINDOW, it could not be a root cause.
-    if (!isInInvalidationWindow(animation, nextPrePaint)) {
+    // If the animation event is outside the ROOT_CAUSE_WINDOW, it could not be a root cause.
+    if (!isInRootCauseWindow(animation, nextPrePaint)) {
       continue;
     }
 
@@ -269,19 +290,18 @@ function getShiftsByPrePaintEvents(
 }
 
 /**
- * This gets the first prePaint event that follows the provided event and returns it.
+ * Given a source event list, this returns the first event of that list that directly follows the target event.
  */
-function getNextPrePaintEvent(
-    prePaintEvents: Types.Events.PrePaint[], targetEvent: Types.Events.Event): Types.Events.PrePaint|undefined {
-  // Get the first PrePaint event that happened after the targetEvent.
-  const nextPrePaintIndex = Platform.ArrayUtilities.nearestIndexFromBeginning(
-      prePaintEvents, prePaint => prePaint.ts > targetEvent.ts + (targetEvent.dur || 0));
+function getNextEvent(sourceEvents: Types.Events.Event[], targetEvent: Types.Events.Event): Types.Events.Event|
+    undefined {
+  const index = Platform.ArrayUtilities.nearestIndexFromBeginning(
+      sourceEvents, source => source.ts > targetEvent.ts + (targetEvent.dur || 0));
   // No PrePaint event registered after this event
-  if (nextPrePaintIndex === null) {
+  if (index === null) {
     return undefined;
   }
 
-  return prePaintEvents[nextPrePaintIndex];
+  return sourceEvents[index];
 }
 
 /**
@@ -294,7 +314,7 @@ function getIframeRootCauses(
     rootCausesByShift: Map<Types.Events.LayoutShift, LayoutShiftRootCausesData>,
     domLoadingEvents: readonly Types.Events.DomLoading[]): Map<Types.Events.LayoutShift, LayoutShiftRootCausesData> {
   for (const iframeEvent of iframeCreatedEvents) {
-    const nextPrePaint = getNextPrePaintEvent(prePaintEvents, iframeEvent);
+    const nextPrePaint = getNextEvent(prePaintEvents, iframeEvent) as Types.Events.PrePaint | null;
     // If no following prePaint, this is not a root cause.
     if (!nextPrePaint) {
       continue;
@@ -324,10 +344,43 @@ function getIframeRootCauses(
   return rootCausesByShift;
 }
 
+/**
+ * An unsized image is considered a root cause if its PaintImage can be correlated to a
+ * layout shift. We can correlate PaintImages with unsized images by their matching nodeIds.
+ *                           X      <- layout shift
+ *              |----------------|
+ *                    ^ PrePaint event   |-----|
+ *                                          ^ PaintImage
+ */
+function getUnsizedImageRootCauses(
+    unsizedImageEvents: readonly Types.Events.LayoutImageUnsized[], paintImageEvents: Types.Events.PaintImage[],
+    shiftsByPrePaint: Map<Types.Events.PrePaint, Types.Events.LayoutShift[]>,
+    rootCausesByShift: Map<Types.Events.LayoutShift, LayoutShiftRootCausesData>):
+    Map<Types.Events.LayoutShift, LayoutShiftRootCausesData> {
+  shiftsByPrePaint.forEach((shifts, prePaint) => {
+    const paintImage = getNextEvent(paintImageEvents, prePaint) as Types.Events.PaintImage | null;
+    // The unsized image corresponds to this PaintImage.
+    const matchingNode =
+        unsizedImageEvents.find(unsizedImage => unsizedImage.args.data.nodeId === paintImage?.args.data.nodeId);
+    if (!matchingNode) {
+      return;
+    }
+    // The unsized image is a potential root cause of all the shifts of this prePaint.
+    for (const shift of shifts) {
+      const rootCausesForShift = rootCausesByShift.get(shift);
+      if (!rootCausesForShift) {
+        throw new Error('Unaccounted shift');
+      }
+      rootCausesForShift.unsizedImages.push(matchingNode.args.data.nodeId);
+    }
+  });
+  return rootCausesByShift;
+}
+
 /**
  * A font request is considered a root cause if the request occurs before a prePaint event
  * and within this prePaint event a layout shift(s) occurs. Additionally, this font request should
- * happen within the INVALIDATION_WINDOW of the prePaint event.
+ * happen within the ROOT_CAUSE_WINDOW of the prePaint event.
  */
 function getFontRootCauses(
     networkRequests: Types.Events.SyntheticNetworkRequest[], prePaintEvents: Types.Events.PrePaint[],
@@ -338,13 +391,13 @@ function getFontRootCauses(
       networkRequests.filter(req => req.args.data.resourceType === 'Font' && req.args.data.mimeType.startsWith('font'));
 
   for (const req of fontRequests) {
-    const nextPrePaint = getNextPrePaintEvent(prePaintEvents, req);
+    const nextPrePaint = getNextEvent(prePaintEvents, req) as Types.Events.PrePaint | null;
     if (!nextPrePaint) {
       continue;
     }
 
-    // If the req is outside the INVALIDATION_WINDOW, it could not be a root cause.
-    if (!isInInvalidationWindow(req, nextPrePaint)) {
+    // If the req is outside the ROOT_CAUSE_WINDOW, it could not be a root cause.
+    if (!isInRootCauseWindow(req, nextPrePaint)) {
       continue;
     }
 
@@ -367,13 +420,19 @@ function getFontRootCauses(
   return rootCausesByShift;
 }
 
-export function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): CLSInsightResult {
+function finalize(partialModel: Omit<CLSCulpritsInsightModel, 'title'|'description'>): CLSCulpritsInsightModel {
+  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+}
+
+export function generateInsight(
+    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): CLSCulpritsInsightModel {
   const isWithinContext = (event: Types.Events.Event): boolean => Helpers.Timing.eventIsInBounds(event, context.bounds);
 
   const compositeAnimationEvents = parsedTrace.Animations.animations.filter(isWithinContext);
   const iframeEvents = parsedTrace.LayoutShifts.renderFrameImplCreateChildFrameEvents.filter(isWithinContext);
   const networkRequests = parsedTrace.NetworkRequests.byTime.filter(isWithinContext);
   const domLoadingEvents = parsedTrace.LayoutShifts.domLoadingEvents.filter(isWithinContext);
+  const unsizedImageEvents = parsedTrace.LayoutShifts.layoutImageUnsizedEvents.filter(isWithinContext);
 
   const clusterKey = context.navigation ? context.navigationId : Types.Events.NO_NAVIGATION;
   const clusters = parsedTrace.LayoutShifts.clustersByNavigationId.get(clusterKey) ?? [];
@@ -381,18 +440,20 @@ export function generateInsight(parsedTrace: RequiredData<typeof deps>, context:
   const worstCluster = clustersByScore.at(0);
   const layoutShifts = clusters.flatMap(cluster => cluster.events);
   const prePaintEvents = parsedTrace.LayoutShifts.prePaintEvents.filter(isWithinContext);
+  const paintImageEvents = parsedTrace.LayoutShifts.paintImageEvents.filter(isWithinContext);
 
   // Get root causes.
   const rootCausesByShift = new Map<Types.Events.SyntheticLayoutShift, LayoutShiftRootCausesData>();
   const shiftsByPrePaint = getShiftsByPrePaintEvents(layoutShifts, prePaintEvents);
 
   for (const shift of layoutShifts) {
-    rootCausesByShift.set(shift, {iframeIds: [], fontRequests: [], nonCompositedAnimations: []});
+    rootCausesByShift.set(shift, {iframeIds: [], fontRequests: [], nonCompositedAnimations: [], unsizedImages: []});
   }
 
   // Populate root causes for rootCausesByShift.
   getIframeRootCauses(iframeEvents, prePaintEvents, shiftsByPrePaint, rootCausesByShift, domLoadingEvents);
   getFontRootCauses(networkRequests, prePaintEvents, shiftsByPrePaint, rootCausesByShift);
+  getUnsizedImageRootCauses(unsizedImageEvents, paintImageEvents, shiftsByPrePaint, rootCausesByShift);
   const animationFailures =
       getNonCompositedFailureRootCauses(compositeAnimationEvents, prePaintEvents, shiftsByPrePaint, rootCausesByShift);
 
@@ -401,11 +462,11 @@ export function generateInsight(parsedTrace: RequiredData<typeof deps>, context:
     relatedEvents.push(worstCluster);
   }
 
-  return {
+  return finalize({
     relatedEvents,
     animationFailures,
     shifts: rootCausesByShift,
     clusters,
     worstCluster,
-  };
+  });
 }