[RPP] Add annotations again after toggling custom track setting

Bug: 402298436
Change-Id: I997ae0605e0f7f5ca0e7f17990256ac0371462ce
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6361636
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Andres Olivares <[email protected]>

Author: and-oli

front_end/panels/timeline/ModificationsManager.ts

@@ -307,6 +307,14 @@ export class ModificationsManager extends EventTarget {
     return [...this.#overlayForAnnotation.values()];
   }
 
+  applyAnnotationsFromCache(): void {
+    this.#modifications = this.toJSON();
+    // The cache is filled by applyModificationsIfPresent, so we clear
+    // it beforehand to prevent duplicate entries.
+    this.#overlayForAnnotation.clear();
+    this.#applyStoredAnnotations(this.#modifications.annotations);
+  }
+
   /**
    * Builds all modifications into a serializable object written into
    * the 'modifications' trace file metadata field.

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -1178,6 +1178,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.resizeToPreferredHeights();
     this.setMarkers(this.#parsedTrace);
     this.dimThirdPartiesIfRequired();
+    ModificationsManager.activeManager()?.applyAnnotationsFromCache();
   }
 
   setInsights(

front_end/panels/timeline/TimelinePanel.test.ts

@@ -97,7 +97,7 @@ describeWithEnvironment('TimelinePanel', function() {
     const tracksAfterEnablingSetting = timeline.getFlameChart().getMainDataProvider().timelineData().groups;
     assert.deepEqual(tracksBeforeDisablingSetting, tracksAfterEnablingSetting);
   });
-  it('should keep overlays when the custom tracks setting is toggled', async function() {
+  it('should keep marker overlays when the custom tracks setting is toggled', async function() {
     const events = await TraceLoader.rawEvents(this, 'web-dev.json.gz') as Trace.Types.Events.Event[];
     await timeline.loadingComplete(events, null, null);
     const overlaysBeforeDisablingSetting = timeline.getFlameChart().overlays().allOverlays();
@@ -137,4 +137,33 @@ describeWithEnvironment('TimelinePanel', function() {
     assert.exists(dimIndicesAfterToggle);
     assert.isAbove(dimIndicesAfterToggle.length, 0);
   });
+
+  it('keeps annotations after toggling the custom tracks setting', async function() {
+    const events = await TraceLoader.rawEvents(this, 'web-dev.json.gz') as Trace.Types.Events.Event[];
+    await timeline.loadingComplete(events, null, null);
+    const parsedTrace = traceModel.parsedTrace();
+    assert.isOk(parsedTrace?.Meta.traceBounds.min);
+    const modificationsManager = Timeline.ModificationsManager.ModificationsManager.activeManager();
+    assert.isOk(modificationsManager);
+
+    // Add an annotation
+    modificationsManager.createAnnotation({
+      bounds: Trace.Helpers.Timing.traceWindowFromMicroSeconds(
+          parsedTrace.Meta.traceBounds.min, parsedTrace.Meta.traceBounds.max),
+      type: 'TIME_RANGE',
+      label: '',
+    });
+
+    const annotationsBeforeToggle =
+        timeline.getFlameChart().overlays().allOverlays().filter(e => e.type === 'TIME_RANGE');
+    assert.exists(annotationsBeforeToggle);
+    assert.isAbove(annotationsBeforeToggle.length, 0);
+
+    // Toggle the custom track setting and verify annotations remain.
+    Timeline.TimelinePanel.TimelinePanel.extensionDataVisibilitySetting().set(true);
+    const annotationsAfterToggle =
+        timeline.getFlameChart().overlays().allOverlays().filter(e => e.type === 'TIME_RANGE');
+    assert.exists(annotationsAfterToggle);
+    assert.isAbove(annotationsAfterToggle.length, 0);
+  });
 });