[RPP] Hover/click on 3P table and 3P grouped AggregatedTimelineTreeView

includes `SyntheticNetworkRequests`

Because tree views only consider events on the Main thread, we need to
make an exception for when considering 3P (as this includes network requests). So on hover/click we should include network requests for
completion using the entity mapper.

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

Bug: 394651390
Change-Id: I5d127a6dce58bd54a7fbbfeabd4401753b8f3bf8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6374483
Commit-Queue: Adriana Ixba <aixba@chromium.org>
Reviewed-by: Paul Irish <paulirish@chromium.org>

Author: Adriana Ixba

front_end/panels/timeline/ThirdPartyTreeView.ts

@@ -173,6 +173,40 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
     }
   }
 
+  override onHover(node: Trace.Extras.TraceTree.Node|null): void {
+    if (!node) {
+      this.dispatchEventToListeners(TimelineTreeView.TimelineTreeView.Events.TREE_ROW_HOVERED, {node: null});
+      return;
+    }
+    this.#getEventsForEventDispatch(node);
+    const events = this.#getEventsForEventDispatch(node);
+    this.dispatchEventToListeners(
+        TimelineTreeView.TimelineTreeView.Events.TREE_ROW_HOVERED,
+        {node, events: events && events.length > 0 ? events : undefined});
+  }
+
+  override onClick(node: Trace.Extras.TraceTree.Node|null): void {
+    if (!node) {
+      this.dispatchEventToListeners(TimelineTreeView.TimelineTreeView.Events.TREE_ROW_CLICKED, {node: null});
+      return;
+    }
+    const events = this.#getEventsForEventDispatch(node);
+    this.dispatchEventToListeners(
+        TimelineTreeView.TimelineTreeView.Events.TREE_ROW_CLICKED,
+        {node, events: events && events.length > 0 ? events : undefined});
+  }
+
+  // For ThirdPartyTree, we should include everything in our entity mapper for full coverage.
+  #getEventsForEventDispatch(node: Trace.Extras.TraceTree.Node): Trace.Types.Events.Event[]|null {
+    const mapper = this.entityMapper();
+    if (!mapper) {
+      return null;
+    }
+
+    const entity = mapper.entityForEvent(node.event);
+    return entity ? mapper.eventsForEntity(entity) ?? [] : [];
+  }
+
   displayInfoForGroupNode(node: Trace.Extras.TraceTree.Node): {
     name: string,
     color: string,

front_end/panels/timeline/TimelineDetailsView.ts

@@ -145,20 +145,22 @@ export class TimelineDetailsPane extends
       if (view instanceof AggregatedTimelineTreeView) {
         view.stackView.addEventListener(
             TimelineStackView.Events.TREE_ROW_HOVERED,
-            node => this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, node.data));
+            node => this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, {node: node.data}));
       }
     });
     this.#thirdPartyTree.addEventListener(TimelineTreeView.Events.TREE_ROW_HOVERED, node => {
       // Re-dispatch through 3P event to get 3P dimmer.
-      this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, node.data);
+      this.dispatchEventToListeners(
+          TimelineTreeView.Events.TREE_ROW_HOVERED, {node: node.data.node, events: node.data.events ?? undefined});
     });
 
     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.dispatchEventToListeners(
+          TimelineTreeView.Events.TREE_ROW_CLICKED, {node: node.data.node, events: node.data.events ?? undefined});
     });
 
     this.#networkRequestDetails =

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -374,17 +374,25 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       this.#overlays.toggleAllOverlaysDisplayed(!event.data);
     });
 
-    this.detailsView.addEventListener(TimelineTreeView.Events.TREE_ROW_HOVERED, node => {
+    this.detailsView.addEventListener(TimelineTreeView.Events.TREE_ROW_HOVERED, e => {
       if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS)) {
         return;
       }
 
-      const events = node?.data?.events ?? null;
+      if (e.data.events) {
+        this.#updateFlameChartDimmerWithEvents(this.#treeRowHoverDimmer, e.data.events);
+        return;
+      }
+      const events = e?.data?.node?.events ?? null;
       this.#updateFlameChartDimmerWithEvents(this.#treeRowHoverDimmer, events);
     });
 
-    this.detailsView.addEventListener(TimelineTreeView.Events.TREE_ROW_CLICKED, node => {
-      const events = node?.data?.events ?? null;
+    this.detailsView.addEventListener(TimelineTreeView.Events.TREE_ROW_CLICKED, e => {
+      if (e.data.events) {
+        this.#updateFlameChartDimmerWithEvents(this.#treeRowClickDimmer, e.data.events);
+        return;
+      }
+      const events = e?.data?.node?.events ?? null;
       this.#updateFlameChartDimmerWithEvents(this.#treeRowClickDimmer, events);
     });
 

front_end/panels/timeline/TimelineTreeView.ts

@@ -266,7 +266,7 @@ export class TimelineTreeView extends
     this.dataGrid.addEventListener(DataGrid.DataGrid.Events.SORTING_CHANGED, this.sortingChanged, this);
     this.dataGrid.element.addEventListener('mousemove', this.onMouseMove.bind(this), true);
     this.dataGrid.element.addEventListener(
-        'mouseleave', () => this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, null));
+        'mouseleave', () => this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, {node: null}));
     this.dataGrid.addEventListener(DataGrid.DataGrid.Events.OPENED_NODE, this.onGridNodeOpened, this);
     this.dataGrid.setResizeMethod(DataGrid.DataGrid.ResizeMethod.LAST);
     this.dataGrid.setRowContextMenuCallback(this.onContextMenu.bind(this));
@@ -585,7 +585,11 @@ export class TimelineTreeView extends
   }
 
   onHover(node: Trace.Extras.TraceTree.Node|null): void {
-    this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, node);
+    this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, {node});
+  }
+
+  onClick(node: Trace.Extras.TraceTree.Node|null): void {
+    this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_CLICKED, {node});
   }
 
   override wasShown(): void {
@@ -603,13 +607,14 @@ 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.onClick((event.data as GridNode).profileNode);
     this.onHover((event.data as GridNode).profileNode);
   }
 
   onGridNodeOpened(): void {
     const gridNode = this.dataGrid.selectedNode as TreeGridNode;
-    this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, gridNode.profileNode);
+    // Use tree's hover method in case of unique hover experiences (like ThirdPartyTree).
+    this.onHover(gridNode.profileNode);
     this.updateDetailsForSelection();
   }
 
@@ -689,9 +694,9 @@ export namespace TimelineTreeView {
   }
 
   export interface EventTypes {
-    [Events.TREE_ROW_HOVERED]: Trace.Extras.TraceTree.Node|null;
+    [Events.TREE_ROW_HOVERED]: {node: Trace.Extras.TraceTree.Node|null, events?: Trace.Types.Events.Event[]};
     [Events.BOTTOM_UP_BUTTON_CLICKED]: Trace.Extras.TraceTree.Node|null;
-    [Events.TREE_ROW_CLICKED]: Trace.Extras.TraceTree.Node|null;
+    [Events.TREE_ROW_CLICKED]: {node: Trace.Extras.TraceTree.Node|null, events?: Trace.Types.Events.Event[]};
   }
 }
 
@@ -866,7 +871,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.TREE_ROW_HOVERED, null);
+    this.treeView.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, {node: null});
     this.treeView.dispatchEventToListeners(TimelineTreeView.Events.BOTTOM_UP_BUTTON_CLICKED, this.profileNode);
   }
 }
@@ -1147,6 +1152,37 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
 
   private static readonly extensionInternalPrefix = 'extensions::';
   private static readonly v8NativePrefix = 'native ';
+
+  override onHover(node: Trace.Extras.TraceTree.Node|null): void {
+    if (node !== null && this.groupBySetting.get() === AggregatedTimelineTreeView.GroupBy.ThirdParties) {
+      const events = this.#getThirdPartyEventsForNode(node);
+      this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, {node, events});
+      return;
+    }
+    this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, {node});
+  }
+
+  override onClick(node: Trace.Extras.TraceTree.Node|null): void {
+    if (node !== null && this.groupBySetting.get() === AggregatedTimelineTreeView.GroupBy.ThirdParties) {
+      const events = this.#getThirdPartyEventsForNode(node);
+      this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_CLICKED, {node, events});
+      return;
+    }
+    this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_CLICKED, {node});
+  }
+
+  #getThirdPartyEventsForNode(node: Trace.Extras.TraceTree.Node): Trace.Types.Events.Event[]|undefined {
+    if (!node.event) {
+      return;
+    }
+    const entity = this.entityMapper()?.entityForEvent(node.event);
+    // Should be [unattributed]. Just use the node's events.
+    if (!entity) {
+      return node.events;
+    }
+    const events = this.entityMapper()?.eventsForEntity(entity);
+    return events;
+  }
 }
 export namespace AggregatedTimelineTreeView {
   export enum GroupBy {