RPP: make track configuration global and persisted

This CL updates the track configuration in RPP. Previously, it was
stored per trace. This CL makes it be stored globally. This has some
implications for how we apply any persisted config:

1. We now store the track name in the configuration.
2. When a user imports or records a trace, we do the following:
   - For each group, we look to see if its name matches a name in the
     persisted config. If it does, we apply the expanded / hidden state
     from the persisted config. This logic is fairly sound but non ideal
     because some tracks (e.g. "Main - google.com") contain trace
     specific information. We might want to change this in the future to
     think about using some other identifier. However, I expect most
     users do not want to hide the "main" thread, so maybe this is OK.
   - After that, we try to apply the persisted sorting. We only do this
     if the number of tracks in the persisted config matches the number
     in the active trace. This is non-ideal because this scenario won't
     happen much. However, this CL is already big enough; we should
     consider if we want to apply this differently in a follow-up CL.
3. We now never apply any saved visual config from a trace file that is
   imported. The reasoning here is that the visual config is a
   per-person preference (sort of analogous to light or dark mode, if
   you want to think of it that way) and so we prefer to maintain the
   user's preferences.

When the user imports or records a new trace, and they have persisted
track config, we will apply it. As of crrev.com/c/6861972, they will
also see a dismissable banner at the bottom of the view telling them
that we have hidden some tracks.

Bypass-Check-License: Only updates files, no new files are added.
Bug: 432663450
Change-Id: If25512e369163fe473c143b6598dee5c22ae98d6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6862799
Reviewed-by: Alina Varkki <[email protected]>
Commit-Queue: Alina Varkki <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>

Author: jackfranklin

front_end/models/trace/types/File.ts

@@ -180,11 +180,14 @@ export interface TrackVisualConfig {
   expanded: boolean;
   originalIndex: number;
   visualIndex: number;
+  trackName: string;
 }
 
 /**
  * Stores the visual config if the user has modified it. Split into "main" and
  * "network" so we can pass the relevant config into the right data provider.
+ * NOTE: as of August 2025 (M141) we currently do not export this in new
+ * traces, or use it if an existing trace is imported with it.
  */
 export interface PersistedTraceVisualConfig {
   main: TrackVisualConfig[]|null;

front_end/panels/timeline/README.md

@@ -268,6 +268,8 @@ Note: because this approach uses `SyntheticProfileCalls`, which are built from C
 
 We allow the user to edit the visual status and order of tracks in the main flame chart. Initially when we shipped this feature it was not persisted, meaning that if you refreshed or imported another trace, your configuration was lost. This was changed in crrev.com/c/6632596 which added persisting of the track configuration into memory, and added these docs too :)
 
+As of crrev.com/c/6862799, this feature was changed to be persisted across all traces, whereas previously configuration was only applied per trace, which made it much less useful.
+
 ### How tracks get rendered
 
 Tracks on the timeline are called `Groups` in the code (`PerfUI.FlameChart.Group`). These get constructed in the data providers and pushed onto the `groups` array.
@@ -323,21 +325,11 @@ We persist the order of the groups and for each group its `hidden` and `expanded
   originalIndex: 0,
   visualIndex: 2,
   hidden: false,
-  expanded: true
+  expanded: true,
+  trackName: 'Frames',
 }
 ```
 
 When the user makes any visual change to the UI, which happens in `FlameChart.ts`, we notify the data provider of that change. It can then choose to persist this data anywhere it likes. In our case, we persist into a DevTools setting which is persisted globally (e.g. it survives restarts).
 
-Because the user can import/record multiple traces over time, we cannot just persist the array of group states, because then we would mistakenly apply it to other traces. To avoid this we persist the list of groups under a key. The key is the `min` time for each trace (e.g. the time the trace started). This is not guaranteed to be unique, but it is pretty likely to be, given that it is monotonic and microsecond precision.
-
-So, what actually gets stored into the setting is:
-
-```
-{
-  12345: [{...group state as above...}],
-  56789: [{...group state as above...}],
-}
-```
-
-When a trace is recorded / imported, we look to read any persisted configuration from disk before applying it.
+We store this as two global settings (one for the main flame chart, one for the network flame chart). This means that the user can make changes to one trace and it is applied to all future traces. This is by design - we have lots of feedback that there is a lot of noise that people want to hide.

front_end/panels/timeline/TimelineFlameChartDataProvider.test.ts

@@ -332,7 +332,7 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
   it('persists track configurations to the setting if it is provided with one', async function() {
     const {Settings} = Common.Settings;
     const setting =
-        Settings.instance().createSetting<PerfUi.FlameChart.PersistedConfigPerTrace>('persist-flame-config', {});
+        Settings.instance().createSetting<PerfUi.FlameChart.PersistedGroupConfig[]|null>('persist-flame-config', null);
 
     const dataProvider = new Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
@@ -350,25 +350,27 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
     dataProvider.handleTrackConfigurationChange(groups, newVisualOrder);
 
     const newSetting = setting.get();
-    const traceKey = Timeline.TrackConfiguration.keyForTraceConfig(parsedTrace);
-    assert.deepEqual(newSetting[traceKey], [
+    assert.deepEqual(newSetting, [
       {
         expanded: false,
         hidden: false,
         originalIndex: 0,
         visualIndex: 2,
+        trackName: 'Frames',
       },
       {
         expanded: false,
         hidden: false,
         originalIndex: 1,
         visualIndex: 0,
+        trackName: '',  // This is screenshots.
       },
       {
         expanded: false,
         hidden: false,
         originalIndex: 2,
         visualIndex: 1,
+        trackName: 'Animations',
       }
     ]);
   });

front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -50,7 +50,7 @@ import {
   selectionsEqual,
   type TimelineSelection,
 } from './TimelineSelection.js';
-import {buildPersistedConfig, keyForTraceConfig} from './TrackConfiguration.js';
+import {buildPersistedConfig} from './TrackConfiguration.js';
 import * as Utils from './utils/utils.js';
 
 const UIStrings = {
@@ -167,7 +167,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
    * have to recalculate. This is reset when the trace changes.
    */
   #initiatorsCache = new Map<number, PerfUI.FlameChart.FlameChartInitiatorData[]>();
-  #persistedGroupConfigSetting: Common.Settings.Setting<PerfUI.FlameChart.PersistedConfigPerTrace>|null = null;
+  #persistedGroupConfigSetting: Common.Settings.Setting<PerfUI.FlameChart.PersistedGroupConfig[]|null>|null = null;
 
   constructor() {
     super();
@@ -218,14 +218,11 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       return;
     }
     const persistedDataForTrace = buildPersistedConfig(groups, indexesInVisualOrder);
-    const traceKey = keyForTraceConfig(this.parsedTrace);
-
-    const setting = this.#persistedGroupConfigSetting.get();
-    setting[traceKey] = persistedDataForTrace;
-    this.#persistedGroupConfigSetting.set(setting);
+    this.#persistedGroupConfigSetting.set(persistedDataForTrace);
   }
 
-  setPersistedGroupConfigSetting(setting: Common.Settings.Setting<PerfUI.FlameChart.PersistedConfigPerTrace>): void {
+  setPersistedGroupConfigSetting(setting: Common.Settings.Setting<PerfUI.FlameChart.PersistedGroupConfig[]|null>):
+      void {
     this.#persistedGroupConfigSetting = setting;
   }
 

front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.test.ts

@@ -224,7 +224,7 @@ describeWithEnvironment('TimelineFlameChartNetworkDataProvider', function() {
   it('persists track configurations to the setting if it is provided with one', async function() {
     const {Settings} = Common.Settings;
     const setting =
-        Settings.instance().createSetting<PerfUi.FlameChart.PersistedConfigPerTrace>('persist-flame-config', {});
+        Settings.instance().createSetting<PerfUi.FlameChart.PersistedGroupConfig[]|null>('persist-flame-config', null);
 
     const dataProvider = new Timeline.TimelineFlameChartNetworkDataProvider.TimelineFlameChartNetworkDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
@@ -241,13 +241,13 @@ describeWithEnvironment('TimelineFlameChartNetworkDataProvider', function() {
     dataProvider.handleTrackConfigurationChange(groups, [0]);
 
     const newSetting = setting.get();
-    const traceKey = Timeline.TrackConfiguration.keyForTraceConfig(parsedTrace);
-    assert.deepEqual(newSetting[traceKey], [
+    assert.deepEqual(newSetting, [
       {
         expanded: true,
         hidden: false,
         originalIndex: 0,
         visualIndex: 0,
+        trackName: 'Network',
       },
     ]);
   });

front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts

@@ -22,7 +22,7 @@ import {
   selectionsEqual,
   type TimelineSelection,
 } from './TimelineSelection.js';
-import {buildPersistedConfig, keyForTraceConfig} from './TrackConfiguration.js';
+import {buildPersistedConfig} from './TrackConfiguration.js';
 import * as TimelineUtils from './utils/utils.js';
 
 export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.FlameChartDataProvider {
@@ -40,7 +40,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
   #lastInitiatorEntry = -1;
   #lastInitiatorsData: PerfUI.FlameChart.FlameChartInitiatorData[] = [];
   #entityMapper: TimelineUtils.EntityMapper.EntityMapper|null = null;
-  #persistedGroupConfigSetting: Common.Settings.Setting<PerfUI.FlameChart.PersistedConfigPerTrace>|null = null;
+  #persistedGroupConfigSetting: Common.Settings.Setting<PerfUI.FlameChart.PersistedGroupConfig[]|null>|null = null;
 
   constructor() {
     this.reset();
@@ -461,13 +461,11 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
       return;
     }
     const persistedDataForTrace = buildPersistedConfig(groups, indexesInVisualOrder);
-    const traceKey = keyForTraceConfig(this.#parsedTrace);
-    const setting = this.#persistedGroupConfigSetting.get();
-    setting[traceKey] = persistedDataForTrace;
-    this.#persistedGroupConfigSetting.set(setting);
+    this.#persistedGroupConfigSetting.set(persistedDataForTrace);
   }
 
-  setPersistedGroupConfigSetting(setting: Common.Settings.Setting<PerfUI.FlameChart.PersistedConfigPerTrace>): void {
+  setPersistedGroupConfigSetting(setting: Common.Settings.Setting<PerfUI.FlameChart.PersistedGroupConfig[]|null>):
+      void {
     this.#persistedGroupConfigSetting = setting;
   }
 

front_end/panels/timeline/TimelineFlameChartView.test.ts

@@ -39,13 +39,16 @@ class MockViewDelegate implements Timeline.TimelinePanel.TimelineModeViewDelegat
 }
 
 function clearPersistTrackConfigSettings() {
-  const mainGroupSetting = Common.Settings.Settings.instance().createSetting('timeline-main-flame-group-config', {});
+  const mainGroupSetting =
+      Common.Settings.Settings.instance().createSetting<PerfUI.FlameChart.PersistedGroupConfig[]|null>(
+          'timeline-persisted-main-flamechart-track-config', null);
   const networkGroupSetting =
-      Common.Settings.Settings.instance().createSetting('timeline-network-flame-group-config', {});
+      Common.Settings.Settings.instance().createSetting<PerfUI.FlameChart.PersistedGroupConfig[]|null>(
+          'timeline-persisted-network-flamechart-track-config', null);
 
   // In case they already existed and need clearing out.
-  mainGroupSetting.set({});
-  networkGroupSetting.set({});
+  mainGroupSetting.set(null);
+  networkGroupSetting.set(null);
 }
 
 describeWithEnvironment('TimelineFlameChartView', function() {
@@ -183,6 +186,26 @@ describeWithEnvironment('TimelineFlameChartView', function() {
     });
   });
 
+  it('knows if the current trace has got hidden tracks', async function() {
+    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const mockViewDelegate = new MockViewDelegate();
+    const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
+    renderElementIntoDOM(flameChartView);
+    flameChartView.setModel(parsedTrace, metadata);
+
+    assert.isFalse(flameChartView.hasHiddenTracks());
+    // Ensure it is true when something in the main flame chart is hidden
+    flameChartView.getMainFlameChart().hideGroup(0);
+    assert.isTrue(flameChartView.hasHiddenTracks());
+    flameChartView.getMainFlameChart().showGroup(0);
+    assert.isFalse(flameChartView.hasHiddenTracks());
+    // Ensure it is true when something in the network chart is hidden
+    // (users cannot technically achieve this via the UI, but in case they can
+    // in the future let's explicitly check!)
+    flameChartView.getNetworkFlameChart().hideGroup(0);
+    assert.isTrue(flameChartView.hasHiddenTracks());
+  });
+
   it('can gather the visual track config to store as metadata', async function() {
     const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     const mockViewDelegate = new MockViewDelegate();
@@ -199,82 +222,57 @@ describeWithEnvironment('TimelineFlameChartView', function() {
     const networkChart = flameChartView.getNetworkFlameChart();
     networkChart.toggleGroupExpand(0);
 
-    const visualMetadata = flameChartView.getPersistedConfigMetadata(parsedTrace);
+    const visualMetadata = flameChartView.getPersistedConfigMetadata();
 
-    assert.deepEqual(visualMetadata.network, [{expanded: true, hidden: false, originalIndex: 0, visualIndex: 0}]);
+    assert.deepEqual(
+        visualMetadata.network,
+        [{expanded: true, hidden: false, originalIndex: 0, visualIndex: 0, trackName: 'Network'}]);
 
     assert.deepEqual(visualMetadata.main, [
-      {expanded: false, hidden: true, originalIndex: 0, visualIndex: 0},
-      {expanded: false, hidden: false, originalIndex: 1, visualIndex: 1},
-      {expanded: false, hidden: false, originalIndex: 2, visualIndex: 3},
-      {expanded: true, hidden: false, originalIndex: 3, visualIndex: 2},
-      {expanded: false, hidden: false, originalIndex: 4, visualIndex: 4},
-      {expanded: false, hidden: false, originalIndex: 5, visualIndex: 5},
-      {expanded: false, hidden: false, originalIndex: 6, visualIndex: 6},
-      {expanded: false, hidden: false, originalIndex: 7, visualIndex: 7},
-      {expanded: false, hidden: false, originalIndex: 8, visualIndex: 8},
-      {expanded: false, hidden: false, originalIndex: 9, visualIndex: 9},
-      {expanded: false, hidden: false, originalIndex: 10, visualIndex: 10},
-      {expanded: false, hidden: false, originalIndex: 11, visualIndex: 11},
-      {expanded: false, hidden: false, originalIndex: 12, visualIndex: 12}
+      {expanded: false, hidden: true, originalIndex: 0, visualIndex: 0, trackName: 'Frames'}, {
+        expanded: false,
+        hidden: false,
+        originalIndex: 1,
+        visualIndex: 1,
+        // screenshots but it has no visible title
+        trackName: ''
+      },
+      {expanded: false, hidden: false, originalIndex: 2, visualIndex: 3, trackName: 'Animations'},
+      {expanded: true, hidden: false, originalIndex: 3, visualIndex: 2, trackName: 'Main — https://web.dev/'}, {
+        expanded: false,
+        hidden: false,
+        originalIndex: 4,
+        visualIndex: 4,
+        trackName:
+            'Frame — https://shared-storage-demo-content-producer.web.app/paa/scripts/private-aggregation-test.html'
+      },
+      {expanded: false, hidden: false, originalIndex: 5, visualIndex: 5, trackName: 'Thread pool'},
+      {expanded: false, hidden: false, originalIndex: 6, visualIndex: 6, trackName: 'Thread pool worker 1'},
+      {expanded: false, hidden: false, originalIndex: 7, visualIndex: 7, trackName: 'Thread pool worker 2'},
+      {expanded: false, hidden: false, originalIndex: 8, visualIndex: 8, trackName: 'Thread pool worker 3'},
+      {expanded: false, hidden: false, originalIndex: 9, visualIndex: 9, trackName: 'Thread pool worker 4'},
+      {expanded: false, hidden: false, originalIndex: 10, visualIndex: 10, trackName: 'Thread pool worker 5'},
+      {expanded: false, hidden: false, originalIndex: 11, visualIndex: 11, trackName: 'StackSamplingProfiler'},
+      {expanded: false, hidden: false, originalIndex: 12, visualIndex: 12, trackName: 'GPU'}
     ]);
   });
 
-  it('will apply metadata on disk to the setting when a trace is imported', async function() {
-    const {parsedTrace, metadata: originalMetdata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
-
-    const FAKE_VISUAL_CONFIG_MAIN: Trace.Types.File.TrackVisualConfig[] = [
-      // Move the order of Group 1 and Group 2 around
-      {expanded: false, hidden: true, originalIndex: 0, visualIndex: 0},
-      {expanded: false, hidden: false, originalIndex: 1, visualIndex: 1},
-      {expanded: false, hidden: false, originalIndex: 2, visualIndex: 3},
-      {expanded: true, hidden: false, originalIndex: 3, visualIndex: 2},
-      {expanded: false, hidden: false, originalIndex: 4, visualIndex: 4},
-      {expanded: false, hidden: false, originalIndex: 5, visualIndex: 5},
-      {expanded: false, hidden: false, originalIndex: 6, visualIndex: 6},
-      {expanded: false, hidden: false, originalIndex: 7, visualIndex: 7},
-      {expanded: false, hidden: false, originalIndex: 8, visualIndex: 8},
-      {expanded: false, hidden: false, originalIndex: 9, visualIndex: 9},
-      {expanded: false, hidden: false, originalIndex: 10, visualIndex: 10},
-      {expanded: false, hidden: false, originalIndex: 11, visualIndex: 11},
-      {expanded: false, hidden: false, originalIndex: 12, visualIndex: 12}
-    ];
-
-    const FAKE_VISUAL_CONFIG_NETWORK: Trace.Types.File.TrackVisualConfig[] =
-        [{expanded: true, hidden: false, originalIndex: 0, visualIndex: 0}];
-
-    const metadata: Trace.Types.File.MetaData = {
-      ...originalMetdata,
-      visualTrackConfig: {
-        main: FAKE_VISUAL_CONFIG_MAIN,
-        network: FAKE_VISUAL_CONFIG_NETWORK,
-      }
-    };
-    const mockViewDelegate = new MockViewDelegate();
-    const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
-    flameChartView.setModel(parsedTrace, metadata);
-
-    const metadataInSetting = flameChartView.getPersistedConfigMetadata(parsedTrace);
-    assert.deepEqual(metadataInSetting, {main: FAKE_VISUAL_CONFIG_MAIN, network: FAKE_VISUAL_CONFIG_NETWORK});
-  });
-
-  it('does not use visual config from file if the user has locally made config changes', async function() {
+  it('does not apply visual config from a file', async function() {
     const {parsedTrace, metadata: originalMetadata} =
         await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
 
     const FROM_FILE_VISUAL_CONFIG_NETWORK: Trace.Types.File.TrackVisualConfig[] =
-        [{expanded: true, hidden: false, originalIndex: 0, visualIndex: 0}];
+        [{expanded: true, hidden: false, originalIndex: 0, visualIndex: 0, trackName: 'Network'}];
 
-    const traceKey = Timeline.TrackConfiguration.keyForTraceConfig(parsedTrace);
     // Populate the in-memory setting to pretend the user has already modified
     // this trace's visual config.
     // Importantly for this test, this is a different setting to FAKE_VISUAL_CONFIG_NETWORK above.
     const networkGroupSetting =
-        Common.Settings.Settings.instance()
-            .createSetting<PerfUI.FlameChart.PersistedConfigPerTrace>('timeline-network-flame-group-config', {})
-            .get();
-    const USER_VISUAL_CONFIG_NETWORK = {hidden: true, expanded: true, originalIndex: 0, visualIndex: 0};
-    networkGroupSetting[traceKey] = [USER_VISUAL_CONFIG_NETWORK];
+        Common.Settings.Settings.instance().createSetting<PerfUI.FlameChart.PersistedGroupConfig[]|null>(
+            'timeline-persisted-network-flamechart-track-config', null);
+    const USER_VISUAL_CONFIG_NETWORK =
+        {hidden: true, expanded: true, originalIndex: 0, visualIndex: 0, trackName: 'Network'};
+    networkGroupSetting.set([USER_VISUAL_CONFIG_NETWORK]);
 
     // Now add network configuration to the metadata that we get from the trace file itself.
     const metadata: Trace.Types.File.MetaData = {
@@ -288,7 +286,7 @@ describeWithEnvironment('TimelineFlameChartView', function() {
     const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
     flameChartView.setModel(parsedTrace, metadata);
 
-    const metadataInSetting = flameChartView.getPersistedConfigMetadata(parsedTrace);
+    const metadataInSetting = flameChartView.getPersistedConfigMetadata();
     assert.deepEqual(metadataInSetting, {main: null, network: [USER_VISUAL_CONFIG_NETWORK]});
   });