RPP: Ensure heaviest stack shows on all selections

Also allow hovering in heaviest stack to trigger flamechart dimming. Makes heaviest stack visually make sense! Change-Id: I2ff2ba33e2634a96ed20ad7202c721f6668a2cd1 Bug: none Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6238058 Auto-Submit: Paul Irish <[email protected]> Reviewed-by: Connor Clark <[email protected]> Commit-Queue: Connor Clark <[email protected]>
ChromeDevTools · Feb 21, 2025 · 3173332 · 3173332
1 parent 6ec9229
commit 3173332
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/front_end/panels/timeline/TimelineDetailsView.ts b/front_end/panels/timeline/TimelineDetailsView.ts
@@ -31,6 +31,7 @@ import {
   AggregatedTimelineTreeView,
   BottomUpTimelineTreeView,
   CallTreeTimelineTreeView,
+  TimelineStackView,
   TimelineTreeView
 } from './TimelineTreeView.js';
 import {TimelineUIUtils} from './TimelineUIUtils.js';
@@ -133,6 +134,13 @@ export class TimelineDetailsPane extends
       view.addEventListener(
           TimelineTreeView.Events.TREE_ROW_HOVERED,
           node => this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, node.data));
+
+      // If there's a heaviest stack sidebar view, also listen to hover within it.
+      if (view instanceof AggregatedTimelineTreeView) {
+        view.stackView.addEventListener(
+            TimelineStackView.Events.TREE_ROW_HOVERED,
+            node => this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, node.data));
+      }
     });
     this.#thirdPartyTree.addEventListener(TimelineTreeView.Events.THIRD_PARTY_ROW_HOVERED, node => {
       this.dispatchEventToListeners(TimelineTreeView.Events.THIRD_PARTY_ROW_HOVERED, node.data);

diff --git a/front_end/panels/timeline/TimelineTreeView.ts b/front_end/panels/timeline/TimelineTreeView.ts
@@ -555,17 +555,17 @@ export class TimelineTreeView extends
     this.updateDetailsForSelection();
   }
 
-  private updateDetailsForSelection(): void {
+  protected updateDetailsForSelection(): void {
     const selectedNode = this.dataGrid.selectedNode ? (this.dataGrid.selectedNode as TreeGridNode).profileNode : null;
     if (selectedNode === this.lastSelectedNodeInternal) {
       return;
     }
-    this.lastSelectedNodeInternal = selectedNode;
     if (this.splitWidget.showMode() === UI.SplitWidget.ShowMode.ONLY_MAIN) {
       return;
     }
     this.detailsView.detachChildWidgets();
     this.detailsView.element.removeChildren();
+    this.lastSelectedNodeInternal = selectedNode;
     if (selectedNode && this.showDetailsForNode(selectedNode)) {
       return;
     }
@@ -596,6 +596,7 @@ export class TimelineTreeView extends
   onGridNodeOpened(): void {
     const node = this.dataGrid.selectedNode as TreeGridNode;
     this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, node.profileNode);
+    this.updateDetailsForSelection();
   }
 
   private onContextMenu(
@@ -887,7 +888,7 @@ const treeNodeToGridNode = new WeakMap<Trace.Extras.TraceTree.Node, TreeGridNode
 
 export class AggregatedTimelineTreeView extends TimelineTreeView {
   protected readonly groupBySetting: Common.Settings.Setting<AggregatedTimelineTreeView.GroupBy>;
-  private readonly stackView: TimelineStackView;
+  readonly stackView: TimelineStackView;
   private executionContextNamesByOrigin = new Map<Platform.DevToolsPath.UrlString, string>();
 
   constructor() {
@@ -911,6 +912,7 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
     if (rootNode.children.length) {
       rootNode.children[0].select(/* suppressSelectedEvent */ true);
     }
+    this.updateDetailsForSelection();
   }
 
   private updateExtensionResolver(): void {
@@ -1186,8 +1188,15 @@ export class TimelineStackView extends
       deleteCallback: undefined,
       refreshCallback: undefined,
     });
+
     this.dataGrid.setResizeMethod(DataGrid.DataGrid.ResizeMethod.LAST);
     this.dataGrid.addEventListener(DataGrid.DataGrid.Events.SELECTED_NODE, this.onSelectionChanged, this);
+
+    // Hover dim behavior within stackview sidebar
+    this.dataGrid.element.addEventListener('mouseenter', this.onMouseMove.bind(this), true);
+    this.dataGrid.element.addEventListener(
+        'mouseleave', () => this.dispatchEventToListeners(TimelineStackView.Events.TREE_ROW_HOVERED, null));
+
     this.dataGrid.asWidget().show(this.element);
   }
 
@@ -1208,6 +1217,14 @@ export class TimelineStackView extends
     }
   }
 
+  onMouseMove(event: Event): void {
+    const gridNode = event.target && (event.target instanceof Node) ?
+        (this.dataGrid.dataGridNodeFromNode((event.target as Node))) :
+        null;
+    const profileNode = (gridNode as TreeGridNode)?.profileNode;
+    this.dispatchEventToListeners(TimelineStackView.Events.TREE_ROW_HOVERED, profileNode);
+  }
+
   selectedTreeNode(): Trace.Extras.TraceTree.Node|null {
     const selectedNode = this.dataGrid.selectedNode;
     return selectedNode && (selectedNode as GridNode).profileNode;
@@ -1221,9 +1238,11 @@ export class TimelineStackView extends
 export namespace TimelineStackView {
   export const enum Events {
     SELECTION_CHANGED = 'SelectionChanged',
+    TREE_ROW_HOVERED = 'TreeRowHovered',
   }
 
   export interface EventTypes {
+    [Events.TREE_ROW_HOVERED]: Trace.Extras.TraceTree.Node|null;
     [Events.SELECTION_CHANGED]: void;
   }
 }