core(trace-of-tab): remove DevTools stableSort dependency

lighthouse-core/audits/mainthread-work-breakdown.js

@@ -97,8 +97,8 @@ class MainThreadWorkBreakdown extends Audit {
       {key: 'category', itemType: 'text', text: 'Work'},
       {key: 'duration', itemType: 'ms', granularity: 1, text: 'Time spent'},
     ];
-    // @ts-ignore - stableSort added to Array by WebInspector
-    results.stableSort((a, b) => categoryTotals[b.group] - categoryTotals[a.group]);
+
+    results.sort((a, b) => categoryTotals[b.group] - categoryTotals[a.group]);
     const tableDetails = MainThreadWorkBreakdown.makeTableDetails(headings, results);
 
     const score = Audit.computeLogNormalScore(

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

@@ -32,6 +32,36 @@ class TraceOfTab extends ComputedArtifact {
     return 'TraceOfTab';
   }
 
+  /**
+   * @param {LH.TraceEvent[]} traceEvents
+   * @param {(e: LH.TraceEvent) => boolean} filter
+   */
+  static filteredStableSort(traceEvents, filter) {
+    const indices = [];
+    let destIndex = 0;
+    for (let srcIndex = 0; srcIndex < traceEvents.length; srcIndex++) {
+      if (filter(traceEvents[srcIndex])) {
+        indices[destIndex] = srcIndex
+        destIndex++
+      }
+    }
+
+    // sort by ts, if there's no ts difference sort by index
+    indices.sort((indexA, indexB) => {
+      const result = traceEvents[indexA].ts - traceEvents[indexB].ts;
+      return result ? result : indexA - indexB;
+    });
+
+    // create a new array using the target indices from previous sort step
+    const sortedArray = new Array(indices.length);
+    for (let i = 0; i < indices.length; i++) {
+      sortedArray[i] = traceEvents[indices[i]];
+    }
+
+    return sortedArray;
+  }
+
+
   /**
    * Finds key trace events, identifies main process/thread, and returns timings of trace events
    * in milliseconds since navigation start in addition to the standard microsecond monotonic timestamps.
@@ -41,16 +71,12 @@ class TraceOfTab extends ComputedArtifact {
   async compute_(trace) {
     // Parse the trace for our key events and sort them by timestamp. Note: sort
     // *must* be stable to keep events correctly nested.
-    /** @type Array<LH.TraceEvent> */
-    const keyEvents = trace.traceEvents
-      .filter(e => {
-        return e.cat.includes('blink.user_timing') ||
-            e.cat.includes('loading') ||
-            e.cat.includes('devtools.timeline') ||
-            e.cat === '__metadata';
-      })
-      // @ts-ignore - stableSort added to Array by WebInspector.
-      .stableSort((event0, event1) => event0.ts - event1.ts);
+    const keyEvents = TraceOfTab.filteredStableSort(trace.traceEvents, e => {
+      return e.cat.includes('blink.user_timing') ||
+          e.cat.includes('loading') ||
+          e.cat.includes('devtools.timeline') ||
+          e.cat === '__metadata';
+    });
 
     // Find the inspected frame
     const {startedInPageEvt, frameId} = TracingProcessor.findTracingStartedEvt(keyEvents);
@@ -102,14 +128,11 @@ 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.
-    /** @type Array<LH.TraceEvent> */
-    const processEvents = trace.traceEvents
-      .filter(e => e.pid === /** @type {LH.TraceEvent} */ (startedInPageEvt).pid)
-      // @ts-ignore - stableSort added to Array by WebInspector.
-      .stableSort((event0, event1) => event0.ts - event1.ts);
+    const processEvents = TraceOfTab
+      .filteredStableSort(trace.traceEvents, e => e.pid === startedInPageEvt.pid);
 
     const mainThreadEvents = processEvents
-      .filter(e => e.tid === /** @type {LH.TraceEvent} */ (startedInPageEvt).tid);
+      .filter(e => e.tid === startedInPageEvt.tid);
 
     const traceEnd = trace.traceEvents.reduce((max, evt) => {
       return max.ts > evt.ts ? max : evt;