@paulirish/trace_engine 0.0.23 → 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/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

@@ -79,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, SyntheticEvent<Phase.INSTANT> {
+export interface SyntheticCpuProfile extends TraceEventInstant, SyntheticBasedEvent<Phase.INSTANT> {
     name: 'CpuProfile';
     args: TraceEventArgs & {
         data: TraceEventArgsData & {
@@ -247,7 +247,7 @@ interface SyntheticArgsData {
     totalTime: MicroSeconds;
     waiting: MicroSeconds;
 }
-export interface SyntheticNetworkRequest extends TraceEventComplete, SyntheticEvent<Phase.COMPLETE> {
+export interface SyntheticNetworkRequest extends TraceEventComplete, SyntheticBasedEvent<Phase.COMPLETE> {
     rawSourceEvent: TraceEventData;
     args: TraceEventArgs & {
         data: TraceEventArgsData & {
@@ -306,7 +306,7 @@ export declare const enum AuctionWorkletType {
     SELLER = "seller",
     UNKNOWN = "unknown"
 }
-export interface SyntheticAuctionWorkletEvent extends TraceEventInstant, SyntheticEvent<Phase.INSTANT> {
+export interface SyntheticAuctionWorkletEvent extends TraceEventInstant, SyntheticBasedEvent<Phase.INSTANT> {
     rawSourceEvent: TraceEventData;
     name: 'SyntheticAuctionWorkletEvent';
     pid: ProcessID;
@@ -370,7 +370,7 @@ export interface TraceEventScreenshot extends TraceEventData {
     ph: Phase.OBJECT_SNAPSHOT;
 }
 export declare function isTraceEventScreenshot(event: TraceEventData): event is TraceEventScreenshot;
-export interface SyntheticScreenshot extends TraceEventData, SyntheticEvent {
+export interface SyntheticScreenshot extends TraceEventData, SyntheticBasedEvent {
     rawSourceEvent: TraceEventScreenshot;
     /** This is the correct presentation timestamp. */
     ts: MicroSeconds;
@@ -628,7 +628,7 @@ export interface LayoutShiftParsedData {
     cumulativeWeightedScoreInWindow: number;
     sessionWindowData: LayoutShiftSessionWindowData;
 }
-export interface SyntheticLayoutShift extends TraceEventLayoutShift, SyntheticEvent<Phase.INSTANT> {
+export interface SyntheticLayoutShift extends TraceEventLayoutShift, SyntheticBasedEvent<Phase.INSTANT> {
     name: 'LayoutShift';
     rawSourceEvent: TraceEventLayoutShift;
     args: TraceEventArgs & {
@@ -661,6 +661,7 @@ export interface TraceEventResourceSendRequest extends TraceEventInstant {
             requestMethod?: string;
             renderBlocking?: RenderBlocking;
             initiator?: Initiator;
+            isLinkPreload?: boolean;
         };
     };
 }
@@ -743,7 +744,6 @@ export interface TraceEventResourceReceiveResponse extends TraceEventInstant {
             responseTime: MilliSeconds;
             statusCode: number;
             timing: TraceEventResourceReceiveResponseTimingData;
-            isLinkPreload?: boolean;
             connectionId: number;
             connectionReused: boolean;
             headers?: Array<{
@@ -852,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';
 }
@@ -1004,12 +1012,15 @@ export interface TraceEventPipelineReporter extends TraceEventData {
     };
 }
 export declare function isTraceEventPipelineReporter(event: TraceEventData): event is TraceEventPipelineReporter;
-interface SyntheticEvent<Ph extends Phase = Phase> extends TraceEventData {
+export interface SyntheticBasedEvent<Ph extends Phase = Phase> extends SyntheticEntry {
     ph: Ph;
     rawSourceEvent: TraceEventData;
 }
-export declare function isSyntheticEvent(event: TraceEventData): event is SyntheticEvent;
-export interface SyntheticEventPair<T extends TraceEventPairableAsync = TraceEventPairableAsync> extends SyntheticEvent {
+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'];
@@ -1066,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
@@ -1253,7 +1265,7 @@ export interface TraceEventLayout extends TraceEventComplete {
             partialLayout: boolean;
             totalObjects: number;
         };
-        endData: {
+        endData?: {
             layoutRoots: Array<{
                 depth: number;
                 nodeId: Protocol.DOM.BackendNodeId;
@@ -1283,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;
 }
@@ -1542,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 & {
@@ -1578,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 & {
@@ -1662,6 +1732,8 @@ export declare const enum KnownEventName {
     WebSocketSendHandshake = "WebSocketSendHandshakeRequest",
     WebSocketReceiveHandshake = "WebSocketReceiveHandshakeResponse",
     WebSocketDestroy = "WebSocketDestroy",
+    WebSocketSend = "WebSocketSend",
+    WebSocketReceive = "WebSocketReceive",
     CryptoDoEncrypt = "DoEncrypt",
     CryptoDoEncryptReply = "DoEncryptReply",
     CryptoDoDecrypt = "DoDecrypt",
@@ -1771,7 +1843,8 @@ 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";

package/models/trace/types/TraceEvents.js

@@ -68,10 +68,13 @@ export function isTraceEventBeginCommitCompositorFrame(event) {
 export function isTraceEventScheduleStyleRecalculation(event) {
     return event.name === "ScheduleStyleRecalculation" /* KnownEventName.ScheduleStyleRecalculation */;
 }
+export function isTraceEventRenderFrameImplCreateChildFrame(event) {
+    return event.name === "RenderFrameImpl::createChildFrame" /* KnownEventName.RenderFrameImplCreateChildFrame */;
+}
 export function isTraceEventPipelineReporter(event) {
     return event.name === "PipelineReporter" /* KnownEventName.PipelineReporter */;
 }
-export function isSyntheticEvent(event) {
+export function isSyntheticBasedEvent(event) {
     return 'rawSourceEvent' in event;
 }
 export function isSyntheticInteractionEvent(event) {
@@ -155,6 +158,13 @@ class CallFrameIdTag {
 export function CallFrameID(value) {
     return value;
 }
+class SampleIndexTag {
+    #sampleIndexTag;
+}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function SampleIndex(value) {
+    return value;
+}
 class ProcessIdTag {
     #processIdTag;
 }
@@ -408,6 +418,21 @@ export function isTraceEventRequestIdleCallback(event) {
 export function isTraceEventWebSocketCreate(event) {
     return event.name === "WebSocketCreate" /* KnownEventName.WebSocketCreate */;
 }
+export function isTraceEventWebSocketInfo(traceEventData) {
+    return traceEventData.name === "WebSocketSendHandshakeRequest" /* KnownEventName.WebSocketSendHandshakeRequest */ ||
+        traceEventData.name === "WebSocketReceiveHandshakeResponse" /* KnownEventName.WebSocketReceiveHandshakeResponse */ ||
+        traceEventData.name === "WebSocketDestroy" /* KnownEventName.WebSocketDestroy */;
+}
+export function isTraceEventWebSocketTransfer(traceEventData) {
+    return traceEventData.name === "WebSocketSend" /* KnownEventName.WebSocketSend */ ||
+        traceEventData.name === "WebSocketReceive" /* KnownEventName.WebSocketReceive */;
+}
+export function isTraceEventWebSocketSend(event) {
+    return event.name === "WebSocketSend" /* KnownEventName.WebSocketSend */;
+}
+export function isTraceEventWebSocketReceive(event) {
+    return event.name === "WebSocketReceive" /* KnownEventName.WebSocketReceive */;
+}
 export function isTraceEventWebSocketSendHandshakeRequest(event) {
     return event.name === "WebSocketSendHandshakeRequest" /* KnownEventName.WebSocketSendHandshakeRequest */;
 }
@@ -418,8 +443,7 @@ export function isTraceEventWebSocketDestroy(event) {
     return event.name === "WebSocketDestroy" /* KnownEventName.WebSocketDestroy */;
 }
 export function isWebSocketTraceEvent(event) {
-    return isTraceEventWebSocketCreate(event) || isTraceEventWebSocketDestroy(event) ||
-        isTraceEventWebSocketReceiveHandshakeResponse(event) || isTraceEventWebSocketSendHandshakeRequest(event);
+    return isTraceEventWebSocketCreate(event) || isTraceEventWebSocketInfo(event) || isTraceEventWebSocketTransfer(event);
 }
 export function isTraceEventV8Compile(event) {
     return event.name === "v8.compile" /* KnownEventName.Compile */;