Order profiler-cli counters by display.sortWeight like the timeline

Both `counter list` and the counters nested in `profile info` follow the
timeline's track order (sortWeight, then name) instead of profile order.

Author: fatadel

src/profile-query/formatters/counter-info.ts

@@ -47,6 +47,25 @@ const RANGE_AGGREGATE_SOURCES: Set<CounterTooltipDataSource> = new Set([
   'committed-range-total',
 ]);
 
+const naturalSort = new Intl.Collator('en-US', { numeric: true });
+
+export function getSortedCounterIndexes(store: Store): CounterIndex[] {
+  const state = store.getState();
+  const counters = getCounters(state) ?? [];
+  const order = counters.map((_, index) => index);
+  if (getMeta(state).keepProfileThreadOrder) {
+    return order;
+  }
+  return order.sort((a, b) => {
+    const sortWeightDiff =
+      counters[a].display.sortWeight - counters[b].display.sortWeight;
+    if (sortWeightDiff !== 0) {
+      return sortWeightDiff;
+    }
+    return naturalSort.compare(counters[a].name, counters[b].name);
+  });
+}
+
 /**
  * Format a resolved counter value exactly as the timeline tooltip does, minus
  * the React/localization wrapping. Only the range-aggregate sources reach this,
@@ -192,10 +211,9 @@ export function collectCounterList(
   store: Store,
   threadMap: ThreadMap
 ): CounterListResult {
-  const counters = getCounters(store.getState()) ?? [];
   return {
     type: 'counter-list',
-    counters: counters.map((_, index) =>
+    counters: getSortedCounterIndexes(store).map((index) =>
       collectCounterSummary(store, threadMap, index)
     ),
   };

src/profile-query/formatters/profile-info.ts

@@ -6,12 +6,11 @@ import {
   getProfile,
   getThreadCPUTimeMs,
   getRangeFilteredCombinedThreadActivitySlices,
-  getCounters,
 } from 'firefox-profiler/selectors/profile';
 import { getProfileNameWithDefault } from 'firefox-profiler/selectors/url-state';
 import { buildProcessThreadList } from '../process-thread-list';
 import { collectSliceTree } from '../cpu-activity';
-import { collectCounterSummary } from './counter-info';
+import { collectCounterSummary, getSortedCounterIndexes } from './counter-info';
 import type { Store } from '../../types/store';
 import type { ThreadInfo, ProcessListItem } from '../process-thread-list';
 import type { TimestampManager } from '../timestamps';
@@ -110,12 +109,12 @@ export function collectProfileInfo(
       : result.processes;
 
   const countersByPid = new Map<string, CounterSummary[]>();
-  (getCounters(state) ?? []).forEach((_, index) => {
+  for (const index of getSortedCounterIndexes(store)) {
     const counter = collectCounterSummary(store, threadMap, index);
     const list = countersByPid.get(counter.pid) ?? [];
     list.push(counter);
     countersByPid.set(counter.pid, list);
-  });
+  }
 
   const processesData: ProfileInfoResult['processes'] = processesToShow.map(
     (processItem) => {

src/test/unit/profile-query/profile-querier.test.ts

@@ -380,6 +380,35 @@ describe('ProfileQuerier', function () {
       ).toBe(true);
     });
 
+    it('orders counters by display.sortWeight, not profile order', async function () {
+      const { profile } = getProfileFromTextSamples(`
+        0  1  2
+        A  A  A
+      `);
+      // Listed Memory-first, but Bandwidth (sortWeight 10) should sort before
+      // Memory (sortWeight 20), matching the timeline track order.
+      const memory = getCounterForThread(profile.threads[0], 0, {
+        name: 'malloc',
+        category: 'Memory',
+      });
+      const bandwidth = getCounterForThread(profile.threads[0], 0, {
+        name: 'eth0',
+        category: 'Bandwidth',
+      });
+      profile.counters = [memory, bandwidth];
+
+      const result = await querierFor(profile).counterList();
+
+      expect(result.counters.map((c) => c.label)).toEqual([
+        'Bandwidth',
+        'Memory',
+      ]);
+      expect(result.counters.map((c) => c.counterHandle)).toEqual([
+        'c-1',
+        'c-0',
+      ]);
+    });
+
     it('profileInfo nests each counter under its owning process', async function () {
       const { profile, counter } = profileWithMemoryCounter();
       const info = await querierFor(profile).profileInfo();