Dim-out not hovered-over annotations and add border

Make the labels more readable by adding a border to the labels and dimming out the rest of the labels why one is hovered in the flamechart of in the sidebar.

Video: http://screencast/cast/NTg2NDE3NDgwOTc3NjEyOHw4ZTExOWExZS1mYQ

Bug: 433643462
Change-Id: I3a42b50a001d91d418bbb41d362669d0ec78e665
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6779639
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Alina Varkki <[email protected]>
Auto-Submit: Alina Varkki <[email protected]>

Author: AlinaVarkki

front_end/panels/timeline/ModificationsManager.ts

@@ -288,6 +288,10 @@ export class ModificationsManager extends EventTarget {
     return null;
   }
 
+  getOverlaybyAnnotation(annotation: Trace.Types.File.Annotation): Trace.Types.Overlays.Overlay|null {
+    return this.#overlayForAnnotation.get(annotation) || null;
+  }
+
   getAnnotations(): Trace.Types.File.Annotation[] {
     return [...this.#overlayForAnnotation.keys()];
   }

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -770,6 +770,17 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     }
   }
 
+  hoverAnnotationInSidebar(annotation: Trace.Types.File.Annotation): void {
+    const overlay = ModificationsManager.activeManager()?.getOverlaybyAnnotation(annotation);
+    if (overlay && overlay.type === 'ENTRY_LABEL') {
+      this.#overlays.highlightOverlay(overlay);
+    }
+  }
+
+  sidebarAnnotationHoverOut(): void {
+    this.#overlays.undimAllEntryLabels();
+  }
+
   revealAnnotation(annotation: Trace.Types.File.Annotation): void {
     const traceBounds = TraceBounds.TraceBounds.BoundsManager.instance().state()?.micro.entireTraceBounds;
     if (!traceBounds) {

front_end/panels/timeline/TimelinePanel.ts

@@ -616,6 +616,14 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       this.flameChart.revealAnnotation(event.annotation);
     });
 
+    this.#sideBar.element.addEventListener(TimelineComponents.Sidebar.HoverAnnotation.eventName, event => {
+      this.flameChart.hoverAnnotationInSidebar(event.annotation);
+    });
+
+    this.#sideBar.element.addEventListener(TimelineComponents.Sidebar.AnnotationHoverOut.eventName, () => {
+      this.flameChart.sidebarAnnotationHoverOut();
+    });
+
     this.#sideBar.element.addEventListener(TimelineInsights.SidebarInsight.InsightSetHovered.eventName, event => {
       if (event.bounds) {
         this.#minimapComponent.highlightBounds(event.bounds, /* withBracket */ true);

front_end/panels/timeline/components/Sidebar.ts

@@ -31,10 +31,27 @@ export class RevealAnnotation extends Event {
     super(RevealAnnotation.eventName, {bubbles: true, composed: true});
   }
 }
+export class HoverAnnotation extends Event {
+  static readonly eventName = 'hoverannotation';
+
+  constructor(public annotation: Trace.Types.File.Annotation) {
+    super(HoverAnnotation.eventName, {bubbles: true, composed: true});
+  }
+}
+
+export class AnnotationHoverOut extends Event {
+  static readonly eventName = 'annotationhoverout';
+
+  constructor() {
+    super(AnnotationHoverOut.eventName, {bubbles: true, composed: true});
+  }
+}
 
 declare global {
   interface GlobalEventHandlersEventMap {
     [RevealAnnotation.eventName]: RevealAnnotation;
+    [HoverAnnotation.eventName]: HoverAnnotation;
+    [AnnotationHoverOut.eventName]: AnnotationHoverOut;
   }
 }
 

front_end/panels/timeline/components/SidebarAnnotationsTab.ts

@@ -14,7 +14,7 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Utils from '../utils/utils.js';
 
-import {RemoveAnnotation, RevealAnnotation} from './Sidebar.js';
+import {AnnotationHoverOut, HoverAnnotation, RemoveAnnotation, RevealAnnotation} from './Sidebar.js';
 import sidebarAnnotationsTabStyles from './sidebarAnnotationsTab.css.js';
 
 const {html, render} = Lit;
@@ -97,6 +97,8 @@ export interface SidebarAnnotationsTabViewInput {
   annotationsHiddenSetting: Common.Settings.Setting<boolean>;
   annotationEntryToColorMap: ReadonlyMap<Trace.Types.Events.Event|Trace.Types.Events.LegacyTimelineFrame, string>;
   onAnnotationClick: (annotation: Trace.Types.File.Annotation) => void;
+  onAnnotationHover: (annotation: Trace.Types.File.Annotation) => void;
+  onAnnotationHoverOut: () => void;
   onAnnotationDelete: (annotation: Trace.Types.File.Annotation) => void;
 }
 
@@ -207,6 +209,12 @@ export class SidebarAnnotationsTab extends UI.Widget.Widget {
       onAnnotationClick: (annotation: Trace.Types.File.Annotation) => {
         this.contentElement.dispatchEvent(new RevealAnnotation(annotation));
       },
+      onAnnotationHover: (annotation: Trace.Types.File.Annotation) => {
+        this.contentElement.dispatchEvent(new HoverAnnotation(annotation));
+      },
+      onAnnotationHoverOut: () => {
+        this.contentElement.dispatchEvent(new AnnotationHoverOut());
+      },
       onAnnotationDelete: (annotation: Trace.Types.File.Annotation) => {
         this.contentElement.dispatchEvent(new RemoveAnnotation(annotation));
       },
@@ -417,6 +425,8 @@ export const DEFAULT_VIEW: (input: SidebarAnnotationsTabViewInput, output: objec
               return html`
                 <div class="annotation-container"
                   @click=${() => input.onAnnotationClick(annotation)}
+                  @mouseover=${() => (annotation.type === 'ENTRY_LABEL') ? input.onAnnotationHover(annotation): null}
+                  @mouseout=${() => (annotation.type === 'ENTRY_LABEL') ? input.onAnnotationHoverOut() : null}
                   aria-label=${label}
                   tabindex="0"
                   jslog=${VisualLogging.item(`timeline.annotation-sidebar.annotation-${jslogForAnnotation(annotation)}`).track({click: true})}

front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -1363,6 +1363,36 @@ export class Overlays extends EventTarget {
     };
   }
 
+  // Dimms all label annotations except the one that is hovered over in the timeline or sidebar.
+  // The highlighter annotation is brought forward.
+  highlightOverlay(overlay: Trace.Types.Overlays.EntryLabel): void {
+    const allLabelOverlays = this.overlaysOfType('ENTRY_LABEL');
+    for (const otherOverlay of allLabelOverlays) {
+      const element = this.elementForOverlay(otherOverlay);
+      const component = element?.querySelector('devtools-entry-label-overlay');
+      if (element && !component?.hasAttribute('data-user-editing-label')) {
+        if (otherOverlay === overlay) {
+          element.style.opacity = '1';
+          element.style.zIndex = '3';
+        } else {
+          element.style.opacity = '0.5';
+          element.style.zIndex = '2';
+        }
+      }
+    }
+  }
+
+  undimAllEntryLabels(): void {
+    const allLabelOverlays = this.overlaysOfType('ENTRY_LABEL');
+    for (const otherOverlay of allLabelOverlays) {
+      const element = this.elementForOverlay(otherOverlay);
+      if (element) {
+        element.style.opacity = '1';
+        element.style.zIndex = '2';
+      }
+    }
+  }
+
   #createElementForNewOverlay(overlay: Trace.Types.Overlays.Overlay): HTMLElement {
     const overlayElement = document.createElement('div');
     overlayElement.classList.add('overlay-item', `overlay-type-${overlay.type}`);
@@ -1394,6 +1424,12 @@ export class Overlays extends EventTarget {
           overlay.label = newLabel;
           this.dispatchEvent(new AnnotationOverlayActionEvent(overlay, 'Update'));
         });
+        overlayElement.addEventListener('mouseover', () => {
+          this.highlightOverlay(overlay);
+        });
+        overlayElement.addEventListener('mouseout', () => {
+          this.undimAllEntryLabels();
+        });
         overlayElement.appendChild(component);
         overlayElement.addEventListener('click', event => {
           event.preventDefault();

front_end/panels/timeline/overlays/components/entryLabelOverlay.css

@@ -117,6 +117,7 @@
   font-family: var(--default-font-family);
   font-size: var(--sys-typescale-body2-size);
   font-weight: var(--ref-typeface-weight-medium);
+  outline: 2px solid var(--color-background);
 }
 
 

front_end/panels/timeline/timelineFlameChartView.css

@@ -22,6 +22,7 @@
 .overlay-type-ENTRY_LABEL {
   /* keep these above the selected entry overline, else they can become hard to read */
   z-index: 2;
+  transition: opacity 0.2s;
 
   /* if an overlay is being edited, keep it above the rest so the user is not obstructed */
   /* also bump the z-index if the label is being hovered, to ensure it appears above any other labels that might obstruct it */