[RPP] Ensure entry re-highlights after clearing selection

If the user clicks an entry with an ENTRY_OUTLINE overlay, it will be
replaced with a ENTRY_SELECTED overlay. However, if the selection is
cleared (e.g. clicking somewhere in blank space) the ENTRY_OUTLINE will
not immediately be restored.

This CL resolves the issue by keeping the original ENTRY_OUTLINE
rendered, and using CSS to ensure that the ENTRY_SELECTED overlay is
always rendered on top of it.

Bug: None
Change-Id: Ia5263089b0e00433e2c500643646bcff019fd5ef
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6084661
Commit-Queue: Adam Raine <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>

Author: Adam Raine

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

@@ -329,7 +329,7 @@ describeWithEnvironment('Overlays', () => {
       assert.isOk(overlayDOM);
     });
 
-    it('does not render an ENTRY_OUTLINE if the entry is also the ENTRY_SELECTED entry', async function() {
+    it('renders an ENTRY_OUTLINE even if the entry is also the ENTRY_SELECTED entry', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
@@ -351,9 +351,9 @@ describeWithEnvironment('Overlays', () => {
         entry: event,
       });
       await overlays.update();
-      const outlineNowHidden =
-          container.querySelector<HTMLElement>('.overlay-type-ENTRY_OUTLINE')?.style.display === 'none';
-      assert.isTrue(outlineNowHidden, 'The ENTRY_OUTLINE should be hidden');
+      const outlineStillVisible =
+          container.querySelector<HTMLElement>('.overlay-type-ENTRY_OUTLINE')?.style.display === 'block';
+      assert.isTrue(outlineStillVisible, 'The ENTRY_OUTLINE should be visible');
     });
 
     it('only ever renders a single selected overlay', async function() {

front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -783,11 +783,7 @@ export class Overlays extends EventTarget {
         break;
       }
       case 'ENTRY_OUTLINE': {
-        const selectedOverlay = this.overlaysOfType<EntrySelected>('ENTRY_SELECTED')?.at(0);
-        // Check if this entry has also been selected by the user. If it has,
-        // do not show the outline, but only show the selected outline.
-        const outlinedEntryIsSelected = Boolean(selectedOverlay && selectedOverlay.entry === overlay.entry);
-        if (!outlinedEntryIsSelected && this.entryIsVisibleOnChart(overlay.entry)) {
+        if (this.entryIsVisibleOnChart(overlay.entry)) {
           this.#setOverlayElementVisibility(element, true);
           this.#positionEntryBorderOutlineType(overlay.entry, element);
         } else {

front_end/panels/timeline/timelineFlameChartView.css

@@ -50,9 +50,16 @@
   }
 }
 
+.overlay-type-ENTRY_SELECTED {
+  /* Ensure ENTRY_SELECTED overlays are always displayed on top of ENTRY_OUTLINE overlays */
+  z-index: 1;
+}
+
 .overlay-type-ENTRY_OUTLINE {
   background-color: transparent;
   border-width: 1px;
+  /* Ensure ENTRY_SELECTED overlays are always displayed on top of ENTRY_OUTLINE overlays */
+  z-index: 0;
 
   &.outline-reason-ERROR {
     border-color: var(--sys-color-error-bright);