chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

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

@@ -82,23 +82,31 @@ export function threadsInRenderer(
   return foundThreads;
 }
 
+const threadsInTraceCache = new WeakMap<ParsedTrace, readonly ThreadData[]>();
+
 /**
  * Given trace parsed data, this helper will return a high level array of
  * ThreadData. This is useful because it allows you to get a list of threads
  * regardless of if the trace is a CPU Profile or a Tracing profile. Thus you
  * can use this helper to iterate over threads in confidence that it will work
  * for both trace types.
+ * The resulting data is cached per-trace, so you can safely call this multiple times.
  */
 export function threadsInTrace(parsedTrace: ParsedTrace): readonly ThreadData[] {
-  // If we have Renderer threads, we prefer to use those. In the event that a
-  // trace is a CPU Profile trace, we will never have Renderer threads, so we
-  // know if there are no Renderer threads that we can fallback to using the
-  // data from the SamplesHandler.
+  const cached = threadsInTraceCache.get(parsedTrace);
+  if (cached) {
+    return cached;
+  }
+
+  // If we have Renderer threads, we prefer to use those.
   const threadsFromRenderer = threadsInRenderer(parsedTrace.Renderer, parsedTrace.AuctionWorklets);
   if (threadsFromRenderer.length) {
+    threadsInTraceCache.set(parsedTrace, threadsFromRenderer);
     return threadsFromRenderer;
   }
 
+  // If it's a CPU Profile trace, there will be no Renderer threads.
+  // We can fallback to using the data from the SamplesHandler.
   const foundThreads: ThreadData[] = [];
   if (parsedTrace.Samples.profilesInProcess.size) {
     for (const [pid, process] of parsedTrace.Samples.profilesInProcess) {
@@ -126,5 +134,6 @@ export function threadsInTrace(parsedTrace: ParsedTrace): readonly ThreadData[]
     }
   }
 
+  threadsInTraceCache.set(parsedTrace, foundThreads);
   return foundThreads;
 }

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

@@ -31,10 +31,10 @@ describe('UserInteractionsHandler', function() {
     const event = {
       name: 'EventTiming',
       type,
-      ts: Trace.Types.Timing.MicroSeconds(options.startTime),
-      dur: Trace.Types.Timing.MicroSeconds(options.endTime - options.startTime),
-      processingStart: Trace.Types.Timing.MicroSeconds(options.processingStart || 0),
-      processingEnd: Trace.Types.Timing.MicroSeconds(options.processingEnd || 0),
+      ts: Trace.Types.Timing.Micro(options.startTime),
+      dur: Trace.Types.Timing.Micro(options.endTime - options.startTime),
+      processingStart: Trace.Types.Timing.Micro(options.processingStart || 0),
+      processingEnd: Trace.Types.Timing.Micro(options.processingEnd || 0),
       interactionId: options.interactionId,
     };
 

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

@@ -21,10 +21,10 @@ const allEvents: Types.Events.EventTimingBeginOrEnd[] = [];
 const beginCommitCompositorFrameEvents: Types.Events.BeginCommitCompositorFrame[] = [];
 const parseMetaViewportEvents: Types.Events.ParseMetaViewport[] = [];
 
-export const LONG_INTERACTION_THRESHOLD = Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(200));
+export const LONG_INTERACTION_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(200));
 
 const INP_GOOD_TIMING = LONG_INTERACTION_THRESHOLD;
-const INP_MEDIUM_TIMING = Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(500));
+const INP_MEDIUM_TIMING = Helpers.Timing.milliToMicro(Types.Timing.Milli(500));
 
 export interface UserInteractionsData {
   /** All the user events we found in the trace */
@@ -184,7 +184,7 @@ export function removeNestedInteractions(interactions: readonly Types.Events.Syn
    * longest event for a given end time by category.
    **/
   const earliestEventForEndTimePerCategory:
-      Record<InteractionCategory, Map<Types.Timing.MicroSeconds, Types.Events.SyntheticInteractionPair>> = {
+      Record<InteractionCategory, Map<Types.Timing.Micro, Types.Events.SyntheticInteractionPair>> = {
         POINTER: new Map(),
         KEYBOARD: new Map(),
         OTHER: new Map(),
@@ -193,7 +193,7 @@ export function removeNestedInteractions(interactions: readonly Types.Events.Syn
   function storeEventIfEarliestForCategoryAndEndTime(interaction: Types.Events.SyntheticInteractionPair): void {
     const category = categoryOfInteraction(interaction);
     const earliestEventForEndTime = earliestEventForEndTimePerCategory[category];
-    const endTime = Types.Timing.MicroSeconds(interaction.ts + interaction.dur);
+    const endTime = Types.Timing.Micro(interaction.ts + interaction.dur);
 
     const earliestCurrentEvent = earliestEventForEndTime.get(endTime);
     if (!earliestCurrentEvent) {
@@ -258,9 +258,9 @@ function writeSyntheticTimespans(event: Types.Events.SyntheticInteractionPair):
   const startEvent = event.args.data.beginEvent;
   const endEvent = event.args.data.endEvent;
 
-  event.inputDelay = Types.Timing.MicroSeconds(event.processingStart - startEvent.ts);
-  event.mainThreadHandling = Types.Timing.MicroSeconds(event.processingEnd - event.processingStart);
-  event.presentationDelay = Types.Timing.MicroSeconds(endEvent.ts - event.processingEnd);
+  event.inputDelay = Types.Timing.Micro(event.processingStart - startEvent.ts);
+  event.mainThreadHandling = Types.Timing.Micro(event.processingEnd - event.processingStart);
+  event.presentationDelay = Types.Timing.Micro(endEvent.ts - event.processingEnd);
 }
 
 export async function finalize(): Promise<void> {
@@ -290,14 +290,13 @@ export async function finalize(): Promise<void> {
     // will give us a processingStart and processingEnd time in microseconds
     // that is relative to event.ts, and can be used when drawing boxes.
     // There is some inaccuracy here as we are converting milliseconds to microseconds, but it is good enough until the backend emits more accurate numbers.
-    const processingStartRelativeToTraceTime = Types.Timing.MicroSeconds(
-        Helpers.Timing.millisecondsToMicroseconds(processingStart) -
-            Helpers.Timing.millisecondsToMicroseconds(timeStamp) + interactionStartEvent.ts,
+    const processingStartRelativeToTraceTime = Types.Timing.Micro(
+        Helpers.Timing.milliToMicro(processingStart) - Helpers.Timing.milliToMicro(timeStamp) +
+            interactionStartEvent.ts,
     );
 
-    const processingEndRelativeToTraceTime = Types.Timing.MicroSeconds(
-        (Helpers.Timing.millisecondsToMicroseconds(processingEnd) -
-         Helpers.Timing.millisecondsToMicroseconds(timeStamp)) +
+    const processingEndRelativeToTraceTime = Types.Timing.Micro(
+        (Helpers.Timing.milliToMicro(processingEnd) - Helpers.Timing.milliToMicro(timeStamp)) +
         interactionStartEvent.ts);
 
     // Ultimate frameId fallback only needed for TSC, see comments in the type.
@@ -316,9 +315,9 @@ export async function finalize(): Promise<void> {
           processingStart: processingStartRelativeToTraceTime,
           processingEnd: processingEndRelativeToTraceTime,
           // These will be set in writeSyntheticTimespans()
-          inputDelay: Types.Timing.MicroSeconds(-1),
-          mainThreadHandling: Types.Timing.MicroSeconds(-1),
-          presentationDelay: Types.Timing.MicroSeconds(-1),
+          inputDelay: Types.Timing.Micro(-1),
+          mainThreadHandling: Types.Timing.Micro(-1),
+          presentationDelay: Types.Timing.Micro(-1),
           args: {
             data: {
               beginEvent: interactionStartEvent,
@@ -328,7 +327,7 @@ export async function finalize(): Promise<void> {
             },
           },
           ts: interactionStartEvent.ts,
-          dur: Types.Timing.MicroSeconds(endEvent.ts - interactionStartEvent.ts),
+          dur: Types.Timing.Micro(endEvent.ts - interactionStartEvent.ts),
           type: interactionStartEvent.args.data.type,
           interactionId: interactionStartEvent.args.data.interactionId,
         });
@@ -370,7 +369,7 @@ export function deps(): HandlerName[] {
  * Classifications sourced from
  * https://web.dev/articles/inp#good-score
  */
-export function scoreClassificationForInteractionToNextPaint(timing: Types.Timing.MicroSeconds): ScoreClassification {
+export function scoreClassificationForInteractionToNextPaint(timing: Types.Timing.Micro): ScoreClassification {
   if (timing <= INP_GOOD_TIMING) {
     return ScoreClassification.GOOD;
   }

package/front_end/models/trace/handlers/UserTimings.md

@@ -20,7 +20,7 @@ Events that represent a `performance.measure` call will come in pairs: a begin e
 
 ### Parsing out user timings
 
-For `performance.mark` calls, the handler looks for events with the user timing category and the `Mark` trace event phase (`I`). However, pre-June 2023, these are emitted with phase `R`. These events are then filtered to exclude timings appendend by Chrome (1).
+For `performance.mark` calls, the handler looks for events with the user timing category and the `Mark` trace event phase (`I`). However, pre-June 2023, these are emitted with phase `R`. These events are then filtered to exclude timings appended by Chrome (1).
 
 For `performance.measure` calls, the handler looks for begin or end events in the trace. Once we have these, we then pair them up, and create a list of synthetic user timing events. These are events that do not actually exist in the trace, but we create because we need one event to map to each block. The event is made up of information from the begin and/or end event and includes most crucially:
 

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

@@ -2,10 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import {
+  makeCompleteEvent,
+} from '../../../testing/TraceHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as Trace from '../trace.js';
 
-describe('UserTimingsHandler', function() {
+describeWithEnvironment('UserTimingsHandler', function() {
   let timingsData: Trace.Handlers.ModelHandlers.UserTimings.UserTimingsData;
   describe('performance timings', function() {
     async function getTimingsDataFromEvents(events: readonly Trace.Types.Events.Event[]):
@@ -17,10 +21,13 @@ describe('UserTimingsHandler', function() {
       await Trace.Handlers.ModelHandlers.UserTimings.finalize();
       return Trace.Handlers.ModelHandlers.UserTimings.data();
     }
-    before(async function() {
+    beforeEach(async function() {
       const events = await TraceLoader.rawEvents(this, 'user-timings.json.gz');
       timingsData = await getTimingsDataFromEvents(events);
     });
+    afterEach(function() {
+      Trace.Handlers.ModelHandlers.UserTimings.reset();
+    });
     describe('performance.measure events parsing', function() {
       it('parses the start and end events and returns a list of blocks', async () => {
         assert.lengthOf(timingsData.performanceMeasures, 3);
@@ -67,21 +74,14 @@ describe('UserTimingsHandler', function() {
       });
 
       it('calculates the duration correctly from the begin/end event timestamps', async function() {
-        const events = await TraceLoader.rawEvents(this, 'user-timings.json.gz');
-        Trace.Handlers.ModelHandlers.UserTimings.reset();
-        for (const event of events) {
-          Trace.Handlers.ModelHandlers.UserTimings.handleEvent(event);
-        }
-        await Trace.Handlers.ModelHandlers.UserTimings.finalize();
-        const data = Trace.Handlers.ModelHandlers.UserTimings.data();
-        for (const timing of data.performanceMeasures) {
+        for (const timing of timingsData.performanceMeasures) {
           // Ensure for each timing pair we've set the dur correctly.
           assert.strictEqual(timing.dur, timing.args.data.endEvent.ts - timing.args.data.beginEvent.ts);
         }
       });
       it('correctly extracts nested timings in the correct order', async function() {
-        const events = await TraceLoader.rawEvents(this, 'user-timings-complex.json.gz');
-        const complexTimingsData = await getTimingsDataFromEvents(events);
+        const {parsedTrace} = await TraceLoader.traceEngine(this, 'user-timings-complex.json.gz');
+        const complexTimingsData = parsedTrace.UserTimings;
         const userTimingEventNames = [];
         for (const event of complexTimingsData.performanceMeasures) {
           // This trace has multiple user timings events, in this instance we only care about the ones that include 'nested' in the name.
@@ -122,14 +122,9 @@ describe('UserTimingsHandler', function() {
     });
   });
   describe('console timings', function() {
-    before(async function() {
-      const events = await TraceLoader.rawEvents(this, 'timings-track.json.gz');
-      Trace.Handlers.ModelHandlers.UserTimings.reset();
-      for (const event of events) {
-        Trace.Handlers.ModelHandlers.UserTimings.handleEvent(event);
-      }
-      await Trace.Handlers.ModelHandlers.UserTimings.finalize();
-      timingsData = Trace.Handlers.ModelHandlers.UserTimings.data();
+    beforeEach(async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'timings-track.json.gz');
+      timingsData = parsedTrace.UserTimings;
     });
     describe('console.time events parsing', function() {
       it('parses the start and end events and returns a list of blocks', async () => {
@@ -180,12 +175,25 @@ describe('UserTimingsHandler', function() {
       });
     });
     describe('console.timestamp events parsing', function() {
-      it('parses performance mark events correctly', function() {
+      it('parses console.timestamp events correctly', async function() {
         assert.lengthOf(timingsData.timestampEvents, 3);
-        assert.strictEqual(timingsData.timestampEvents[0].args.data.message, 'a timestamp');
-        assert.strictEqual(timingsData.timestampEvents[1].args.data.message, 'another timestamp');
-        assert.strictEqual(timingsData.timestampEvents[2].args.data.message, 'yet another timestamp');
+        assert.strictEqual(timingsData.timestampEvents[0].args.data?.name, 'a timestamp');
+        assert.strictEqual(timingsData.timestampEvents[1].args.data?.name, 'another timestamp');
+        assert.strictEqual(timingsData.timestampEvents[2].args.data?.name, 'yet another timestamp');
       });
     });
   });
+
+  describe('UserTiming::Measure events parsing', function() {
+    it('stores user timing events by trace id', async function() {
+      const userTimingMeasure = makeCompleteEvent(Trace.Types.Events.Name.USER_TIMING_MEASURE, 0, 100, 'cat', 0, 0) as
+          Trace.Types.Events.UserTimingMeasure;
+      userTimingMeasure.args.traceId = 1;
+      Trace.Handlers.ModelHandlers.UserTimings.handleEvent(userTimingMeasure);
+      await Trace.Handlers.ModelHandlers.UserTimings.finalize();
+      const data = Trace.Handlers.ModelHandlers.UserTimings.data();
+      assert.lengthOf(data.measureTraceByTraceId, 1);
+      assert.deepEqual([...data.measureTraceByTraceId.entries()][0], [1, userTimingMeasure]);
+    });
+  });
 });

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

@@ -11,12 +11,24 @@ import * as Types from '../types/types.js';
  * UserTimings and the trace events we parse currently.
  **/
 let syntheticEvents: Types.Events.SyntheticEventPair<Types.Events.PairableAsync>[] = [];
+
+// There are two events dispatched for performance.measure calls: one to
+// represent the measured timing in the tracing clock (which we type as
+// PerformanceMeasure) and another one for the call itself (which we
+// type as UserTimingMeasure). The two events corresponding to the same
+// call are linked together by a common trace_id. The reason two events
+// are dispatched is because the first was originally added with the
+// implementation of the performance.measure API and it uses an
+// overridden timestamp and duration. To prevent breaking potential deps
+// created since then, a second event was added instead of changing the
+// params of the first.
+const measureTraceByTraceId: Map<number, Types.Events.UserTimingMeasure> = new Map();
 const performanceMeasureEvents: Types.Events.PerformanceMeasure[] = [];
 const performanceMarkEvents: Types.Events.PerformanceMark[] = [];
 
 const consoleTimings: (Types.Events.ConsoleTimeBegin|Types.Events.ConsoleTimeEnd)[] = [];
 
-const timestampEvents: Types.Events.TimeStamp[] = [];
+const timestampEvents: Types.Events.ConsoleTimeStamp[] = [];
 
 export interface UserTimingsData {
   /**
@@ -39,7 +51,12 @@ export interface UserTimingsData {
    * Events triggered with the console.timeStamp() API
    * https://developer.mozilla.org/en-US/docs/Web/API/console/timeStamp
    */
-  timestampEvents: readonly Types.Events.TimeStamp[];
+  timestampEvents: readonly Types.Events.ConsoleTimeStamp[];
+  /**
+   * Events triggered to trace the call to performance.measure itself,
+   * cached by trace_id.
+   */
+  measureTraceByTraceId: Map<number, Types.Events.UserTimingMeasure>;
 }
 
 export function reset(): void {
@@ -48,6 +65,7 @@ export function reset(): void {
   performanceMarkEvents.length = 0;
   consoleTimings.length = 0;
   timestampEvents.length = 0;
+  measureTraceByTraceId.clear();
 }
 
 const resourceTimingNames = [
@@ -142,7 +160,9 @@ export function handleEvent(event: Types.Events.Event): void {
   if (ignoredNames.includes(event.name)) {
     return;
   }
-
+  if (Types.Events.isUserTimingMeasure(event)) {
+    measureTraceByTraceId.set(event.args.traceId, event);
+  }
   if (Types.Events.isPerformanceMeasure(event)) {
     performanceMeasureEvents.push(event);
     return;
@@ -153,7 +173,7 @@ export function handleEvent(event: Types.Events.Event): void {
   if (Types.Events.isConsoleTime(event)) {
     consoleTimings.push(event);
   }
-  if (Types.Events.isTimeStamp(event)) {
+  if (Types.Events.isConsoleTimeStamp(event)) {
     timestampEvents.push(event);
   }
 }
@@ -172,5 +192,6 @@ export function data(): UserTimingsData {
     // TODO(crbug/41484172): UserTimingsHandler.test.ts fails if this is not copied.
     performanceMarks: [...performanceMarkEvents],
     timestampEvents: [...timestampEvents],
+    measureTraceByTraceId: new Map(measureTraceByTraceId),
   };
 }

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

@@ -37,9 +37,9 @@ const jsInvokeStack: Types.Events.Event[] = [];
  */
 const taskReflowEvents: Types.Events.Event[] = [];
 
-export const FORCED_REFLOW_THRESHOLD = Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(30));
+export const FORCED_REFLOW_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(30));
 
-export const LONG_MAIN_THREAD_TASK_THRESHOLD = Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(50));
+export const LONG_MAIN_THREAD_TASK_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(50));
 
 export function reset(): void {
   warningsPerEvent.clear();

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

@@ -28,8 +28,8 @@ describe('WorkersHandler', () => {
         tid: Trace.Types.Events.ThreadID(37651),
         pid: Trace.Types.Events.ProcessID(71044),
         s: Trace.Types.Events.Scope.THREAD,
-        ts: Trace.Types.Timing.MicroSeconds(107351291649),
-        tts: Trace.Types.Timing.MicroSeconds(934),
+        ts: Trace.Types.Timing.Micro(107351291649),
+        tts: Trace.Types.Timing.Micro(934),
         args: {
           data: {
             frame: '372333E30ECABDA706136ED37FD9FA2B',
@@ -46,8 +46,8 @@ describe('WorkersHandler', () => {
         tid: Trace.Types.Events.ThreadID(35351),
         pid: Trace.Types.Events.ProcessID(71044),
         s: Trace.Types.Events.Scope.THREAD,
-        ts: Trace.Types.Timing.MicroSeconds(107351292507),
-        tts: Trace.Types.Timing.MicroSeconds(817),
+        ts: Trace.Types.Timing.Micro(107351292507),
+        tts: Trace.Types.Timing.Micro(817),
         args: {
           data: {
             frame: '372333E30ECABDA706136ED37FD9FA2B',

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

@@ -20,20 +20,16 @@ export interface EntityMappings {
   eventsByEntity: Map<Entity, Types.Events.Event[]>;
 }
 
-export function getEntityForEvent(event: Types.Events.Event, entityByUrlCache: Map<string, Entity>): Entity|undefined {
+export function getEntityForEvent(event: Types.Events.Event, entityCache: Map<string, Entity>): Entity|undefined {
   const url = getNonResolvedURL(event);
   if (!url) {
     return;
   }
-  return getEntityForUrl(url, entityByUrlCache);
+  return getEntityForUrl(url, entityCache);
 }
 
-export function getEntityForUrl(url: string, entityByUrlCache: Map<string, Entity>): Entity|undefined {
-  if (entityByUrlCache.has(url)) {
-    return entityByUrlCache.get(url);
-  }
-  const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(url) ?? makeUpEntity(entityByUrlCache, url);
-  return entity;
+export function getEntityForUrl(url: string, entityCache: Map<string, Entity>): Entity|undefined {
+  return ThirdPartyWeb.ThirdPartyWeb.getEntity(url) ?? makeUpEntity(entityCache, url);
 }
 
 export function getNonResolvedURL(
@@ -145,15 +141,18 @@ function makeUpChromeExtensionEntity(entityCache: Map<string, Entity>, url: stri
   return chromeExtensionEntity;
 }
 
-export function updateEventForEntities(entry: Types.Events.Event, entityMappings: EntityMappings): void {
-  const entity = getEntityForEvent(entry, entityMappings.createdEntityCache);
-  if (entity) {
-    if (entityMappings.eventsByEntity.has(entity)) {
-      const events = entityMappings.eventsByEntity.get(entity) ?? [];
-      events?.push(entry);
-    } else {
-      entityMappings.eventsByEntity.set(entity, [entry]);
-    }
-    entityMappings.entityByEvent.set(entry, entity);
+export function addEventToEntityMapping(event: Types.Events.Event, entityMappings: EntityMappings): void {
+  const entity = getEntityForEvent(event, entityMappings.createdEntityCache);
+  if (!entity) {
+    return;
   }
+
+  const events = entityMappings.eventsByEntity.get(entity);
+  if (events) {
+    events.push(event);
+  } else {
+    entityMappings.eventsByEntity.set(entity, [event]);
+  }
+
+  entityMappings.entityByEvent.set(event, entity);
 }

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

@@ -8,11 +8,12 @@ import type * as ModelHandlers from './ModelHandlers.js';
 export interface Handler {
   reset(): void;
   handleEvent(data: {}): void;
-  finalize(): Promise<void>;
+  finalize(options?: Types.Configuration.ParseOptions): Promise<void>;
   data(): unknown;
   deps?(): HandlerName[];
   handleUserConfig?(config: Types.Configuration.Configuration): void;
 }
+
 export type HandlerName = keyof typeof ModelHandlers;
 
 // This type maps Handler names to the return type of their data

package/front_end/models/trace/helpers/SamplesIntegrator.test.ts

@@ -225,6 +225,74 @@ describeWithEnvironment('SamplesIntegrator', function() {
       assert.strictEqual(constructedCalls[1].ts, 300);
       assert.strictEqual(constructedCalls[1].dur, 200);
     });
+    it('uses the stack in a sample for a trace event when connected via a common trace id ', () => {
+      const traceId = 123;
+      const cdpProfile: CPUProfile.CPUProfileDataModel.ExtendedProfile = {
+        startTime: 0,
+        endTime: 3000,
+        nodes: [
+          {
+            id: 1,
+            hitCount: 0,
+            callFrame: {functionName: '(root)', scriptId, url, lineNumber, columnNumber},
+            children: [2],
+          },
+          {id: 2, callFrame: {functionName: 'foo', scriptId, url, lineNumber, columnNumber}, children: [3, 4]},
+          {id: 3, callFrame: {functionName: 'bar', scriptId, url, lineNumber, columnNumber}},
+          {id: 4, callFrame: {functionName: 'baz', scriptId, url, lineNumber, columnNumber}, children: [5]},
+          {id: 5, callFrame: {functionName: 'sheep', scriptId, url, lineNumber, columnNumber}},
+        ],
+        samples: [3, 3, 3, 5],
+        traceIds: {3: traceId},
+        timeDeltas: new Array(4).fill(100),
+      };
+
+      // Before integrating samples and trace events, the flamechart
+      // looks roughly like:
+      //   |----------------EvaluateScript-----------------|
+      //       |-----------------v8.run--------------------|
+      //                                    |---TimeStamp--|
+      //          | foo |  | foo |  | foo |  | foo |
+      //          | bar |  | bar |  | bar |  | baz |
+      //                                     |sheep|
+
+      // After integrating, it should look as follows. note that the the
+      // stack in the last sample should be used to parent `TimeStamp`,
+      // event if that sample's ts is later, since that event and that
+      // sample are connected by a trace id.
+      //   |----------------EvaluateScript-----------------|
+      //       |-----------------v8.run--------------------|
+      //          |------------------foo-------------------|
+      //          |----------bar--------||--------baz------|
+      //                                 |------sheep------|
+      //                                 |-Timestamp-|
+
+      const parsedProfile = new CPUProfile.CPUProfileDataModel.CPUProfileDataModel(cdpProfile);
+      const integrator = new Trace.Helpers.SamplesIntegrator.SamplesIntegrator(parsedProfile, PROFILE_ID, pid, tid);
+      const evaluateScript = makeCompleteEvent(Trace.Types.Events.Name.EVALUATE_SCRIPT, 0, 500);
+      const v8Run = makeCompleteEvent('v8.run', 10, 490);
+      const consoleTimeStamp =
+          makeCompleteEvent(Trace.Types.Events.Name.CONSOLE_TIME_STAMP, 350, 10) as Trace.Types.Events.ConsoleTimeStamp;
+      consoleTimeStamp.args = {data: {name: 'A timestamp', sampleTraceId: traceId}};
+      const traceEvents = [evaluateScript, v8Run, consoleTimeStamp];
+      const constructedCalls = integrator.buildProfileCalls(traceEvents);
+      assert.lengthOf(constructedCalls, 4);
+      assert.strictEqual(constructedCalls[0].callFrame.functionName, 'foo');
+      assert.strictEqual(constructedCalls[0].ts, 100);
+      assert.strictEqual(constructedCalls[0].dur, 400);  // 100 - 500
+
+      assert.strictEqual(constructedCalls[1].callFrame.functionName, 'bar');
+      assert.strictEqual(constructedCalls[1].ts, 100);
+      assert.strictEqual(constructedCalls[1].dur, 250);  // 100 - 350
+
+      assert.strictEqual(constructedCalls[2].callFrame.functionName, 'baz');
+      assert.strictEqual(constructedCalls[2].ts, 350);
+      assert.strictEqual(constructedCalls[2].dur, 150);  // 350 - 500
+
+      assert.strictEqual(constructedCalls[3].callFrame.functionName, 'sheep');
+      assert.strictEqual(constructedCalls[3].ts, 350);
+      assert.strictEqual(constructedCalls[3].dur, 150);  // 350 - 500
+    });
     it('restarts the call frame stack when a new top level event is encountered', () => {
       // Profile contains the following samples:
       // |a||a||a||a|