[RPP bi-direction hover] Dimming the time marker outside the highlight bounds

Fixed: 377902632
Change-Id: Id10baa34d6794a697820a8686042c49bddf14129
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6032065
Commit-Queue: Paul Irish <[email protected]>
Reviewed-by: Paul Irish <[email protected]>

Author: Nancy Li

front_end/panels/timeline/TimelineMiniMap.ts

@@ -240,7 +240,7 @@ export class TimelineMiniMap extends
   }
 
   #setMarkers(parsedTrace: Trace.Handlers.Types.ParsedTrace): void {
-    const markers = new Map<number, Element>();
+    const markers = new Map<number, HTMLDivElement>();
 
     const {Meta, PageLoadMetrics} = parsedTrace;
 

front_end/panels/timeline/TimelineUIUtils.ts

@@ -2180,7 +2180,7 @@ export class TimelineUIUtils {
     return stylesContainer;
   }
 
-  static createEventDivider(event: Trace.Types.Events.Event, zeroTime: number): Element {
+  static createEventDivider(event: Trace.Types.Events.Event, zeroTime: number): HTMLDivElement {
     const eventDivider = document.createElement('div');
     eventDivider.classList.add('resources-event-divider');
     const {startTime: eventStartTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(event);

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

@@ -45,7 +45,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
   private readonly cursorArea: HTMLElement;
   private cursorElement: HTMLElement;
   private overviewControls: TimelineOverview[];
-  private markers: Map<number, Element>;
+  private markers: Map<number, HTMLDivElement>;
   private readonly overviewInfo: OverviewInfo;
   private readonly updateThrottler: Common.Throttler.Throttler;
   private cursorEnabled: boolean;
@@ -209,14 +209,33 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.updateWindow();
   }
 
-  setMarkers(markers: Map<number, Element>): void {
+  setMarkers(markers: Map<number, HTMLDivElement>): void {
     this.markers = markers;
   }
 
-  getMarkers(): Map<number, Element> {
+  getMarkers(): Map<number, HTMLDivElement> {
     return this.markers;
   }
 
+  /**
+   * Dim the time marker outside the highlight time bounds.
+   *
+   * @param highlightBounds the time bounds to highlight, if it is empty, it means to highlight everything.
+   */
+  #dimMarkers(highlightBounds?: Trace.Types.Timing.TraceWindowMicroSeconds): void {
+    for (const time of this.markers.keys()) {
+      const marker = this.markers.get(time);
+      if (!marker) {
+        continue;
+      }
+      const timeInMicroSeconds = Trace.Helpers.Timing.millisecondsToMicroseconds(Trace.Types.Timing.MilliSeconds(time));
+      const dim = highlightBounds && !Trace.Helpers.Timing.timestampIsInBounds(highlightBounds, timeInMicroSeconds);
+
+      // `filter: grayscale(1)`  will make the element fully completely grayscale.
+      marker.style.filter = `grayscale(${dim ? 1 : 0})`;
+    }
+  }
+
   private updateMarkers(): void {
     const filteredMarkers = new Map<number, Element>();
     for (const time of this.markers.keys()) {
@@ -383,7 +402,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
   highlightBounds(bounds: Trace.Types.Timing.TraceWindowMicroSeconds, withBracket: boolean): void {
     const left = this.overviewCalculator.computePosition(Trace.Helpers.Timing.microSecondsToMilliseconds(bounds.min));
     const right = this.overviewCalculator.computePosition(Trace.Helpers.Timing.microSecondsToMilliseconds(bounds.max));
-
+    this.#dimMarkers(bounds);
     // Update the punch out rectangle to the not-to-desaturate time range.
     const punchRect = this.#dimHighlightSVG.querySelector('rect.punch');
     punchRect?.setAttribute('x', left.toString());
@@ -399,6 +418,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
   }
 
   clearBoundsHighlight(): void {
+    this.#dimMarkers();
     this.#dimHighlightSVG.classList.add('hidden');
   }
 }