chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/models/trace/handlers/MetaHandler.ts

@@ -25,6 +25,7 @@ let browserThreadId: Types.Events.ThreadID = Types.Events.ThreadID(-1);
 let gpuProcessId: Types.Events.ProcessID = Types.Events.ProcessID(-1);
 let gpuThreadId: Types.Events.ThreadID = Types.Events.ThreadID(-1);
 let viewportRect: DOMRect|null = null;
+let devicePixelRatio: number|null = null;
 
 const processNames: Map<Types.Events.ProcessID, Types.Events.ProcessName> = new Map();
 
@@ -195,6 +196,7 @@ export function handleEvent(event: Types.Events.Event): void {
     const viewportWidth = rectAsArray[2];
     const viewportHeight = rectAsArray[5];
     viewportRect = new DOMRect(viewportX, viewportY, viewportWidth, viewportHeight);
+    devicePixelRatio = event.args.data.dpr;
   }
 
   // The TracingStartedInBrowser event includes the data on which frames are
@@ -440,6 +442,7 @@ export type MetaHandlerData = {
   mainFrameNavigations: Types.Events.NavigationStart[],
   gpuThreadId?: Types.Events.ThreadID,
   viewportRect?: DOMRect,
+  devicePixelRatio?: number,
 };
 
 // Each frame has a single render process at a given time but it can have
@@ -473,6 +476,7 @@ export function data(): MetaHandlerData {
     gpuProcessId,
     gpuThreadId: gpuThreadId === Types.Events.ThreadID(-1) ? undefined : gpuThreadId,
     viewportRect: viewportRect || undefined,
+    devicePixelRatio: devicePixelRatio ?? undefined,
     mainFrameId,
     mainFrameURL,
     navigationsByFrameId,

package/front_end/models/trace/handlers/PageLoadMetricsHandler.ts

@@ -18,7 +18,7 @@ import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
 import {data as metaHandlerData} from './MetaHandler.js';
-import {type HandlerName} from './types.js';
+import type {HandlerName} from './types.js';
 
 /**
  * This represents the metric scores for all navigations, for all frames in a trace.

package/front_end/models/trace/handlers/RendererHandler.test.ts

@@ -814,7 +814,7 @@ describeWithEnvironment('RendererHandler', function() {
     const pid = Trace.Types.Events.ProcessID(28274);
     const tid = Trace.Types.Events.ThreadID(775);
     beforeEach(async function() {
-      defaultTraceEvents = await TraceLoader.rawEvents(this, 'basic.json.gz');
+      defaultTraceEvents = await TraceLoader.rawEvents(this, 'missing-url.json.gz');
     });
 
     afterEach(() => {

package/front_end/models/trace/handlers/SamplesHandler.test.ts

@@ -224,7 +224,7 @@ describeWithEnvironment('SamplesHandler', function() {
     it('generates a CPU profile from a trace file', async () => {
       const data = await handleEventsFromTraceFile(this, 'recursive-blocking-js.json.gz');
       assert.strictEqual(data.profilesInProcess.size, 1);
-      const profileById = data.profilesInProcess.values().next().value;
+      const profileById = data.profilesInProcess.values().next().value!;
       assert.strictEqual(profileById.size, 1);
       const cpuProfileData = profileById.values().next().value as Trace.Handlers.ModelHandlers.Samples.ProfileData;
       const cpuProfile = cpuProfileData.rawProfile;
@@ -241,7 +241,7 @@ describeWithEnvironment('SamplesHandler', function() {
     it('generates a parsed CPU profile from a trace file', async () => {
       const data = await handleEventsFromTraceFile(this, 'recursive-blocking-js.json.gz');
       assert.strictEqual(data.profilesInProcess.size, 1);
-      const profileById = data.profilesInProcess.values().next().value;
+      const profileById = data.profilesInProcess.values().next().value!;
       assert.strictEqual(profileById.size, 1);
       const cpuProfileData = profileById.values().next().value as Trace.Handlers.ModelHandlers.Samples.ProfileData;
       const parsedProfile = cpuProfileData.parsedProfile;

package/front_end/models/trace/handlers/ScreenshotsHandler.test.ts

@@ -52,7 +52,7 @@ describe('ScreenshotsHandler', function() {
       await Trace.Handlers.ModelHandlers.Meta.finalize();
       await Trace.Handlers.ModelHandlers.Screenshots.finalize();
 
-      const data = Trace.Handlers.ModelHandlers.Screenshots.data();
+      const data = Trace.Handlers.ModelHandlers.Screenshots.data().all;
       assert.strictEqual(data.length, 2);
     });
   });
@@ -67,7 +67,8 @@ describe('ScreenshotsHandler', function() {
         return msDifference;
       });
     }
-    it('are corrected if frame sequence number is present', async function() {
+    // Skip while we resolve the getPresentationTimestamp mystery.
+    it.skip('[crbug.com/41363012] are corrected if frame sequence number is present', async function() {
       // This trace was collected after https://crrev.com/c/4957973 landed.
       const events = await TraceLoader.rawEvents(this, 'about-blank-first.json.gz');
       for (const event of events) {
@@ -77,7 +78,7 @@ describe('ScreenshotsHandler', function() {
       await Trace.Handlers.ModelHandlers.Meta.finalize();
       await Trace.Handlers.ModelHandlers.Screenshots.finalize();
 
-      const syntheticScreenshots = Trace.Handlers.ModelHandlers.Screenshots.data();
+      const syntheticScreenshots = Trace.Handlers.ModelHandlers.Screenshots.data().all;
       const originalScreenshotEvents = events.filter(Trace.Types.Events.isScreenshot);
       assert.strictEqual(syntheticScreenshots.length, originalScreenshotEvents.length);
 
@@ -103,7 +104,7 @@ describe('ScreenshotsHandler', function() {
       await Trace.Handlers.ModelHandlers.Meta.finalize();
       await Trace.Handlers.ModelHandlers.Screenshots.finalize();
 
-      const syntheticScreenshots = Trace.Handlers.ModelHandlers.Screenshots.data();
+      const syntheticScreenshots = Trace.Handlers.ModelHandlers.Screenshots.data().all;
       const originalScreenshotEvents = events.filter(Trace.Types.Events.isScreenshot);
       assert.strictEqual(syntheticScreenshots.length, originalScreenshotEvents.length);
 

package/front_end/models/trace/handlers/ScreenshotsHandler.ts

@@ -5,7 +5,7 @@
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {type HandlerName} from './types.js';
+import type {HandlerName} from './types.js';
 
 // Each thread contains events. Events indicate the thread and process IDs, which are
 // used to store the event in the correct process thread entry below.
@@ -49,8 +49,9 @@ export async function finalize(): Promise<void> {
       ph,
       pid,
       tid,
-      // `getPresentationTimestamp(snapshotEvent) - snapshotEvent.ts` is how many microsec the screenshot was adjusted to the right/later
-      ts: getPresentationTimestamp(snapshotEvent),
+      // TODO(paulirish, crbug.com/41363012): investigate why getPresentationTimestamp(snapshotEvent) seems less accurate. Resolve screenshot timing innaccuracy.
+      // `getPresentationTimestamp(snapshotEvent) - snapshotEvent.ts` is how many microsec the screenshot should be adjusted to the right/later
+      ts: snapshotEvent.ts,
       args: {
         dataUri: `data:image/jpg;base64,${snapshotEvent.args.snapshot}`,
       },
@@ -65,6 +66,7 @@ export async function finalize(): Promise<void> {
  * We match that up with the "PipelineReporter" trace events as they terminate at presentation.
  * Presentation == when the pixels hit the screen. AKA Swap on the GPU
  */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function getPresentationTimestamp(screenshotEvent: Types.Events.Screenshot): Types.Timing.MicroSeconds {
   const frameSequence = parseInt(screenshotEvent.id, 16);
   // If it's 1, then it's an old trace (before https://crrev.com/c/4957973) and cannot be corrected.
@@ -84,8 +86,8 @@ function getPresentationTimestamp(screenshotEvent: Types.Events.Screenshot): Typ
 }
 
 // TODO(crbug/41484172): should be readonly
-export function data(): Types.Events.SyntheticScreenshot[] {
-  return syntheticScreenshots;
+export function data(): ({all: Types.Events.SyntheticScreenshot[]}) {
+  return {all: syntheticScreenshots};
 }
 
 export function deps(): HandlerName[] {

package/front_end/models/trace/handlers/Threads.ts

@@ -5,9 +5,9 @@
 import type * as Helpers from '../helpers/helpers.js';
 import type * as Types from '../types/types.js';
 
-import {type AuctionWorkletsData} from './AuctionWorkletsHandler.js';
+import type {AuctionWorkletsData} from './AuctionWorkletsHandler.js';
 import type * as Renderer from './RendererHandler.js';
-import {type ParsedTrace} from './types.js';
+import type {ParsedTrace} from './types.js';
 
 export interface ThreadData {
   pid: Types.Events.ProcessID;

package/front_end/models/trace/handlers/WarningsHandler.ts

@@ -6,7 +6,7 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {type HandlerName} from './types.js';
+import type {HandlerName} from './types.js';
 import {data as userInteractionsHandlerData} from './UserInteractionsHandler.js';
 
 export interface WarningsData {

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

@@ -2,8 +2,26 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type SyntheticNetworkRequest} from '../types/TraceEvents.js';
+import type {RenderBlocking, SyntheticNetworkRequest} from '../types/TraceEvents.js';
+
+// Important: we purposefully treat `potentially_blocking` as
+// non-render-blocking here because:
+// 1. An async script can run on the main thread at any point, including before
+//    the page is loaded
+// 2. An async script will never block the parsing and rendering process of the
+//    browser.
+// 3. Therefore, from a developer's point of view, there is nothing more they
+//    can do if they've put `async` on, and within the context of Insights, we
+//    shouldn't report an async script as render blocking.
+// In the future we may want to consider suggesting the use of `defer` over
+// `async`, as it doesn't have this concern, but for now we'll allow `async`
+// and not report it as an issue.
+const NON_RENDER_BLOCKING_VALUES = new Set<RenderBlocking>([
+  'non_blocking',
+  'dynamically_injected_non_blocking',
+  'potentially_blocking',
+]);
 
 export function isSyntheticNetworkRequestEventRenderBlocking(event: SyntheticNetworkRequest): boolean {
-  return event.args.data.renderBlocking !== 'non_blocking';
+  return !NON_RENDER_BLOCKING_VALUES.has(event.args.data.renderBlocking);
 }

package/front_end/models/trace/helpers/SyntheticEvents.test.ts

@@ -45,7 +45,7 @@ describe('SyntheticEvents', function() {
          const allSyntheticEvents = [
            ...parsedTrace.Animations.animations,
            ...parsedTrace.NetworkRequests.byTime,
-           ...parsedTrace.Screenshots,
+           ...parsedTrace.Screenshots.all,
          ];
          const syntheticEventsManager = Trace.Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager();
          for (const syntheticEvent of allSyntheticEvents) {

package/front_end/models/trace/helpers/Trace.test.ts

@@ -13,7 +13,7 @@ import {
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as Trace from '../trace.js';
 
-describeWithEnvironment('TraceModel helpers', function() {
+describeWithEnvironment('Trace helpers', function() {
   describe('extractOriginFromTrace', () => {
     it('extracts the origin of a parsed trace correctly', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
@@ -28,7 +28,7 @@ describeWithEnvironment('TraceModel helpers', function() {
     });
 
     it('returns null when no origin is found', async function() {
-      const {parsedTrace} = await TraceLoader.traceEngine(this, 'basic.json.gz');
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'missing-url.json.gz');
       const origin = Trace.Helpers.Trace.extractOriginFromTrace(parsedTrace.Meta.mainFrameURL);
       assert.isNull(origin);
     });
@@ -123,7 +123,7 @@ describeWithEnvironment('TraceModel helpers', function() {
     it('returns the correct navigation for a page load event', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'multiple-navigations.json.gz');
       const {Meta, PageLoadMetrics} = parsedTrace;
-      const firstNavigationId = Meta.navigationsByNavigationId.keys().next().value;
+      const firstNavigationId = Meta.navigationsByNavigationId.keys().next().value!;
 
       const fcp = PageLoadMetrics.metricScoresByFrameId.get(Meta.mainFrameId)
                       ?.get(firstNavigationId)
@@ -728,4 +728,35 @@ describeWithEnvironment('TraceModel helpers', function() {
       assert.isTrue(Trace.Helpers.Trace.isTopLevelEvent(runTask));
     });
   });
+
+  describe('findNextEventAfterTimestamp', () => {
+    it('gets the first screenshot after a trace', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'cls-multiple-frames.json.gz');
+      const screenshots = parsedTrace.Screenshots.all;
+      const {clusters} = parsedTrace.LayoutShifts;
+      const shifts = clusters.flatMap(cluster => cluster.events);
+      assert.isAtLeast(shifts.length, 10);
+
+      shifts.forEach((shift, i) => {
+        const prevScreenshot = Trace.Helpers.Trace.findPreviousEventBeforeTimestamp(screenshots, shift.ts);
+        const nextScreenshot = Trace.Helpers.Trace.findNextEventAfterTimestamp(screenshots, shift.ts);
+
+        // There may be a screenshot after the last shift. but very possible there isn't.
+        if (i === shifts.length - 1) {
+          return;
+        }
+        assert.isNotNull(nextScreenshot);
+        assert.isNotNull(prevScreenshot);
+        // Make sure the screenshot came after the shift.
+        assert.isAbove(nextScreenshot!.ts, shift.ts);
+        // Make sure the previous screenshot came before the shift
+        assert.isBelow(prevScreenshot.ts, shift.ts);
+
+        // Bonus, we expect the result of calling prevEvent* to be the same as `items[nextIndex - 1]`
+        const nextIndex = screenshots.indexOf(nextScreenshot);
+        const alsoPrevious = screenshots[nextIndex - 1];
+        assert.strictEqual(prevScreenshot, alsoPrevious);
+      });
+    });
+  });
 });

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

@@ -510,6 +510,18 @@ export function findUpdateLayoutTreeEvents(
   return foundEvents;
 }
 
+export function findNextEventAfterTimestamp<T extends Types.Events.Event>(
+    candidates: T[], ts: Types.Timing.MicroSeconds): T|null {
+  const index = Platform.ArrayUtilities.nearestIndexFromBeginning(candidates, candidate => ts < candidate.ts);
+  return index === null ? null : candidates[index];
+}
+
+export function findPreviousEventBeforeTimestamp<T extends Types.Events.Event>(
+    candidates: T[], ts: Types.Timing.MicroSeconds): T|null {
+  const index = Platform.ArrayUtilities.nearestIndexFromEnd(candidates, candidate => candidate.ts < ts);
+  return index === null ? null : candidates[index];
+}
+
 export interface ForEachEventConfig {
   onStartEvent: (event: Types.Events.Event) => void;
   onEndEvent: (event: Types.Events.Event) => void;

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

@@ -455,4 +455,56 @@ describe('TreeHelpers', () => {
          assert.isFalse(Trace.Helpers.TreeHelpers.canBuildTreesFromEvents(data));
        });
   });
+  describe('buildTreesFromEventsForAI', () => {
+    it('returns the trace entry tree starting from the root task, highlighting the selected event', () => {
+      const evaluateScript = makeCompleteEvent(Trace.Types.Events.Name.EVALUATE_SCRIPT, 0, 500);
+      const v8Run = makeCompleteEvent('v8.run', 10, 490);
+      const parseFunction = makeCompleteEvent('V8.ParseFunction', 12, 1);
+
+      const traceEvents: Trace.Types.Events.Event[] = [evaluateScript, v8Run, parseFunction];
+
+      const profileCalls = [makeProfileCall('a', 100, 200), makeProfileCall('b', 300, 200)];
+      const allEntries = Trace.Helpers.Trace.mergeEventsInOrder(traceEvents, profileCalls);
+      const {tree, entryToNode} = Trace.Helpers.TreeHelpers.treify(allEntries, {filter: {has: () => true}});
+      const rootNode = entryToNode.get(evaluateScript);
+      const selectedNode = entryToNode.get(parseFunction);
+
+      assert.strictEqual(tree.roots.size, 1);
+      assert.exists(rootNode);
+      assert.exists(selectedNode);
+
+      const traceEntryTreeForAI = Trace.Helpers.TreeHelpers.TraceEntryNodeForAI.fromSelectedEntryNode(selectedNode);
+      const actualSelectedNode =
+          Trace.Helpers.TreeHelpers.TraceEntryNodeForAI.getSelectedNodeForTraceEntryTreeForAI(traceEntryTreeForAI);
+
+      assert.exists(traceEntryTreeForAI);
+      assert.exists(actualSelectedNode);
+
+      // delete for smaller deepStrictEqual comparison
+      actualSelectedNode.children = traceEntryTreeForAI.children = [];
+
+      const expectedTraceEntryTree = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI(
+          'EvaluateScript',
+          Trace.Types.Timing.MilliSeconds(0),
+          Trace.Types.Timing.MilliSeconds(0.5),
+          undefined,
+          Trace.Types.Timing.MilliSeconds(0.01),
+      );
+      expectedTraceEntryTree.id = 0 as Trace.Helpers.TreeHelpers.TraceEntryNodeId;
+      expectedTraceEntryTree.children = [];
+      assert.deepStrictEqual(traceEntryTreeForAI, expectedTraceEntryTree);
+
+      const expectedselectedNodeForAI = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI(
+          'V8.ParseFunction',
+          Trace.Types.Timing.MilliSeconds(0.012),
+          Trace.Types.Timing.MilliSeconds(0.001),
+          undefined,
+          Trace.Types.Timing.MilliSeconds(0.001),
+      );
+      expectedselectedNodeForAI.id = 2 as Trace.Helpers.TreeHelpers.TraceEntryNodeId;
+      expectedselectedNodeForAI.children = [];
+      expectedselectedNodeForAI.selected = true;
+      assert.deepStrictEqual(actualSelectedNode, expectedselectedNodeForAI);
+    });
+  });
 });

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

@@ -4,7 +4,7 @@
 
 import * as Types from '../types/types.js';
 
-import {eventIsInBounds} from './Timing.js';
+import {eventIsInBounds, microSecondsToMilliseconds} from './Timing.js';
 
 let nodeIdCount = 0;
 export const makeTraceEntryNodeId = (): TraceEntryNodeId => (++nodeIdCount) as TraceEntryNodeId;
@@ -36,6 +36,85 @@ export interface TraceEntryNode {
   children: TraceEntryNode[];
 }
 
+/**
+ * Represents a node in a trace entry tree, simplified for AI Assistance processing.
+ */
+export class TraceEntryNodeForAI {
+  id?: TraceEntryNodeId;
+  domain?: string;
+  line?: number;
+  column?: number;
+  function?: string;
+  children?: TraceEntryNodeForAI[];
+  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) {
+  }
+
+  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) {
+      }
+    }
+    return nodeForAI;
+  }
+
+  /**
+   * Builds a TraceEntryNodeForAI tree from a TraceEntryNode tree and marks the selected node.
+   */
+  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));
+    }
+    return nodeForAI;
+  }
+
+  static fromSelectedEntryNode(selectedEntryNode: TraceEntryNode): TraceEntryNodeForAI {
+    function getRoot(node: TraceEntryNode): TraceEntryNode {
+      if (node.parent) {
+        return getRoot(node.parent);
+      }
+      return node;
+    }
+
+    return TraceEntryNodeForAI.#fromTraceEntryTree(getRoot(selectedEntryNode), selectedEntryNode);
+  }
+
+  static getSelectedNodeForTraceEntryTreeForAI(node: TraceEntryNodeForAI): TraceEntryNodeForAI|null {
+    if (node.selected) {
+      return node;
+    }
+    if (!node.children) {
+      return null;
+    }
+    for (const child of node.children) {
+      const returnedNode = TraceEntryNodeForAI.getSelectedNodeForTraceEntryTreeForAI(child);
+      if (returnedNode) {
+        return returnedNode;
+      }
+    }
+    return null;
+  }
+}
+
 class TraceEntryNodeIdTag {
   /* eslint-disable-next-line no-unused-private-class-members */
   readonly #tag: (symbol|undefined);

package/front_end/models/trace/insights/Common.ts

@@ -6,7 +6,7 @@ import type * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import type * as Types from '../types/types.js';
 
-import {type InsightResults, type InsightSetContextWithNavigation, type TraceInsightSets} from './types.js';
+import type {InsightResults, InsightSetContextWithNavigation, TraceInsightSets} from './types.js';
 
 export function getInsight<InsightName extends keyof InsightResults>(
     insightName: InsightName, insights: TraceInsightSets|null, key: string|null): InsightResults[InsightName]|null {

package/front_end/models/trace/insights/CumulativeLayoutShift.test.ts

@@ -30,16 +30,28 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
       const insight = getInsightOrError('CumulativeLayoutShift', insights, firstNav);
       const {animationFailures} = insight;
 
+      const simpleAnimation = data.Animations.animations.find(animation => {
+        return animation.args.data.beginEvent.args.data.displayName === 'simple-animation';
+      });
+      const top = data.Animations.animations.find(animation => {
+        return animation.args.data.beginEvent.args.data.displayName === 'top';
+      });
+
       const expected: InsightRunners.CumulativeLayoutShift.NoncompositedAnimationFailure[] = [
         {
           name: 'simple-animation',
           failureReasons: [InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
           unsupportedProperties: ['color'],
+          animation: simpleAnimation,
         },
         {
           name: 'top',
-          failureReasons: [InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
+          failureReasons: [
+            InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.TARGET_HAS_INVALID_COMPOSITING_STATE,
+            InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY,
+          ],
           unsupportedProperties: ['top'],
+          animation: top,
         },
       ];
       assert.deepStrictEqual(animationFailures, expected);
@@ -51,8 +63,15 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
       const insight = getInsightOrError('CumulativeLayoutShift', insights, firstNav);
       const {shifts, animationFailures} = insight;
 
+      const simpleAnimation = data.Animations.animations.find(animation => {
+        return animation.args.data.beginEvent.args.data.displayName === 'simple-animation';
+      });
+      const top = data.Animations.animations.find(animation => {
+        return animation.args.data.beginEvent.args.data.displayName === 'top';
+      });
+
       const shiftAnimations: InsightRunners.CumulativeLayoutShift.NoncompositedAnimationFailure[] = [];
-      shifts?.forEach(entry => {
+      shifts.forEach(entry => {
         shiftAnimations.push(...entry.nonCompositedAnimations);
       });
       const expectedWithShift: InsightRunners.CumulativeLayoutShift.NoncompositedAnimationFailure[] = [
@@ -60,6 +79,7 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
           name: 'simple-animation',
           failureReasons: [InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
           unsupportedProperties: ['height', 'color', 'top'],
+          animation: simpleAnimation,
         },
       ];
       assert.deepStrictEqual(shiftAnimations, expectedWithShift);
@@ -69,11 +89,13 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
           name: 'simple-animation',
           failureReasons: [InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
           unsupportedProperties: ['height', 'color', 'top'],
+          animation: simpleAnimation,
         },
         {
           name: 'top',
           failureReasons: [InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
           unsupportedProperties: ['top'],
+          animation: top,
         },
       ];
       // animationFailures should include both root causes failures, and failures without associated shifts.