[RPP] Hide all Overlays in the 'reorder tracks' state

When the tracks are reordered, they are collapsed and cannot be expanded.
There is no use from the Overlays data in the reordering view and they are a distraction from the tracks reordering interface.
Let's hide them while in the 'reorder tracks' state.

Before: http://screencast/cast/NTY5OTU3NjI4MjQ4MDY0MHw4Mzk1MjA2ZS0yZg

After: http://screencast/cast/NTcxODM1NTM4OTQ0ODE5MnxjYTRhYWZiZi04MQ

Bug: 374675980
Change-Id: I8fb2c3b6f7324f1f9efed9b3b89d3462e788e587
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6113611
Reviewed-by: Nancy Li <[email protected]>
Commit-Queue: Alina Varkki <[email protected]>

Author: AlinaVarkki

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -335,6 +335,10 @@ export class TimelineFlameChartView extends
     this.networkFlameChart.addEventListener(
         PerfUI.FlameChart.Events.ENTRIES_LINK_ANNOTATION_CREATED, this.#onNetworkEntriesLinkAnnotationCreated, this);
 
+    this.mainFlameChart.addEventListener(PerfUI.FlameChart.Events.TRACKS_REORDER_STATE_CHANGED, event => {
+      this.#overlays.toggleAllOverlaysDisplayed(!event.data);
+    });
+
     this.detailsView.addEventListener(TimelineTreeView.Events.TREE_ROW_HOVERED, node => {
       if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS)) {
         return;

front_end/panels/timeline/overlays/OverlaysImpl.test.ts

@@ -396,6 +396,26 @@ describeWithEnvironment('Overlays', () => {
       assert.isOk(overlayDOM);
     });
 
+    it('toggles overlays container display', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
+      const {overlays, container} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
+
+      overlays.toggleAllOverlaysDisplayed(true);
+      await overlays.update();
+
+      assert.strictEqual(container.style.display, 'block');
+
+      overlays.toggleAllOverlaysDisplayed(false);
+      await overlays.update();
+
+      assert.strictEqual(container.style.display, 'none');
+
+      overlays.toggleAllOverlaysDisplayed(true);
+      await overlays.update();
+
+      assert.strictEqual(container.style.display, 'block');
+    });
+
     it('only renders one TIMESTAMP_MARKER as it is a singleton', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
       const {overlays, container} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);

front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -492,6 +492,17 @@ export class Overlays extends EventTarget {
         'mousemove', event => this.#updateMouseCoordinatesProgressEntriesLink.bind(this)(event, 'network'));
   }
 
+  // Toggle display of the whole OverlaysContainer.
+  // This function is used to hide all overlays when the Flamechart is in the 'reorder tracks' state.
+  // If the tracks are being reordered, they are collapsed and we do not want to display
+  // anything except the tracks reordering interface.
+  //
+  // Do not change individual overlays visibility with 'setOverlayElementVisibility' since we do not
+  // want to overwrite the overlays visibility state that was set before entering the reordering state.
+  toggleAllOverlaysDisplayed(allOverlaysDisplayed: boolean): void {
+    this.#overlaysContainer.style.display = allOverlaysDisplayed ? 'block' : 'none';
+  }
+
   // Mousemove event listener to get mouse coordinates and update them for the entries link that is being created.
   //
   // The 'mousemove' event is attached to `flameChartsContainers` instead of `overlaysContainer`

front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -2113,6 +2113,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
     this.viewportElement.appendChild(div);
     this.#inTrackConfigEditMode = true;
+    this.dispatchEventToListeners(Events.TRACKS_REORDER_STATE_CHANGED, true);
     this.updateLevelPositions();
     this.draw();
   }
@@ -2127,6 +2128,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   #exitEditMode(): void {
     this.#removeEditModeButton();
     this.#inTrackConfigEditMode = false;
+    this.dispatchEventToListeners(Events.TRACKS_REORDER_STATE_CHANGED, false);
     this.updateLevelPositions();
     this.draw();
   }
@@ -4239,6 +4241,12 @@ export const enum Events {
   ENTRY_LABEL_ANNOTATION_ADDED = 'EntryLabelAnnotationAdded',
   // Emmited when entries link annotation is added through a shotcut or a context menu.
   ENTRIES_LINK_ANNOTATION_CREATED = 'EntriesLinkAnnotationCreated',
+  /**
+   * Emmited when the user enters or exits 'reorder tracks' view.
+   * If the event value is 'true', the 'reorder tracks' state was entered,
+   * if it's false, the reorder state was exited.
+   */
+  TRACKS_REORDER_STATE_CHANGED = 'TracksReorderStateChange',
   /**
    * Emitted when an event is selected via keyboard navigation using the arrow
    * keys.
@@ -4270,6 +4278,7 @@ export interface EventTypes {
   [Events.ENTRIES_LINK_ANNOTATION_CREATED]: {
     entryFromIndex: number,
   };
+  [Events.TRACKS_REORDER_STATE_CHANGED]: boolean;
   [Events.CANVAS_FOCUSED]: number|void;
   [Events.ENTRY_INVOKED]: number;
   [Events.ENTRY_SELECTED]: number;