chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

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

@@ -25,6 +25,25 @@ async function handleEventsFromTraceFile(context: Mocha.Context|Mocha.Suite|null
   return Trace.Handlers.ModelHandlers.Samples.data();
 }
 
+async function handleEventsFromCpuProfile(context: Mocha.Context|Mocha.Suite|null, name: string):
+    Promise<Trace.Handlers.ModelHandlers.Samples.SamplesHandlerData> {
+  const profile = await TraceLoader.rawCPUProfile(context, name);
+
+  const contents = Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.createFakeTraceFromCpuProfile(
+      profile, Trace.Types.Events.ThreadID(1));
+
+  Trace.Handlers.ModelHandlers.Samples.reset();
+  for (const event of contents.traceEvents) {
+    Trace.Handlers.ModelHandlers.Meta.handleEvent(event);
+    Trace.Handlers.ModelHandlers.Samples.handleEvent(event);
+  }
+
+  await Trace.Handlers.ModelHandlers.Meta.finalize();
+  await Trace.Handlers.ModelHandlers.Samples.finalize({isCPUProfile: true});
+
+  return Trace.Handlers.ModelHandlers.Samples.data();
+}
+
 describeWithEnvironment('SamplesHandler', function() {
   it('finds all the profiles in a real world recording', async () => {
     const data = await handleEventsFromTraceFile(this, 'multiple-navigations-with-iframes.json.gz');
@@ -73,7 +92,7 @@ describeWithEnvironment('SamplesHandler', function() {
         ph: Trace.Types.Events.Phase.SAMPLE,
         pid,
         tid: Trace.Types.Events.ThreadID(0),
-        ts: Trace.Types.Timing.MicroSeconds(ts),
+        ts: Trace.Types.Timing.Micro(ts),
         id,
         args: {
           data: {
@@ -87,7 +106,7 @@ describeWithEnvironment('SamplesHandler', function() {
                   }),
                   ),
             },
-            timeDeltas: timeDeltas.map(Trace.Types.Timing.MicroSeconds),
+            timeDeltas: timeDeltas.map(Trace.Types.Timing.Micro),
           },
         },
       };
@@ -102,11 +121,11 @@ describeWithEnvironment('SamplesHandler', function() {
       const mockProfileEvent: Trace.Types.Events.Profile = {
         name: 'Profile',
         id,
-        args: {data: {startTime: Trace.Types.Timing.MicroSeconds(0)}},
+        args: {data: {startTime: Trace.Types.Timing.Micro(0)}},
         cat: '',
         pid,
         tid,
-        ts: Trace.Types.Timing.MicroSeconds(0),
+        ts: Trace.Types.Timing.Micro(0),
         ph: Trace.Types.Events.Phase.SAMPLE,
       };
       /**
@@ -141,7 +160,7 @@ describeWithEnvironment('SamplesHandler', function() {
       for (const event of [mockProfileEvent, ...mockChunks]) {
         Trace.Handlers.ModelHandlers.Samples.handleEvent(event);
       }
-      await Trace.Handlers.ModelHandlers.Samples.finalize();
+      await Trace.Handlers.ModelHandlers.Samples.finalize({isCPUProfile: true});
       const data = Trace.Handlers.ModelHandlers.Samples.data();
       const calls = data.profilesInProcess.get(pid)?.get(tid)?.profileCalls.map(call => {
         const selfTime = data.entryToNode.get(call)?.selfTime;
@@ -177,23 +196,36 @@ describeWithEnvironment('SamplesHandler', function() {
 
       assert.deepEqual(callsTestData, expectedResult);
     });
-    it('can build profile calls from a CPU profile coming from a real world trace', async () => {
-      const data = await handleEventsFromTraceFile(this, 'multiple-navigations-with-iframes.json.gz');
+
+    it('can build profile calls from a CPU profile coming from a real world cpuprofile', async () => {
+      const data = await handleEventsFromCpuProfile(this, 'basic.cpuprofile.gz');
 
       const threadId = Trace.Types.Events.ThreadID(1);
-      const firstProcessId = Trace.Types.Events.ProcessID(2236123);
+      const firstProcessId = Trace.Types.Events.ProcessID(1);
       const profilesFirstProcess = data.profilesInProcess.get(firstProcessId);
-      const calls = profilesFirstProcess?.get(threadId)?.profileCalls.slice(0, 5).map(call => {
+      const profileData = profilesFirstProcess?.get(threadId) as Trace.Handlers.ModelHandlers.Samples.ProfileData;
+      // These particular calls are selected as some have children and others have selfTime
+      const calls = [
+        ...profileData?.profileCalls.slice(0, 4),
+        ...profileData?.profileCalls.slice(10, 15),
+      ].map(call => {
         const selfTime = data.entryToNode.get(call)?.selfTime;
         return {...call, selfTime};
       });
-      const tree = profilesFirstProcess?.get(threadId)?.profileTree;
+      const tree = profileData.profileTree;
       const expectedResult = [
-        {id: 2, dur: 392, ts: 643496962681, selfTime: 392, children: []},
-        {id: 3, dur: 682, ts: 643496963073, selfTime: 0, children: [4]},
-        {id: 4, dur: 682, ts: 643496963073, selfTime: 160, children: [5]},
-        {id: 5, dur: 522, ts: 643496963233, selfTime: 178, children: [6, 7]},
-        {id: 6, dur: 175, ts: 643496963411, selfTime: 175, children: []},
+        // The initial call stack
+        {id: 2, dur: 2369962, ts: 73029010084, selfTime: 0, children: [3]},
+        {id: 3, dur: 2369962, ts: 73029010084, selfTime: 0, children: [4]},
+        {id: 4, dur: 2369962, ts: 73029010084, selfTime: 0, children: [5]},
+        {id: 5, dur: 2369962, ts: 73029010084, selfTime: 0, children: [6]},
+        // various calls to hrtime
+        {id: 10, dur: 375, ts: 73029011751, selfTime: 375, children: []},
+        {id: 10, dur: 1083, ts: 73029012251, selfTime: 1083, children: []},
+        {id: 10, dur: 833, ts: 73029013459, selfTime: 833, children: []},
+        {id: 10, dur: 917, ts: 73029014417, selfTime: 792, children: []},
+        {id: 11, dur: 125, ts: 73029014667, selfTime: 125, children: []},
+
       ];
       assert.exists(tree?.roots);
       if (!tree?.roots) {
@@ -223,7 +255,8 @@ describeWithEnvironment('SamplesHandler', function() {
       assert.strictEqual(profileById.size, 1);
       const cpuProfileData = profileById.values().next().value as Trace.Handlers.ModelHandlers.Samples.ProfileData;
       const cpuProfile = cpuProfileData.rawProfile;
-      assert.deepEqual(Object.keys(cpuProfile), ['startTime', 'endTime', 'nodes', 'samples', 'timeDeltas', 'lines']);
+      assert.deepEqual(
+          Object.keys(cpuProfile), ['startTime', 'endTime', 'nodes', 'samples', 'timeDeltas', 'lines', 'traceIds']);
       assert.lengthOf(cpuProfile.nodes, 153);
       assert.strictEqual(cpuProfile.startTime, 287510826176);
       assert.strictEqual(cpuProfile.endTime, 287510847633);

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

@@ -24,7 +24,7 @@ const entryToNode = new Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNo
 // events matched by thread id.
 const preprocessedData = new Map<Types.Events.ProcessID, Map<Types.Events.ProfileID, PreprocessedData>>();
 
-function buildProfileCalls(): void {
+function parseCPUProfileData(parseOptions: Types.Configuration.ParseOptions): void {
   for (const [processId, profiles] of preprocessedData) {
     for (const [profileId, preProcessedData] of profiles) {
       const threadId = preProcessedData.threadId;
@@ -44,58 +44,65 @@ function buildProfileCalls(): void {
         profileTree,
         profileId,
       };
-
       const dataByThread = Platform.MapUtilities.getWithDefault(profilesInProcess, processId, () => new Map());
-      profileModel.forEachFrame(openFrameCallback, closeFrameCallback);
       dataByThread.set(threadId, finalizedData);
 
-      function openFrameCallback(
-          depth: number, node: CPUProfile.ProfileTreeModel.ProfileNode, sampleIndex: number,
-          timeStampMilliseconds: number): void {
-        if (threadId === undefined) {
-          return;
-        }
-        const ts = Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(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);
-        }
+      // Only need to build pure JS ProfileCalls if we're parsing a CPU Profile, otherwise SamplesIntegrator does the work.
+      if (parseOptions.isCPUProfile) {
+        buildProfileCallsForCPUProfile();
       }
-      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;
+
+      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);
+          }
         }
-        const dur = Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(durMs));
-        const selfTime = Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(selfTimeMs));
-        profileCall.dur = dur;
-        traceEntryNode.selfTime = selfTime;
+        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;
+          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);
         }
-        traceEntryNode.parent = parentNode;
-        parentNode.children.push(traceEntryNode);
       }
     }
   }
@@ -145,6 +152,7 @@ export function handleEvent(event: Types.Events.Event): void {
     const cdpProfile = profileData.rawProfile;
     const nodesAndSamples: Types.Events.PartialProfile|undefined = event.args?.data?.cpuProfile || {samples: []};
     const samples = nodesAndSamples?.samples || [];
+    const traceIds = event.args?.data?.cpuProfile?.trace_ids || {};
     const nodes: CPUProfile.CPUProfileDataModel.ExtendedProfileNode[] = [];
     for (const n of nodesAndSamples?.nodes || []) {
       const lineNumber = typeof n.callFrame.lineNumber === 'undefined' ? -1 : n.callFrame.lineNumber;
@@ -171,6 +179,7 @@ export function handleEvent(event: Types.Events.Event): void {
     cdpProfile.samples?.push(...samples);
     cdpProfile.timeDeltas?.push(...timeDeltas);
     cdpProfile.lines?.push(...lines);
+    cdpProfile.traceIds = {...(cdpProfile.traceIds || {}), ...traceIds};
     if (cdpProfile.samples && cdpProfile.timeDeltas && cdpProfile.samples.length !== cdpProfile.timeDeltas.length) {
       console.error('Failed to parse CPU profile.');
       return;
@@ -183,8 +192,8 @@ export function handleEvent(event: Types.Events.Event): void {
   }
 }
 
-export async function finalize(): Promise<void> {
-  buildProfileCalls();
+export async function finalize(parseOptions: Types.Configuration.ParseOptions = {}): Promise<void> {
+  parseCPUProfileData(parseOptions);
 }
 
 export function data(): SamplesHandlerData {
@@ -216,10 +225,10 @@ export interface SamplesHandlerData {
   entryToNode: typeof entryToNode;
 }
 
-export type ProfileData = {
-  profileId: Types.Events.ProfileID,
-  rawProfile: CPUProfile.CPUProfileDataModel.ExtendedProfile,
-  parsedProfile: CPUProfile.CPUProfileDataModel.CPUProfileDataModel,
+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
@@ -230,21 +239,21 @@ export type ProfileData = {
    * 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[],
+  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,
-};
+  profileTree?: Helpers.TreeHelpers.TraceEntryTree;
+}
 
-type PreprocessedData = {
-  rawProfile: CPUProfile.CPUProfileDataModel.ExtendedProfile,
-  profileId: Types.Events.ProfileID,
-  threadId?: Types.Events.ThreadID,
-};
+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.

package/front_end/models/trace/handlers/ScreenshotsHandler.test.ts

@@ -2,66 +2,53 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {defaultTraceEvent} from '../../../testing/TraceHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as Trace from '../trace.js';
 
 describe('ScreenshotsHandler', function() {
-  const baseEvent = {
-    ...defaultTraceEvent,
-    name: 'Screenshot',
-    // Ensure that the screenshots are held against the pid & tid values
-    // that match the Browser process and CrBrowserMain in defaultTraceEvents.
-    pid: Trace.Types.Events.ProcessID(8017),
-    tid: Trace.Types.Events.ThreadID(775),
-    ts: Trace.Types.Timing.MicroSeconds(0),
-    args: {},
-    cat: 'test',
-    ph: Trace.Types.Events.Phase.OBJECT_SNAPSHOT,
-  };
-
-  let baseEvents: readonly Trace.Types.Events.Event[];
-
   beforeEach(async function() {
-    // The screenshot handler requires the meta handler because it needs
-    // to know the browser process and thread IDs. Here, then, we reset
-    // and later we will pass events to the meta handler, otherwise the
-    // screenshots handler will fail.
     Trace.Handlers.ModelHandlers.Meta.reset();
-
     Trace.Handlers.ModelHandlers.Screenshots.reset();
   });
+  describe('supporting old and new screenshot formats', () => {
+    async function runHandler(events: readonly Trace.Types.Events.Event[]) {
+      Trace.Helpers.SyntheticEvents.SyntheticEventsManager.createAndActivate(events);
 
-  describe('frames', () => {
-    it('obtains them if present', async function() {
-      const defaultTraceEvents = await TraceLoader.rawEvents(this, 'basic.json.gz');
-
-      baseEvents = [
-        ...defaultTraceEvents,
-        {...baseEvent, ts: Trace.Types.Timing.MicroSeconds(100)},
-        {...baseEvent, ts: Trace.Types.Timing.MicroSeconds(200)},
-      ];
-      Trace.Helpers.SyntheticEvents.SyntheticEventsManager.createAndActivate(baseEvents);
-
-      for (const event of baseEvents) {
+      for (const event of events) {
         Trace.Handlers.ModelHandlers.Meta.handleEvent(event);
         Trace.Handlers.ModelHandlers.Screenshots.handleEvent(event);
       }
 
       await Trace.Handlers.ModelHandlers.Meta.finalize();
       await Trace.Handlers.ModelHandlers.Screenshots.finalize();
+    }
+
+    it('finds the screenshots in traces using the OBJECT_SNAPSHOT screenshot format', async function() {
+      const events = await TraceLoader.rawEvents(this, 'web-dev-with-commit.json.gz');
+      await runHandler(events);
+      const data = Trace.Handlers.ModelHandlers.Screenshots.data();
+      assert.isOk(data.legacySyntheticScreenshots);
+      assert.isNull(data.screenshots);
+      assert.lengthOf(data.legacySyntheticScreenshots, 18);
+    });
 
-      const data = Trace.Handlers.ModelHandlers.Screenshots.data().all;
-      assert.lengthOf(data, 2);
+    // TODO: leave explainer comment here
+    it('finds the screenshots in traces using the new instant event screenshot format', async function() {
+      const events = await TraceLoader.rawEvents(this, 'web-dev-screenshot-source-ids.json.gz');
+      await runHandler(events);
+      const data = Trace.Handlers.ModelHandlers.Screenshots.data();
+      assert.isOk(data.screenshots);
+      assert.isNull(data.legacySyntheticScreenshots);
+      assert.lengthOf(data.screenshots, 20);
     });
   });
 
   describe('presentation timestamps', () => {
     function getMsDifferences(
-        syntheticScreenshots: Trace.Types.Events.SyntheticScreenshot[],
-        originalScreenshotEvents: Trace.Types.Events.Screenshot[]): number[] {
+        syntheticScreenshots: Trace.Types.Events.LegacySyntheticScreenshot[],
+        originalScreenshotEvents: Trace.Types.Events.LegacyScreenshot[]): number[] {
       return syntheticScreenshots.map((synEvent, i) => {
-        const origEvent = originalScreenshotEvents.at(i) as Trace.Types.Events.Screenshot;
+        const origEvent = originalScreenshotEvents.at(i) as Trace.Types.Events.LegacyScreenshot;
         const msDifference = (synEvent.ts - origEvent.ts) / 1000;
         return msDifference;
       });
@@ -77,8 +64,9 @@ describe('ScreenshotsHandler', function() {
       await Trace.Handlers.ModelHandlers.Meta.finalize();
       await Trace.Handlers.ModelHandlers.Screenshots.finalize();
 
-      const syntheticScreenshots = Trace.Handlers.ModelHandlers.Screenshots.data().all;
-      const originalScreenshotEvents = events.filter(Trace.Types.Events.isScreenshot);
+      const syntheticScreenshots = Trace.Handlers.ModelHandlers.Screenshots.data().legacySyntheticScreenshots;
+      assert.isOk(syntheticScreenshots);
+      const originalScreenshotEvents = events.filter(Trace.Types.Events.isLegacyScreenshot);
       assert.strictEqual(syntheticScreenshots.length, originalScreenshotEvents.length);
 
       for (const oEvent of originalScreenshotEvents) {
@@ -103,8 +91,9 @@ describe('ScreenshotsHandler', function() {
       await Trace.Handlers.ModelHandlers.Meta.finalize();
       await Trace.Handlers.ModelHandlers.Screenshots.finalize();
 
-      const syntheticScreenshots = Trace.Handlers.ModelHandlers.Screenshots.data().all;
-      const originalScreenshotEvents = events.filter(Trace.Types.Events.isScreenshot);
+      const syntheticScreenshots = Trace.Handlers.ModelHandlers.Screenshots.data().legacySyntheticScreenshots;
+      const originalScreenshotEvents = events.filter(Trace.Types.Events.isLegacyScreenshot);
+      assert.isOk(syntheticScreenshots);
       assert.strictEqual(syntheticScreenshots.length, originalScreenshotEvents.length);
 
       for (const oEvent of originalScreenshotEvents) {

package/front_end/models/trace/handlers/ScreenshotsHandler.ts

@@ -11,20 +11,24 @@ import type {HandlerName} from './types.js';
 // used to store the event in the correct process thread entry below.
 const unpairedAsyncEvents: Types.Events.PipelineReporter[] = [];
 
-const snapshotEvents: Types.Events.Screenshot[] = [];
-const syntheticScreenshots: Types.Events.SyntheticScreenshot[] = [];
-let frameSequenceToTs: Record<string, Types.Timing.MicroSeconds> = {};
+const legacyScreenshotEvents: Types.Events.LegacyScreenshot[] = [];
+const modernScreenshotEvents: Types.Events.Screenshot[] = [];
+const syntheticScreenshots: Types.Events.LegacySyntheticScreenshot[] = [];
+let frameSequenceToTs: Record<string, Types.Timing.Micro> = {};
 
 export function reset(): void {
   unpairedAsyncEvents.length = 0;
-  snapshotEvents.length = 0;
+  legacyScreenshotEvents.length = 0;
   syntheticScreenshots.length = 0;
+  modernScreenshotEvents.length = 0;
   frameSequenceToTs = {};
 }
 
 export function handleEvent(event: Types.Events.Event): void {
-  if (Types.Events.isScreenshot(event)) {
-    snapshotEvents.push(event);
+  if (Types.Events.isLegacyScreenshot(event)) {
+    legacyScreenshotEvents.push(event);
+  } else if (Types.Events.isScreenshot(event)) {
+    modernScreenshotEvents.push(event);
   } else if (Types.Events.isPipelineReporter(event)) {
     unpairedAsyncEvents.push(event);
   }
@@ -35,21 +39,21 @@ export async function finalize(): Promise<void> {
 
   frameSequenceToTs = Object.fromEntries(pipelineReporterEvents.map(evt => {
     const frameSequenceId = evt.args.data.beginEvent.args.chrome_frame_reporter.frame_sequence;
-    const presentationTs = Types.Timing.MicroSeconds(evt.ts + evt.dur);
+    const presentationTs = Types.Timing.Micro(evt.ts + evt.dur);
     return [frameSequenceId, presentationTs];
   }));
 
-  for (const snapshotEvent of snapshotEvents) {
+  for (const snapshotEvent of legacyScreenshotEvents) {
     const {cat, name, ph, pid, tid} = snapshotEvent;
     const syntheticEvent = Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent<
-        Types.Events.SyntheticScreenshot>({
+        Types.Events.LegacySyntheticScreenshot>({
       rawSourceEvent: snapshotEvent,
       cat,
       name,
       ph,
       pid,
       tid,
-      // TODO(paulirish, crbug.com/41363012): investigate why getPresentationTimestamp(snapshotEvent) seems less accurate. Resolve screenshot timing innaccuracy.
+      // TODO(paulirish, crbug.com/41363012): investigate why getPresentationTimestamp(snapshotEvent) seems less accurate. Resolve screenshot timing inaccuracy.
       // `getPresentationTimestamp(snapshotEvent) - snapshotEvent.ts` is how many microsec the screenshot should be adjusted to the right/later
       ts: snapshotEvent.ts,
       args: {
@@ -60,6 +64,13 @@ export async function finalize(): Promise<void> {
   }
 }
 
+export function screenshotImageDataUri(event: Types.Events.LegacySyntheticScreenshot|Types.Events.Screenshot): string {
+  if (Types.Events.isLegacySyntheticScreenshot(event)) {
+    return event.args.dataUri;
+  }
+  return `data:image/jpg;base64,${event.args.snapshot}`;
+}
+
 /**
  * Correct the screenshot timestamps
  * The screenshot 'snapshot object' trace event has the "frame sequence number" attached as an ID.
@@ -67,7 +78,7 @@ export async function finalize(): Promise<void> {
  * Presentation == when the pixels hit the screen. AKA Swap on the GPU
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function getPresentationTimestamp(screenshotEvent: Types.Events.Screenshot): Types.Timing.MicroSeconds {
+function getPresentationTimestamp(screenshotEvent: Types.Events.LegacyScreenshot): Types.Timing.Micro {
   const frameSequence = parseInt(screenshotEvent.id, 16);
   // If it's 1, then it's an old trace (before https://crrev.com/c/4957973) and cannot be corrected.
   if (frameSequence === 1) {
@@ -85,9 +96,23 @@ function getPresentationTimestamp(screenshotEvent: Types.Events.Screenshot): Typ
   return updatedTs ?? screenshotEvent.ts;
 }
 
+export interface Data {
+  // These are nullable because in January 2025 a CL in Chromium
+  // crrev.com/c/6197645 landed which changed the format of screenshots. For a
+  // given trace, it can have either "legacy" screenshot events, or "modern"
+  // screenshot events, but no trace can ever contain both.
+  // So, if either of these arrays are empty, we instead return `null`. This forces consumers to check the presence of the array.
+  // Traces can have no screenshots if the trace category is not enabled, so it
+  // is possible for a trace to return null for both of these arrays.
+  legacySyntheticScreenshots: Types.Events.LegacySyntheticScreenshot[]|null;
+  screenshots: Types.Events.Screenshot[]|null;
+}
 // TODO(crbug/41484172): should be readonly
-export function data(): ({all: Types.Events.SyntheticScreenshot[]}) {
-  return {all: syntheticScreenshots};
+export function data(): Data {
+  return {
+    legacySyntheticScreenshots: syntheticScreenshots.length ? syntheticScreenshots : null,
+    screenshots: modernScreenshotEvents.length ? modernScreenshotEvents : null,
+  };
 }
 
 export function deps(): HandlerName[] {

package/front_end/models/trace/handlers/ServerTimingsHandler.test.ts

@@ -14,23 +14,23 @@ describeWithEnvironment('ServerTimingsHandler', () => {
         events.map(({name, dur, ts, args}) => ({name, dur, ts, desc: args.data.desc, origin: args.data.origin}));
     assert.deepEqual(timingData, [
       {
-        dur: Trace.Types.Timing.MicroSeconds(1004293.2819999987),
+        dur: Trace.Types.Timing.Micro(1004293.2819999987),
         name: 'Topleveltask1',
-        ts: Trace.Types.Timing.MicroSeconds(80542636965.7475),
+        ts: Trace.Types.Timing.Micro(80542636965.7475),
         desc: 'Description of top level task 1',
         origin: 'https://node-server-tan.vercel.app',
       },
       {
-        dur: Trace.Types.Timing.MicroSeconds(904293.2819999987),
+        dur: Trace.Types.Timing.Micro(904293.2819999987),
         name: 'Secondleveltask1',
-        ts: Trace.Types.Timing.MicroSeconds(80542686965.7475),
+        ts: Trace.Types.Timing.Micro(80542686965.7475),
         desc: 'Description of second level task 1',
         origin: 'https://node-server-tan.vercel.app',
       },
       {
-        dur: Trace.Types.Timing.MicroSeconds(1000092.5859999988),
+        dur: Trace.Types.Timing.Micro(1000092.5859999988),
         name: 'Topleveltask2',
-        ts: Trace.Types.Timing.MicroSeconds(80543641261.0185),
+        ts: Trace.Types.Timing.Micro(80543641261.0185),
         desc: undefined,
         origin: 'https://node-server-tan.vercel.app',
       },

package/front_end/models/trace/handlers/ServerTimingsHandler.ts

@@ -77,7 +77,7 @@ function createSyntheticServerTiming(
     timingsInRequest: Platform.ServerTiming.ServerTiming[]): Types.Events.SyntheticServerTiming[] {
   const clientStart = request.args.data.syntheticData.sendStartTime;
   const clientEndTime = request.args.data.syntheticData.sendStartTime + request.args.data.syntheticData.waiting;
-  const offset = Types.Timing.MicroSeconds((serverStart - clientStart + serverEnd - clientEndTime) / 2);
+  const offset = Types.Timing.Micro((serverStart - clientStart + serverEnd - clientEndTime) / 2);
   const convertedServerTimings: Types.Events.SyntheticServerTiming[] = [];
   for (const timing of timingsInRequest) {
     if (timing.metric === RESPONSE_START_METRIC_NAME || timing.metric === RESPONSE_END_METRIC_NAME) {
@@ -86,8 +86,7 @@ function createSyntheticServerTiming(
     if (timing.start === null) {
       continue;
     }
-    const convertedTimestamp =
-        Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(timing.start)) - offset;
+    const convertedTimestamp = Helpers.Timing.milliToMicro(Types.Timing.Milli(timing.start)) - offset;
     const parsedUrl = new URL(request.args.data.url);
     const origin = parsedUrl.origin;
 
@@ -97,8 +96,8 @@ function createSyntheticServerTiming(
       ph: Types.Events.Phase.COMPLETE,
       pid: Types.Events.ProcessID(0),
       tid: Types.Events.ThreadID(0),
-      ts: Types.Timing.MicroSeconds(convertedTimestamp),
-      dur: Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(timing.value)),
+      ts: Types.Timing.Micro(convertedTimestamp),
+      dur: Helpers.Timing.milliToMicro(Types.Timing.Milli(timing.value)),
       cat: 'devtools.server-timing',
       args: {data: {desc: timing.description || undefined, origin}},
     });

package/front_end/models/trace/handlers/Threads.test.ts

@@ -38,13 +38,13 @@ describeWithEnvironment('Handler Threads helper', function() {
     // Bit of extra setup required: we need to mimic what the panel does where
     // it takes the CDP Profile and wraps it in fake trace events, before then
     // passing that through to the new engine.
-    const rawEvents = await TraceLoader.rawCPUProfile(this, 'node-fibonacci-website.cpuprofile.gz');
-    const events = Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.createFakeTraceFromCpuProfile(
-        rawEvents,
+    const profile = await TraceLoader.rawCPUProfile(this, 'node-fibonacci-website.cpuprofile.gz');
+    const contents = Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.createFakeTraceFromCpuProfile(
+        profile,
         Trace.Types.Events.ThreadID(1),
     );
-    const {parsedTrace} =
-        await TraceLoader.executeTraceEngineOnFileContents(events as unknown as Trace.Types.Events.Event[]);
+
+    const {parsedTrace} = await TraceLoader.executeTraceEngineOnFileContents(contents);
 
     // Check that we did indeed parse this properly as a CPU Profile.
     assert.strictEqual(parsedTrace.Renderer.processes.size, 0);