@paulirish/trace_engine 0.0.32 → 0.0.34

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

@@ -1,9 +1,10 @@
 import type * as Handlers from '../handlers/handlers.js';
 import type * as Types from '../types/types.js';
-import { type NavigationInsightContext } from './types.js';
+import type { InsightResults, InsightSetContextWithNavigation, TraceInsightSets } from './types.js';
+export declare function getInsight<InsightName extends keyof InsightResults>(insightName: InsightName, insights: TraceInsightSets | null, key: string | null): InsightResults[InsightName] | null;
 /**
  * Finds a network request given a navigation context and URL.
  * Considers redirects.
  */
-export declare function findRequest(traceData: Pick<Handlers.Types.TraceParseData, 'Meta' | 'NetworkRequests'>, context: NavigationInsightContext, url: string): Types.TraceEvents.SyntheticNetworkRequest | null;
-export declare function findLCPRequest(traceData: Pick<Handlers.Types.TraceParseData, 'Meta' | 'NetworkRequests' | 'LargestImagePaint'>, context: NavigationInsightContext, lcpEvent: Types.TraceEvents.TraceEventLargestContentfulPaintCandidate): Types.TraceEvents.SyntheticNetworkRequest | null;
+export declare function findRequest(parsedTrace: Pick<Handlers.Types.ParsedTrace, 'Meta' | 'NetworkRequests'>, context: InsightSetContextWithNavigation, url: string): Types.Events.SyntheticNetworkRequest | null;
+export declare function findLCPRequest(parsedTrace: Pick<Handlers.Types.ParsedTrace, 'Meta' | 'NetworkRequests' | 'LargestImagePaint'>, context: InsightSetContextWithNavigation, lcpEvent: Types.Events.LargestContentfulPaintCandidate): Types.Events.SyntheticNetworkRequest | null;

package/models/trace/insights/Common.js

@@ -2,27 +2,42 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as Helpers from '../helpers/helpers.js';
+export function getInsight(insightName, insights, key) {
+    if (!insights || !key) {
+        return null;
+    }
+    const insightSets = insights.get(key);
+    if (!insightSets) {
+        return null;
+    }
+    const insight = insightSets.data[insightName];
+    if (insight instanceof Error) {
+        return null;
+    }
+    // For some reason typescript won't narrow the type by removing Error, so do it manually.
+    return insight;
+}
 /**
  * Finds a network request given a navigation context and URL.
  * Considers redirects.
  */
-export function findRequest(traceData, context, url) {
-    const request = traceData.NetworkRequests.byTime.find(req => {
+export function findRequest(parsedTrace, context, url) {
+    const request = parsedTrace.NetworkRequests.byTime.find(req => {
         const urlMatch = req.args.data.url === url || req.args.data.redirects.some(r => r.url === url);
         if (!urlMatch) {
             return false;
         }
-        const nav = Helpers.Trace.getNavigationForTraceEvent(req, context.frameId, traceData.Meta.navigationsByFrameId);
-        return nav?.args.data?.navigationId === context.navigationId;
+        const nav = Helpers.Trace.getNavigationForTraceEvent(req, context.frameId, parsedTrace.Meta.navigationsByFrameId);
+        return nav === context.navigation;
     });
     return request ?? null;
 }
-export function findLCPRequest(traceData, context, lcpEvent) {
+export function findLCPRequest(parsedTrace, context, lcpEvent) {
     const lcpNodeId = lcpEvent.args.data?.nodeId;
     if (!lcpNodeId) {
         throw new Error('no lcp node id');
     }
-    const imagePaint = traceData.LargestImagePaint.get(lcpNodeId);
+    const imagePaint = parsedTrace.LargestImagePaint.get(lcpNodeId);
     if (!imagePaint) {
         return null;
     }
@@ -30,7 +45,7 @@ export function findLCPRequest(traceData, context, lcpEvent) {
     if (!lcpUrl) {
         throw new Error('no lcp url');
     }
-    const lcpRequest = findRequest(traceData, context, lcpUrl);
+    const lcpRequest = findRequest(parsedTrace, context, lcpUrl);
     if (!lcpRequest) {
         throw new Error('no lcp request found');
     }

package/models/trace/insights/Common.js.map

@@ -1 +1 @@
-{"version":3,"file":"Common.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/Common.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAG7B,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AAKjD;;;GAGG;AACH,MAAM,UAAU,WAAW,CACvB,SAAwE,EAAE,OAAiC,EAC3G,GAAW;IACb,MAAM,OAAO,GAAG,SAAS,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;QAC1D,MAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;QAC/F,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO,KAAK,CAAC;QACf,CAAC;QAED,MAAM,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC,0BAA0B,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAChH,OAAO,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC,YAAY,CAAC;IAC/D,CAAC,CAAC,CAAC;IACH,OAAO,OAAO,IAAI,IAAI,CAAC;AACzB,CAAC;AAED,MAAM,UAAU,cAAc,CAC1B,SAA4F,EAC5F,OAAiC,EAAE,QAAqE;IAE1G,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC;IAC7C,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACpC,CAAC;IAED,MAAM,UAAU,GAAG,SAAS,CAAC,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC9D,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC;IAC9C,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC;IAChC,CAAC;IACD,MAAM,UAAU,GAAG,WAAW,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAE3D,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;IAC1C,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport type * as Types from '../types/types.js';\n\nimport {type NavigationInsightContext} from './types.js';\n\n/**\n * Finds a network request given a navigation context and URL.\n * Considers redirects.\n */\nexport function findRequest(\n    traceData: Pick<Handlers.Types.TraceParseData, 'Meta'|'NetworkRequests'>, context: NavigationInsightContext,\n    url: string): Types.TraceEvents.SyntheticNetworkRequest|null {\n  const request = traceData.NetworkRequests.byTime.find(req => {\n    const urlMatch = req.args.data.url === url || req.args.data.redirects.some(r => r.url === url);\n    if (!urlMatch) {\n      return false;\n    }\n\n    const nav = Helpers.Trace.getNavigationForTraceEvent(req, context.frameId, traceData.Meta.navigationsByFrameId);\n    return nav?.args.data?.navigationId === context.navigationId;\n  });\n  return request ?? null;\n}\n\nexport function findLCPRequest(\n    traceData: Pick<Handlers.Types.TraceParseData, 'Meta'|'NetworkRequests'|'LargestImagePaint'>,\n    context: NavigationInsightContext, lcpEvent: Types.TraceEvents.TraceEventLargestContentfulPaintCandidate):\n    Types.TraceEvents.SyntheticNetworkRequest|null {\n  const lcpNodeId = lcpEvent.args.data?.nodeId;\n  if (!lcpNodeId) {\n    throw new Error('no lcp node id');\n  }\n\n  const imagePaint = traceData.LargestImagePaint.get(lcpNodeId);\n  if (!imagePaint) {\n    return null;\n  }\n\n  const lcpUrl = imagePaint.args.data?.imageUrl;\n  if (!lcpUrl) {\n    throw new Error('no lcp url');\n  }\n  const lcpRequest = findRequest(traceData, context, lcpUrl);\n\n  if (!lcpRequest) {\n    throw new Error('no lcp request found');\n  }\n\n  return lcpRequest;\n}\n"]}
+{"version":3,"file":"Common.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/Common.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAG7B,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AAKjD,MAAM,UAAU,UAAU,CACtB,WAAwB,EAAE,QAA+B,EAAE,GAAgB;IAC7E,IAAI,CAAC,QAAQ,IAAI,CAAC,GAAG,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACtC,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9C,IAAI,OAAO,YAAY,KAAK,EAAE,CAAC;QAC7B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,yFAAyF;IACzF,OAAO,OAAsC,CAAC;AAChD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,WAAW,CACvB,WAAuE,EAAE,OAAwC,EACjH,GAAW;IACb,MAAM,OAAO,GAAG,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;QAC5D,MAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;QAC/F,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO,KAAK,CAAC;QACf,CAAC;QAED,MAAM,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC,0BAA0B,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAClH,OAAO,GAAG,KAAK,OAAO,CAAC,UAAU,CAAC;IACpC,CAAC,CAAC,CAAC;IACH,OAAO,OAAO,IAAI,IAAI,CAAC;AACzB,CAAC;AAED,MAAM,UAAU,cAAc,CAC1B,WAA2F,EAC3F,OAAwC,EACxC,QAAsD;IACxD,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC;IAC7C,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACpC,CAAC;IAED,MAAM,UAAU,GAAG,WAAW,CAAC,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAChE,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC;IAC9C,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC;IAChC,CAAC;IACD,MAAM,UAAU,GAAG,WAAW,CAAC,WAAW,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAE7D,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;IAC1C,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport type * as Types from '../types/types.js';\n\nimport type {InsightResults, InsightSetContextWithNavigation, TraceInsightSets} from './types.js';\n\nexport function getInsight<InsightName extends keyof InsightResults>(\n    insightName: InsightName, insights: TraceInsightSets|null, key: string|null): InsightResults[InsightName]|null {\n  if (!insights || !key) {\n    return null;\n  }\n\n  const insightSets = insights.get(key);\n  if (!insightSets) {\n    return null;\n  }\n\n  const insight = insightSets.data[insightName];\n  if (insight instanceof Error) {\n    return null;\n  }\n\n  // For some reason typescript won't narrow the type by removing Error, so do it manually.\n  return insight as InsightResults[InsightName];\n}\n\n/**\n * Finds a network request given a navigation context and URL.\n * Considers redirects.\n */\nexport function findRequest(\n    parsedTrace: Pick<Handlers.Types.ParsedTrace, 'Meta'|'NetworkRequests'>, context: InsightSetContextWithNavigation,\n    url: string): Types.Events.SyntheticNetworkRequest|null {\n  const request = parsedTrace.NetworkRequests.byTime.find(req => {\n    const urlMatch = req.args.data.url === url || req.args.data.redirects.some(r => r.url === url);\n    if (!urlMatch) {\n      return false;\n    }\n\n    const nav = Helpers.Trace.getNavigationForTraceEvent(req, context.frameId, parsedTrace.Meta.navigationsByFrameId);\n    return nav === context.navigation;\n  });\n  return request ?? null;\n}\n\nexport function findLCPRequest(\n    parsedTrace: Pick<Handlers.Types.ParsedTrace, 'Meta'|'NetworkRequests'|'LargestImagePaint'>,\n    context: InsightSetContextWithNavigation,\n    lcpEvent: Types.Events.LargestContentfulPaintCandidate): Types.Events.SyntheticNetworkRequest|null {\n  const lcpNodeId = lcpEvent.args.data?.nodeId;\n  if (!lcpNodeId) {\n    throw new Error('no lcp node id');\n  }\n\n  const imagePaint = parsedTrace.LargestImagePaint.get(lcpNodeId);\n  if (!imagePaint) {\n    return null;\n  }\n\n  const lcpUrl = imagePaint.args.data?.imageUrl;\n  if (!lcpUrl) {\n    throw new Error('no lcp url');\n  }\n  const lcpRequest = findRequest(parsedTrace, context, lcpUrl);\n\n  if (!lcpRequest) {\n    throw new Error('no lcp request found');\n  }\n\n  return lcpRequest;\n}\n"]}

package/models/trace/insights/CumulativeLayoutShift.d.ts

@@ -1,13 +1,32 @@
+import type * as Protocol from '../../../generated/protocol.js';
 import * as Types from '../types/types.js';
-import { type InsightResult, type NavigationInsightContext, type RequiredData } from './types.js';
+import type { InsightResult, InsightSetContext, RequiredData } from './types.js';
+export type CLSInsightResult = InsightResult<{
+    animationFailures: readonly NoncompositedAnimationFailure[];
+    shifts: Map<Types.Events.SyntheticLayoutShift, LayoutShiftRootCausesData>;
+    clusters: Types.Events.SyntheticLayoutShiftCluster[];
+    worstCluster: Types.Events.SyntheticLayoutShiftCluster | undefined;
+}>;
 export declare function deps(): ['Meta', 'Animations', 'LayoutShifts', 'NetworkRequests'];
 export declare const enum AnimationFailureReasons {
-    UNSUPPORTED_CSS_PROPERTY = "UNSUPPORTED_CSS_PROPERTY",
+    ACCELERATED_ANIMATIONS_DISABLED = "ACCELERATED_ANIMATIONS_DISABLED",
+    EFFECT_SUPPRESSED_BY_DEVTOOLS = "EFFECT_SUPPRESSED_BY_DEVTOOLS",
+    INVALID_ANIMATION_OR_EFFECT = "INVALID_ANIMATION_OR_EFFECT",
+    EFFECT_HAS_UNSUPPORTED_TIMING_PARAMS = "EFFECT_HAS_UNSUPPORTED_TIMING_PARAMS",
+    EFFECT_HAS_NON_REPLACE_COMPOSITE_MODE = "EFFECT_HAS_NON_REPLACE_COMPOSITE_MODE",
+    TARGET_HAS_INVALID_COMPOSITING_STATE = "TARGET_HAS_INVALID_COMPOSITING_STATE",
+    TARGET_HAS_INCOMPATIBLE_ANIMATIONS = "TARGET_HAS_INCOMPATIBLE_ANIMATIONS",
+    TARGET_HAS_CSS_OFFSET = "TARGET_HAS_CSS_OFFSET",
+    ANIMATION_AFFECTS_NON_CSS_PROPERTIES = "ANIMATION_AFFECTS_NON_CSS_PROPERTIES",
+    TRANSFORM_RELATED_PROPERTY_CANNOT_BE_ACCELERATED_ON_TARGET = "TRANSFORM_RELATED_PROPERTY_CANNOT_BE_ACCELERATED_ON_TARGET",
     TRANSFROM_BOX_SIZE_DEPENDENT = "TRANSFROM_BOX_SIZE_DEPENDENT",
-    FILTER_MAY_MOVE_PIXELS = "FILTER_MAY_MOVE_PIXELS",
-    NON_REPLACE_COMPOSITE_MODE = "NON_REPLACE_COMPOSITE_MODE",
-    INCOMPATIBLE_ANIMATIONS = "INCOMPATIBLE_ANIMATIONS",
-    UNSUPPORTED_TIMING_PARAMS = "UNSUPPORTED_TIMING_PARAMS"
+    FILTER_RELATED_PROPERTY_MAY_MOVE_PIXELS = "FILTER_RELATED_PROPERTY_MAY_MOVE_PIXELS",
+    UNSUPPORTED_CSS_PROPERTY = "UNSUPPORTED_CSS_PROPERTY",
+    MIXED_KEYFRAME_VALUE_TYPES = "MIXED_KEYFRAME_VALUE_TYPES",
+    TIMELINE_SOURCE_HAS_INVALID_COMPOSITING_STATE = "TIMELINE_SOURCE_HAS_INVALID_COMPOSITING_STATE",
+    ANIMATION_HAS_NO_VISIBLE_CHANGE = "ANIMATION_HAS_NO_VISIBLE_CHANGE",
+    AFFECTS_IMPORTANT_PROPERTY = "AFFECTS_IMPORTANT_PROPERTY",
+    SVG_TARGET_HAS_INDEPENDENT_TRANSFORM_PROPERTY = "SVG_TARGET_HAS_INDEPENDENT_TRANSFORM_PROPERTY"
 }
 export interface NoncompositedAnimationFailure {
     /**
@@ -22,13 +41,17 @@ export interface NoncompositedAnimationFailure {
     /**
      * Unsupported properties.
      */
-    unsupportedProperties?: Types.TraceEvents.TraceEventAnimation['args']['data']['unsupportedProperties'];
+    unsupportedProperties?: Types.Events.Animation['args']['data']['unsupportedProperties'];
+    /**
+     * Animation event.
+     */
+    animation?: Types.Events.SyntheticAnimationPair;
 }
 export interface LayoutShiftRootCausesData {
-    iframes: Types.TraceEvents.TraceEventRenderFrameImplCreateChildFrame[];
-    fontRequests: Types.TraceEvents.SyntheticNetworkRequest[];
+    iframeIds: string[];
+    fontRequests: Types.Events.SyntheticNetworkRequest[];
+    nonCompositedAnimations: NoncompositedAnimationFailure[];
+    unsizedImages: Protocol.DOM.BackendNodeId[];
 }
-export declare function generateInsight(traceParsedData: RequiredData<typeof deps>, context: NavigationInsightContext): InsightResult<{
-    animationFailures?: readonly NoncompositedAnimationFailure[];
-    shifts?: Map<Types.TraceEvents.TraceEventLayoutShift, LayoutShiftRootCausesData>;
-}>;
+export declare function getNonCompositedFailure(animationEvent: Types.Events.SyntheticAnimationPair): NoncompositedAnimationFailure[];
+export declare function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): CLSInsightResult;

package/models/trace/insights/CumulativeLayoutShift.js

@@ -15,8 +15,45 @@ export function deps() {
  */
 const ACTIONABLE_FAILURE_REASONS = [
     {
-        flag: 1 << 13,
-        failure: "UNSUPPORTED_CSS_PROPERTY" /* AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY */,
+        flag: 1 << 0,
+        failure: "ACCELERATED_ANIMATIONS_DISABLED" /* AnimationFailureReasons.ACCELERATED_ANIMATIONS_DISABLED */,
+    },
+    {
+        flag: 1 << 1,
+        failure: "EFFECT_SUPPRESSED_BY_DEVTOOLS" /* AnimationFailureReasons.EFFECT_SUPPRESSED_BY_DEVTOOLS */,
+    },
+    {
+        flag: 1 << 2,
+        failure: "INVALID_ANIMATION_OR_EFFECT" /* AnimationFailureReasons.INVALID_ANIMATION_OR_EFFECT */,
+    },
+    {
+        flag: 1 << 3,
+        failure: "EFFECT_HAS_UNSUPPORTED_TIMING_PARAMS" /* AnimationFailureReasons.EFFECT_HAS_UNSUPPORTED_TIMING_PARAMS */,
+    },
+    {
+        flag: 1 << 4,
+        failure: "EFFECT_HAS_NON_REPLACE_COMPOSITE_MODE" /* AnimationFailureReasons.EFFECT_HAS_NON_REPLACE_COMPOSITE_MODE */,
+    },
+    {
+        flag: 1 << 5,
+        failure: "TARGET_HAS_INVALID_COMPOSITING_STATE" /* AnimationFailureReasons.TARGET_HAS_INVALID_COMPOSITING_STATE */,
+    },
+    {
+        flag: 1 << 6,
+        failure: "TARGET_HAS_INCOMPATIBLE_ANIMATIONS" /* AnimationFailureReasons.TARGET_HAS_INCOMPATIBLE_ANIMATIONS */,
+    },
+    {
+        flag: 1 << 7,
+        failure: "TARGET_HAS_CSS_OFFSET" /* AnimationFailureReasons.TARGET_HAS_CSS_OFFSET */,
+    },
+    // The failure 1 << 8 is marked as obsolete in Blink
+    {
+        flag: 1 << 9,
+        failure: "ANIMATION_AFFECTS_NON_CSS_PROPERTIES" /* AnimationFailureReasons.ANIMATION_AFFECTS_NON_CSS_PROPERTIES */,
+    },
+    {
+        flag: 1 << 10,
+        failure: "TRANSFORM_RELATED_PROPERTY_CANNOT_BE_ACCELERATED_ON_TARGET" /* AnimationFailureReasons.TRANSFORM_RELATED_PROPERTY_CANNOT_BE_ACCELERATED_ON_TARGET */,
     },
     {
         flag: 1 << 11,
@@ -24,58 +61,106 @@ const ACTIONABLE_FAILURE_REASONS = [
     },
     {
         flag: 1 << 12,
-        failure: "FILTER_MAY_MOVE_PIXELS" /* AnimationFailureReasons.FILTER_MAY_MOVE_PIXELS */,
+        failure: "FILTER_RELATED_PROPERTY_MAY_MOVE_PIXELS" /* AnimationFailureReasons.FILTER_RELATED_PROPERTY_MAY_MOVE_PIXELS */,
     },
     {
-        flag: 1 << 4,
-        failure: "NON_REPLACE_COMPOSITE_MODE" /* AnimationFailureReasons.NON_REPLACE_COMPOSITE_MODE */,
+        flag: 1 << 13,
+        failure: "UNSUPPORTED_CSS_PROPERTY" /* AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY */,
     },
+    // The failure 1 << 14 is marked as obsolete in Blink
     {
-        flag: 1 << 6,
-        failure: "INCOMPATIBLE_ANIMATIONS" /* AnimationFailureReasons.INCOMPATIBLE_ANIMATIONS */,
+        flag: 1 << 15,
+        failure: "MIXED_KEYFRAME_VALUE_TYPES" /* AnimationFailureReasons.MIXED_KEYFRAME_VALUE_TYPES */,
     },
     {
-        flag: 1 << 3,
-        failure: "UNSUPPORTED_TIMING_PARAMS" /* AnimationFailureReasons.UNSUPPORTED_TIMING_PARAMS */,
+        flag: 1 << 16,
+        failure: "TIMELINE_SOURCE_HAS_INVALID_COMPOSITING_STATE" /* AnimationFailureReasons.TIMELINE_SOURCE_HAS_INVALID_COMPOSITING_STATE */,
+    },
+    {
+        flag: 1 << 17,
+        failure: "ANIMATION_HAS_NO_VISIBLE_CHANGE" /* AnimationFailureReasons.ANIMATION_HAS_NO_VISIBLE_CHANGE */,
+    },
+    {
+        flag: 1 << 18,
+        failure: "AFFECTS_IMPORTANT_PROPERTY" /* AnimationFailureReasons.AFFECTS_IMPORTANT_PROPERTY */,
+    },
+    {
+        flag: 1 << 19,
+        failure: "SVG_TARGET_HAS_INDEPENDENT_TRANSFORM_PROPERTY" /* AnimationFailureReasons.SVG_TARGET_HAS_INDEPENDENT_TRANSFORM_PROPERTY */,
     },
 ];
 // 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));
-function isInInvalidationWindow(event, targetEvent) {
-    const eventEnd = event.dur ? event.ts + event.dur : event.ts;
-    return eventEnd < targetEvent.ts && eventEnd >= targetEvent.ts - INVALIDATION_WINDOW;
-}
+const ROOT_CAUSE_WINDOW = Helpers.Timing.secondsToMicroseconds(Types.Timing.Seconds(0.5));
 /**
- * Returns a list of NoncompositedAnimationFailures.
+ * Returns if an event happens within the root cause window, before the target event.
+ *          ROOT_CAUSE_WINDOW               v target event
+ *        |------------------------|=======================
  */
-function getNonCompositedAnimations(animations) {
+function isInRootCauseWindow(event, targetEvent) {
+    const eventEnd = event.dur ? event.ts + event.dur : event.ts;
+    return eventEnd < targetEvent.ts && eventEnd >= targetEvent.ts - ROOT_CAUSE_WINDOW;
+}
+export function getNonCompositedFailure(animationEvent) {
     const failures = [];
-    for (const event of animations) {
-        const beginEvent = event.args.data.beginEvent;
-        const instantEvents = event.args.data.instantEvents || [];
+    const beginEvent = animationEvent.args.data.beginEvent;
+    const instantEvents = animationEvent.args.data.instantEvents || [];
+    /**
+     * Animation events containing composite information are ASYNC_NESTABLE_INSTANT ('n').
+     * An animation may also contain multiple 'n' events, so we look through those with useful non-composited data.
+     */
+    for (const event of instantEvents) {
+        const failureMask = event.args.data.compositeFailed;
+        const unsupportedProperties = event.args.data.unsupportedProperties;
+        if (!failureMask) {
+            continue;
+        }
+        const failureReasons = ACTIONABLE_FAILURE_REASONS.filter(reason => failureMask & reason.flag).map(reason => reason.failure);
+        const failure = {
+            name: beginEvent.args.data.displayName,
+            failureReasons,
+            unsupportedProperties,
+            animation: animationEvent,
+        };
+        failures.push(failure);
+    }
+    return failures;
+}
+function getNonCompositedFailureRootCauses(animationEvents, prePaintEvents, shiftsByPrePaint, rootCausesByShift) {
+    const allAnimationFailures = [];
+    for (const animation of animationEvents) {
         /**
          * Animation events containing composite information are ASYNC_NESTABLE_INSTANT ('n').
          * An animation may also contain multiple 'n' events, so we look through those with useful non-composited data.
          */
-        for (const event of instantEvents) {
-            const failureMask = event.args.data.compositeFailed;
-            const unsupportedProperties = event.args.data.unsupportedProperties;
-            if (!failureMask || !unsupportedProperties) {
-                continue;
+        const failures = getNonCompositedFailure(animation);
+        if (!failures) {
+            continue;
+        }
+        allAnimationFailures.push(...failures);
+        const nextPrePaint = getNextEvent(prePaintEvents, animation);
+        // If no following prePaint, this is not a root cause.
+        if (!nextPrePaint) {
+            continue;
+        }
+        // If the animation event is outside the ROOT_CAUSE_WINDOW, it could not be a root cause.
+        if (!isInRootCauseWindow(animation, nextPrePaint)) {
+            continue;
+        }
+        const shifts = shiftsByPrePaint.get(nextPrePaint);
+        // if no layout shift(s), this is not a root cause.
+        if (!shifts) {
+            continue;
+        }
+        for (const shift of shifts) {
+            const rootCausesForShift = rootCausesByShift.get(shift);
+            if (!rootCausesForShift) {
+                throw new Error('Unaccounted shift');
             }
-            const failureReasons = ACTIONABLE_FAILURE_REASONS.filter(reason => failureMask & reason.flag).map(reason => {
-                return reason.failure;
-            });
-            const failure = {
-                name: beginEvent.args.data.displayName,
-                failureReasons,
-                unsupportedProperties,
-            };
-            failures.push(failure);
+            rootCausesForShift.nonCompositedAnimations.push(...failures);
         }
     }
-    return failures;
+    return allAnimationFailures;
 }
 /**
  * Given an array of layout shift and PrePaint events, returns a mapping from
@@ -106,24 +191,23 @@ function getShiftsByPrePaintEvents(layoutShifts, prePaintEvents) {
     return shiftsByPrePaint;
 }
 /**
- * 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, targetEvent) {
-    // 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, targetEvent) {
+    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];
 }
 /**
  * An Iframe is considered a root cause if the iframe event occurs before a prePaint event
  * and within this prePaint event a layout shift(s) occurs.
  */
-function getIframeRootCauses(iframeCreatedEvents, prePaintEvents, shiftsByPrePaint, rootCausesByShift) {
+function getIframeRootCauses(iframeCreatedEvents, prePaintEvents, shiftsByPrePaint, rootCausesByShift, domLoadingEvents) {
     for (const iframeEvent of iframeCreatedEvents) {
-        const nextPrePaint = getNextPrePaintEvent(prePaintEvents, iframeEvent);
+        const nextPrePaint = getNextEvent(prePaintEvents, iframeEvent);
         // If no following prePaint, this is not a root cause.
         if (!nextPrePaint) {
             continue;
@@ -134,31 +218,64 @@ function getIframeRootCauses(iframeCreatedEvents, prePaintEvents, shiftsByPrePai
             continue;
         }
         for (const shift of shifts) {
-            const rootCausesForShift = Platform.MapUtilities.getWithDefault(rootCausesByShift, shift, () => {
-                return {
-                    iframes: [],
-                    fontRequests: [],
-                };
+            const rootCausesForShift = rootCausesByShift.get(shift);
+            if (!rootCausesForShift) {
+                throw new Error('Unaccounted shift');
+            }
+            // Look for the first dom event that occurs within the bounds of the iframe event.
+            // This contains the frame id.
+            const domEvent = domLoadingEvents.find(e => {
+                const maxIframe = Types.Timing.MicroSeconds(iframeEvent.ts + (iframeEvent.dur ?? 0));
+                return e.ts >= iframeEvent.ts && e.ts <= maxIframe;
             });
-            rootCausesForShift.iframes.push(iframeEvent);
+            if (domEvent && domEvent.args.frame) {
+                rootCausesForShift.iframeIds.push(domEvent.args.frame);
+            }
         }
     }
     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, paintImageEvents, shiftsByPrePaint, rootCausesByShift) {
+    shiftsByPrePaint.forEach((shifts, prePaint) => {
+        const paintImage = getNextEvent(paintImageEvents, prePaint);
+        // 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, prePaintEvents, shiftsByPrePaint, rootCausesByShift) {
     const fontRequests = 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);
         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;
         }
         // Get the shifts that belong to this prepaint
@@ -169,41 +286,50 @@ function getFontRootCauses(networkRequests, prePaintEvents, shiftsByPrePaint, ro
         }
         // Include the root cause to the shifts in this prePaint.
         for (const shift of shifts) {
-            const rootCausesForShift = Platform.MapUtilities.getWithDefault(rootCausesByShift, shift, () => {
-                return {
-                    iframes: [],
-                    fontRequests: [],
-                };
-            });
+            const rootCausesForShift = rootCausesByShift.get(shift);
+            if (!rootCausesForShift) {
+                throw new Error('Unaccounted shift');
+            }
             rootCausesForShift.fontRequests.push(req);
         }
     }
     return rootCausesByShift;
 }
-export function generateInsight(traceParsedData, context) {
-    const isWithinSameNavigation = ((event) => {
-        const nav = Helpers.Trace.getNavigationForTraceEvent(event, context.frameId, traceParsedData.Meta.navigationsByFrameId);
-        return nav?.args.data?.navigationId === context.navigationId;
-    });
-    const compositeAnimationEvents = traceParsedData.Animations.animations.filter(isWithinSameNavigation);
-    const animationFailures = getNonCompositedAnimations(compositeAnimationEvents);
-    const iframeEvents = traceParsedData.LayoutShifts.renderFrameImplCreateChildFrameEvents.filter(isWithinSameNavigation);
-    const networkRequests = traceParsedData.NetworkRequests.byTime.filter(isWithinSameNavigation);
-    const layoutShifts = traceParsedData.LayoutShifts.clusters.flatMap(cluster => 
-    // Use one of the events in the cluster to determine if within the same navigation.
-    isWithinSameNavigation(cluster.events[0]) ? cluster.events : []);
-    const prePaintEvents = traceParsedData.LayoutShifts.prePaintEvents.filter(isWithinSameNavigation);
+export function generateInsight(parsedTrace, context) {
+    const isWithinContext = (event) => 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) ?? [];
+    const clustersByScore = clusters.toSorted((a, b) => b.clusterCumulativeScore - a.clusterCumulativeScore);
+    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();
     const shiftsByPrePaint = getShiftsByPrePaintEvents(layoutShifts, prePaintEvents);
     for (const shift of layoutShifts) {
-        rootCausesByShift.set(shift, { iframes: [], fontRequests: [] });
+        rootCausesByShift.set(shift, { iframeIds: [], fontRequests: [], nonCompositedAnimations: [], unsizedImages: [] });
     }
-    getIframeRootCauses(iframeEvents, prePaintEvents, shiftsByPrePaint, rootCausesByShift);
+    // 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);
+    const relatedEvents = [...layoutShifts];
+    if (worstCluster) {
+        relatedEvents.push(worstCluster);
+    }
     return {
+        relatedEvents,
         animationFailures,
         shifts: rootCausesByShift,
+        clusters,
+        worstCluster,
     };
 }
 //# sourceMappingURL=CumulativeLayoutShift.js.map