Replace 4 counter track components with a single generic TrackCounter

docs-developer/CHANGELOG-formats.md

@@ -6,6 +6,12 @@ Note that this is not an exhaustive list. Processed profile format upgraders can
 
 ## Processed profile format
 
+### Version 62
+
+A new `display` field of type `CounterDisplayConfig` was added to `RawCounter`.
+This metadata makes counters self-describing in terms of how they are rendered in the UI.
+For existing profiles, the display config is derived from the counter's `category` and `name`.
+
 ### Version 61
 
 The `SourceTable` in `profile.shared.sources` was updated:

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

@@ -12,7 +12,7 @@ export const GECKO_PROFILE_VERSION = 34;
 // The current version of the "processed" profile format.
 // Please don't forget to update the processed profile format changelog in
 // `docs-developer/CHANGELOG-formats.md`.
-export const PROCESSED_PROFILE_VERSION = 61;
+export const PROCESSED_PROFILE_VERSION = 62;
 
 // The following are the margin sizes for the left and right of the timeline. Independent
 // components need to share these values.
@@ -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
         );