@paulirish/trace_engine 0.0.22 → 0.0.24

package/models/trace/insights/CumulativeLayoutShift.js

@@ -1,9 +1,11 @@
 // Copyright 2024 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
 export function deps() {
-    return ['Meta', 'Animations'];
+    return ['Meta', 'Animations', 'LayoutShifts', 'NetworkRequests'];
 }
 /**
  * Each failure reason is represented by a bit flag. The bit shift operator '<<' is used to define
@@ -37,6 +39,13 @@ const ACTIONABLE_FAILURE_REASONS = [
         failure: "UNSUPPORTED_TIMING_PARAMS" /* AnimationFailureReasons.UNSUPPORTED_TIMING_PARAMS */,
     },
 ];
+// 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;
+}
 /**
  * Returns a list of NoncompositedAnimationFailures.
  */
@@ -68,14 +77,133 @@ function getNonCompositedAnimations(animations) {
     }
     return failures;
 }
+/**
+ * Given an array of layout shift and PrePaint events, returns a mapping from
+ * PrePaint events to layout shifts dispatched within it.
+ */
+function getShiftsByPrePaintEvents(layoutShifts, prePaintEvents) {
+    // Maps from PrePaint events to LayoutShifts that occured in each one.
+    const shiftsByPrePaint = new Map();
+    // Associate all shifts to their corresponding PrePaint.
+    for (const prePaintEvent of prePaintEvents) {
+        const firstShiftIndex = Platform.ArrayUtilities.nearestIndexFromBeginning(layoutShifts, shift => shift.ts >= prePaintEvent.ts);
+        if (firstShiftIndex === null) {
+            // No layout shifts registered after this PrePaint start. Continue.
+            continue;
+        }
+        for (let i = firstShiftIndex; i < layoutShifts.length; i++) {
+            const shift = layoutShifts[i];
+            if (shift.ts >= prePaintEvent.ts && shift.ts <= prePaintEvent.ts + prePaintEvent.dur) {
+                const shiftsInPrePaint = Platform.MapUtilities.getWithDefault(shiftsByPrePaint, prePaintEvent, () => []);
+                shiftsInPrePaint.push(shift);
+            }
+            if (shift.ts > prePaintEvent.ts + prePaintEvent.dur) {
+                // Reached all layoutShifts of this PrePaint. Break out to continue with the next prePaint event.
+                break;
+            }
+        }
+    }
+    return shiftsByPrePaint;
+}
+/**
+ * This gets the first prePaint event that follows the provided event and returns it.
+ */
+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));
+    // No PrePaint event registered after this event
+    if (nextPrePaintIndex === null) {
+        return undefined;
+    }
+    return prePaintEvents[nextPrePaintIndex];
+}
+/**
+ * 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) {
+    for (const iframeEvent of iframeCreatedEvents) {
+        const nextPrePaint = getNextPrePaintEvent(prePaintEvents, iframeEvent);
+        // If no following prePaint, this is not a root cause.
+        if (!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 = Platform.MapUtilities.getWithDefault(rootCausesByShift, shift, () => {
+                return {
+                    iframes: [],
+                    fontRequests: [],
+                };
+            });
+            rootCausesForShift.iframes.push(iframeEvent);
+        }
+    }
+    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.
+ */
+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);
+        if (!nextPrePaint) {
+            continue;
+        }
+        // If the req is outside the INVALIDATION_WINDOW, it could not be a root cause.
+        if (!isInInvalidationWindow(req, nextPrePaint)) {
+            continue;
+        }
+        // Get the shifts that belong to this prepaint
+        const shifts = shiftsByPrePaint.get(nextPrePaint);
+        // if no layout shift(s) in this prePaint, the request is not a root cause.
+        if (!shifts) {
+            continue;
+        }
+        // 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: [],
+                };
+            });
+            rootCausesForShift.fontRequests.push(req);
+        }
+    }
+    return rootCausesByShift;
+}
 export function generateInsight(traceParsedData, context) {
-    const compositeAnimationEvents = traceParsedData.Animations.animations.filter(event => {
+    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);
+    // Get root causes.
+    const rootCausesByShift = new Map();
+    const shiftsByPrePaint = getShiftsByPrePaintEvents(layoutShifts, prePaintEvents);
+    for (const shift of layoutShifts) {
+        rootCausesByShift.set(shift, { iframes: [], fontRequests: [] });
+    }
+    getIframeRootCauses(iframeEvents, prePaintEvents, shiftsByPrePaint, rootCausesByShift);
+    getFontRootCauses(networkRequests, prePaintEvents, shiftsByPrePaint, rootCausesByShift);
     return {
         animationFailures,
+        shifts: rootCausesByShift,
     };
 }
 //# sourceMappingURL=CumulativeLayoutShift.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CumulativeLayoutShift.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/CumulativeLayoutShift.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AASjD,MAAM,UAAU,IAAI;IAClB,OAAO,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AAChC,CAAC;AA2BD;;;;;GAKG;AACH,MAAM,0BAA0B,GAAG;IACjC;QACE,IAAI,EAAE,CAAC,IAAI,EAAE;QACb,OAAO,mFAAkD;KAC1D;IACD;QACE,IAAI,EAAE,CAAC,IAAI,EAAE;QACb,OAAO,2FAAsD;KAC9D;IACD;QACE,IAAI,EAAE,CAAC,IAAI,EAAE;QACb,OAAO,+EAAgD;KACxD;IACD;QACE,IAAI,EAAE,CAAC,IAAI,CAAC;QACZ,OAAO,uFAAoD;KAC5D;IACD;QACE,IAAI,EAAE,CAAC,IAAI,CAAC;QACZ,OAAO,iFAAiD;KACzD;IACD;QACE,IAAI,EAAE,CAAC,IAAI,CAAC;QACZ,OAAO,qFAAmD;KAC3D;CACF,CAAC;AAEF;;GAEG;AACH,SAAS,0BAA0B,CAAC,UAA+D;IAEjG,MAAM,QAAQ,GAAoC,EAAE,CAAC;IACrD,KAAK,MAAM,KAAK,IAAI,UAAU,EAAE,CAAC;QAC/B,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;QAC9C,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,EAAE,CAAC;QAC1D;;;WAGG;QACH,KAAK,MAAM,KAAK,IAAI,aAAa,EAAE,CAAC;YAClC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;YACpD,MAAM,qBAAqB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC;YACpE,IAAI,CAAC,WAAW,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBAC3C,SAAS;YACX,CAAC;YACD,MAAM,cAAc,GAAG,0BAA0B,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;gBACzG,OAAO,MAAM,CAAC,OAAO,CAAC;YACxB,CAAC,CAAC,CAAC;YACH,MAAM,OAAO,GAAkC;gBAC7C,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW;gBACtC,cAAc;gBACd,qBAAqB;aACtB,CAAC;YACF,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,eAA0C,EAAE,OAAiC;IAE3G,MAAM,wBAAwB,GAAG,eAAe,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;QACpF,MAAM,GAAG,GACL,OAAO,CAAC,KAAK,CAAC,0BAA0B,CAAC,KAAK,EAAE,OAAO,CAAC,OAAO,EAAE,eAAe,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,MAAM,iBAAiB,GAAG,0BAA0B,CAAC,wBAAwB,CAAC,CAAC;IAC/E,OAAO;QACL,iBAAiB;KAClB,CAAC;AACJ,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 * as Helpers from '../helpers/helpers.js';\nimport type * as Types from '../types/types.js';\n\nimport {\n  type InsightResult,\n  type NavigationInsightContext,\n  type RequiredData,\n} from './types.js';\n\nexport function deps(): ['Meta', 'Animations'] {\n  return ['Meta', 'Animations'];\n}\n\nexport const enum AnimationFailureReasons {\n  UNSUPPORTED_CSS_PROPERTY = 'UNSUPPORTED_CSS_PROPERTY',\n  TRANSFROM_BOX_SIZE_DEPENDENT = 'TRANSFROM_BOX_SIZE_DEPENDENT',\n  FILTER_MAY_MOVE_PIXELS = 'FILTER_MAY_MOVE_PIXELS',\n  NON_REPLACE_COMPOSITE_MODE = 'NON_REPLACE_COMPOSITE_MODE',\n  INCOMPATIBLE_ANIMATIONS = 'INCOMPATIBLE_ANIMATIONS',\n  UNSUPPORTED_TIMING_PARAMS = 'UNSUPPORTED_TIMING_PARAMS',\n}\n\nexport interface NoncompositedAnimationFailure {\n  /**\n   * Animation name.\n   */\n  name?: string;\n  /**\n   * Failure reason based on mask number defined in\n   * https://source.chromium.org/search?q=f:compositor_animations.h%20%22enum%20FailureReason%22.\n   */\n  failureReasons: AnimationFailureReasons[];\n  /**\n   * Unsupported properties.\n   */\n  unsupportedProperties?: Types.TraceEvents.TraceEventAnimation['args']['data']['unsupportedProperties'];\n}\n\n/**\n * Each failure reason is represented by a bit flag. The bit shift operator '<<' is used to define\n * which bit corresponds to each failure reason.\n * https://source.chromium.org/search?q=f:compositor_animations.h%20%22enum%20FailureReason%22\n * @type {{flag: number, failure: AnimationFailureReasons}[]}\n */\nconst ACTIONABLE_FAILURE_REASONS = [\n  {\n    flag: 1 << 13,\n    failure: AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY,\n  },\n  {\n    flag: 1 << 11,\n    failure: AnimationFailureReasons.TRANSFROM_BOX_SIZE_DEPENDENT,\n  },\n  {\n    flag: 1 << 12,\n    failure: AnimationFailureReasons.FILTER_MAY_MOVE_PIXELS,\n  },\n  {\n    flag: 1 << 4,\n    failure: AnimationFailureReasons.NON_REPLACE_COMPOSITE_MODE,\n  },\n  {\n    flag: 1 << 6,\n    failure: AnimationFailureReasons.INCOMPATIBLE_ANIMATIONS,\n  },\n  {\n    flag: 1 << 3,\n    failure: AnimationFailureReasons.UNSUPPORTED_TIMING_PARAMS,\n  },\n];\n\n/**\n * Returns a list of NoncompositedAnimationFailures.\n */\nfunction getNonCompositedAnimations(animations: readonly Types.TraceEvents.SyntheticAnimationPair[]):\n    NoncompositedAnimationFailure[] {\n  const failures: NoncompositedAnimationFailure[] = [];\n  for (const event of animations) {\n    const beginEvent = event.args.data.beginEvent;\n    const instantEvents = event.args.data.instantEvents || [];\n    /**\n     * Animation events containing composite information are ASYNC_NESTABLE_INSTANT ('n').\n     * An animation may also contain multiple 'n' events, so we look through those with useful non-composited data.\n     */\n    for (const event of instantEvents) {\n      const failureMask = event.args.data.compositeFailed;\n      const unsupportedProperties = event.args.data.unsupportedProperties;\n      if (!failureMask || !unsupportedProperties) {\n        continue;\n      }\n      const failureReasons = ACTIONABLE_FAILURE_REASONS.filter(reason => failureMask & reason.flag).map(reason => {\n        return reason.failure;\n      });\n      const failure: NoncompositedAnimationFailure = {\n        name: beginEvent.args.data.displayName,\n        failureReasons,\n        unsupportedProperties,\n      };\n      failures.push(failure);\n    }\n  }\n  return failures;\n}\n\nexport function generateInsight(traceParsedData: RequiredData<typeof deps>, context: NavigationInsightContext):\n    InsightResult<{animationFailures?: readonly NoncompositedAnimationFailure[]}> {\n  const compositeAnimationEvents = traceParsedData.Animations.animations.filter(event => {\n    const nav =\n        Helpers.Trace.getNavigationForTraceEvent(event, context.frameId, traceParsedData.Meta.navigationsByFrameId);\n    return nav?.args.data?.navigationId === context.navigationId;\n  });\n  const animationFailures = getNonCompositedAnimations(compositeAnimationEvents);\n  return {\n    animationFailures,\n  };\n}\n"]}
+{"version":3,"file":"CumulativeLayoutShift.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/CumulativeLayoutShift.ts"],"names":[],"mappings":"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","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 * as Platform from '../../../core/platform/platform.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  type InsightResult,\n  type NavigationInsightContext,\n  type RequiredData,\n} from './types.js';\n\nexport function deps(): ['Meta', 'Animations', 'LayoutShifts', 'NetworkRequests'] {\n  return ['Meta', 'Animations', 'LayoutShifts', 'NetworkRequests'];\n}\n\nexport const enum AnimationFailureReasons {\n  UNSUPPORTED_CSS_PROPERTY = 'UNSUPPORTED_CSS_PROPERTY',\n  TRANSFROM_BOX_SIZE_DEPENDENT = 'TRANSFROM_BOX_SIZE_DEPENDENT',\n  FILTER_MAY_MOVE_PIXELS = 'FILTER_MAY_MOVE_PIXELS',\n  NON_REPLACE_COMPOSITE_MODE = 'NON_REPLACE_COMPOSITE_MODE',\n  INCOMPATIBLE_ANIMATIONS = 'INCOMPATIBLE_ANIMATIONS',\n  UNSUPPORTED_TIMING_PARAMS = 'UNSUPPORTED_TIMING_PARAMS',\n}\n\nexport interface NoncompositedAnimationFailure {\n  /**\n   * Animation name.\n   */\n  name?: string;\n  /**\n   * Failure reason based on mask number defined in\n   * https://source.chromium.org/search?q=f:compositor_animations.h%20%22enum%20FailureReason%22.\n   */\n  failureReasons: AnimationFailureReasons[];\n  /**\n   * Unsupported properties.\n   */\n  unsupportedProperties?: Types.TraceEvents.TraceEventAnimation['args']['data']['unsupportedProperties'];\n}\n\n/**\n * Each failure reason is represented by a bit flag. The bit shift operator '<<' is used to define\n * which bit corresponds to each failure reason.\n * https://source.chromium.org/search?q=f:compositor_animations.h%20%22enum%20FailureReason%22\n * @type {{flag: number, failure: AnimationFailureReasons}[]}\n */\nconst ACTIONABLE_FAILURE_REASONS = [\n  {\n    flag: 1 << 13,\n    failure: AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY,\n  },\n  {\n    flag: 1 << 11,\n    failure: AnimationFailureReasons.TRANSFROM_BOX_SIZE_DEPENDENT,\n  },\n  {\n    flag: 1 << 12,\n    failure: AnimationFailureReasons.FILTER_MAY_MOVE_PIXELS,\n  },\n  {\n    flag: 1 << 4,\n    failure: AnimationFailureReasons.NON_REPLACE_COMPOSITE_MODE,\n  },\n  {\n    flag: 1 << 6,\n    failure: AnimationFailureReasons.INCOMPATIBLE_ANIMATIONS,\n  },\n  {\n    flag: 1 << 3,\n    failure: AnimationFailureReasons.UNSUPPORTED_TIMING_PARAMS,\n  },\n];\n\n// 500ms window.\n// Use this window to consider events and requests that may have caused a layout shift.\nconst INVALIDATION_WINDOW = Helpers.Timing.secondsToMicroseconds(Types.Timing.Seconds(0.5));\n\nexport interface LayoutShiftRootCausesData {\n  iframes: Types.TraceEvents.TraceEventRenderFrameImplCreateChildFrame[];\n  fontRequests: Types.TraceEvents.SyntheticNetworkRequest[];\n}\n\nfunction isInInvalidationWindow(\n    event: Types.TraceEvents.TraceEventData, targetEvent: Types.TraceEvents.TraceEventData): boolean {\n  const eventEnd = event.dur ? event.ts + event.dur : event.ts;\n  return eventEnd < targetEvent.ts && eventEnd >= targetEvent.ts - INVALIDATION_WINDOW;\n}\n\n/**\n * Returns a list of NoncompositedAnimationFailures.\n */\nfunction getNonCompositedAnimations(animations: readonly Types.TraceEvents.SyntheticAnimationPair[]):\n    NoncompositedAnimationFailure[] {\n  const failures: NoncompositedAnimationFailure[] = [];\n  for (const event of animations) {\n    const beginEvent = event.args.data.beginEvent;\n    const instantEvents = event.args.data.instantEvents || [];\n    /**\n     * Animation events containing composite information are ASYNC_NESTABLE_INSTANT ('n').\n     * An animation may also contain multiple 'n' events, so we look through those with useful non-composited data.\n     */\n    for (const event of instantEvents) {\n      const failureMask = event.args.data.compositeFailed;\n      const unsupportedProperties = event.args.data.unsupportedProperties;\n      if (!failureMask || !unsupportedProperties) {\n        continue;\n      }\n      const failureReasons = ACTIONABLE_FAILURE_REASONS.filter(reason => failureMask & reason.flag).map(reason => {\n        return reason.failure;\n      });\n      const failure: NoncompositedAnimationFailure = {\n        name: beginEvent.args.data.displayName,\n        failureReasons,\n        unsupportedProperties,\n      };\n      failures.push(failure);\n    }\n  }\n  return failures;\n}\n\n/**\n * Given an array of layout shift and PrePaint events, returns a mapping from\n * PrePaint events to layout shifts dispatched within it.\n */\nfunction getShiftsByPrePaintEvents(\n    layoutShifts: Types.TraceEvents.TraceEventLayoutShift[],\n    prePaintEvents: Types.TraceEvents.TraceEventPrePaint[],\n    ): Map<Types.TraceEvents.TraceEventPrePaint, Types.TraceEvents.TraceEventLayoutShift[]> {\n  // Maps from PrePaint events to LayoutShifts that occured in each one.\n  const shiftsByPrePaint = new Map<Types.TraceEvents.TraceEventPrePaint, Types.TraceEvents.TraceEventLayoutShift[]>();\n\n  // Associate all shifts to their corresponding PrePaint.\n  for (const prePaintEvent of prePaintEvents) {\n    const firstShiftIndex =\n        Platform.ArrayUtilities.nearestIndexFromBeginning(layoutShifts, shift => shift.ts >= prePaintEvent.ts);\n    if (firstShiftIndex === null) {\n      // No layout shifts registered after this PrePaint start. Continue.\n      continue;\n    }\n    for (let i = firstShiftIndex; i < layoutShifts.length; i++) {\n      const shift = layoutShifts[i];\n      if (shift.ts >= prePaintEvent.ts && shift.ts <= prePaintEvent.ts + prePaintEvent.dur) {\n        const shiftsInPrePaint = Platform.MapUtilities.getWithDefault(shiftsByPrePaint, prePaintEvent, () => []);\n        shiftsInPrePaint.push(shift);\n      }\n      if (shift.ts > prePaintEvent.ts + prePaintEvent.dur) {\n        // Reached all layoutShifts of this PrePaint. Break out to continue with the next prePaint event.\n        break;\n      }\n    }\n  }\n  return shiftsByPrePaint;\n}\n\n/**\n * This gets the first prePaint event that follows the provided event and returns it.\n */\nfunction getNextPrePaintEvent(\n    prePaintEvents: Types.TraceEvents.TraceEventPrePaint[],\n    targetEvent: Types.TraceEvents.TraceEventData): Types.TraceEvents.TraceEventPrePaint|undefined {\n  // Get the first PrePaint event that happened after the targetEvent.\n  const nextPrePaintIndex = Platform.ArrayUtilities.nearestIndexFromBeginning(\n      prePaintEvents, prePaint => prePaint.ts > targetEvent.ts + (targetEvent.dur || 0));\n  // No PrePaint event registered after this event\n  if (nextPrePaintIndex === null) {\n    return undefined;\n  }\n\n  return prePaintEvents[nextPrePaintIndex];\n}\n\n/**\n * An Iframe is considered a root cause if the iframe event occurs before a prePaint event\n * and within this prePaint event a layout shift(s) occurs.\n */\nfunction getIframeRootCauses(\n    iframeCreatedEvents: readonly Types.TraceEvents.TraceEventRenderFrameImplCreateChildFrame[],\n    prePaintEvents: Types.TraceEvents.TraceEventPrePaint[],\n    shiftsByPrePaint: Map<Types.TraceEvents.TraceEventPrePaint, Types.TraceEvents.TraceEventLayoutShift[]>,\n    rootCausesByShift: Map<Types.TraceEvents.TraceEventLayoutShift, LayoutShiftRootCausesData>):\n    Map<Types.TraceEvents.TraceEventLayoutShift, LayoutShiftRootCausesData> {\n  for (const iframeEvent of iframeCreatedEvents) {\n    const nextPrePaint = getNextPrePaintEvent(prePaintEvents, iframeEvent);\n    // If no following prePaint, this is not a root cause.\n    if (!nextPrePaint) {\n      continue;\n    }\n    const shifts = shiftsByPrePaint.get(nextPrePaint);\n    // if no layout shift(s), this is not a root cause.\n    if (!shifts) {\n      continue;\n    }\n    for (const shift of shifts) {\n      const rootCausesForShift = Platform.MapUtilities.getWithDefault(rootCausesByShift, shift, () => {\n        return {\n          iframes: [],\n          fontRequests: [],\n        };\n      });\n      rootCausesForShift.iframes.push(iframeEvent);\n    }\n  }\n  return rootCausesByShift;\n}\n\n/**\n * A font request is considered a root cause if the request occurs before a prePaint event\n * and within this prePaint event a layout shift(s) occurs. Additionally, this font request should\n * happen within the INVALIDATION_WINDOW of the prePaint event.\n */\nfunction getFontRootCauses(\n    networkRequests: Types.TraceEvents.SyntheticNetworkRequest[],\n    prePaintEvents: Types.TraceEvents.TraceEventPrePaint[],\n    shiftsByPrePaint: Map<Types.TraceEvents.TraceEventPrePaint, Types.TraceEvents.TraceEventLayoutShift[]>,\n    rootCausesByShift: Map<Types.TraceEvents.TraceEventLayoutShift, LayoutShiftRootCausesData>):\n    Map<Types.TraceEvents.TraceEventLayoutShift, LayoutShiftRootCausesData> {\n  const fontRequests =\n      networkRequests.filter(req => req.args.data.resourceType === 'Font' && req.args.data.mimeType.startsWith('font'));\n\n  for (const req of fontRequests) {\n    const nextPrePaint = getNextPrePaintEvent(prePaintEvents, req);\n    if (!nextPrePaint) {\n      continue;\n    }\n\n    // If the req is outside the INVALIDATION_WINDOW, it could not be a root cause.\n    if (!isInInvalidationWindow(req, nextPrePaint)) {\n      continue;\n    }\n\n    // Get the shifts that belong to this prepaint\n    const shifts = shiftsByPrePaint.get(nextPrePaint);\n\n    // if no layout shift(s) in this prePaint, the request is not a root cause.\n    if (!shifts) {\n      continue;\n    }\n    // Include the root cause to the shifts in this prePaint.\n    for (const shift of shifts) {\n      const rootCausesForShift = Platform.MapUtilities.getWithDefault(rootCausesByShift, shift, () => {\n        return {\n          iframes: [],\n          fontRequests: [],\n        };\n      });\n      rootCausesForShift.fontRequests.push(req);\n    }\n  }\n  return rootCausesByShift;\n}\n\nexport function generateInsight(\n    traceParsedData: RequiredData<typeof deps>, context: NavigationInsightContext): InsightResult<{\n  animationFailures?: readonly NoncompositedAnimationFailure[],\n  shifts?: Map<Types.TraceEvents.TraceEventLayoutShift, LayoutShiftRootCausesData>,\n}> {\n  const isWithinSameNavigation = ((event: Types.TraceEvents.TraceEventData): boolean => {\n    const nav =\n        Helpers.Trace.getNavigationForTraceEvent(event, context.frameId, traceParsedData.Meta.navigationsByFrameId);\n    return nav?.args.data?.navigationId === context.navigationId;\n  });\n\n  const compositeAnimationEvents = traceParsedData.Animations.animations.filter(isWithinSameNavigation);\n  const animationFailures = getNonCompositedAnimations(compositeAnimationEvents);\n\n  const iframeEvents =\n      traceParsedData.LayoutShifts.renderFrameImplCreateChildFrameEvents.filter(isWithinSameNavigation);\n  const networkRequests = traceParsedData.NetworkRequests.byTime.filter(isWithinSameNavigation);\n\n  const layoutShifts = traceParsedData.LayoutShifts.clusters.flatMap(\n      cluster =>\n          // Use one of the events in the cluster to determine if within the same navigation.\n      isWithinSameNavigation(cluster.events[0]) ? cluster.events : [],\n  );\n  const prePaintEvents = traceParsedData.LayoutShifts.prePaintEvents.filter(isWithinSameNavigation);\n\n  // Get root causes.\n  const rootCausesByShift = new Map<Types.TraceEvents.TraceEventLayoutShift, LayoutShiftRootCausesData>();\n  const shiftsByPrePaint = getShiftsByPrePaintEvents(layoutShifts, prePaintEvents);\n\n  for (const shift of layoutShifts) {\n    rootCausesByShift.set(shift, {iframes: [], fontRequests: []});\n  }\n\n  getIframeRootCauses(iframeEvents, prePaintEvents, shiftsByPrePaint, rootCausesByShift);\n  getFontRootCauses(networkRequests, prePaintEvents, shiftsByPrePaint, rootCausesByShift);\n\n  return {\n    animationFailures,\n    shifts: rootCausesByShift,\n  };\n}\n"]}

package/models/trace/insights/RenderBlocking.js

@@ -29,6 +29,20 @@ export function generateInsight(traceParsedData, context) {
         if (req.args.data.syntheticData.finishTime > firstPaintTs) {
             continue;
         }
+        // If a resource is marked `in_body_parser_blocking` it should only be considered render blocking if it is a
+        // high enough priority. Some resources (e.g. scripts) are not marked as high priority if they are fetched
+        // after a non-preloaded image. (See "early" definition in https://web.dev/articles/fetch-priority)
+        //
+        // There are edge cases and exceptions (e.g. priority hints) but this gives us the best approximation
+        // of render blocking resources in the document body.
+        if (req.args.data.renderBlocking === 'in_body_parser_blocking') {
+            const priority = req.args.data.priority;
+            const isScript = req.args.data.resourceType === "Script" /* Protocol.Network.ResourceType.Script */;
+            const isBlockingScript = isScript && priority === "High" /* Protocol.Network.ResourcePriority.High */;
+            if (priority !== "VeryHigh" /* Protocol.Network.ResourcePriority.VeryHigh */ && !isBlockingScript) {
+                continue;
+            }
+        }
         const navigation = Helpers.Trace.getNavigationForTraceEvent(req, context.frameId, traceParsedData.Meta.navigationsByFrameId);
         if (navigation?.args.data?.navigationId !== context.navigationId) {
             continue;

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

@@ -1 +1 @@
-{"version":3,"file":"RenderBlocking.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/RenderBlocking.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAqB,cAAc,EAAmD,MAAM,YAAY,CAAC;AAEhH,MAAM,UAAU,IAAI;IAClB,OAAO,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;AAChD,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,eAA0C,EAAE,OAAiC;IAE3G,MAAM,YAAY,GAAG,eAAe,CAAC,eAAe,CAAC,qBAAqB,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC;QACtE,EAAE,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC;QAC3B,EAAE,GAAG,iEAAsD;QAC3D,EAAE,KAAK,EAAE,EAAE,CAAC;IACrC,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO;YACL,sBAAsB,EAAE,EAAE;YAC1B,QAAQ,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC;SACjC,CAAC;IACJ,CAAC;IAED,MAAM,sBAAsB,GAAG,EAAE,CAAC;IAClC,KAAK,MAAM,GAAG,IAAI,eAAe,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;QACzD,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,OAAO,EAAE,CAAC;YAC5C,SAAS;QACX,CAAC;QAED,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,KAAK,UAAU,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,KAAK,yBAAyB,EAAE,CAAC;YAC9G,SAAS;QACX,CAAC;QAED,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,GAAG,YAAY,EAAE,CAAC;YAC1D,SAAS;QACX,CAAC;QAED,MAAM,UAAU,GACZ,OAAO,CAAC,KAAK,CAAC,0BAA0B,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,eAAe,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAC9G,IAAI,UAAU,EAAE,IAAI,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC,YAAY,EAAE,CAAC;YACjE,SAAS;QACX,CAAC;QAED,sBAAsB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnC,CAAC;IAED,OAAO;QACL,sBAAsB;KACvB,CAAC;AACJ,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 * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport type * as Types from '../types/types.js';\n\nimport {type InsightResult, InsightWarning, type NavigationInsightContext, type RequiredData} from './types.js';\n\nexport function deps(): ['NetworkRequests', 'PageLoadMetrics'] {\n  return ['NetworkRequests', 'PageLoadMetrics'];\n}\n\nexport function generateInsight(traceParsedData: RequiredData<typeof deps>, context: NavigationInsightContext):\n    InsightResult<{renderBlockingRequests: Types.TraceEvents.SyntheticNetworkRequest[]}> {\n  const firstPaintTs = traceParsedData.PageLoadMetrics.metricScoresByFrameId.get(context.frameId)\n                           ?.get(context.navigationId)\n                           ?.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.FP)\n                           ?.event?.ts;\n  if (!firstPaintTs) {\n    return {\n      renderBlockingRequests: [],\n      warnings: [InsightWarning.NO_FP],\n    };\n  }\n\n  const renderBlockingRequests = [];\n  for (const req of traceParsedData.NetworkRequests.byTime) {\n    if (req.args.data.frame !== context.frameId) {\n      continue;\n    }\n\n    if (req.args.data.renderBlocking !== 'blocking' && req.args.data.renderBlocking !== 'in_body_parser_blocking') {\n      continue;\n    }\n\n    if (req.args.data.syntheticData.finishTime > firstPaintTs) {\n      continue;\n    }\n\n    const navigation =\n        Helpers.Trace.getNavigationForTraceEvent(req, context.frameId, traceParsedData.Meta.navigationsByFrameId);\n    if (navigation?.args.data?.navigationId !== context.navigationId) {\n      continue;\n    }\n\n    renderBlockingRequests.push(req);\n  }\n\n  return {\n    renderBlockingRequests,\n  };\n}\n"]}
+{"version":3,"file":"RenderBlocking.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/RenderBlocking.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAG7B,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAqB,cAAc,EAAmD,MAAM,YAAY,CAAC;AAEhH,MAAM,UAAU,IAAI;IAClB,OAAO,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;AAChD,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,eAA0C,EAAE,OAAiC;IAE3G,MAAM,YAAY,GAAG,eAAe,CAAC,eAAe,CAAC,qBAAqB,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC;QACtE,EAAE,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC;QAC3B,EAAE,GAAG,iEAAsD;QAC3D,EAAE,KAAK,EAAE,EAAE,CAAC;IACrC,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO;YACL,sBAAsB,EAAE,EAAE;YAC1B,QAAQ,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC;SACjC,CAAC;IACJ,CAAC;IAED,MAAM,sBAAsB,GAAG,EAAE,CAAC;IAClC,KAAK,MAAM,GAAG,IAAI,eAAe,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;QACzD,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,OAAO,EAAE,CAAC;YAC5C,SAAS;QACX,CAAC;QAED,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,KAAK,UAAU,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,KAAK,yBAAyB,EAAE,CAAC;YAC9G,SAAS;QACX,CAAC;QAED,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,GAAG,YAAY,EAAE,CAAC;YAC1D,SAAS;QACX,CAAC;QAED,4GAA4G;QAC5G,0GAA0G;QAC1G,mGAAmG;QACnG,EAAE;QACF,qGAAqG;QACrG,qDAAqD;QACrD,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,KAAK,yBAAyB,EAAE,CAAC;YAC/D,MAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;YACxC,MAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,wDAAyC,CAAC;YACrF,MAAM,gBAAgB,GAAG,QAAQ,IAAI,QAAQ,wDAA2C,CAAC;YACzF,IAAI,QAAQ,gEAA+C,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBACjF,SAAS;YACX,CAAC;QACH,CAAC;QAED,MAAM,UAAU,GACZ,OAAO,CAAC,KAAK,CAAC,0BAA0B,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,eAAe,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAC9G,IAAI,UAAU,EAAE,IAAI,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC,YAAY,EAAE,CAAC;YACjE,SAAS;QACX,CAAC;QAED,sBAAsB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnC,CAAC;IAED,OAAO;QACL,sBAAsB;KACvB,CAAC;AACJ,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 * as Protocol from '../../../generated/protocol.js';\nimport * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport type * as Types from '../types/types.js';\n\nimport {type InsightResult, InsightWarning, type NavigationInsightContext, type RequiredData} from './types.js';\n\nexport function deps(): ['NetworkRequests', 'PageLoadMetrics'] {\n  return ['NetworkRequests', 'PageLoadMetrics'];\n}\n\nexport function generateInsight(traceParsedData: RequiredData<typeof deps>, context: NavigationInsightContext):\n    InsightResult<{renderBlockingRequests: Types.TraceEvents.SyntheticNetworkRequest[]}> {\n  const firstPaintTs = traceParsedData.PageLoadMetrics.metricScoresByFrameId.get(context.frameId)\n                           ?.get(context.navigationId)\n                           ?.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.FP)\n                           ?.event?.ts;\n  if (!firstPaintTs) {\n    return {\n      renderBlockingRequests: [],\n      warnings: [InsightWarning.NO_FP],\n    };\n  }\n\n  const renderBlockingRequests = [];\n  for (const req of traceParsedData.NetworkRequests.byTime) {\n    if (req.args.data.frame !== context.frameId) {\n      continue;\n    }\n\n    if (req.args.data.renderBlocking !== 'blocking' && req.args.data.renderBlocking !== 'in_body_parser_blocking') {\n      continue;\n    }\n\n    if (req.args.data.syntheticData.finishTime > firstPaintTs) {\n      continue;\n    }\n\n    // If a resource is marked `in_body_parser_blocking` it should only be considered render blocking if it is a\n    // high enough priority. Some resources (e.g. scripts) are not marked as high priority if they are fetched\n    // after a non-preloaded image. (See \"early\" definition in https://web.dev/articles/fetch-priority)\n    //\n    // There are edge cases and exceptions (e.g. priority hints) but this gives us the best approximation\n    // of render blocking resources in the document body.\n    if (req.args.data.renderBlocking === 'in_body_parser_blocking') {\n      const priority = req.args.data.priority;\n      const isScript = req.args.data.resourceType === Protocol.Network.ResourceType.Script;\n      const isBlockingScript = isScript && priority === Protocol.Network.ResourcePriority.High;\n      if (priority !== Protocol.Network.ResourcePriority.VeryHigh && !isBlockingScript) {\n        continue;\n      }\n    }\n\n    const navigation =\n        Helpers.Trace.getNavigationForTraceEvent(req, context.frameId, traceParsedData.Meta.navigationsByFrameId);\n    if (navigation?.args.data?.navigationId !== context.navigationId) {\n      continue;\n    }\n\n    renderBlockingRequests.push(req);\n  }\n\n  return {\n    renderBlockingRequests,\n  };\n}\n"]}

package/models/trace/trace-tsconfig.json

@@ -30,7 +30,6 @@
   },
   "files": [
     "../../../../../../front_end/models/trace/EntriesFilter.ts",
-    "../../../../../../front_end/models/trace/LegacyTracingModel.ts",
     "../../../../../../front_end/models/trace/ModelImpl.ts",
     "../../../../../../front_end/models/trace/Processor.ts",
     "../../../../../../front_end/models/trace/TracingManager.ts",

package/models/trace/trace.d.ts

@@ -3,10 +3,9 @@ import * as Extras from './extras/extras.js';
 import * as Handlers from './handlers/handlers.js';
 import * as Helpers from './helpers/helpers.js';
 import * as Insights from './insights/insights.js';
-import * as Legacy from './LegacyTracingModel.js';
 import * as TraceModel from './ModelImpl.js';
 import * as Processor from './Processor.js';
 import * as RootCauses from './root-causes/root-causes.js';
 import * as TracingManager from './TracingManager.js';
 import * as Types from './types/types.js';
-export { EntriesFilter, Extras, Handlers, Helpers, Insights, Legacy, Processor, RootCauses, TraceModel, TracingManager, Types, };
+export { EntriesFilter, Extras, Handlers, Helpers, Insights, Processor, RootCauses, TraceModel, TracingManager, Types, };

package/models/trace/trace.js

@@ -6,13 +6,10 @@ import * as Extras from './extras/extras.js';
 import * as Handlers from './handlers/handlers.js';
 import * as Helpers from './helpers/helpers.js';
 import * as Insights from './insights/insights.js';
-// Purposefully use a shorter name here so references to this are
-// Legacy.TracingModel.
-import * as Legacy from './LegacyTracingModel.js';
 import * as TraceModel from './ModelImpl.js';
 import * as Processor from './Processor.js';
 import * as RootCauses from './root-causes/root-causes.js';
 import * as TracingManager from './TracingManager.js';
 import * as Types from './types/types.js';
-export { EntriesFilter, Extras, Handlers, Helpers, Insights, Legacy, Processor, RootCauses, TraceModel, TracingManager, Types, };
+export { EntriesFilter, Extras, Handlers, Helpers, Insights, Processor, RootCauses, TraceModel, TracingManager, Types, };
 //# sourceMappingURL=trace.js.map

package/models/trace/trace.js.map

@@ -1 +1 @@
-{"version":3,"file":"trace.js","sourceRoot":"","sources":["../../../../../../front_end/models/trace/trace.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,aAAa,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAC7C,OAAO,KAAK,QAAQ,MAAM,wBAAwB,CAAC;AACnD,OAAO,KAAK,OAAO,MAAM,sBAAsB,CAAC;AAChD,OAAO,KAAK,QAAQ,MAAM,wBAAwB,CAAC;AACnD,iEAAiE;AACjE,uBAAuB;AACvB,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAC;AAClD,OAAO,KAAK,UAAU,MAAM,gBAAgB,CAAC;AAC7C,OAAO,KAAK,SAAS,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,UAAU,MAAM,8BAA8B,CAAC;AAC3D,OAAO,KAAK,cAAc,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EACL,aAAa,EACb,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,UAAU,EACV,UAAU,EACV,cAAc,EACd,KAAK,GACN,CAAC","sourcesContent":["// Copyright 2022 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 * as EntriesFilter from './EntriesFilter.js';\nimport * as Extras from './extras/extras.js';\nimport * as Handlers from './handlers/handlers.js';\nimport * as Helpers from './helpers/helpers.js';\nimport * as Insights from './insights/insights.js';\n// Purposefully use a shorter name here so references to this are\n// Legacy.TracingModel.\nimport * as Legacy from './LegacyTracingModel.js';\nimport * as TraceModel from './ModelImpl.js';\nimport * as Processor from './Processor.js';\nimport * as RootCauses from './root-causes/root-causes.js';\nimport * as TracingManager from './TracingManager.js';\nimport * as Types from './types/types.js';\n\nexport {\n  EntriesFilter,\n  Extras,\n  Handlers,\n  Helpers,\n  Insights,\n  Legacy,\n  Processor,\n  RootCauses,\n  TraceModel,\n  TracingManager,\n  Types,\n};\n"]}
+{"version":3,"file":"trace.js","sourceRoot":"","sources":["../../../../../../front_end/models/trace/trace.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,aAAa,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAC7C,OAAO,KAAK,QAAQ,MAAM,wBAAwB,CAAC;AACnD,OAAO,KAAK,OAAO,MAAM,sBAAsB,CAAC;AAChD,OAAO,KAAK,QAAQ,MAAM,wBAAwB,CAAC;AACnD,OAAO,KAAK,UAAU,MAAM,gBAAgB,CAAC;AAC7C,OAAO,KAAK,SAAS,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,UAAU,MAAM,8BAA8B,CAAC;AAC3D,OAAO,KAAK,cAAc,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EACL,aAAa,EACb,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,UAAU,EACV,UAAU,EACV,cAAc,EACd,KAAK,GACN,CAAC","sourcesContent":["// Copyright 2022 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 * as EntriesFilter from './EntriesFilter.js';\nimport * as Extras from './extras/extras.js';\nimport * as Handlers from './handlers/handlers.js';\nimport * as Helpers from './helpers/helpers.js';\nimport * as Insights from './insights/insights.js';\nimport * as TraceModel from './ModelImpl.js';\nimport * as Processor from './Processor.js';\nimport * as RootCauses from './root-causes/root-causes.js';\nimport * as TracingManager from './TracingManager.js';\nimport * as Types from './types/types.js';\n\nexport {\n  EntriesFilter,\n  Extras,\n  Handlers,\n  Helpers,\n  Insights,\n  Processor,\n  RootCauses,\n  TraceModel,\n  TracingManager,\n  Types,\n};\n"]}

package/models/trace/types/File.d.ts

@@ -1,5 +1,6 @@
+import type * as Protocol from '../../../generated/protocol.js';
 import { type TraceWindowMicroSeconds } from './Timing.js';
-import { type TraceEventData } from './TraceEvents.js';
+import { type ProcessID, type SampleIndex, type ThreadID, type TraceEventData } from './TraceEvents.js';
 export type TraceFile = {
     traceEvents: readonly TraceEventData[];
     metadata: MetaData;
@@ -12,10 +13,14 @@ export declare const enum DataOrigin {
     CPUProfile = "CPUProfile",
     TraceEvents = "TraceEvents"
 }
-export interface Annotations {
-    entriesFilterAnnotations: {
-        hiddenEntriesIndexes: number[];
-        modifiedEntriesIndexes: number[];
+export type RawEventKey = ['r', number];
+export type ProfileCallKey = ['p', ProcessID, ThreadID, SampleIndex, Protocol.integer];
+export type SyntheticEventKey = ['s', number];
+export type TraceEventSerializableKey = RawEventKey | ProfileCallKey | SyntheticEventKey;
+export interface Modifications {
+    entriesModifications: {
+        hiddenEntries: string[];
+        expandableEntries: string[];
     };
     initialBreadcrumb: Breadcrumb;
 }
@@ -31,6 +36,6 @@ export interface MetaData {
     cpuThrottling?: number;
     hardwareConcurrency?: number;
     dataOrigin?: DataOrigin;
-    annotations?: Annotations;
+    modifications?: Modifications;
 }
 export type Contents = TraceFile | TraceEventData[];

package/models/trace/types/File.js

@@ -1,5 +1,2 @@
-// Copyright 2023 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
 export {};
 //# sourceMappingURL=File.js.map

package/models/trace/types/File.js.map

@@ -1 +1 @@
-{"version":3,"file":"File.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/types/File.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B","sourcesContent":["// Copyright 2023 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 TraceWindowMicroSeconds} from './Timing.js';\nimport {type TraceEventData} from './TraceEvents.js';\n\nexport type TraceFile = {\n  traceEvents: readonly TraceEventData[],\n  metadata: MetaData,\n};\n\nexport interface Breadcrumb {\n  window: TraceWindowMicroSeconds;\n  child: Breadcrumb|null;\n}\n\nexport const enum DataOrigin {\n  CPUProfile = 'CPUProfile',\n  TraceEvents = 'TraceEvents',\n}\nexport interface Annotations {\n  entriesFilterAnnotations: {\n    hiddenEntriesIndexes: number[],\n    modifiedEntriesIndexes: number[],\n  };\n  initialBreadcrumb: Breadcrumb;\n}\n\n/**\n * Trace metadata that we persist to the file. This will allow us to\n * store specifics for the trace, e.g., which tracks should be visible\n * on load.\n */\nexport interface MetaData {\n  source?: 'DevTools';\n  startTime?: string;\n  networkThrottling?: string;\n  cpuThrottling?: number;\n  hardwareConcurrency?: number;\n  dataOrigin?: DataOrigin;\n  annotations?: Annotations;\n}\n\nexport type Contents = TraceFile|TraceEventData[];\n"]}
+{"version":3,"file":"File.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/types/File.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright 2023 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.\nimport type * as Protocol from '../../../generated/protocol.js';\n\nimport {type TraceWindowMicroSeconds} from './Timing.js';\nimport {type ProcessID, type SampleIndex, type ThreadID, type TraceEventData} from './TraceEvents.js';\n\nexport type TraceFile = {\n  traceEvents: readonly TraceEventData[],\n  metadata: MetaData,\n};\n\nexport interface Breadcrumb {\n  window: TraceWindowMicroSeconds;\n  child: Breadcrumb|null;\n}\n\nexport const enum DataOrigin {\n  CPUProfile = 'CPUProfile',\n  TraceEvents = 'TraceEvents',\n}\n\n// Serializable keys are created for trace events to be able to save\n// references to timeline events in a trace file. These keys enable\n// user modifications that can be saved. See go/cpq:event-data-json for\n// more details on the key format.\nexport type RawEventKey = ['r', number];\nexport type ProfileCallKey = ['p', ProcessID, ThreadID, SampleIndex, Protocol.integer];\nexport type SyntheticEventKey = ['s', number];\nexport type TraceEventSerializableKey = RawEventKey|ProfileCallKey|SyntheticEventKey;\n\nexport interface Modifications {\n  entriesModifications: {\n    // Entries hidden by the user\n    hiddenEntries: string[],\n    // Entries that parent a hiddenEntry\n    expandableEntries: string[],\n  };\n  initialBreadcrumb: Breadcrumb;\n}\n\n/**\n * Trace metadata that we persist to the file. This will allow us to\n * store specifics for the trace, e.g., which tracks should be visible\n * on load.\n */\nexport interface MetaData {\n  source?: 'DevTools';\n  startTime?: string;\n  networkThrottling?: string;\n  cpuThrottling?: number;\n  hardwareConcurrency?: number;\n  dataOrigin?: DataOrigin;\n  modifications?: Modifications;\n}\n\nexport type Contents = TraceFile|TraceEventData[];\n"]}

package/models/trace/types/TraceEvents.d.ts

@@ -63,6 +63,7 @@ export interface TraceEventCallFrame {
     lineNumber: number;
     url: string;
 }
+export declare function objectIsTraceEventCallFrame(object: {}): object is TraceEventCallFrame;
 export interface TraceFrame {
     frame: string;
     name: string;
@@ -78,7 +79,7 @@ export interface TraceEventSample extends TraceEventData {
  * A fake trace event created to support CDP.Profiler.Profiles in the
  * trace engine.
  */
-export interface SyntheticCpuProfile extends TraceEventInstant {
+export interface SyntheticCpuProfile extends TraceEventInstant, SyntheticBasedEvent<Phase.INSTANT> {
     name: 'CpuProfile';
     args: TraceEventArgs & {
         data: TraceEventArgsData & {
@@ -119,6 +120,10 @@ export interface TraceEventComplete extends TraceEventData {
     ph: Phase.COMPLETE;
     dur: MicroSeconds;
 }
+export interface TraceEventRunTask extends TraceEventComplete {
+    name: KnownEventName.RunTask;
+}
+export declare function isTraceEventRunTask(event: TraceEventData): event is TraceEventRunTask;
 export interface TraceEventFireIdleCallback extends TraceEventComplete {
     name: KnownEventName.FireIdleCallback;
     args: TraceEventArgs & {
@@ -242,7 +247,8 @@ interface SyntheticArgsData {
     totalTime: MicroSeconds;
     waiting: MicroSeconds;
 }
-export interface SyntheticNetworkRequest extends TraceEventComplete {
+export interface SyntheticNetworkRequest extends TraceEventComplete, SyntheticBasedEvent<Phase.COMPLETE> {
+    rawSourceEvent: TraceEventData;
     args: TraceEventArgs & {
         data: TraceEventArgsData & {
             syntheticData: SyntheticArgsData;
@@ -300,7 +306,8 @@ export declare const enum AuctionWorkletType {
     SELLER = "seller",
     UNKNOWN = "unknown"
 }
-export interface SyntheticAuctionWorkletEvent extends TraceEventInstant {
+export interface SyntheticAuctionWorkletEvent extends TraceEventInstant, SyntheticBasedEvent<Phase.INSTANT> {
+    rawSourceEvent: TraceEventData;
     name: 'SyntheticAuctionWorkletEvent';
     pid: ProcessID;
     host: string;
@@ -363,7 +370,8 @@ export interface TraceEventScreenshot extends TraceEventData {
     ph: Phase.OBJECT_SNAPSHOT;
 }
 export declare function isTraceEventScreenshot(event: TraceEventData): event is TraceEventScreenshot;
-export interface SyntheticScreenshot extends TraceEventData {
+export interface SyntheticScreenshot extends TraceEventData, SyntheticBasedEvent {
+    rawSourceEvent: TraceEventScreenshot;
     /** This is the correct presentation timestamp. */
     ts: MicroSeconds;
     args: TraceEventArgs & {
@@ -620,7 +628,9 @@ export interface LayoutShiftParsedData {
     cumulativeWeightedScoreInWindow: number;
     sessionWindowData: LayoutShiftSessionWindowData;
 }
-export interface SyntheticLayoutShift extends TraceEventLayoutShift {
+export interface SyntheticLayoutShift extends TraceEventLayoutShift, SyntheticBasedEvent<Phase.INSTANT> {
+    name: 'LayoutShift';
+    rawSourceEvent: TraceEventLayoutShift;
     args: TraceEventArgs & {
         frame: string;
         data?: LayoutShiftData & {
@@ -651,6 +661,7 @@ export interface TraceEventResourceSendRequest extends TraceEventInstant {
             requestMethod?: string;
             renderBlocking?: RenderBlocking;
             initiator?: Initiator;
+            isLinkPreload?: boolean;
         };
     };
 }
@@ -733,7 +744,6 @@ export interface TraceEventResourceReceiveResponse extends TraceEventInstant {
             responseTime: MilliSeconds;
             statusCode: number;
             timing: TraceEventResourceReceiveResponseTimingData;
-            isLinkPreload?: boolean;
             connectionId: number;
             connectionReused: boolean;
             headers?: Array<{
@@ -842,6 +852,14 @@ export interface TraceEventScheduleStyleRecalculation extends TraceEventInstant
     };
 }
 export declare function isTraceEventScheduleStyleRecalculation(event: TraceEventData): event is TraceEventScheduleStyleRecalculation;
+export interface TraceEventRenderFrameImplCreateChildFrame extends TraceEventData {
+    name: KnownEventName.RenderFrameImplCreateChildFrame;
+    args: TraceEventArgs & {
+        child_frame_token: string;
+        frame_token: string;
+    };
+}
+export declare function isTraceEventRenderFrameImplCreateChildFrame(event: TraceEventData): event is TraceEventRenderFrameImplCreateChildFrame;
 export interface TraceEventPrePaint extends TraceEventComplete {
     name: 'PrePaint';
 }
@@ -994,7 +1012,16 @@ export interface TraceEventPipelineReporter extends TraceEventData {
     };
 }
 export declare function isTraceEventPipelineReporter(event: TraceEventData): event is TraceEventPipelineReporter;
-export interface SyntheticEventPair<T extends TraceEventPairableAsync = TraceEventPairableAsync> extends TraceEventData {
+export interface SyntheticBasedEvent<Ph extends Phase = Phase> extends SyntheticEntry {
+    ph: Ph;
+    rawSourceEvent: TraceEventData;
+}
+export type SyntheticEntry = TraceEventData & {
+    _tag: 'SyntheticEntryTag';
+};
+export declare function isSyntheticBasedEvent(event: TraceEventData): event is SyntheticBasedEvent;
+export interface SyntheticEventPair<T extends TraceEventPairableAsync = TraceEventPairableAsync> extends SyntheticBasedEvent {
+    rawSourceEvent: TraceEventData;
     name: T['name'];
     cat: T['cat'];
     id?: string;
@@ -1050,6 +1077,7 @@ export interface SyntheticProfileCall extends SyntheticTraceEntry {
     nodeId: Protocol.integer;
     sampleIndex: number;
     profileId: ProfileID;
+    selfTime: MicroSeconds;
 }
 /**
  * A JS Sample reflects a single sample from the V8 CPU Profile
@@ -1237,7 +1265,7 @@ export interface TraceEventLayout extends TraceEventComplete {
             partialLayout: boolean;
             totalObjects: number;
         };
-        endData: {
+        endData?: {
             layoutRoots: Array<{
                 depth: number;
                 nodeId: Protocol.DOM.BackendNodeId;
@@ -1267,6 +1295,11 @@ declare class CallFrameIdTag {
 }
 export type CallFrameID = number & CallFrameIdTag;
 export declare function CallFrameID(value: number): CallFrameID;
+declare class SampleIndexTag {
+    #private;
+}
+export type SampleIndex = number & SampleIndexTag;
+export declare function SampleIndex(value: number): SampleIndex;
 declare class ProcessIdTag {
     #private;
 }
@@ -1526,12 +1559,64 @@ export interface TraceEventWebSocketCreate extends TraceEventInstant {
             identifier: number;
             url: string;
             frame?: string;
+            workerId?: string;
             websocketProtocol?: string;
             stackTrace?: TraceEventCallFrame;
         };
     };
 }
 export declare function isTraceEventWebSocketCreate(event: TraceEventData): event is TraceEventWebSocketCreate;
+export interface TraceEventWebSocketInfo extends TraceEventInstant {
+    name: KnownEventName.WebSocketDestroy | KnownEventName.WebSocketReceiveHandshake | KnownEventName.WebSocketReceiveHandshakeResponse;
+    args: TraceEventArgs & {
+        data: TraceEventArgsData & {
+            identifier: number;
+            url: string;
+            frame?: string;
+            workerId?: string;
+        };
+    };
+}
+export interface TraceEventWebSocketTransfer extends TraceEventInstant {
+    name: KnownEventName.WebSocketSend | KnownEventName.WebSocketReceive;
+    args: TraceEventArgs & {
+        data: TraceEventArgsData & {
+            identifier: number;
+            url: string;
+            frame?: string;
+            workerId?: string;
+            dataLength: number;
+        };
+    };
+}
+export declare function isTraceEventWebSocketInfo(traceEventData: TraceEventData): traceEventData is TraceEventWebSocketInfo;
+export declare function isTraceEventWebSocketTransfer(traceEventData: TraceEventData): traceEventData is TraceEventWebSocketTransfer;
+export interface TraceEventWebSocketSend extends TraceEventInstant {
+    name: KnownEventName.WebSocketSend;
+    args: TraceEventArgs & {
+        data: TraceEventArgsData & {
+            identifier: number;
+            url: string;
+            frame?: string;
+            workerId?: string;
+            dataLength: number;
+        };
+    };
+}
+export declare function isTraceEventWebSocketSend(event: TraceEventData): event is TraceEventWebSocketSend;
+export interface TraceEventWebSocketReceive extends TraceEventInstant {
+    name: KnownEventName.WebSocketReceive;
+    args: TraceEventArgs & {
+        data: TraceEventArgsData & {
+            identifier: number;
+            url: string;
+            frame?: string;
+            workerId?: string;
+            dataLength: number;
+        };
+    };
+}
+export declare function isTraceEventWebSocketReceive(event: TraceEventData): event is TraceEventWebSocketReceive;
 export interface TraceEventWebSocketSendHandshakeRequest extends TraceEventInstant {
     name: KnownEventName.WebSocketSendHandshakeRequest;
     args: TraceEventArgs & {
@@ -1562,7 +1647,8 @@ export interface TraceEventWebSocketDestroy extends TraceEventInstant {
     };
 }
 export declare function isTraceEventWebSocketDestroy(event: TraceEventData): event is TraceEventWebSocketDestroy;
-export declare function isWebSocketTraceEvent(event: TraceEventData): event is TraceEventWebSocketCreate | TraceEventWebSocketDestroy | TraceEventWebSocketReceiveHandshakeResponse | TraceEventWebSocketSendHandshakeRequest;
+export declare function isWebSocketTraceEvent(event: TraceEventData): event is TraceEventWebSocketCreate | TraceEventWebSocketInfo | TraceEventWebSocketTransfer;
+export type WebSocketEvent = TraceEventWebSocketCreate | TraceEventWebSocketInfo | TraceEventWebSocketTransfer;
 export interface TraceEventV8Compile extends TraceEventComplete {
     name: KnownEventName.Compile;
     args: TraceEventArgs & {
@@ -1646,6 +1732,8 @@ export declare const enum KnownEventName {
     WebSocketSendHandshake = "WebSocketSendHandshakeRequest",
     WebSocketReceiveHandshake = "WebSocketReceiveHandshakeResponse",
     WebSocketDestroy = "WebSocketDestroy",
+    WebSocketSend = "WebSocketSend",
+    WebSocketReceive = "WebSocketReceive",
     CryptoDoEncrypt = "DoEncrypt",
     CryptoDoEncryptReply = "DoEncryptReply",
     CryptoDoDecrypt = "DoDecrypt",
@@ -1755,6 +1843,12 @@ export declare const enum KnownEventName {
     InputLatencyMouseWheel = "InputLatency::MouseWheel",
     ImplSideFling = "InputHandlerProxy::HandleGestureFling::started",
     SchedulePostMessage = "SchedulePostMessage",
-    HandlePostMessage = "HandlePostMessage"
+    HandlePostMessage = "HandlePostMessage",
+    RenderFrameImplCreateChildFrame = "RenderFrameImpl::createChildFrame"
 }
+export declare const Categories: {
+    readonly Console: "blink.console";
+    readonly UserTiming: "blink.user_timing";
+    readonly Loading: "loading";
+};
 export {};