[Perf panel] Prefer profile calls over trace events when sorting

If timestamp and duration are equal between a trace event and a profile
call, the profile call should be put first when sorting in ascending
order. This is because when the timesamp of a profile call is exactly
the same as a trace event's, it's likely because the SamplesIntegrator
sets the profile call's ts so that it ends up parenting the trace event
in the flame chart. Without this extra check in the comparator, the
precedence meant by the samples integrator isn't certain to happen.

Bug: 389056697
Change-Id: I8c3754782397ab640888ee3fa5fa3e91772e6aef
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6264603
Reviewed-by: Alina Varkki <[email protected]>
Commit-Queue: Andres Olivares <[email protected]>

Author: and-oli

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

@@ -106,7 +106,7 @@ describeWithEnvironment('SamplesIntegrator', function() {
         throw new Error('Trace events were unexpectedly not found.');
       }
       const constructedCalls = samplesIntegrator.buildProfileCalls(traceEvents);
-      assert.lengthOf(constructedCalls, 5131);
+      assert.lengthOf(constructedCalls, 5300);
     });
 
     it('creates JS profile calls with a top-level V8 invocation', () => {

front_end/models/trace/helpers/Trace.ts

@@ -107,7 +107,7 @@ export interface TimeSpan {
   ts: Types.Timing.Micro;
   dur?: Types.Timing.Micro;
 }
-export function eventTimeComparator(a: TimeSpan, b: TimeSpan): -1|0|1 {
+export function eventTimeComparator(a: Types.Events.Event, b: Types.Events.Event): -1|0|1 {
   const aBeginTime = a.ts;
   const bBeginTime = b.ts;
   if (aBeginTime < bBeginTime) {
@@ -126,13 +126,23 @@ export function eventTimeComparator(a: TimeSpan, b: TimeSpan): -1|0|1 {
   if (aEndTime < bEndTime) {
     return 1;
   }
+  // If times are equal, prioritize profile calls over trace events,
+  // since an exactly equal timestamp with a trace event is likely
+  // indicates that the SamplesIntegrator meant to parent the trace
+  // event with the profile call.
+  if (Types.Events.isProfileCall(a)) {
+    return -1;
+  }
+  if (Types.Events.isProfileCall(b)) {
+    return 1;
+  }
   return 0;
 }
 /**
  * Sorts all the events in place, in order, by their start time. If they have
  * the same start time, orders them by longest first.
  */
-export function sortTraceEventsInPlace(events: Array<{ts: Types.Timing.Micro, dur?: Types.Timing.Micro}>): void {
+export function sortTraceEventsInPlace(events: Types.Events.Event[]): void {
   events.sort(eventTimeComparator);
 }
 

front_end/panels/timeline/TimelineTreeView.test.ts

@@ -296,7 +296,6 @@ describeWithEnvironment('TimelineTreeView', function() {
         'https://www.googletagmanager.com/gtag/js?id=G-18JR3Q8PJ8&l=dataLayer&cx=c',
         'https://www.google-analytics.com/j/collect?v=1&_v=j101&a=68725886&t=event&ni=1&_s=1&dl=https%3A%2F%2Fweb.dev%2F&ul=en-gb&de=UTF-8&dt=web.dev&sd=24-bit&sr=3360x1890&vp=1665x846&je=0&ec=Web%20Vitals&ea=FCP&el=v3-1696581005645-6472407333688&ev=129&_u=QACAAEABAAAAACAAIg~&jid=&gjid=&cid=1874137241.1685438100&tid=UA-126406676-2&_gid=656288571.1696581004&_slc=1&gtm=45He3a40n81MZWCJPP&cd5=15&cd6=navigate&cd7=light&cd8=dom-content-loaded&cd9=8&z=54974500',
         'https://shared-storage-demo-content-producer.web.app/paa/scripts/private-aggregation-test.js',
-        'https://shared-storage-demo-content-producer.web.app/paa/scripts/private-aggregation-test.html',
         'https://web-dev.imgix.net/image/SZHNhsfjU9RbCestTGZU6N7JEWs1/VwL892KEz6bakZMlq10D.png?auto=format&w=740',
       ]);
     });

front_end/panels/timeline/utils/AICallTree.test.ts

@@ -144,13 +144,13 @@ Children:
   * 4 – _ds.q.ns
 
 Node: 4 – _ds.q.ns
-Selected: true
 dur: 0.2
 URL #: 0
 Children:
   * 5 – clearTimeout
 
 Node: 5 – clearTimeout
+Selected: true
 dur: 0.2
 self: 0
 Children: