devtools-tracing 1.0.0

package/lib/front_end/models/trace/handlers/RendererHandler.ts

@@ -0,0 +1,428 @@
+// Copyright 2022 The Chromium Authors
+// 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';
+
+import {data as auctionWorkletsData} from './AuctionWorkletsHandler.js';
+import * as HandlerHelpers from './helpers.js';
+import {data as metaHandlerData, type FrameProcessData} from './MetaHandler.js';
+import {data as networkRequestHandlerData} from './NetworkRequestsHandler.js';
+import {data as samplesHandlerData} from './SamplesHandler.js';
+import type {HandlerName} from './types.js';
+
+/**
+ * This handler builds the hierarchy of trace events and profile calls
+ * on each thread on each process.
+ *
+ * Throughout the code, trace events and profile calls are referred to
+ * as "entries", but note they are different types of data. Trace events
+ * come directly from the backend and it's the type the engine commonly
+ * refers to. Profile calls on the other hand are built in the frontend,
+ * and, for compatibility purposes, typed as an extension to the trace
+ * event type.
+ */
+
+let processes = new Map<Types.Events.ProcessID, RendererProcess>();
+
+let entityMappings: HandlerHelpers.EntityMappings = {
+  eventsByEntity: new Map<HandlerHelpers.Entity, Types.Events.Event[]>(),
+  entityByEvent: new Map<Types.Events.Event, HandlerHelpers.Entity>(),
+  createdEntityCache: new Map<string, HandlerHelpers.Entity>(),
+  entityByUrlCache: new Map<string, HandlerHelpers.Entity>(),
+};
+
+// We track the compositor tile worker thread name events so that at the end we
+// can return these keyed by the process ID. These are used in the frontend to
+// show the user the rasterization thread(s) on the main frame as tracks.
+let compositorTileWorkers = Array<{
+  pid: Types.Events.ProcessID,
+  tid: Types.Events.ThreadID,
+}>();
+let entryToNode = new Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode>();
+
+let completeEventStack: (Types.Events.SyntheticComplete)[] = [];
+
+let config: Types.Configuration.Configuration = Types.Configuration.defaults();
+
+const makeRendererProcess = (): RendererProcess => ({
+  url: null,
+  isOnMainFrame: false,
+  threads: new Map(),
+});
+
+const makeRendererThread = (): RendererThread => ({
+  name: null,
+  entries: [],
+  profileCalls: [],
+  layoutEvents: [],
+  recalcStyleEvents: [],
+});
+
+const getOrCreateRendererProcess =
+    (processes: Map<Types.Events.ProcessID, RendererProcess>, pid: Types.Events.ProcessID): RendererProcess => {
+      return Platform.MapUtilities.getWithDefault(processes, pid, makeRendererProcess);
+    };
+
+const getOrCreateRendererThread = (process: RendererProcess, tid: Types.Events.ThreadID): RendererThread => {
+  return Platform.MapUtilities.getWithDefault(process.threads, tid, makeRendererThread);
+};
+
+export function handleUserConfig(userConfig: Types.Configuration.Configuration): void {
+  config = userConfig;
+}
+
+export function reset(): void {
+  processes = new Map();
+  entryToNode = new Map();
+  entityMappings = {
+    eventsByEntity: new Map<HandlerHelpers.Entity, Types.Events.Event[]>(),
+    entityByEvent: new Map<Types.Events.Event, HandlerHelpers.Entity>(),
+    createdEntityCache: new Map<string, HandlerHelpers.Entity>(),
+    entityByUrlCache: new Map<string, HandlerHelpers.Entity>(),
+  };
+  completeEventStack = [];
+  compositorTileWorkers = [];
+}
+
+export function handleEvent(event: Types.Events.Event): void {
+  if (Types.Events.isThreadName(event) && event.args.name?.startsWith('CompositorTileWorker')) {
+    compositorTileWorkers.push({
+      pid: event.pid,
+      tid: event.tid,
+    });
+  }
+
+  if (Types.Events.isBegin(event) || Types.Events.isEnd(event)) {
+    const process = getOrCreateRendererProcess(processes, event.pid);
+    const thread = getOrCreateRendererThread(process, event.tid);
+    const completeEvent = makeCompleteEvent(event);
+    if (!completeEvent) {
+      return;
+    }
+    thread.entries.push(completeEvent);
+    return;
+  }
+
+  if (Types.Events.isInstant(event) || Types.Events.isComplete(event)) {
+    const process = getOrCreateRendererProcess(processes, event.pid);
+    const thread = getOrCreateRendererThread(process, event.tid);
+    thread.entries.push(event);
+  }
+
+  if (Types.Events.isLayout(event)) {
+    const process = getOrCreateRendererProcess(processes, event.pid);
+    const thread = getOrCreateRendererThread(process, event.tid);
+    thread.layoutEvents.push(event);
+  }
+
+  if (Types.Events.isRecalcStyle(event)) {
+    const process = getOrCreateRendererProcess(processes, event.pid);
+    const thread = getOrCreateRendererThread(process, event.tid);
+    thread.recalcStyleEvents.push(event);
+  }
+}
+
+export async function finalize(): Promise<void> {
+  const {mainFrameId, rendererProcessesByFrame, threadsInProcess} = metaHandlerData();
+  entityMappings = networkRequestHandlerData().entityMappings;
+
+  assignMeta(processes, mainFrameId, rendererProcessesByFrame, threadsInProcess);
+  sanitizeProcesses(processes);
+  buildHierarchy(processes);
+  sanitizeThreads(processes);
+}
+
+export function data(): RendererHandlerData {
+  return {
+    processes,
+    compositorTileWorkers: gatherCompositorThreads(),
+    entryToNode,
+    entityMappings: {
+      entityByEvent: entityMappings.entityByEvent,
+      eventsByEntity: entityMappings.eventsByEntity,
+      createdEntityCache: entityMappings.createdEntityCache,
+      entityByUrlCache: entityMappings.entityByUrlCache,
+    },
+  };
+}
+
+function gatherCompositorThreads(): Map<Types.Events.ProcessID, Types.Events.ThreadID[]> {
+  const threadsByProcess = new Map<Types.Events.ProcessID, Types.Events.ThreadID[]>();
+  for (const worker of compositorTileWorkers) {
+    const byProcess = threadsByProcess.get(worker.pid) || [];
+    byProcess.push(worker.tid);
+    threadsByProcess.set(worker.pid, byProcess);
+  }
+  return threadsByProcess;
+}
+
+/**
+ * Steps through all the renderer processes we've located so far in the meta
+ * handler, obtaining their URL, checking whether they are the main frame, and
+ * collecting each one of their threads' name. This meta handler's data is
+ * assigned to the renderer handler's data.
+ */
+export function assignMeta(
+    processes: Map<Types.Events.ProcessID, RendererProcess>, mainFrameId: string,
+    rendererProcessesByFrame: FrameProcessData,
+    threadsInProcess: Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, Types.Events.ThreadName>>): void {
+  assignOrigin(processes, rendererProcessesByFrame);
+  assignIsMainFrame(processes, mainFrameId, rendererProcessesByFrame);
+  assignThreadName(processes, threadsInProcess);
+}
+
+/**
+ * Assigns origins to all threads in all processes.
+ * @see assignMeta
+ */
+export function assignOrigin(
+    processes: Map<Types.Events.ProcessID, RendererProcess>, rendererProcessesByFrame: FrameProcessData): void {
+  for (const renderProcessesByPid of rendererProcessesByFrame.values()) {
+    for (const [pid, processWindows] of renderProcessesByPid) {
+      for (const processInfo of processWindows.flat()) {
+        const process = getOrCreateRendererProcess(processes, pid);
+        // Sometimes a single process is responsible with rendering multiple
+        // frames at the same time. For example, see https://crbug.com/1334563.
+        // When this happens, we'd still like to assign a single url per process
+        // so: 1) use the first frame rendered by this process as the url source
+        // and 2) if the last url is "about:blank", use the next frame's url,
+        // data from about:blank is irrelevant.
+        if (process.url === null || process.url === 'about:blank') {
+          // If we are here, it's because we care about this process and the URL. But before we store
+          // it, we check if it is a valid URL by trying to create a URL object. If it isn't, we won't
+          // set it, and this process will be filtered out later.
+          try {
+            new URL(processInfo.frame.url);
+            process.url = processInfo.frame.url;
+          } catch {
+            process.url = null;
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Assigns whether or not a thread is the main frame to all threads in all processes.
+ * @see assignMeta
+ */
+export function assignIsMainFrame(
+    processes: Map<Types.Events.ProcessID, RendererProcess>, mainFrameId: string,
+    rendererProcessesByFrame: FrameProcessData): void {
+  for (const [frameId, renderProcessesByPid] of rendererProcessesByFrame) {
+    for (const [pid] of renderProcessesByPid) {
+      const process = getOrCreateRendererProcess(processes, pid);
+      // We have this go in one direction; once a renderer has been flagged as
+      // being on the main frame, we don't unset it to false if were to show up
+      // in a subframe. Equally, if we already saw this renderer in a subframe,
+      // but it becomes the main frame, the flag would get updated.
+      if (frameId === mainFrameId) {
+        process.isOnMainFrame = true;
+      }
+    }
+  }
+}
+
+/**
+ * Assigns the thread name to all threads in all processes.
+ * @see assignMeta
+ */
+export function assignThreadName(
+    processes: Map<Types.Events.ProcessID, RendererProcess>,
+    threadsInProcess: Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, Types.Events.ThreadName>>): void {
+  for (const [pid, process] of processes) {
+    for (const [tid, threadInfo] of threadsInProcess.get(pid) ?? []) {
+      const thread = getOrCreateRendererThread(process, tid);
+      thread.name = threadInfo?.args.name ?? `${tid}`;
+    }
+  }
+}
+
+/**
+ * Removes unneeded trace data opportunistically stored while handling events.
+ * This currently does the following:
+ *  - Deletes processes with an unknown origin.
+ */
+export function sanitizeProcesses(processes: Map<Types.Events.ProcessID, RendererProcess>): void {
+  const auctionWorklets = auctionWorkletsData().worklets;
+  const metaData = metaHandlerData();
+  if (metaData.traceIsGeneric) {
+    return;
+  }
+  for (const [pid, process] of processes) {
+    // If the process had no url, or if it had a malformed url that could not be
+    // parsed for some reason, or if it's an "about:" origin, delete it.
+    // This is done because we don't really care about processes for which we
+    // can't provide actionable insights to the user (e.g. about:blank pages).
+    //
+    // There is one exception; AuctionWorklet processes get parsed in a
+    // separate handler, so at this point we check to see if the process has
+    // been found by the AuctionWorkletsHandler, and if so we update the URL.
+    // This ensures that we keep this process around and do not drop it due to
+    // the lack of a URL.
+    if (process.url === null) {
+      const maybeWorklet = auctionWorklets.get(pid);
+      if (maybeWorklet) {
+        process.url = maybeWorklet.host;
+      } else {
+        processes.delete(pid);
+      }
+      continue;
+    }
+  }
+}
+
+/**
+ * Removes unneeded trace data opportunistically stored while handling events.
+ * This currently does the following:
+ *  - Deletes threads with no roots.
+ */
+export function sanitizeThreads(processes: Map<Types.Events.ProcessID, RendererProcess>): void {
+  for (const [, process] of processes) {
+    for (const [tid, thread] of process.threads) {
+      // If the thread has no roots, delete it. Otherwise, there's going to
+      // be space taken, even though nothing is rendered in the track manager.
+      if (!thread.tree?.roots.size) {
+        process.threads.delete(tid);
+      }
+    }
+  }
+}
+
+/**
+ * Creates a hierarchical structure from the trace events. Each thread in each
+ * process will contribute to their own individual hierarchy.
+ *
+ * The trace data comes in as a contiguous array of events, against which we
+ * make a couple of assumptions:
+ *
+ *  1. Events are temporally-ordered in terms of start time (though they're
+ *     not necessarily ordered as such in the data stream).
+ *  2. If event B's start and end times are within event A's time boundaries
+ *     we assume that A is the parent of B.
+ *
+ * Therefore we expect to reformulate something like:
+ *
+ * [ Task A ][ Task B ][ Task C ][ Task D ][ Task E ]
+ *
+ * Into something hierarchically-arranged like below:
+ *
+ * |------------- Task A -------------||-- Task E --|
+ *  |-- Task B --||-- Task D --|
+ *   |- Task C -|
+ */
+export function buildHierarchy(
+    processes: Map<Types.Events.ProcessID, RendererProcess>,
+    options?: {filter: {has: (name: Types.Events.Name) => boolean}}): void {
+  const samplesData = samplesHandlerData();
+  for (const [pid, process] of processes) {
+    for (const [tid, thread] of process.threads) {
+      if (!thread.entries.length) {
+        thread.tree = Helpers.TreeHelpers.makeEmptyTraceEntryTree();
+        continue;
+      }
+      // Step 1. Massage the data.
+      Helpers.Trace.sortTraceEventsInPlace(thread.entries);
+      // Step 2. Inject profile calls from samples
+      const samplesDataForThread = samplesData.profilesInProcess.get(pid)?.get(tid);
+      if (samplesDataForThread) {
+        const cpuProfile = samplesDataForThread.parsedProfile;
+        const samplesIntegrator = cpuProfile &&
+            new Helpers.SamplesIntegrator.SamplesIntegrator(
+                cpuProfile, samplesDataForThread.profileId, pid, tid, config);
+        const profileCalls = samplesIntegrator?.buildProfileCalls(thread.entries);
+        if (samplesIntegrator && profileCalls) {
+          thread.entries = Helpers.Trace.mergeEventsInOrder(thread.entries, profileCalls);
+          thread.profileCalls = profileCalls;
+
+          // We'll also inject the instant JSSample events (in debug mode only)
+          const jsSamples = samplesIntegrator.jsSampleEvents;
+          if (jsSamples.length) {
+            thread.entries = Helpers.Trace.mergeEventsInOrder(thread.entries, jsSamples);
+          }
+        }
+      }
+      // Step 3. Build the tree.
+      const treeData = Helpers.TreeHelpers.treify(thread.entries, options);
+      thread.tree = treeData.tree;
+      // Update the entryToNode map with the entries from this thread
+      for (const [entry, node] of treeData.entryToNode) {
+        entryToNode.set(entry, node);
+        // Entity mapping is unrelated to the tree, but calling here as we need to call on every node anyway.
+        HandlerHelpers.addEventToEntityMapping(entry, entityMappings);
+      }
+    }
+  }
+}
+
+export function makeCompleteEvent(event: Types.Events.Begin|Types.Events.End): Types.Events.SyntheticComplete|null {
+  if (Types.Events.isEnd(event)) {
+    // Quietly ignore unbalanced close events, they're legit (we could
+    // have missed start one).
+    const beginEvent = completeEventStack.pop();
+    if (!beginEvent) {
+      return null;
+    }
+    if (beginEvent.name !== event.name || beginEvent.cat !== event.cat) {
+      console.error(
+          'Begin/End events mismatch at ' + beginEvent.ts + ' (' + beginEvent.name + ') vs. ' + event.ts + ' (' +
+          event.name + ')');
+      return null;
+    }
+    // Update the begin event's duration using the timestamp of the end
+    // event.
+    beginEvent.dur = Types.Timing.Micro(event.ts - beginEvent.ts);
+    return null;
+  }
+
+  // Create a synthetic event using the begin event, when we find the
+  // matching end event later we will update its duration.
+  const syntheticComplete: Types.Events.SyntheticComplete = {
+    ...event,
+    ph: Types.Events.Phase.COMPLETE,
+    dur: Types.Timing.Micro(0),
+  };
+
+  completeEventStack.push(syntheticComplete);
+  return syntheticComplete;
+}
+
+export function deps(): HandlerName[] {
+  return ['Meta', 'Samples', 'AuctionWorklets', 'NetworkRequests'];
+}
+
+export interface RendererHandlerData {
+  processes: Map<Types.Events.ProcessID, RendererProcess>;
+  /**
+   * A map of all compositor workers (which we show in the UI as Rasterizers)
+   * by the process ID.
+   */
+  compositorTileWorkers: Map<Types.Events.ProcessID, Types.Events.ThreadID[]>;
+  entryToNode: Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode>;
+  entityMappings: HandlerHelpers.EntityMappings;
+}
+
+export interface RendererProcess {
+  // In an ideal world this would be modelled as a URL, but URLs cannot be sent
+  // between the main thread and workers, so we have to store it as a string.
+  url: string|null;
+  isOnMainFrame: boolean;
+  threads: Map<Types.Events.ThreadID, RendererThread>;
+}
+
+export interface RendererThread {
+  name: string|null;
+  /**
+   * Contains trace events and synthetic profile calls made from
+   * samples.
+   */
+  entries: Types.Events.Event[];
+  profileCalls: Types.Events.SyntheticProfileCall[];
+  layoutEvents: Types.Events.Layout[];
+  recalcStyleEvents: Types.Events.RecalcStyle[];
+  tree?: Helpers.TreeHelpers.TraceEntryTree;
+}

package/lib/front_end/models/trace/handlers/SamplesHandler.ts

@@ -0,0 +1,271 @@
+// Copyright 2022 The Chromium Authors
+// 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 type * as Protocol from '../../../generated/protocol.js';
+import * as CPUProfile from '../../cpu_profile/cpu_profile.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+
+let profilesInProcess = new Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, ProfileData>>();
+let entryToNode = new Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode>();
+
+// The profile head, containing its metadata like its start
+// time, comes in a "Profile" event. The sample data comes in
+// "ProfileChunk" events. We match these ProfileChunks with their head
+// using process and profile ids. However, in order to integrate sample
+// data with trace data, we need the thread id that owns each profile.
+// This thread id is extracted from the head event.
+// For this reason, we have a preprocessed data structure, where events
+// are matched by profile id, which we then finish processing to export
+// events matched by thread id.
+let preprocessedData = new Map<Types.Events.ProcessID, Map<Types.Events.ProfileID, PreprocessedData>>();
+
+function parseCPUProfileData(parseOptions: Types.Configuration.ParseOptions): void {
+  for (const [processId, profiles] of preprocessedData) {
+    for (const [profileId, preProcessedData] of profiles) {
+      const threadId = preProcessedData.threadId;
+      if (!preProcessedData.rawProfile.nodes.length || threadId === undefined) {
+        continue;
+      }
+      const indexStack: number[] = [];
+
+      const profileModel = new CPUProfile.CPUProfileDataModel.CPUProfileDataModel(preProcessedData.rawProfile);
+      const profileTree = Helpers.TreeHelpers.makeEmptyTraceEntryTree();
+      profileTree.maxDepth = profileModel.maxDepth;
+
+      const finalizedData: ProfileData = {
+        rawProfile: preProcessedData.rawProfile,
+        parsedProfile: profileModel,
+        profileCalls: [],
+        profileTree,
+        profileId,
+      };
+      const dataByThread = Platform.MapUtilities.getWithDefault(profilesInProcess, processId, () => new Map());
+      dataByThread.set(threadId, finalizedData);
+
+      // Only need to build pure JS ProfileCalls if we're parsing a CPU Profile, otherwise SamplesIntegrator does the work.
+      if (parseOptions.isCPUProfile) {
+        buildProfileCallsForCPUProfile();
+      }
+
+      function buildProfileCallsForCPUProfile(): void {
+        profileModel.forEachFrame(openFrameCallback, closeFrameCallback);
+
+        function openFrameCallback(
+            depth: number, node: CPUProfile.ProfileTreeModel.ProfileNode, sampleIndex: number,
+            timeStampMilliseconds: number): void {
+          if (threadId === undefined) {
+            return;
+          }
+          const ts = Helpers.Timing.milliToMicro(Types.Timing.Milli(timeStampMilliseconds));
+          const nodeId = node.id as Helpers.TreeHelpers.TraceEntryNodeId;
+
+          const profileCall = Helpers.Trace.makeProfileCall(node, profileId, sampleIndex, ts, processId, threadId);
+          finalizedData.profileCalls.push(profileCall);
+          indexStack.push(finalizedData.profileCalls.length - 1);
+          const traceEntryNode = Helpers.TreeHelpers.makeEmptyTraceEntryNode(profileCall, nodeId);
+          entryToNode.set(profileCall, traceEntryNode);
+          traceEntryNode.depth = depth;
+          if (indexStack.length === 1) {
+            // First call in the stack is a root call.
+            finalizedData.profileTree?.roots.add(traceEntryNode);
+          }
+        }
+        function closeFrameCallback(
+            _depth: number, _node: CPUProfile.ProfileTreeModel.ProfileNode, _sampleIndex: number,
+            _timeStampMillis: number, durMs: number, selfTimeMs: number): void {
+          const profileCallIndex = indexStack.pop();
+          const profileCall = profileCallIndex !== undefined && finalizedData.profileCalls[profileCallIndex];
+          if (!profileCall) {
+            return;
+          }
+          const {callFrame, ts, pid, tid} = profileCall;
+          const traceEntryNode = entryToNode.get(profileCall);
+          if (callFrame === undefined || ts === undefined || pid === undefined || profileId === undefined ||
+              tid === undefined || traceEntryNode === undefined) {
+            return;
+          }
+          const dur = Helpers.Timing.milliToMicro(Types.Timing.Milli(durMs));
+          const selfTime = Helpers.Timing.milliToMicro(Types.Timing.Milli(selfTimeMs));
+          profileCall.dur = dur;
+          traceEntryNode.selfTime = selfTime;
+
+          const parentIndex = indexStack.at(-1);
+          const parent = parentIndex !== undefined && finalizedData.profileCalls.at(parentIndex);
+          const parentNode = parent && entryToNode.get(parent);
+          if (!parentNode) {
+            return;
+          }
+          traceEntryNode.parent = parentNode;
+          parentNode.children.push(traceEntryNode);
+        }
+      }
+    }
+  }
+}
+
+export function reset(): void {
+  preprocessedData = new Map();
+  profilesInProcess = new Map();
+  entryToNode = new Map();
+}
+
+export function handleEvent(event: Types.Events.Event): void {
+  /**
+   * A fake trace event created to support CDP.Profiler.Profiles in the
+   * trace engine.
+   */
+  if (Types.Events.isSyntheticCpuProfile(event)) {
+    // At the moment we are attaching to a single node target so we
+    // should only get a single CPU profile. The values of the process
+    // id and thread id are not really important, so we use the data
+    // in the fake event. Should multi-thread CPU profiling be supported
+    // we could use these fields in the event to pass thread info.
+    const profileData = getOrCreatePreProcessedData(event.pid, event.id);
+    profileData.rawProfile = event.args.data.cpuProfile;
+    profileData.threadId = event.tid;
+    return;
+  }
+
+  if (Types.Events.isProfile(event)) {
+    // Do not use event.args.data.startTime as it is in CLOCK_MONOTONIC domain,
+    // but use profileEvent.ts which has been translated to Perfetto's clock
+    // domain. Also convert from ms to us.
+    // Note: events are collected on a different thread than what's sampled.
+    // The correct process and thread ids are specified by the profile.
+    const profileData = getOrCreatePreProcessedData(event.pid, event.id);
+    profileData.rawProfile.startTime = event.ts;
+    profileData.threadId = event.tid;
+    return;
+  }
+  if (Types.Events.isProfileChunk(event)) {
+    const profileData = getOrCreatePreProcessedData(event.pid, event.id);
+    const cdpProfile = profileData.rawProfile;
+    const nodesAndSamples: Types.Events.PartialProfile = event.args?.data?.cpuProfile || {samples: []};
+    const samples = nodesAndSamples?.samples || [];
+    const traceIds = event.args?.data?.cpuProfile?.trace_ids;
+    for (const n of nodesAndSamples?.nodes || []) {
+      const lineNumber = typeof n.callFrame.lineNumber === 'undefined' ? -1 : n.callFrame.lineNumber;
+      const columnNumber = typeof n.callFrame.columnNumber === 'undefined' ? -1 : n.callFrame.columnNumber;
+
+      const scriptId = String(n.callFrame.scriptId) as Protocol.Runtime.ScriptId;
+      const url = n.callFrame.url || '';
+      const node = {
+        ...n,
+        callFrame: {
+          ...n.callFrame,
+          url,
+          lineNumber,
+          columnNumber,
+          scriptId,
+        },
+      };
+      cdpProfile.nodes.push(node);
+    }
+
+    const timeDeltas = event.args.data?.timeDeltas || [];
+    const lines = event.args.data?.lines || Array(samples.length).fill(0);
+    cdpProfile.samples?.push(...samples);
+    cdpProfile.timeDeltas?.push(...timeDeltas);
+    cdpProfile.lines?.push(...lines);
+
+    if (traceIds) {
+      cdpProfile.traceIds ??= {};
+      for (const key in traceIds) {
+        cdpProfile.traceIds[key] = traceIds[key];
+      }
+    }
+
+    if (cdpProfile.samples && cdpProfile.timeDeltas && cdpProfile.samples.length !== cdpProfile.timeDeltas.length) {
+      console.error('Failed to parse CPU profile.');
+      return;
+    }
+    if (!cdpProfile.endTime && cdpProfile.timeDeltas) {
+      const timeDeltas: number[] = cdpProfile.timeDeltas;
+      cdpProfile.endTime = timeDeltas.reduce((x, y) => x + y, cdpProfile.startTime);
+    }
+    return;
+  }
+}
+
+export async function finalize(parseOptions: Types.Configuration.ParseOptions = {}): Promise<void> {
+  parseCPUProfileData(parseOptions);
+}
+
+export function data(): SamplesHandlerData {
+  return {
+    profilesInProcess,
+    entryToNode,
+  };
+}
+
+function getOrCreatePreProcessedData(
+    processId: Types.Events.ProcessID, profileId: Types.Events.ProfileID): PreprocessedData {
+  const profileById = Platform.MapUtilities.getWithDefault(preprocessedData, processId, () => new Map());
+  return Platform.MapUtilities.getWithDefault<Types.Events.ProfileID, PreprocessedData>(
+      profileById, profileId, () => ({
+                                rawProfile: {
+                                  startTime: 0,
+                                  endTime: 0,
+                                  nodes: [],
+                                  samples: [],
+                                  timeDeltas: [],
+                                  lines: [],
+                                },
+                                profileId,
+                              }));
+}
+
+export interface SamplesHandlerData {
+  profilesInProcess: typeof profilesInProcess;
+  entryToNode: typeof entryToNode;
+}
+
+export interface ProfileData {
+  profileId: Types.Events.ProfileID;
+  rawProfile: CPUProfile.CPUProfileDataModel.ExtendedProfile;
+  parsedProfile: CPUProfile.CPUProfileDataModel.CPUProfileDataModel;
+  /**
+   * Contains the calls built from the CPU profile samples.
+   * Note: This doesn't contain real trace events coming from the
+   * browser, only calls synthetically typed as trace events for
+   * compatibility, as such it only makes sense to use them in pure CPU
+   * profiles.
+   *
+   * If you need the profile calls from a CPU profile obtained from a
+   * web trace, use the data exported by the RendererHandler instead.
+   */
+  profileCalls: Types.Events.SyntheticProfileCall[];
+  /**
+   * Contains the call tree built from the CPU profile samples.
+   * Similar to the profileCalls field, this tree does not contain nor
+   * take into account trace events, as such it only makes sense to use
+   * them in pure CPU profiles.
+   */
+  profileTree?: Helpers.TreeHelpers.TraceEntryTree;
+}
+
+interface PreprocessedData {
+  rawProfile: CPUProfile.CPUProfileDataModel.ExtendedProfile;
+  profileId: Types.Events.ProfileID;
+  threadId?: Types.Events.ThreadID;
+}
+
+/**
+ * Returns the name of a function for a given synthetic profile call.
+ * We first look to find the ProfileNode representing this call, and use its
+ * function name. This is preferred (and should always exist) because if we
+ * resolve sourcemaps, we will update this name. If that name is not present,
+ * we fall back to the function name that was in the callframe that we got
+ * when parsing the profile's trace data.
+ */
+export function getProfileCallFunctionName(data: SamplesHandlerData, entry: Types.Events.SyntheticProfileCall): string {
+  const profile = data.profilesInProcess.get(entry.pid)?.get(entry.tid);
+  const node = profile?.parsedProfile.nodeById(entry.nodeId);
+  if (node?.functionName) {
+    return node.functionName;
+  }
+  return entry.callFrame.functionName;
+}