Merge pull request #17 from PerfLab-io/fix-animation-frames-entries-pairings

Fix animation frames entries pairings

Author: WebCloud

front_end/models/trace/handlers/AnimationHandler.ts

@@ -52,6 +52,8 @@ export function handleEvent(event: Types.Events.Event): void {
     // INFO: Hack to correctly pair AnimationFrame nestable groupings. Since the current
     // local id is not correctly set.
     const isStartEvent = event.ph === Types.Events.Phase.ASYNC_NESTABLE_START;
+    const isEndEvent = event.ph === Types.Events.Phase.ASYNC_NESTABLE_END;
+    const isInstant = event.ph === Types.Events.Phase.ASYNC_NESTABLE_INSTANT;
 
     if (isStartEvent && event.name === Types.Events.Name.AnimationFrame) {
       currentGroupingEventSulfix = `${event.ts}`;
@@ -70,7 +72,8 @@ export function handleEvent(event: Types.Events.Event): void {
       // INFO: Hack to correctly pair AnimationFrame nestable groupings. Since the current
       // Has to be unique for each event but correclty match the begining and end events to form
       // the pairs.
-      const currentBeginEventSulfix = !isStartEvent ? eventSulfixes.pop() : eventSulfixes.at(-1);
+      let currentBeginEventSulfix = isEndEvent ? eventSulfixes.pop() : eventSulfixes.at(-1);
+      currentBeginEventSulfix = isInstant ? `${event.ts}` : currentBeginEventSulfix;
       event.id2 = { local: `${event.id2?.local}-${currentGroupingEventSulfix}-${currentBeginEventSulfix}` };
     }
 

front_end/models/trace/types/TraceEvents.ts

@@ -591,7 +591,7 @@ export interface TraceEventAnimationFrameScriptGroupingEvent extends Event {
       ['style_duration_ms']?: number,
     },
   };
-  name: Name.AnimationFrameScriptExecute;
+  name: Name.AnimationFrameScriptExecute | Name.AnimationFrameScriptCompile;
   id2?: {
     local?: string,
   };
@@ -1980,7 +1980,7 @@ export function isTraceEventAnimationFrame(traceEventData: Event): traceEventDat
 }
 
 export function isTraceEventAnimationFrameScript(traceEventData: Event): traceEventData is TraceEventAnimationFrameScriptGroupingEvent {
-  return traceEventData.name === Name.AnimationFrameScriptExecute;
+  return traceEventData.name === Name.AnimationFrameScriptCompile || traceEventData.name === Name.AnimationFrameScriptExecute;
 }
 
 export function isTraceEventAnimationFramePaint(traceEventData: Event): traceEventData is TraceEventAnimationFramePaintGroupingEvent {
@@ -2794,6 +2794,7 @@ export const enum Name {
   AnimationFrameFirstUIEvent = 'AnimationFrame::FirstUIEvent',
   AnimationFrameStyleAndLayout = 'AnimationFrame::StyleAndLayout',
   AnimationFrameRender = 'AnimationFrame::Render',
+  AnimationFrameScriptCompile = 'AnimationFrame::Script::Compile',
   AnimationFrameScriptExecute = 'AnimationFrame::Script::Execute',
 
   /* Network request events */