RPP: Highlight minimap navigation bounds on sidebar navigation hover

Bug: 313758404
Change-Id: I156cadc8fda360c9fd2ee146d21d39e485c58ce4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5877330
Reviewed-by: Connor Clark <[email protected]>
Commit-Queue: Connor Clark <[email protected]>
Auto-Submit: Paul Irish <[email protected]>

front_end/panels/timeline/TimelineMiniMap.ts

@@ -200,6 +200,13 @@ export class TimelineMiniMap extends
     };
   }
 
+  highlightBounds(bounds: TraceEngine.Types.Timing.TraceWindowMicroSeconds): void {
+    this.#overviewComponent.highlightBounds(bounds);
+  }
+  clearBoundsHighlight(): void {
+    this.#overviewComponent.clearBoundsHighlight();
+  }
+
   /**
    * Activates a given breadcrumb.
    * @param options.removeChildBreadcrumbs - if true, any child breadcrumbs will be removed.

front_end/panels/timeline/TimelinePanel.ts

@@ -549,6 +549,14 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       this.flameChart.revealAnnotation(event.annotation);
     });
 
+    this.#sideBar.element.addEventListener(TimelineInsights.SidebarInsight.NavigationBoundsHovered.eventName, event => {
+      if (event.bounds) {
+        this.#minimapComponent.highlightBounds(event.bounds);
+      } else {
+        this.#minimapComponent.clearBoundsHighlight();
+      }
+    });
+
     this.onModeChanged();
     this.populateToolbar();
     // The viewMode is set by default to the landing page, so we don't call

front_end/panels/timeline/components/SidebarInsightsTab.ts

@@ -110,6 +110,15 @@ export class SidebarInsightsTab extends HTMLElement {
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
+  #navigationHovered(id: string): void {
+    const data = this.#insights?.get(id);
+    data && this.dispatchEvent(new Insights.SidebarInsight.NavigationBoundsHovered(data.bounds));
+  }
+
+  #navigationUnhovered(): void {
+    this.dispatchEvent(new Insights.SidebarInsight.NavigationBoundsHovered());
+  }
+
   #render(): void {
     if (!this.#traceParsedData || !this.#insights || !this.#insightSets) {
       LitHtml.render(LitHtml.nothing, this.#shadow, {host: this});
@@ -154,7 +163,11 @@ export class SidebarInsightsTab extends HTMLElement {
               ?open=${id === this.#activeNavigationId}
               class="navigation-wrapper"
             >
-              <summary @click=${() => this.#navigationClicked(id)}>${label}</summary>
+              <summary
+                @click=${() => this.#navigationClicked(id)}
+                @mouseenter=${() => this.#navigationHovered(id)}
+                @mouseleave=${() => this.#navigationUnhovered()}
+                >${label}</summary>
               ${contents}
             </details>`;
           }

front_end/panels/timeline/components/insights/SidebarInsight.ts

@@ -46,6 +46,13 @@ export class InsightDeactivated extends Event {
   }
 }
 
+export class NavigationBoundsHovered extends Event {
+  static readonly eventName = 'navigationhovered';
+  constructor(public bounds?: TraceEngine.Types.Timing.TraceWindowMicroSeconds) {
+    super(NavigationBoundsHovered.eventName, {bubbles: true, composed: true});
+  }
+}
+
 export class InsightOverlayOverride extends Event {
   static readonly eventName = 'insightoverlayoverride';
 
@@ -58,6 +65,7 @@ declare global {
   interface GlobalEventHandlersEventMap {
     [InsightActivated.eventName]: InsightActivated;
     [InsightDeactivated.eventName]: InsightDeactivated;
+    [NavigationBoundsHovered.eventName]: NavigationBoundsHovered;
     [InsightOverlayOverride.eventName]: InsightOverlayOverride;
   }
 }

front_end/panels/timeline/timelineMiniMap.css

@@ -101,6 +101,12 @@
   height: 100%;
 }
 
+.timeline-minimap-dim-highlight-svg {
+  width: 100%;
+  position: absolute;
+  height: 100%;
+}
+
 .timeline-minimap .memory-graph-label {
   position: absolute;
   right: 0;

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

@@ -32,6 +32,7 @@ import * as Common from '../../../../core/common/common.js';
 import * as TraceEngine from '../../../../models/trace/trace.js';
 import * as VisualLoggging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
+import * as ThemeSupport from '../../theme_support/theme_support.js';
 
 import {Events as OverviewGridEvents, OverviewGrid, type WindowChangedWithPositionEvent} from './OverviewGrid.js';
 import {TimelineOverviewCalculator} from './TimelineOverviewCalculator.js';
@@ -53,6 +54,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
   private windowStartTime: number;
   private windowEndTime: number;
   private muteOnWindowChanged: boolean;
+  #dimHighlightSVG: Element;
 
   constructor(prefix: string) {
     super();
@@ -85,6 +87,8 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.windowStartTime = 0;
     this.windowEndTime = Infinity;
     this.muteOnWindowChanged = false;
+
+    this.#dimHighlightSVG = UI.UIUtils.createSVGChild(this.element, 'svg', 'timeline-minimap-dim-highlight-svg hidden');
   }
 
   enableCreateBreadcrumbsButton(): void {
@@ -291,6 +295,61 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.overviewGrid.setWindow(left, right);
     this.muteOnWindowChanged = false;
   }
+
+  highlightBounds(bounds: TraceEngine.Types.Timing.TraceWindowMicroSeconds): void {
+    let mask = this.#dimHighlightSVG?.querySelector('mask');
+    if (!mask) {
+      // Set up the desaturation mask
+      const defs = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'defs');
+      mask = UI.UIUtils.createSVGChild(defs, 'mask') as SVGMaskElement;
+      mask.id = 'dim-highlight-cutouts';
+      /* Within the mask...
+          - black fill = punch, fully transparently, through to the next thing. these are the cutouts to the color.
+          - white fill = be 100% desaturated
+          - grey fill  = show at the Lightness level of grayscale/desaturation
+      */
+      const showAllRect = UI.UIUtils.createSVGChild(mask, 'rect');
+      showAllRect.setAttribute('width', '100%');
+      showAllRect.setAttribute('height', '100%');
+      showAllRect.setAttribute('fill', 'hsl(0deg 0% 95%)');
+
+      const desaturateRect = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'rect') as SVGRectElement;
+      desaturateRect.setAttribute('width', '100%');
+      desaturateRect.setAttribute('height', '100%');
+      desaturateRect.setAttribute('fill', '#ffffff');
+      desaturateRect.setAttribute('mask', `url(#${mask.id})`);
+      desaturateRect.style.mixBlendMode = 'saturation';
+
+      const punchRect = UI.UIUtils.createSVGChild(mask, 'rect', 'punch');
+      punchRect.setAttribute('y', '0');
+      punchRect.setAttribute('height', '100%');
+      punchRect.setAttribute('fill', 'black');
+
+      const bracketColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-state-on-header-hover');
+      const bracket = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'polygon') as SVGRectElement;
+      bracket.setAttribute('fill', bracketColor);
+    }
+
+    const left =
+        this.overviewCalculator.computePosition(TraceEngine.Helpers.Timing.microSecondsToMilliseconds(bounds.min));
+    const right =
+        this.overviewCalculator.computePosition(TraceEngine.Helpers.Timing.microSecondsToMilliseconds(bounds.max));
+
+    const punchRect = this.#dimHighlightSVG.querySelector('rect.punch');
+    punchRect?.setAttribute('x', left.toString());
+    punchRect?.setAttribute('width', (right - left).toString());
+
+    const size = 5;  // px size of triangles
+    const bracket = this.#dimHighlightSVG.querySelector('polygon');
+    bracket?.setAttribute(
+        'points', `${left},0 ${left},${size} ${left + size - 1},1 ${right - size - 1},1 ${right},${size} ${right},0`);
+
+    this.#dimHighlightSVG.classList.remove('hidden');
+  }
+
+  clearBoundsHighlight(): void {
+    this.#dimHighlightSVG.classList.add('hidden');
+  }
 }
 
 export const enum Events {