Replace 4 counter track components with a single generic TrackCounter

  Collapse the separate Memory, Power, ProcessCPU, and Bandwidth track
  implementations into a single TrackCounter component that renders any
  counter type using CounterDisplayConfig from PR #5912.

  The LocalTrack union type is simplified from 8 variants to 5 by
  replacing 'memory', 'power', 'process-cpu', and 'bandwidth' with a
  single 'counter' type. The component branches on display.graphType
  for canvas drawing (accumulated vs rate) and on display.unit for
  tooltip rendering (bytes, pWh, percent, etc.).

  Track index ordering (for URL backward compatibility) is handled by
  a category-based mapping function. Display ordering uses the new
  display.sortWeight field.

  Part of #5752.

Author: fatadel

src/actions/profile-view.ts

@@ -347,10 +347,7 @@ function getInformationFromTrackReference(
             relatedThreadIndex: localTrack.threadIndex,
             relatedTab: null,
           };
-        case 'memory':
-        case 'bandwidth':
-        case 'process-cpu':
-        case 'power': {
+        case 'counter': {
           const counterSelectors = getCounterSelectors(localTrack.counterIndex);
           const counter = counterSelectors.getCounter(state);
           return {

src/app-logic/constants.ts

@@ -29,18 +29,10 @@ export const TRACK_NETWORK_ROW_REPEAT = 7;
 export const TRACK_NETWORK_HEIGHT =
   TRACK_NETWORK_ROW_HEIGHT * TRACK_NETWORK_ROW_REPEAT;
 
-// The following values are for memory track.
-export const TRACK_MEMORY_GRAPH_HEIGHT = 25;
-export const TRACK_MEMORY_MARKERS_HEIGHT = 15;
-export const TRACK_MEMORY_HEIGHT =
-  TRACK_MEMORY_GRAPH_HEIGHT + TRACK_MEMORY_MARKERS_HEIGHT;
-export const TRACK_MEMORY_LINE_WIDTH = 2;
-export const TRACK_MEMORY_DEFAULT_COLOR = 'orange';
-
-// The following values are for the bandwidth track.
-export const TRACK_BANDWIDTH_HEIGHT = 25;
-export const TRACK_BANDWIDTH_LINE_WIDTH = 2;
-export const TRACK_BANDWIDTH_DEFAULT_COLOR = 'blue';
+// The following values are for counter tracks (Memory, Power, Bandwidth, etc.).
+export const TRACK_COUNTER_GRAPH_HEIGHT = 25;
+export const TRACK_COUNTER_MARKERS_HEIGHT = 15;
+export const TRACK_COUNTER_LINE_WIDTH = 2;
 
 // The following values are for experimental event delay track.
 export const TRACK_EVENT_DELAY_HEIGHT = 40;
@@ -61,15 +53,6 @@ export const TRACK_PROCESS_BLANK_HEIGHT = 30;
 // Height of timeline ruler.
 export const TIMELINE_RULER_HEIGHT = 20;
 
-// Height of the power track.
-export const TRACK_POWER_HEIGHT = 25;
-export const TRACK_POWER_LINE_WIDTH = 2;
-export const TRACK_POWER_DEFAULT_COLOR = 'grey';
-
-// Height of the process cpu track.
-export const TRACK_PROCESS_CPU_HEIGHT = 25;
-export const TRACK_PROCESS_CPU_LINE_WIDTH = 2;
-
 // JS Tracer has very high fidelity information, and needs a more fine-grained zoom.
 export const JS_TRACER_MAXIMUM_CHART_ZOOM = 0.001;
 

src/components/timeline/LocalTrack.tsx

@@ -26,11 +26,8 @@ import { getThreadSelectors } from 'firefox-profiler/selectors/per-thread';
 import { TimelineTrackThread } from './TrackThread';
 import { TrackEventDelay } from './TrackEventDelay';
 import { TrackNetwork } from './TrackNetwork';
-import { TrackMemory } from './TrackMemory';
-import { TrackBandwidth } from './TrackBandwidth';
+import { TrackCounter } from './TrackCounter';
 import { TrackIPC } from './TrackIPC';
-import { TrackProcessCPU } from './TrackProcessCPU';
-import { TrackPower } from './TrackPower';
 import { getTrackSelectionModifiers } from 'firefox-profiler/utils';
 import type {
   TrackReference,
@@ -106,18 +103,12 @@ class LocalTrackComponent extends PureComponent<Props> {
         );
       case 'network':
         return <TrackNetwork threadIndex={localTrack.threadIndex} />;
-      case 'memory':
-        return <TrackMemory counterIndex={localTrack.counterIndex} />;
-      case 'bandwidth':
-        return <TrackBandwidth counterIndex={localTrack.counterIndex} />;
+      case 'counter':
+        return <TrackCounter counterIndex={localTrack.counterIndex} />;
       case 'ipc':
         return <TrackIPC threadIndex={localTrack.threadIndex} />;
       case 'event-delay':
         return <TrackEventDelay threadIndex={localTrack.threadIndex} />;
-      case 'process-cpu':
-        return <TrackProcessCPU counterIndex={localTrack.counterIndex} />;
-      case 'power':
-        return <TrackPower counterIndex={localTrack.counterIndex} />;
       case 'marker':
         return (
           <TrackCustomMarker
@@ -241,10 +232,7 @@ export const TimelineLocalTrack = explicitConnect<
           'Event Delay of ' + selectors.getThreadProcessDetails(state);
         break;
       }
-      case 'memory':
-      case 'bandwidth':
-      case 'process-cpu':
-      case 'power': {
+      case 'counter': {
         titleText = getCounterSelectors(localTrack.counterIndex).getDescription(
           state
         );