chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -2451,7 +2451,13 @@ export const NativeFunctions = [
   },
   {
     name: "removeAttribute",
-    signatures: [["qualifiedName"],["name"]]
+    signatures: [["qualifiedName"],["name"]],
+    receivers: ["Element"]
+  },
+  {
+    name: "removeAttribute",
+    signatures: [["attribute"]],
+    receivers: ["Sanitizer"]
   },
   {
     name: "removeAttributeNS",
@@ -2510,7 +2516,13 @@ export const NativeFunctions = [
   },
   {
     name: "setHTMLUnsafe",
-    signatures: [["html"]]
+    signatures: [["html","?options"]],
+    receivers: ["Element"]
+  },
+  {
+    name: "setHTMLUnsafe",
+    signatures: [["html"]],
+    receivers: ["ShadowRoot"]
   },
   {
     name: "setPointerCapture",
@@ -6472,7 +6484,11 @@ export const NativeFunctions = [
   },
   {
     name: "parseHTMLUnsafe",
-    signatures: [["html"]]
+    signatures: [["html","?options"]]
+  },
+  {
+    name: "parseHTML",
+    signatures: [["html","?options"]]
   },
   {
     name: "caretPositionFromPoint",
@@ -6504,6 +6520,10 @@ export const NativeFunctions = [
     name: "DOMException",
     signatures: [["?message","?name"]]
   },
+  {
+    name: "setHTML",
+    signatures: [["html","?options"]]
+  },
   {
     name: "getInnerHTML",
     signatures: [["?options"]]
@@ -6868,6 +6888,10 @@ export const NativeFunctions = [
     name: "DOMRect",
     signatures: [["?x","?y","?width","?height"]]
   },
+  {
+    name: "highlightsFromPoint",
+    signatures: [["x","y","?options"]]
+  },
   {
     name: "Highlight",
     signatures: [["...initRanges"]]
@@ -7088,6 +7112,34 @@ export const NativeFunctions = [
     name: "ResizeObserver",
     signatures: [["callback"]]
   },
+  {
+    name: "Sanitizer",
+    signatures: [["?config"]]
+  },
+  {
+    name: "allowElement",
+    signatures: [["element"]]
+  },
+  {
+    name: "removeElement",
+    signatures: [["element"]]
+  },
+  {
+    name: "replaceWithChildrenElement",
+    signatures: [["element"]]
+  },
+  {
+    name: "allowAttribute",
+    signatures: [["attribute"]]
+  },
+  {
+    name: "setComments",
+    signatures: [["allow"]]
+  },
+  {
+    name: "setDataAttributes",
+    signatures: [["allow"]]
+  },
   {
     name: "postTask",
     signatures: [["callback","?options"]]
@@ -7257,18 +7309,13 @@ export const NativeFunctions = [
     signatures: [["length"]]
   },
   {
-    name: "supportsInputLanguage",
+    name: "languageAvailable",
     signatures: [["languageTag"]]
   },
   {
     name: "writeStreaming",
     signatures: [["input","?options"]]
   },
-  {
-    name: "canDetect",
-    signatures: [["languageTag"]],
-    receivers: ["AILanguageDetectorCapabilities"]
-  },
   {
     name: "detect",
     signatures: [["input","?options"]],
@@ -7431,6 +7478,10 @@ export const NativeFunctions = [
     name: "beginLayer",
     signatures: [["?options"]]
   },
+  {
+    name: "fillTextCluster",
+    signatures: [["textCluster","x","y"]]
+  },
   {
     name: "placeElement",
     signatures: [["element","x","y"]]
@@ -7637,14 +7688,6 @@ export const NativeFunctions = [
     name: "runFuzzer",
     signatures: [["fuzzer_id","fuzzer_data"]]
   },
-  {
-    name: "GamepadAxisEvent",
-    signatures: [["type","?eventInitDict"]]
-  },
-  {
-    name: "GamepadButtonEvent",
-    signatures: [["type","?eventInitDict"]]
-  },
   {
     name: "GamepadEvent",
     signatures: [["type","?eventInitDict"]]
@@ -7783,6 +7826,10 @@ export const NativeFunctions = [
     name: "fromElement",
     signatures: [["element"]]
   },
+  {
+    name: "selectAudioOutput",
+    signatures: [["?options"]]
+  },
   {
     name: "setCaptureHandleConfig",
     signatures: [["?config"]]
@@ -8055,6 +8102,10 @@ export const NativeFunctions = [
     name: "resample2d",
     signatures: [["input","?options"]]
   },
+  {
+    name: "scatterElements",
+    signatures: [["input","indices","updates","?options"]]
+  },
   {
     name: "scatterND",
     signatures: [["input","indices","updates","?options"]]
@@ -8497,7 +8548,7 @@ export const NativeFunctions = [
   },
   {
     name: "install",
-    signatures: [["manifest_id","?install_url"]]
+    signatures: [["?manifest_id","?install_url"]]
   },
   {
     name: "AnalyserNode",

package/front_end/models/live-metrics/LiveMetrics.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
@@ -26,6 +27,8 @@ class InjectedScript {
   }
 }
 
+export type InteractionMap = Map<InteractionId, Interaction>;
+
 export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements SDK.TargetManager.Observer {
   #enabled = false;
   #target?: SDK.Target.Target;
@@ -34,7 +37,8 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   #lcpValue?: LCPValue;
   #clsValue?: CLSValue;
   #inpValue?: INPValue;
-  #interactions: Interaction[] = [];
+  #interactions: InteractionMap = new Map();
+  #interactionsByGroupId = new Map<Spec.InteractionEntryGroupId, Interaction[]>();
   #layoutShifts: LayoutShift[] = [];
   #mutex = new Common.Mutex.Mutex();
 
@@ -64,7 +68,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.#inpValue;
   }
 
-  get interactions(): Interaction[] {
+  get interactions(): InteractionMap {
     return this.#interactions;
   }
 
@@ -72,6 +76,67 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.#layoutShifts;
   }
 
+  /**
+   * Will create a log message describing the interaction's LoAF scripts.
+   * Returns true if the message is successfully logged.
+   */
+  async logInteractionScripts(interaction: Interaction): Promise<boolean> {
+    if (!this.#target) {
+      return false;
+    }
+
+    const executionContextId = this.#lastResetContextId;
+    if (!executionContextId) {
+      return false;
+    }
+
+    const scriptsTable = [];
+    for (const loaf of interaction.longAnimationFrameTimings) {
+      for (const script of loaf.scripts) {
+        const scriptEndTime = script.startTime + script.duration;
+        if (scriptEndTime < interaction.startTime) {
+          continue;
+        }
+
+        const blockingDuration = Math.round(scriptEndTime - Math.max(interaction.startTime, script.startTime));
+
+        // TODO: Use translated strings for the table
+        scriptsTable.push({
+          'Blocking duration': blockingDuration,
+          'Invoker type': script.invokerType || null,
+          Invoker: script.invoker || null,
+          Function: script.sourceFunctionName || null,
+          Source: script.sourceURL || null,
+          'Char position': script.sourceCharPosition || null,
+        });
+      }
+    }
+
+    try {
+      const scriptsLimit = Spec.LOAF_LIMIT * Spec.SCRIPTS_PER_LOAF_LIMIT;
+      const scriptLimitText = scriptsTable.length === scriptsLimit ? ` (limited to ${scriptsLimit})` : '';
+      const loafLimitText = interaction.longAnimationFrameTimings.length === Spec.LOAF_LIMIT ?
+          ` (limited to last ${Spec.LOAF_LIMIT})` :
+          '';
+      await this.#target.runtimeAgent().invoke_evaluate({
+        expression: `
+          console.group('[DevTools] Long animation frames for ${interaction.duration}ms ${
+            interaction.interactionType} interaction');
+          console.log('Scripts${scriptLimitText}:');
+          console.table(${JSON.stringify(scriptsTable)});
+          console.log('Intersecting long animation frame events${loafLimitText}:', ${
+            JSON.stringify(interaction.longAnimationFrameTimings)});
+          console.groupEnd();
+        `,
+        contextId: executionContextId,
+      });
+    } catch {
+      return false;
+    }
+
+    return true;
+  }
+
   /**
    * DOM nodes can't be sent over a runtime binding, so we have to retrieve
    * them separately.
@@ -140,7 +205,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
     const allLayoutAffectedNodes = this.#layoutShifts.flatMap(shift => shift.affectedNodes);
     const toRefresh: Array<{node?: SDK.DOMModel.DOMNode}> =
-        [this.#lcpValue || {}, ...this.#interactions, ...allLayoutAffectedNodes];
+        [this.#lcpValue || {}, ...this.#interactions.values(), ...allLayoutAffectedNodes];
 
     const allPromises = toRefresh.map(item => {
       const node = item.node;
@@ -193,25 +258,50 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
         const inpEvent: INPValue = {
           value: webVitalsEvent.value,
           phases: webVitalsEvent.phases,
-          uniqueInteractionId: webVitalsEvent.uniqueInteractionId,
+          interactionId: `interaction-${webVitalsEvent.entryGroupId}-${webVitalsEvent.startTime}`,
         };
         this.#inpValue = inpEvent;
         break;
       }
-      case 'Interaction': {
-        const interaction: Interaction = {
-          duration: webVitalsEvent.duration,
-          interactionType: webVitalsEvent.interactionType,
-          uniqueInteractionId: webVitalsEvent.uniqueInteractionId,
-        };
+      case 'InteractionEntry': {
+        const groupInteractions =
+            Platform.MapUtilities.getWithDefault(this.#interactionsByGroupId, webVitalsEvent.entryGroupId, () => []);
+
+        // `nextPaintTime` uses the event duration which is rounded to the nearest 8ms. The best we can do
+        // is check if the `nextPaintTime`s are within 8ms.
+        // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/duration#event
+        let interaction = groupInteractions.find(
+            interaction => Math.abs(interaction.nextPaintTime - webVitalsEvent.nextPaintTime) < 8);
+
+        if (!interaction) {
+          interaction = {
+            interactionId: `interaction-${webVitalsEvent.entryGroupId}-${webVitalsEvent.startTime}`,
+            interactionType: webVitalsEvent.interactionType,
+            duration: webVitalsEvent.duration,
+            eventNames: [],
+            phases: webVitalsEvent.phases,
+            startTime: webVitalsEvent.startTime,
+            nextPaintTime: webVitalsEvent.nextPaintTime,
+            longAnimationFrameTimings: webVitalsEvent.longAnimationFrameEntries,
+          };
+
+          groupInteractions.push(interaction);
+          this.#interactions.set(interaction.interactionId, interaction);
+        }
+
+        // We can get multiple instances of the first input interaction since web-vitals.js installs
+        // an extra listener for events of type `first-input`. This is a simple way to de-dupe those
+        // events without adding complexity to the injected code.
+        if (!interaction.eventNames.includes(webVitalsEvent.eventName)) {
+          interaction.eventNames.push(webVitalsEvent.eventName);
+        }
+
         if (webVitalsEvent.nodeIndex !== undefined) {
           const node = await this.#resolveDomNode(webVitalsEvent.nodeIndex, executionContextId);
           if (node) {
             interaction.node = node;
           }
         }
-
-        this.#interactions.push(interaction);
         break;
       }
       case 'LayoutShift': {
@@ -235,7 +325,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
         this.#lcpValue = undefined;
         this.#clsValue = undefined;
         this.#inpValue = undefined;
-        this.#interactions = [];
+        this.#interactions.clear();
         this.#layoutShifts = [];
         break;
       }
@@ -322,7 +412,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   clearInteractions(): void {
-    this.#interactions = [];
+    this.#interactions.clear();
     this.#sendStatusUpdate();
   }
 
@@ -444,6 +534,8 @@ export const enum Events {
   STATUS = 'status',
 }
 
+export type InteractionId = `interaction-${number}-${number}`;
+
 export type MetricValue = Pick<Spec.MetricChangeEvent, 'value'>;
 
 export interface LCPValue extends MetricValue {
@@ -453,7 +545,7 @@ export interface LCPValue extends MetricValue {
 
 export interface INPValue extends MetricValue {
   phases: Spec.INPPhases;
-  uniqueInteractionId: Spec.UniqueInteractionId;
+  interactionId: InteractionId;
 }
 
 export interface CLSValue extends MetricValue {
@@ -467,9 +559,14 @@ export interface LayoutShift {
 }
 
 export interface Interaction {
-  interactionType: Spec.InteractionEvent['interactionType'];
-  duration: Spec.InteractionEvent['duration'];
-  uniqueInteractionId: Spec.UniqueInteractionId;
+  interactionId: InteractionId;
+  interactionType: Spec.InteractionEntryEvent['interactionType'];
+  eventNames: string[];
+  duration: number;
+  startTime: number;
+  nextPaintTime: number;
+  phases: Spec.INPPhases;
+  longAnimationFrameTimings: Spec.PerformanceLongAnimationFrameTimingJSON[];
   node?: SDK.DOMModel.DOMNode;
 }
 
@@ -477,7 +574,7 @@ export interface StatusEvent {
   lcp?: LCPValue;
   cls?: CLSValue;
   inp?: INPValue;
-  interactions: Interaction[];
+  interactions: InteractionMap;
   layoutShifts: LayoutShift[];
 }
 

package/front_end/models/live-metrics/web-vitals-injected/OnEachInteraction.ts

@@ -4,68 +4,31 @@
 
 /**
  * @fileoverview web-vitals.js doesn't provide a log of all interactions.
- * This was largely copied from the web vitals extension:
- * https://github.com/GoogleChrome/web-vitals-extension/blob/main/src/browser_action/on-each-interaction.js
+ * This solution is hacky but it was recommended by web-vitals devs:
+ * b/371052022
  */
 
-import type * as WebVitals from '../../../third_party/web-vitals/web-vitals.js';
-
-export interface InteractionWithAttribution {
-  attribution: {
-    interactionTargetElement: Node|null,
-    interactionType: WebVitals.INPAttribution['interactionType'],
-  };
-  entries: PerformanceEventTiming[];
-  value: number;
-}
-
-export function onEachInteraction(callback: (interaction: InteractionWithAttribution) => void): void {
-  const eventObserver = new PerformanceObserver(list => {
-    const entries = list.getEntries();
-    const interactions = new Map<number, PerformanceEventTiming[]>();
-
-    const performanceEventTimings = entries.filter((entry): entry is PerformanceEventTiming => 'interactionId' in entry)
-                                        .filter(entry => entry.interactionId);
-
-    for (const entry of performanceEventTimings) {
-      const interaction = interactions.get(entry.interactionId) || [];
-      interaction.push(entry);
-      interactions.set(entry.interactionId, interaction);
-    }
-
-    // Will report as a single interaction even if parts are in separate frames.
-    // Consider splitting by animation frame.
-    for (const interaction of interactions.values()) {
-      const longestEntry = interaction.reduce((prev, curr) => prev.duration >= curr.duration ? prev : curr);
-      const value = longestEntry.duration;
-
-      const firstEntryWithTarget = interaction.find(entry => entry.target);
-
-      callback({
-        attribution: {
-          interactionTargetElement: firstEntryWithTarget?.target ?? null,
-          interactionType: longestEntry.name.startsWith('key') ? 'keyboard' : 'pointer',
-        },
-        entries: interaction,
-        value,
-      });
-    }
-  });
-
-  eventObserver.observe({
-    type: 'first-input',
-    buffered: false,
-  });
-
-  eventObserver.observe({
-    type: 'event',
-    durationThreshold: 0,
-    // Interaction events can only be stored to the buffer if their duration is >=104ms.
-    // https://www.w3.org/TR/event-timing/#sec-events-exposed
-    //
-    // This means we can only collect a subset of interactions that happen before this observer is started.
-    // To avoid confusion, we only collect interactions that after this observer has started.
-    // Note: This DOES NOT affect the collection for the INP metric and so INP will still be restored from the buffer.
-    buffered: false,
+import * as WebVitals from '../../../third_party/web-vitals/web-vitals.js';
+
+export function onEachInteraction(onReport: (metric: WebVitals.INPMetricWithAttribution) => void): void {
+  WebVitals.entryPreProcessingCallbacks.push((entry: PerformanceEventTiming) => {
+    // Wait a microtask so this "pre" processing callback actually
+    // becomes a "post" processing callback.
+    void Promise.resolve().then(() => {
+      if (entry.interactionId) {
+        const interaction = WebVitals.attributeINP({
+          entries: [entry],
+          // The only value we really need for `attributeINP` is `entries`
+          // Everything else is included to fill out the type.
+          name: 'INP',
+          rating: 'good',
+          value: entry.duration,
+          delta: entry.duration,
+          navigationType: 'navigate',
+          id: 'N/A',
+        });
+        onReport(interaction);
+      }
+    });
   });
 }

package/front_end/models/live-metrics/web-vitals-injected/spec/spec.ts

@@ -7,26 +7,14 @@ import type {INPAttribution, MetricType} from '../../../../third_party/web-vital
 export const EVENT_BINDING_NAME = '__chromium_devtools_metrics_reporter';
 export const INTERNAL_KILL_SWITCH = '__chromium_devtools_kill_live_metrics';
 
+export const SCRIPTS_PER_LOAF_LIMIT = 10;
+export const LOAF_LIMIT = 5;
+
 export type MetricChangeEvent = Pick<MetricType, 'name'|'value'>;
 
-export type UniqueInteractionId = `interaction-${number}-${number}`;
+export type InteractionEntryGroupId = number&{_tag: 'InteractionEntryGroupId'};
 export type UniqueLayoutShiftId = `layout-shift-${number}-${number}`;
 
-/**
- * An interaction can have multiple associated `PerformanceEventTiming`s.
- * The `interactionId` available on `PerformanceEventTiming` isn't guaranteed to be unique. (e.g. a `keyup` event issued long after a `keydown` event will have the same `interactionId`).
- * Double-keying with the start time of the longest entry should uniquely identify each interaction.
- */
-export function getUniqueInteractionId(entries: PerformanceEventTiming[]): UniqueInteractionId {
-  const longestEntry = entries.reduce((prev, curr) => {
-    if (prev.duration === curr.duration) {
-      return prev.startTime < curr.startTime ? prev : curr;
-    }
-    return prev.duration > curr.duration ? prev : curr;
-  });
-  return `interaction-${longestEntry.interactionId}-${longestEntry.startTime}`;
-}
-
 export function getUniqueLayoutShiftId(entry: LayoutShift): UniqueLayoutShiftId {
   return `layout-shift-${entry.value}-${entry.startTime}`;
 }
@@ -59,15 +47,54 @@ export interface INPChangeEvent extends MetricChangeEvent {
   name: 'INP';
   interactionType: INPAttribution['interactionType'];
   phases: INPPhases;
-  uniqueInteractionId: UniqueInteractionId;
+  startTime: number;
+  entryGroupId: InteractionEntryGroupId;
+}
+
+// These object keys will be user visible
+// TODO: Translate these keys before they are logged to console
+/* eslint-disable  @typescript-eslint/naming-convention */
+export interface LoAFScript {
+  'Duration': number;
+  'Invoker Type': string|null;
+  'Invoker': string|null;
+  'Function': string|null;
+  'Source': string|null;
+  'Char position': number|null;
 }
+/* eslint-enable  @typescript-eslint/naming-convention */
 
-export interface InteractionEvent {
-  name: 'Interaction';
+export interface PerformanceScriptTimingJSON {
+  startTime: number;
+  duration: number;
+  invoker?: string;
+  invokerType?: string;
+  sourceFunctionName?: string;
+  sourceURL?: string;
+  sourceCharPosition?: number;
+}
+
+export interface PerformanceLongAnimationFrameTimingJSON {
+  renderStart: DOMHighResTimeStamp;
+  duration: DOMHighResTimeStamp;
+  scripts: PerformanceScriptTimingJSON[];
+}
+
+/**
+ * This event is not 1:1 with the interactions that the user sees in the interactions log.
+ * It is 1:1 with a `PerformanceEventTiming` entry.
+ */
+export interface InteractionEntryEvent {
+  name: 'InteractionEntry';
   interactionType: INPAttribution['interactionType'];
-  uniqueInteractionId: UniqueInteractionId;
+  eventName: string;
+  entryGroupId: InteractionEntryGroupId;
+  startTime: number;
+  nextPaintTime: number;
   duration: number;
+  phases: INPPhases;
   nodeIndex?: number;
+  longAnimationFrameEntries: PerformanceLongAnimationFrameTimingJSON[];
 }
 
 export interface LayoutShiftEvent {
@@ -81,4 +108,5 @@ export interface ResetEvent {
   name: 'reset';
 }
 
-export type WebVitalsEvent = LCPChangeEvent|CLSChangeEvent|INPChangeEvent|InteractionEvent|LayoutShiftEvent|ResetEvent;
+export type WebVitalsEvent =
+    LCPChangeEvent|CLSChangeEvent|INPChangeEvent|InteractionEntryEvent|LayoutShiftEvent|ResetEvent;

package/front_end/models/live-metrics/web-vitals-injected/web-vitals-injected.ts

@@ -98,6 +98,29 @@ window.getNodeForIndex = (index: number): Node|undefined => {
   return nodeList[index];
 };
 
+function limitScripts(loafs: Spec.PerformanceLongAnimationFrameTimingJSON[]):
+    Spec.PerformanceLongAnimationFrameTimingJSON[] {
+  return loafs.map(loaf => {
+    const longestScripts: Spec.PerformanceScriptTimingJSON[] = [];
+    for (const script of loaf.scripts) {
+      if (longestScripts.length < Spec.SCRIPTS_PER_LOAF_LIMIT) {
+        longestScripts.push(script);
+        continue;
+      }
+
+      const shorterIndex = longestScripts.findIndex(s => s.duration < script.duration);
+      if (shorterIndex === -1) {
+        continue;
+      }
+
+      longestScripts[shorterIndex] = script;
+    }
+    longestScripts.sort((a, b) => a.startTime - b.startTime);
+    loaf.scripts = longestScripts;
+    return loaf;
+  });
+}
+
 function initialize(): void {
   sendEventToDevTools({name: 'reset'});
 
@@ -148,18 +171,33 @@ function initialize(): void {
         processingDuration: metric.attribution.processingDuration,
         presentationDelay: metric.attribution.presentationDelay,
       },
-      uniqueInteractionId: Spec.getUniqueInteractionId(metric.entries),
+      startTime: metric.entries[0].startTime,
+      entryGroupId: metric.entries[0].interactionId as Spec.InteractionEntryGroupId,
       interactionType: metric.attribution.interactionType,
     };
     sendEventToDevTools(event);
-  }, {reportAllChanges: true});
+  }, {reportAllChanges: true, durationThreshold: 0});
 
   onEachInteraction(interaction => {
-    const event: Spec.InteractionEvent = {
-      name: 'Interaction',
+    // Multiple `InteractionEntry` events can be emitted for the same `uniqueInteractionId`
+    // However, it is easier to combine these entries in the DevTools client rather than in
+    // this injected code.
+    const event: Spec.InteractionEntryEvent = {
+      name: 'InteractionEntry',
       duration: interaction.value,
-      uniqueInteractionId: Spec.getUniqueInteractionId(interaction.entries),
+      phases: {
+        inputDelay: interaction.attribution.inputDelay,
+        processingDuration: interaction.attribution.processingDuration,
+        presentationDelay: interaction.attribution.presentationDelay,
+      },
+      startTime: interaction.entries[0].startTime,
+      entryGroupId: interaction.entries[0].interactionId as Spec.InteractionEntryGroupId,
+      nextPaintTime: interaction.attribution.nextPaintTime,
       interactionType: interaction.attribution.interactionType,
+      eventName: interaction.entries[0].name,
+      // To limit the amount of events, just get the last 5 LoAFs
+      longAnimationFrameEntries: limitScripts(
+          interaction.attribution.longAnimationFrameEntries.slice(-Spec.LOAF_LIMIT).map(loaf => loaf.toJSON())),
     };
     const node = interaction.attribution.interactionTargetElement;
     if (node) {

package/front_end/models/timeline_model/TimelineModelFilter.ts

@@ -24,11 +24,11 @@ export class TimelineVisibleEventsFilter extends TimelineModelFilter {
 
   static eventType(event: Trace.Types.Events.Event): Trace.Types.Events.Name {
     // Any blink.console category events are treated as ConsoleTime events
-    if (Trace.Helpers.Trace.eventHasCategory(event, 'blink.console')) {
+    if (event.cat.includes('blink.console')) {
       return Trace.Types.Events.Name.CONSOLE_TIME;
     }
     // Any blink.user_timing egory events are treated as UserTiming events
-    if (Trace.Helpers.Trace.eventHasCategory(event, 'blink.user_timing')) {
+    if (event.cat.includes('blink.user_timing')) {
       return Trace.Types.Events.Name.USER_TIMING;
     }
     return event.name as Trace.Types.Events.Name;