RPP: dim on keyboard navigation

This CL adds the dimming for the selected row in the 1/3P entity table
to act just as it does when the user hovers with the mouse. This means
that keyboard users navigating the row will see the effect without
having to use a mouse.

Fixed: 392667080
Change-Id: Ieacb4da337e6c255c313eb3d927bf932a69864e9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6219151
Reviewed-by: Andres Olivares <[email protected]>
Commit-Queue: Andres Olivares <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>

Author: jackfranklin

front_end/panels/timeline/ThirdPartyTreeView.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
@@ -54,6 +55,14 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
     this.dataGrid.expandNodesWhenArrowing = false;
   }
 
+  override wasShown(): void {
+    this.dataGrid.addEventListener(DataGrid.DataGrid.Events.SELECTED_NODE, this.#onDataGridSelectionChange, this);
+  }
+
+  override childWasDetached(_widget: UI.Widget.Widget): void {
+    this.dataGrid.removeEventListener(DataGrid.DataGrid.Events.SELECTED_NODE, this.#onDataGridSelectionChange);
+  }
+
   override buildTree(): Trace.Extras.TraceTree.Node {
     const parsedTrace = this.parsedTrace();
     const entityMapper = this.entityMapper();
@@ -171,6 +180,16 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
     }
   }
 
+  /**
+   * This event fires when the user selects a row in the grid, either by
+   * clicking or by using the arrow keys. We want to have the same effect as
+   * when the user hover overs a row.
+   */
+  #onDataGridSelectionChange(
+      event: Common.EventTarget.EventTargetEvent<DataGrid.DataGrid.DataGridNode<TimelineTreeView.GridNode>>): void {
+    this.onHover((event.data as TimelineTreeView.GridNode).profileNode);
+  }
+
   override onHover(node: Trace.Extras.TraceTree.Node|null): void {
     const entityMappings = this.entityMapper();
     if (!entityMappings || !node?.event) {