Trace: remove need to clone handler data

Because handlers did not recreate instance variables like maps and
arrays, we had to clone the data after parsing to ensure if you then
import another trace, the handlers don't mutate previous trace data.
This CL updates each handler to create new instances of data, meaning
the worry about subsequent trace parsing mutating previous ones is
removed, and we can remove the requirement to clone any data after
parsing.

On a 400mb trace of Figma, this knocks ~200ms off the total time. Not
only do we not have to clone, but we also avoid the nested clones in the
RendererHandler `data()` call, which saves us ~50ms of work every time
it is called (which is 4 times as other handlers depend on it).

R=cjamcl@chromium.org

Fixed: 41484172
Bug: 436491188
Change-Id: Ie989c6d2c8d66e1b091b4d93e387dadb1b0b1be8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6897737
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Connor Clark <cjamcl@chromium.org>
Commit-Queue: Connor Clark <cjamcl@chromium.org>

Author: jackfranklin

front_end/models/trace/Processor.ts

@@ -234,39 +234,12 @@ export class TraceProcessor extends EventTarget {
       this.dispatchEvent(new TraceParseProgressEvent({percent}));
     }
 
-    // Handlers that depend on other handlers do so via .data(), which used to always
-    // return a shallow clone of its internal data structures. However, that pattern
-    // easily results in egregious amounts of allocation. Now .data() does not do any
-    // cloning, and it happens here instead so that users of the trace processor may
-    // still assume that the parsed data is theirs.
-    // See: crbug/41484172
-    const shallowClone = (value: unknown, recurse = true): unknown => {
-      if (value instanceof Map) {
-        return new Map(value);
-      }
-      if (value instanceof Set) {
-        return new Set(value);
-      }
-      if (Array.isArray(value)) {
-        return [...value];
-      }
-      if (typeof value === 'object' && value && recurse) {
-        const obj: Record<string, unknown> = {};
-        for (const [key, v] of Object.entries(value)) {
-          obj[key] = shallowClone(v, false);
-        }
-        return obj;
-      }
-      return value;
-    };
-
-    options.logger?.start('parse:clone');
+    options.logger?.start('parse:handler.data()');
     const parsedTrace = {};
     for (const [name, handler] of Object.entries(this.#traceHandlers)) {
-      const data = shallowClone(handler.data());
-      Object.assign(parsedTrace, {[name]: data});
+      Object.assign(parsedTrace, {[name]: handler.data()});
     }
-    options.logger?.end('parse:clone');
+    options.logger?.end('parse:handler.data()');
 
     this.dispatchEvent(new TraceParseProgressEvent({percent: ProgressPhase.CLONE}));
 

front_end/models/trace/handlers/AnimationFramesHandler.ts

@@ -16,24 +16,23 @@ function threadKey(data: Types.Events.Event): string {
 }
 // Track all the start + end events. We key them by the PID+TID so we don't
 // accidentally pair across different threads.
-const animationFrameStarts = new Map<string, Types.Events.AnimationFrameAsyncStart[]>();
-const animationFrameEnds = new Map<string, Types.Events.AnimationFrameAsyncEnd[]>();
+let animationFrameStarts = new Map<string, Types.Events.AnimationFrameAsyncStart[]>();
+let animationFrameEnds = new Map<string, Types.Events.AnimationFrameAsyncEnd[]>();
 // Store all the AnimationFrame::Presentation events. Key them by their ID for
 // easy look-up later on when we associate one to the AnimationFrame event.
-const animationFramePresentations = new Map<string, Types.Events.AnimationFramePresentation>();
+let animationFramePresentations = new Map<string, Types.Events.AnimationFramePresentation>();
 
 // The final list of animation frames that we return.
-const animationFrames: Types.Events.SyntheticAnimationFramePair[] = [];
+let animationFrames: Types.Events.SyntheticAnimationFramePair[] = [];
 
-const presentationForFrame =
-    new Map<Types.Events.SyntheticAnimationFramePair, Types.Events.AnimationFramePresentation>();
+let presentationForFrame = new Map<Types.Events.SyntheticAnimationFramePair, Types.Events.AnimationFramePresentation>();
 
 export function reset(): void {
-  animationFrameStarts.clear();
-  animationFrameEnds.clear();
-  animationFrames.length = 0;
-  presentationForFrame.clear();
-  animationFramePresentations.clear();
+  animationFrameStarts = new Map();
+  animationFrameEnds = new Map();
+  animationFrames = [];
+  presentationForFrame = new Map();
+  animationFramePresentations = new Map();
   isEnabled = false;
 }
 

front_end/models/trace/handlers/AnimationHandler.ts

@@ -5,16 +5,16 @@
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-const animations: Types.Events.Animation[] = [];
-const animationsSyntheticEvents: Types.Events.SyntheticAnimationPair[] = [];
+let animations: Types.Events.Animation[] = [];
+let animationsSyntheticEvents: Types.Events.SyntheticAnimationPair[] = [];
 
 export interface AnimationData {
   animations: readonly Types.Events.SyntheticAnimationPair[];
 }
 
 export function reset(): void {
-  animations.length = 0;
-  animationsSyntheticEvents.length = 0;
+  animations = [];
+  animationsSyntheticEvents = [];
 }
 
 export function handleEvent(event: Types.Events.Event): void {

front_end/models/trace/handlers/AsyncJSCallsHandler.ts

@@ -8,20 +8,19 @@ import * as Types from '../types/types.js';
 import {data as flowsHandlerData} from './FlowsHandler.js';
 import {data as rendererHandlerData} from './RendererHandler.js';
 
-const schedulerToRunEntryPoints = new Map<Types.Events.Event, Types.Events.Event[]>();
+let schedulerToRunEntryPoints = new Map<Types.Events.Event, Types.Events.Event[]>();
 
-const taskScheduleForTaskRunEvent =
-    new Map<Types.Events.DebuggerAsyncTaskRun, Types.Events.DebuggerAsyncTaskScheduled>();
-const asyncCallToScheduler =
+let taskScheduleForTaskRunEvent = new Map<Types.Events.DebuggerAsyncTaskRun, Types.Events.DebuggerAsyncTaskScheduled>();
+let asyncCallToScheduler =
     new Map<Types.Events.SyntheticProfileCall, {taskName: string, scheduler: Types.Events.Event}>();
 
-const runEntryPointToScheduler = new Map<Types.Events.Event, {taskName: string, scheduler: Types.Events.Event}>();
+let runEntryPointToScheduler = new Map<Types.Events.Event, {taskName: string, scheduler: Types.Events.Event}>();
 
 export function reset(): void {
-  schedulerToRunEntryPoints.clear();
-  asyncCallToScheduler.clear();
-  taskScheduleForTaskRunEvent.clear();
-  runEntryPointToScheduler.clear();
+  schedulerToRunEntryPoints = new Map();
+  asyncCallToScheduler = new Map();
+  taskScheduleForTaskRunEvent = new Map();
+  runEntryPointToScheduler = new Map();
 }
 
 export function handleEvent(_: Types.Events.Event): void {

front_end/models/trace/handlers/AuctionWorkletsHandler.ts

@@ -31,11 +31,11 @@ import * as Types from '../types/types.js';
  * args.data.target property, which is a string ID shared by both
  * events.
  */
-const runningInProcessEvents = new Map<Types.Events.ProcessID, Types.Events.AuctionWorkletRunningInProcess>();
-const doneWithProcessEvents = new Map<Types.Events.ProcessID, Types.Events.AuctionWorkletDoneWithProcess>();
+let runningInProcessEvents = new Map<Types.Events.ProcessID, Types.Events.AuctionWorkletRunningInProcess>();
+let doneWithProcessEvents = new Map<Types.Events.ProcessID, Types.Events.AuctionWorkletDoneWithProcess>();
 
 // Keyed by the PID defined in  `args.data.pid` on AuctionWorklet trace events..
-const createdSyntheticEvents = new Map<Types.Events.ProcessID, Types.Events.SyntheticAuctionWorklet>();
+let createdSyntheticEvents = new Map<Types.Events.ProcessID, Types.Events.SyntheticAuctionWorklet>();
 
 // Each AuctonWorklet takes over a process and has 2 threads (that we care
 // about and want to show as tracks):
@@ -44,15 +44,15 @@ const createdSyntheticEvents = new Map<Types.Events.ProcessID, Types.Events.Synt
 //    either a "Seller" or a "Bidder"
 // To detect these we look for the metadata thread_name events. We key these by
 // PID so that we can easily look them up later without having to loop through.
-const utilityThreads = new Map<Types.Events.ProcessID, Types.Events.ThreadName>();
-const v8HelperThreads = new Map<Types.Events.ProcessID, Types.Events.ThreadName>();
+let utilityThreads = new Map<Types.Events.ProcessID, Types.Events.ThreadName>();
+let v8HelperThreads = new Map<Types.Events.ProcessID, Types.Events.ThreadName>();
 
 export function reset(): void {
-  runningInProcessEvents.clear();
-  doneWithProcessEvents.clear();
-  createdSyntheticEvents.clear();
-  utilityThreads.clear();
-  v8HelperThreads.clear();
+  runningInProcessEvents = new Map();
+  doneWithProcessEvents = new Map();
+  createdSyntheticEvents = new Map();
+  utilityThreads = new Map();
+  v8HelperThreads = new Map();
 }
 
 export function handleEvent(event: Types.Events.Event): void {

front_end/models/trace/handlers/DOMStatsHandler.ts

@@ -9,10 +9,10 @@ export interface DOMStatsData {
   domStatsByFrameId: Map<string, Types.Events.DOMStats[]>;
 }
 
-const domStatsByFrameId: DOMStatsData['domStatsByFrameId'] = new Map();
+let domStatsByFrameId: DOMStatsData['domStatsByFrameId'] = new Map();
 
 export function reset(): void {
-  domStatsByFrameId.clear();
+  domStatsByFrameId = new Map();
 }
 
 export function handleEvent(event: Types.Events.Event): void {

front_end/models/trace/handlers/ExtensionTraceDataHandler.ts

@@ -8,13 +8,13 @@ import * as Types from '../types/types.js';
 import type {HandlerName} from './types.js';
 import {data as userTimingsData} from './UserTimingsHandler.js';
 
-const extensionTrackEntries: Types.Extensions.SyntheticExtensionTrackEntry[] = [];
-const extensionTrackData: Types.Extensions.ExtensionTrackData[] = [];
-const extensionMarkers: Types.Extensions.SyntheticExtensionMarker[] = [];
-const entryToNode = new Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode>();
-const timeStampByName = new Map<string, Types.Events.ConsoleTimeStamp>();
+let extensionTrackEntries: Types.Extensions.SyntheticExtensionTrackEntry[] = [];
+let extensionTrackData: Types.Extensions.ExtensionTrackData[] = [];
+let extensionMarkers: Types.Extensions.SyntheticExtensionMarker[] = [];
+let entryToNode = new Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode>();
+let timeStampByName = new Map<string, Types.Events.ConsoleTimeStamp>();
 
-const syntheticConsoleEntriesForTimingsTrack: Types.Events.SyntheticConsoleTimeStamp[] = [];
+let syntheticConsoleEntriesForTimingsTrack: Types.Events.SyntheticConsoleTimeStamp[] = [];
 
 export interface ExtensionTraceData {
   extensionTrackData: readonly Types.Extensions.ExtensionTrackData[];
@@ -29,12 +29,12 @@ export function handleEvent(_event: Types.Events.Event): void {
 }
 
 export function reset(): void {
-  extensionTrackEntries.length = 0;
-  syntheticConsoleEntriesForTimingsTrack.length = 0;
-  extensionTrackData.length = 0;
-  extensionMarkers.length = 0;
-  entryToNode.clear();
-  timeStampByName.clear();
+  extensionTrackEntries = [];
+  syntheticConsoleEntriesForTimingsTrack = [];
+  extensionTrackData = [];
+  extensionMarkers = [];
+  entryToNode = new Map();
+  timeStampByName = new Map();
 }
 
 export async function finalize(): Promise<void> {

front_end/models/trace/handlers/FlowsHandler.ts

@@ -24,7 +24,7 @@ import * as Types from '../types/types.js';
 // flows with the timestamps of each phase. Then, we place trace events
 // in the flows where their corresponding phase events were placed (if
 // there are any corresponding flow phase events at all).
-const flowDataByGroupToken = new Map<string, number>();
+let flowDataByGroupToken = new Map<string, number>();
 
 interface EventFlowData {
   flows: Set<number>;
@@ -43,20 +43,20 @@ type FlowBindingTuple =
 // every event in a trace, resulting in a lot of memory overhead and
 // major GC triggering. So we are trading off readability for
 // performance.
-const boundFlowData: FlowBindingTuple = new Map();
+let boundFlowData: FlowBindingTuple = new Map();
 
-const flowsById = new Map<number, Map<Types.Timing.Micro, Types.Events.Event>>();
-const flowEvents: Types.Events.FlowEvent[] = [];
-const nonFlowEvents: Types.Events.Event[] = [];
+let flowsById = new Map<number, Map<Types.Timing.Micro, Types.Events.Event>>();
+let flowEvents: Types.Events.FlowEvent[] = [];
+let nonFlowEvents: Types.Events.Event[] = [];
 let flows: Types.Events.Event[][] = [];
 const ID_COMPONENT_SEPARATOR = '-$-';
 export function reset(): void {
   flows = [];
-  flowEvents.length = 0;
-  nonFlowEvents.length = 0;
-  flowDataByGroupToken.clear();
-  boundFlowData.clear();
-  flowsById.clear();
+  flowEvents = [];
+  nonFlowEvents = [];
+  flowDataByGroupToken = new Map();
+  boundFlowData = new Map();
+  flowsById = new Map();
 }
 
 export function handleEvent(event: Types.Events.Event): void {

front_end/models/trace/handlers/FramesHandler.ts

@@ -25,7 +25,7 @@ import type {HandlerName} from './types.js';
  */
 
 let model: TimelineFrameModel|null = null;
-const relevantFrameEvents: Types.Events.Event[] = [];
+let relevantFrameEvents: Types.Events.Event[] = [];
 
 type FrameEvent = Types.Events.BeginFrame|Types.Events.DroppedFrame|Types.Events.RequestMainThreadFrame|
                   Types.Events.BeginMainThreadFrame|Types.Events.Commit|Types.Events.CompositeLayers|
@@ -58,7 +58,7 @@ const MAIN_FRAME_MARKERS = new Set<Types.Events.Name>([
 
 export function reset(): void {
   model = null;
-  relevantFrameEvents.length = 0;
+  relevantFrameEvents = [];
 }
 export function handleEvent(event: Types.Events.Event): void {
   // This might seem like a wide set of events to filter for, but these are all

front_end/models/trace/handlers/GPUHandler.ts

@@ -10,12 +10,12 @@ import type {HandlerName} from './types.js';
 
 // Each thread contains events. Events indicate the thread and process IDs, which are
 // used to store the event in the correct process thread entry below.
-const eventsInProcessThread = new Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, Types.Events.GPUTask[]>>();
+let eventsInProcessThread = new Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, Types.Events.GPUTask[]>>();
 
 let mainGPUThreadTasks: Types.Events.GPUTask[] = [];
 
 export function reset(): void {
-  eventsInProcessThread.clear();
+  eventsInProcessThread = new Map();
   mainGPUThreadTasks = [];
 }