[RPP] Persistent tree row dimming on click

https://screencast.googleplex.com/cast/NTU4OTg4Njk3ODQ5MDM2OHxkOWUwYmJkZC0yOQ

Bug: 398952757
Change-Id: I09e3e950b8659fcd78979037628a6cfcdd7b6883
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6306287
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Adriana Ixba <[email protected]>

Author: Adriana Ixba

front_end/panels/timeline/TimelineDetailsView.ts

@@ -136,6 +136,11 @@ export class TimelineDetailsPane extends
           TimelineTreeView.Events.TREE_ROW_HOVERED,
           node => this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, node.data));
 
+      view.addEventListener(TimelineTreeView.Events.TREE_ROW_CLICKED, node => {
+        // Re-dispatch to reach the tree row dimmer.
+        this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_CLICKED, node.data);
+      });
+
       // If there's a heaviest stack sidebar view, also listen to hover within it.
       if (view instanceof AggregatedTimelineTreeView) {
         view.stackView.addEventListener(
@@ -144,13 +149,17 @@ export class TimelineDetailsPane extends
       }
     });
     this.#thirdPartyTree.addEventListener(TimelineTreeView.Events.TREE_ROW_HOVERED, node => {
-      // Redispatch through 3P event to get 3P dimmer.
-      this.dispatchEventToListeners(TimelineTreeView.Events.THIRD_PARTY_ROW_HOVERED, node.data);
+      // Re-dispatch through 3P event to get 3P dimmer.
+      this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, node.data);
     });
 
     this.#thirdPartyTree.addEventListener(TimelineTreeView.Events.BOTTOM_UP_BUTTON_CLICKED, node => {
       this.selectTab(Tab.BottomUp, node.data, AggregatedTimelineTreeView.GroupBy.ThirdParties);
     });
+    this.#thirdPartyTree.addEventListener(TimelineTreeView.Events.TREE_ROW_CLICKED, node => {
+      // Re-dispatch through 3P event to get 3P dimmer.
+      this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_CLICKED, node.data);
+    });
 
     this.#networkRequestDetails =
         new TimelineComponents.NetworkRequestDetails.NetworkRequestDetails(this.detailsLinkifier);

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -175,7 +175,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
   #flameChartDimmers: FlameChartDimmer[] = [];
   #searchDimmer = this.#registerFlameChartDimmer({inclusive: false, outline: true});
   #treeRowHoverDimmer = this.#registerFlameChartDimmer({inclusive: false, outline: true});
-  #thirdPartyRowHoverDimmer = this.#registerFlameChartDimmer({inclusive: false, outline: false});
+  #treeRowClickDimmer = this.#registerFlameChartDimmer({inclusive: false, outline: false});
   #activeInsightDimmer = this.#registerFlameChartDimmer({inclusive: false, outline: true});
   #thirdPartyCheckboxDimmer = this.#registerFlameChartDimmer({inclusive: true, outline: false});
 
@@ -383,9 +383,9 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       this.#updateFlameChartDimmerWithEvents(this.#treeRowHoverDimmer, events);
     });
 
-    this.detailsView.addEventListener(TimelineTreeView.Events.THIRD_PARTY_ROW_HOVERED, node => {
+    this.detailsView.addEventListener(TimelineTreeView.Events.TREE_ROW_CLICKED, node => {
       const events = node?.data?.events ?? null;
-      this.#updateFlameChartDimmerWithEvents(this.#thirdPartyRowHoverDimmer, events);
+      this.#updateFlameChartDimmerWithEvents(this.#treeRowClickDimmer, events);
     });
 
     /**
@@ -1384,6 +1384,12 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       this.#timeRangeSelectionAnnotation = null;
     }
 
+    // If we don't have a selection, update the tree view row click dimmer events to null.
+    // This is a user disabling the persistent hovering from a row click, ensure the events are cleared.
+    if ((selection === null)) {
+      this.#updateFlameChartDimmerWithEvents(this.#treeRowClickDimmer, null);
+    }
+
     // Check if this is an entry from main flame chart or network flame chart.
     // If so build the initiators and select the entry.
     // Otherwise clear the initiators and the selection.

front_end/panels/timeline/TimelineTreeView.ts

@@ -603,6 +603,7 @@ export class TimelineTreeView extends
    */
   #onDataGridSelectionChange(event: Common.EventTarget.EventTargetEvent<DataGrid.DataGrid.DataGridNode<GridNode>>):
       void {
+    this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_CLICKED, (event.data as GridNode).profileNode);
     this.onHover((event.data as GridNode).profileNode);
   }
 
@@ -683,14 +684,14 @@ export class TimelineTreeView extends
 export namespace TimelineTreeView {
   export const enum Events {
     TREE_ROW_HOVERED = 'TreeRowHovered',
-    THIRD_PARTY_ROW_HOVERED = 'ThirdPartyRowHovered',
     BOTTOM_UP_BUTTON_CLICKED = 'BottomUpButtonClicked',
+    TREE_ROW_CLICKED = 'TreeRowClicked',
   }
 
   export interface EventTypes {
     [Events.TREE_ROW_HOVERED]: Trace.Extras.TraceTree.Node|null;
-    [Events.THIRD_PARTY_ROW_HOVERED]: Trace.Extras.TraceTree.Node|null;
     [Events.BOTTOM_UP_BUTTON_CLICKED]: Trace.Extras.TraceTree.Node|null;
+    [Events.TREE_ROW_CLICKED]: Trace.Extras.TraceTree.Node|null;
   }
 }
 
@@ -865,7 +866,7 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
   #bottomUpButtonClicked(): void {
     // We should also trigger an event to "unhover" the 3P tree row. Since this isn't
     // triggered when clicking the bottom up button.
-    this.treeView.dispatchEventToListeners(TimelineTreeView.Events.THIRD_PARTY_ROW_HOVERED, null);
+    this.treeView.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, null);
     this.treeView.dispatchEventToListeners(TimelineTreeView.Events.BOTTOM_UP_BUTTON_CLICKED, this.profileNode);
   }
 }