Bi-directional hover dimming between Flamechart and TreeViews

When hovering items in the tree views, the flame chart items should react. And vice-versa. This CL enables that for immediate feedback and sits behind behind the existing dimming experiment.

Video: https://crbug.com/380038346#comment1

Also add additional intended dimming: dim frames, decorations, etc.

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

Author: paulirish

front_end/core/common/Color.ts

@@ -2154,12 +2154,12 @@ export class Legacy implements Color {
 
   /**
    * Returns a new color using the NTSC formula for making a RGB color grayscale.
-   * Note: this is ill-defined for colors with alpha, and alpha is not modified.
+   * Note: We override with an alpha of 50% to enhance the dimming effect.
    */
   grayscale(): Legacy {
-    const [r, g, b, a] = this.#rgbaInternal;
+    const [r, g, b] = this.#rgbaInternal;
     const gray = r * 0.299 + g * 0.587 + b * 0.114;
-    return new Legacy([gray, gray, gray, a], Format.RGBA);
+    return new Legacy([gray, gray, gray, 0.5], Format.RGBA);
   }
 
   setAlpha(alpha: number): Legacy {

front_end/models/trace/extras/TraceTree.ts

@@ -13,17 +13,23 @@ export class Node {
   totalTime: number;
   selfTime: number;
   id: string|symbol;
-  event: Types.Events.Event|null;
+  /** The first trace event encountered that necessitated the creation of this tree node. */
+  event: Types.Events.Event;
+  /** All of the trace events associated with this aggregate node.
+   * Minor: In the case of Event Log (EventsTimelineTreeView), the node is not aggregate and this will only hold 1 event, the same that's in this.event
+   */
+  events: Types.Events.Event[];
   parent!: Node|null;
   groupId: string;
   isGroupNodeInternal: boolean;
   depth: number;
 
-  constructor(id: string|symbol, event: Types.Events.Event|null) {
+  constructor(id: string|symbol, event: Types.Events.Event) {
     this.totalTime = 0;
     this.selfTime = 0;
     this.id = id;
     this.event = event;
+    this.events = [event];
 
     this.groupId = '';
     this.isGroupNodeInternal = false;
@@ -67,7 +73,7 @@ export class TopDownNode extends Node {
   childrenInternal: ChildrenCache|null;
   override parent: TopDownNode|null;
 
-  constructor(id: string|symbol, event: Types.Events.Event|null, parent: TopDownNode|null) {
+  constructor(id: string|symbol, event: Types.Events.Event, parent: TopDownNode|null) {
     super(id, event);
     this.root = parent && parent.root;
     this.hasChildrenInternal = false;
@@ -180,6 +186,8 @@ export class TopDownNode extends Node {
         node = new TopDownNode(id, e, self);
         node.groupId = groupId;
         children.set(id, node);
+      } else {
+        node.events.push(e);
       }
       node.selfTime += duration;
       node.totalTime += duration;
@@ -238,8 +246,6 @@ export class TopDownNode extends Node {
 
 export class TopDownRootNode extends TopDownNode {
   readonly filter: (e: Types.Events.Event) => boolean;
-  /** This is all events passed in to create the tree, and it's very likely that it included events outside of the passed startTime/endTime as that filtering is done in `Helpers.Trace.forEachEvent` */
-  readonly events: Types.Events.Event[];
   readonly startTime: Types.Timing.MilliSeconds;
   readonly endTime: Types.Timing.MilliSeconds;
   eventGroupIdCallback: ((arg0: Types.Events.Event) => string)|null|undefined;
@@ -253,7 +259,8 @@ export class TopDownRootNode extends TopDownNode {
       events: Types.Events.Event[], filters: TraceFilter[], startTime: Types.Timing.MilliSeconds,
       endTime: Types.Timing.MilliSeconds, doNotAggregate?: boolean,
       eventGroupIdCallback?: ((arg0: Types.Events.Event) => string)|null, includeInstantEvents?: boolean) {
-    super('', null, null);
+    super('', events[0], null);
+    this.event = events[0];
     this.root = this;
     this.events = events;
     this.filter = (e: Types.Events.Event): boolean => filters.every(f => f.accept(e));
@@ -281,14 +288,13 @@ export class TopDownRootNode extends TopDownNode {
     }
     const groupNodes = new Map<string, GroupNode>();
     for (const node of flatNodes.values()) {
-      if (!node.event) {
-        continue;
-      }
       const groupId = this.eventGroupIdCallback(node.event);
       let groupNode = groupNodes.get(groupId);
       if (!groupNode) {
-        groupNode = new GroupNode(groupId, this, node.event);
+        groupNode = new GroupNode(groupId, this, node.events);
         groupNodes.set(groupId, groupNode);
+      } else {
+        groupNode.events.push(...node.events);
       }
       groupNode.addChild(node as BottomUpNode, node.selfTime, node.totalTime);
     }
@@ -303,7 +309,6 @@ export class TopDownRootNode extends TopDownNode {
 
 export class BottomUpRootNode extends Node {
   private childrenInternal: ChildrenCache|null;
-  readonly events: Types.Events.Event[];
   private textFilter: TraceFilter;
   readonly filter: (e: Types.Events.Event) => boolean;
   readonly startTime: Types.Timing.MilliSeconds;
@@ -315,7 +320,7 @@ export class BottomUpRootNode extends Node {
       events: Types.Events.Event[], textFilter: TraceFilter, filters: TraceFilter[],
       startTime: Types.Timing.MilliSeconds, endTime: Types.Timing.MilliSeconds,
       eventGroupIdCallback: ((arg0: Types.Events.Event) => string)|null) {
-    super('', null);
+    super('', events[0]);
     this.childrenInternal = null;
     this.events = events;
     this.textFilter = textFilter;
@@ -388,6 +393,8 @@ export class BottomUpRootNode extends Node {
       if (!node) {
         node = new BottomUpNode(root, id, event, false, root);
         nodeById.set(id, node);
+      } else {
+        node.events.push(event);
       }
       node.selfTime += selfTimeStack.pop() || 0;
       if (firstNodeStack.pop()) {
@@ -415,14 +422,13 @@ export class BottomUpRootNode extends Node {
     }
     const groupNodes = new Map<string, GroupNode>();
     for (const node of flatNodes.values()) {
-      if (!node.event) {
-        continue;
-      }
       const groupId = this.eventGroupIdCallback(node.event);
       let groupNode = groupNodes.get(groupId);
       if (!groupNode) {
-        groupNode = new GroupNode(groupId, this, node.event);
+        groupNode = new GroupNode(groupId, this, node.events);
         groupNodes.set(groupId, groupNode);
+      } else {
+        groupNode.events.push(...node.events);
       }
       groupNode.addChild(node as BottomUpNode, node.selfTime, node.selfTime);
     }
@@ -433,9 +439,11 @@ export class BottomUpRootNode extends Node {
 export class GroupNode extends Node {
   private readonly childrenInternal: ChildrenCache;
   override isGroupNodeInternal: boolean;
+  override events: Types.Events.Event[];
 
-  constructor(id: string, parent: BottomUpRootNode|TopDownRootNode, event: Types.Events.Event) {
-    super(id, event);
+  constructor(id: string, parent: BottomUpRootNode|TopDownRootNode, events: Types.Events.Event[]) {
+    super(id, events[0]);
+    this.events = events;
     this.childrenInternal = new Map();
     this.parent = parent;
     this.isGroupNodeInternal = true;
@@ -539,6 +547,8 @@ export class BottomUpNode extends Node {
         const hasChildren = eventStack.length > self.depth;
         node = new BottomUpNode(self.root, childId, event, hasChildren, self);
         nodeById.set(childId, node);
+      } else {
+        node.events.push(e);
       }
       const actualEndTime = currentEndTime !== undefined ? Math.min(currentEndTime, endTime) : endTime;
       const totalTime = actualEndTime - Math.max(currentStartTime, lastTimeMarker);

front_end/panels/timeline/TimelineDetailsView.ts

@@ -27,7 +27,7 @@ import {
   type TimelineSelection,
 } from './TimelineSelection.js';
 import {TimelineSelectorStatsView} from './TimelineSelectorStatsView.js';
-import {BottomUpTimelineTreeView, CallTreeTimelineTreeView, type TimelineTreeView} from './TimelineTreeView.js';
+import {BottomUpTimelineTreeView, CallTreeTimelineTreeView, TimelineTreeView} from './TimelineTreeView.js';
 import {TimelineDetailsContentHelper, TimelineUIUtils} from './TimelineUIUtils.js';
 
 const UIStrings = {
@@ -68,7 +68,8 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class TimelineDetailsView extends UI.Widget.VBox {
+export class TimelineDetailsView extends
+    Common.ObjectWrapper.eventMixin<TimelineTreeView.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
   private readonly detailsLinkifier: Components.Linkifier.Linkifier;
   private tabbedPane: UI.TabbedPane.TabbedPane;
   private readonly defaultDetailsWidget: UI.Widget.VBox;
@@ -126,6 +127,12 @@ export class TimelineDetailsView extends UI.Widget.VBox {
     this.appendTab(Tab.EventLog, i18nString(UIStrings.eventLog), eventsView);
     this.rangeDetailViews.set(Tab.EventLog, eventsView);
 
+    this.rangeDetailViews.values().forEach(view => {
+      view.addEventListener(
+          TimelineTreeView.Events.TREE_ROW_HOVERED,
+          node => this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, node.data));
+    });
+
     this.#networkRequestDetails =
         new TimelineComponents.NetworkRequestDetails.NetworkRequestDetails(this.detailsLinkifier);
 
@@ -153,6 +160,12 @@ export class TimelineDetailsView extends UI.Widget.VBox {
     return this.defaultDetailsContentElement;
   }
 
+  revealEventInTreeView(event: Trace.Types.Events.Event|null): void {
+    if (this.tabbedPane.visibleView instanceof TimelineTreeView) {
+      this.tabbedPane.visibleView.highlightEventInTree(event);
+    }
+  }
+
   async #onTraceBoundsChange(event: TraceBounds.TraceBounds.StateChangedEvent): Promise<void> {
     if (event.updateType === 'MINIMAP_BOUNDS') {
       // If new minimap bounds are set, we might need to update the selected entry summary because

front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -776,6 +776,8 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
         additionalContent.push(...popoverInfo.additionalElements);
       }
 
+      this.dispatchEventToListeners(Events.FLAME_CHART_ITEM_HOVERED, event);
+
     } else if (entryType === EntryType.FRAME) {
       const frame = (this.entryData[entryIndex] as Trace.Types.Events.LegacyTimelineFrame);
       time =
@@ -790,6 +792,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
         title = i18nString(UIStrings.frame);
       }
     } else {
+      this.dispatchEventToListeners(Events.FLAME_CHART_ITEM_HOVERED, null);
       return null;
     }
 
@@ -913,12 +916,12 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
   private drawFrame(
       entryIndex: number, context: CanvasRenderingContext2D, barX: number, barY: number, barWidth: number,
-      barHeight: number): void {
+      barHeight: number, transformColor: (color: string) => string): void {
     const hPadding = 1;
     const frame = this.entryData[entryIndex] as Trace.Types.Events.LegacyTimelineFrame;
     barX += hPadding;
     barWidth -= 2 * hPadding;
-    context.fillStyle = this.entryColor(entryIndex);
+    context.fillStyle = transformColor(this.entryColor(entryIndex));
 
     if (frame.dropped) {
       if (frame.isPartial) {
@@ -973,11 +976,12 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
   decorateEntry(
       entryIndex: number, context: CanvasRenderingContext2D, text: string|null, barX: number, barY: number,
-      barWidth: number, barHeight: number, unclippedBarX: number, timeToPixelRatio: number): boolean {
+      barWidth: number, barHeight: number, unclippedBarX: number, timeToPixelRatio: number,
+      transformColor: (color: string) => string): boolean {
     const entryType = this.#entryTypeForIndex(entryIndex);
 
     if (entryType === EntryType.FRAME) {
-      this.drawFrame(entryIndex, context, barX, barY, barWidth, barHeight);
+      this.drawFrame(entryIndex, context, barX, barY, barWidth, barHeight, transformColor);
       return true;
     }
 
@@ -1317,10 +1321,12 @@ export const InstantEventVisibleDurationMs = Trace.Types.Timing.MilliSeconds(0.0
 
 export const enum Events {
   DATA_CHANGED = 'DataChanged',
+  FLAME_CHART_ITEM_HOVERED = 'FlameChartItemHovered',
 }
 
 export type EventTypes = {
   [Events.DATA_CHANGED]: void,
+  [Events.FLAME_CHART_ITEM_HOVERED]: Trace.Types.Events.Event|null,
 };
 
 // an entry is a trace event, they are classified into "entry types"

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -39,7 +39,7 @@ import {
   selectionIsRange,
   type TimelineSelection,
 } from './TimelineSelection.js';
-import {AggregatedTimelineTreeView} from './TimelineTreeView.js';
+import {AggregatedTimelineTreeView, TimelineTreeView} from './TimelineTreeView.js';
 import type {TimelineMarkerStyle} from './TimelineUIUtils.js';
 
 const UIStrings = {
@@ -53,8 +53,9 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineFlameChartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.FlameChart.FlameChartDelegate,
-                                                                      UI.SearchableView.Searchable {
+export class TimelineFlameChartView extends
+    Common.ObjectWrapper.eventMixin<TimelineTreeView.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+        implements PerfUI.FlameChart.FlameChartDelegate, UI.SearchableView.Searchable {
   private readonly delegate: TimelineModeViewDelegate;
   /**
    * Tracks the indexes of matched entries when the user searches the panel.
@@ -165,6 +166,10 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.mainDataProvider = new TimelineFlameChartDataProvider();
     this.mainDataProvider.addEventListener(
         TimelineFlameChartDataProviderEvents.DATA_CHANGED, () => this.mainFlameChart.scheduleUpdate());
+    this.mainDataProvider.addEventListener(
+        TimelineFlameChartDataProviderEvents.FLAME_CHART_ITEM_HOVERED,
+        e => this.detailsView.revealEventInTreeView(e.data));
+
     this.mainFlameChart = new PerfUI.FlameChart.FlameChart(this.mainDataProvider, this, {
       groupExpansionSetting: mainViewGroupExpansionSetting,
       // The TimelineOverlays are used for selected elements
@@ -312,6 +317,19 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
           PerfUI.FlameChart.Events.ENTRIES_LINK_ANNOTATION_CREATED, this.#onNetworkEntriesLinkAnnotationCreated, this);
     }
 
+    this.detailsView.addEventListener(TimelineTreeView.Events.TREE_ROW_HOVERED, node => {
+      if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS)) {
+        return;
+      }
+      const events = node?.data?.events;
+      if (events) {
+        this.#dimInsightRelatedEvents(events);
+      } else {
+        this.mainFlameChart.disableDimming();
+        this.networkFlameChart.disableDimming();
+      }
+    });
+
     /**
      * NOTE: ENTRY_SELECTED, ENTRY_INVOKED and ENTRY_HOVERED are not always super obvious:
      * ENTRY_SELECTED: is KEYBOARD ONLY selection of events (e.g. navigating through the flamechart with your arrow keys)
@@ -355,8 +373,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
 
   #dimInsightRelatedEvents(relatedEvents: Trace.Types.Events.Event[]): void {
     // Dim all events except those related to the active insight.
-    const relevantMainEvents = relatedEvents.map(event => this.mainDataProvider.indexForEvent(event) ?? -1);
-    const relevantNetworkEvents = relatedEvents.map(event => this.networkDataProvider.indexForEvent(event) ?? -1);
+    const relatedMainIndices = relatedEvents.map(event => this.mainDataProvider.indexForEvent(event) ?? -1);
+    const relatedNetworkIndices = relatedEvents.map(event => this.networkDataProvider.indexForEvent(event) ?? -1);
 
     // Further, overlays defining a trace bounds do not dim an event that falls within those bounds.
     for (const overlay of this.#currentInsightOverlays) {
@@ -382,15 +400,15 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
       if (overlayEvent) {
         if (this.mainDataProvider.indexForEvent(overlayEvent) !== null) {
           provider = this.mainDataProvider;
-          relevantEvents = relevantMainEvents;
+          relevantEvents = relatedMainIndices;
         } else if (this.networkDataProvider.indexForEvent(overlayEvent) !== null) {
           provider = this.networkDataProvider;
-          relevantEvents = relevantNetworkEvents;
+          relevantEvents = relatedNetworkIndices;
         }
       } else if (overlay.type === 'TIMESPAN_BREAKDOWN') {
         // For this overlay type, if there is no associated event it is rendered on mainFlameChart.
         provider = this.mainDataProvider;
-        relevantEvents = relevantMainEvents;
+        relevantEvents = relatedMainIndices;
       }
 
       if (!provider || !relevantEvents) {
@@ -399,8 +417,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
 
       relevantEvents.push(...provider.search(bounds).map(r => r.index));
     }
-    this.mainFlameChart.enableDimming(relevantMainEvents);
-    this.networkFlameChart.enableDimming(relevantNetworkEvents);
+    this.mainFlameChart.enableDimming(relatedMainIndices);
+    this.networkFlameChart.enableDimming(relatedNetworkIndices);
   }
 
   setOverlays(overlays: Overlays.Overlays.TimelineOverlay[], options: Overlays.Overlays.TimelineOverlaySetOptions):