use stable sort for trace events

lighthouse-core/gather/computed/trace-of-tab.js

@@ -41,15 +41,16 @@ class TraceOfTab extends ComputedArtifact {
    * @return {!{processEvents: !Array<TraceEvent>, startedInPageEvt: TraceEvent, navigationStartEvt: TraceEvent, firstContentfulPaintEvt: TraceEvent, firstMeaningfulPaintEvt: TraceEvent}}
   */
   compute_(trace) {
-    // Parse the trace for our key events and sort them by timestamp.
+    // Parse the trace for our key events and sort them by timestamp. Note: sort
+    // *must* be stable to keep events correctly nested.
     const keyEvents = trace.traceEvents
       .filter(e => {
         return e.cat.includes('blink.user_timing') ||
           e.cat.includes('loading') ||
           e.cat.includes('devtools.timeline') ||
           e.name === 'TracingStartedInPage';
       })
-      .sort((event0, event1) => event0.ts - event1.ts);
+      .stableSort((event0, event1) => event0.ts - event1.ts);
 
     // The first TracingStartedInPage in the trace is definitely our renderer thread of interest
     // Beware: the tracingStartedInPage event can appear slightly after a navigationStart
@@ -94,9 +95,10 @@ class TraceOfTab extends ComputedArtifact {
     );
 
     // subset all trace events to just our tab's process (incl threads other than main)
+    // stable-sort events to keep them correctly nested.
     const processEvents = trace.traceEvents
       .filter(e => e.pid === startedInPageEvt.pid)
-      .sort((event0, event1) => event0.ts - event1.ts);
+      .stableSort((event0, event1) => event0.ts - event1.ts);
 
     const traceEnd = trace.traceEvents.reduce((max, evt) => {
       return max.ts > evt.ts ? max : evt;