[RPP] Create Bottom-up tree button on 3P table hover

Bottom up tree button on 3P table clicks and directs to a filtered
bottom up tree. The tree is "GroupBy" Third Party and selects
and expands the related 3P

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

Bug:None
Change-Id: I3b905f6e72749ebd7ab0e3eb401c4b0879392863
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6171828
Auto-Submit: Adriana Ixba <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>

Author: Adriana Ixba

config/gni/devtools_grd_files.gni

@@ -20,6 +20,7 @@ grd_files_release_sources = [
   "front_end/Images/accelerometer-left.png",
   "front_end/Images/accelerometer-right.png",
   "front_end/Images/accelerometer-top.png",
+  "front_end/Images/account-tree.svg",
   "front_end/Images/align-content-center.svg",
   "front_end/Images/align-content-end.svg",
   "front_end/Images/align-content-space-around.svg",

config/gni/devtools_image_files.gni

@@ -26,6 +26,7 @@ devtools_svg_sources = [
   "3d-rotate.svg",
   "accelerometer-back.svg",
   "accelerometer-front.svg",
+  "account-tree.svg",
   "align-content-center.svg",
   "align-content-end.svg",
   "align-content-space-around.svg",

front_end/Images/src/account-tree.svg

@@ -132,6 +132,9 @@ export class TimelineDetailsView extends
       this.dispatchEventToListeners(TimelineTreeView.Events.THIRD_PARTY_ROW_HOVERED, node.data);
     });
 
+    this.#thirdPartyTree.addEventListener(
+        TimelineTreeView.Events.BOTTOM_UP_BUTTON_CLICKED, node => this.#bottomUpClicked(node));
+
     this.#networkRequestDetails =
         new TimelineComponents.NetworkRequestDetails.NetworkRequestDetails(this.detailsLinkifier);
 
@@ -144,6 +147,34 @@ export class TimelineDetailsView extends
     this.lazySelectorStatsView = null;
   }
 
+  #bottomUpClicked(event: Common.EventTarget.EventTargetEvent<Trace.Extras.TraceTree.Node|null>): void {
+    // Select bottom up tree.
+    this.tabbedPane.selectTab(Tab.BottomUp, true, true);
+    if (!(this.tabbedPane.visibleView instanceof BottomUpTimelineTreeView)) {
+      return;
+    }
+    const bottomUp = this.tabbedPane.visibleView;
+    const thirdPartyNodeSelected = event.data;
+    if (!thirdPartyNodeSelected) {
+      return;
+    }
+    // Group by 3P.
+    bottomUp.setGroupBySetting(BottomUpTimelineTreeView.GroupBy.ThirdParties);
+    bottomUp.refreshTree();
+
+    // Look for the matching node in the bottom up tree using selected node event data.
+    const treeNode = bottomUp.eventToTreeNode.get(thirdPartyNodeSelected.event);
+    if (!treeNode) {
+      return;
+    }
+    bottomUp.selectProfileNode(treeNode, true);
+    // Reveal/expand the bottom up tree grid node.
+    const gridNode = bottomUp.dataGridNodeForTreeNode(treeNode);
+    if (gridNode) {
+      gridNode.expand();
+    }
+  }
+
   #createContentWidget(): UI.Widget.VBox {
     const defaultDetailsContentWidget = new UI.Widget.VBox();
     defaultDetailsContentWidget.element.classList.add('timeline-details-view-body');

front_end/panels/timeline/TimelineDetailsView.ts

@@ -1129,6 +1129,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.#selectedGroupName = null;
     Common.EventTarget.removeEventListeners(this.eventListeners);
     this.#selectedEvents = null;
+    this.#entityMapper = new Utils.EntityMapper.EntityMapper(this.#parsedTrace);
     // order is important: |reset| needs to be called after the trace
     // model has been set in the data providers.
     this.mainDataProvider.setModel(this.#parsedTrace);
@@ -1138,9 +1139,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.updateSearchResults(false, false);
     this.refreshMainFlameChart();
     this.#updateFlameCharts();
-    this.#entityMapper = new Utils.EntityMapper.EntityMapper(this.#parsedTrace);
     this.setMarkers(this.#parsedTrace);
-    this.#entityMapper = new Utils.EntityMapper.EntityMapper(this.#parsedTrace);
   }
 
   setInsights(

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -154,7 +154,7 @@ describeWithEnvironment('TimelineTreeView', function() {
       const startTime = Trace.Helpers.Timing.microToMilli(parsedTrace.Meta.traceBounds.min);
       const endTime = Trace.Helpers.Timing.microToMilli(parsedTrace.Meta.traceBounds.max);
       callTreeView.setRange(startTime, endTime);
-      callTreeView.setGroupBySettingForTests(Timeline.TimelineTreeView.AggregatedTimelineTreeView.GroupBy.Category);
+      callTreeView.setGroupBySetting(Timeline.TimelineTreeView.AggregatedTimelineTreeView.GroupBy.Category);
       callTreeView.setModelWithEvents(consoleTimings, parsedTrace);
       const tree = callTreeView.buildTree();
       const treeEntries = tree.children().entries();
@@ -176,7 +176,7 @@ describeWithEnvironment('TimelineTreeView', function() {
       const startTime = Trace.Helpers.Timing.microToMilli(parsedTrace.Meta.traceBounds.min);
       const endTime = Trace.Helpers.Timing.microToMilli(parsedTrace.Meta.traceBounds.max);
       callTreeView.setRange(startTime, endTime);
-      callTreeView.setGroupBySettingForTests(Timeline.TimelineTreeView.AggregatedTimelineTreeView.GroupBy.Category);
+      callTreeView.setGroupBySetting(Timeline.TimelineTreeView.AggregatedTimelineTreeView.GroupBy.Category);
       callTreeView.setModelWithEvents(consoleTimings, parsedTrace);
       const tree = callTreeView.buildTree();
       const treeEntries = tree.children().entries();
@@ -200,7 +200,7 @@ describeWithEnvironment('TimelineTreeView', function() {
       const endTime = Trace.Helpers.Timing.microToMilli(parsedTrace.Meta.traceBounds.max);
 
       callTreeView.setRange(startTime, endTime);
-      callTreeView.setGroupBySettingForTests(Timeline.TimelineTreeView.AggregatedTimelineTreeView.GroupBy.Domain);
+      callTreeView.setGroupBySetting(Timeline.TimelineTreeView.AggregatedTimelineTreeView.GroupBy.Domain);
       callTreeView.setModelWithEvents(parsedTrace.Renderer.allTraceEntries, parsedTrace);
 
       const tree = callTreeView.buildTree();
@@ -225,7 +225,7 @@ describeWithEnvironment('TimelineTreeView', function() {
       const endTime = Trace.Helpers.Timing.microToMilli(parsedTrace.Meta.traceBounds.max);
 
       callTreeView.setRange(startTime, endTime);
-      callTreeView.setGroupBySettingForTests(Timeline.TimelineTreeView.AggregatedTimelineTreeView.GroupBy.ThirdParties);
+      callTreeView.setGroupBySetting(Timeline.TimelineTreeView.AggregatedTimelineTreeView.GroupBy.ThirdParties);
       callTreeView.setModelWithEvents(parsedTrace.Renderer.allTraceEntries, parsedTrace);
 
       const tree = callTreeView.buildTree();
@@ -250,7 +250,7 @@ describeWithEnvironment('TimelineTreeView', function() {
       const endTime = Trace.Helpers.Timing.microToMilli(parsedTrace.Meta.traceBounds.max);
 
       callTreeView.setRange(startTime, endTime);
-      callTreeView.setGroupBySettingForTests(Timeline.TimelineTreeView.AggregatedTimelineTreeView.GroupBy.Frame);
+      callTreeView.setGroupBySetting(Timeline.TimelineTreeView.AggregatedTimelineTreeView.GroupBy.Frame);
       callTreeView.setModelWithEvents(parsedTrace.Renderer.allTraceEntries, parsedTrace);
 
       const tree = callTreeView.buildTree();
@@ -269,7 +269,7 @@ describeWithEnvironment('TimelineTreeView', function() {
       const endTime = Trace.Helpers.Timing.microToMilli(parsedTrace.Meta.traceBounds.max);
 
       callTreeView.setRange(startTime, endTime);
-      callTreeView.setGroupBySettingForTests(Timeline.TimelineTreeView.AggregatedTimelineTreeView.GroupBy.URL);
+      callTreeView.setGroupBySetting(Timeline.TimelineTreeView.AggregatedTimelineTreeView.GroupBy.URL);
       callTreeView.setModelWithEvents(parsedTrace.Renderer.allTraceEntries, parsedTrace);
 
       const tree = callTreeView.buildTree();

front_end/panels/timeline/TimelineTreeView.test.ts

@@ -10,6 +10,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as ThirdPartyWeb from '../../third_party/third-party-web/third-party-web.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -19,7 +20,7 @@ import {ActiveFilters} from './ActiveFilters.js';
 import * as Extensions from './extensions/extensions.js';
 import {Tracker} from './FreshRecording.js';
 import {targetForEvent} from './TargetForEvent.js';
-import type {ThirdPartyTreeViewWidget} from './ThirdPartyTreeView.js';
+import * as ThirdPartyTreeView from './ThirdPartyTreeView.js';
 import {TimelineRegExp} from './TimelineFilters.js';
 import {rangeForSelection, type TimelineSelection} from './TimelineSelection.js';
 import {TimelineUIUtils} from './TimelineUIUtils.js';
@@ -144,6 +145,14 @@ const UIStrings = {
    * @description Text for Match whole word button
    */
   matchWholeWord: 'Match whole word',
+  /**
+   * @description Text for bottom up tree button
+   */
+  bottomUp: 'Bottom-up',
+  /**
+   * @description Text referring to view bottom up tree
+   */
+  viewBottomUp: 'View Bottom-up',
   /**
    * @description Text referring to a 1st party entity
    */
@@ -654,11 +663,13 @@ export namespace TimelineTreeView {
   export const enum Events {
     TREE_ROW_HOVERED = 'TreeRowHovered',
     THIRD_PARTY_ROW_HOVERED = 'ThirdPartyRowHovered',
+    BOTTOM_UP_BUTTON_CLICKED = 'BottomUpButtonClicked',
   }
 
   export interface EventTypes {
     [Events.TREE_ROW_HOVERED]: Trace.Extras.TraceTree.Node|null;
     [Events.THIRD_PARTY_ROW_HOVERED]: Trace.Types.Events.Event[]|null;
+    [Events.BOTTOM_UP_BUTTON_CLICKED]: Trace.Extras.TraceTree.Node|null;
   }
 }
 
@@ -708,8 +719,8 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
       }
 
       // Include badges with the name, if relevant.
-      if (columnId === 'site' && (this.treeView as ThirdPartyTreeViewWidget)) {
-        const thirdPartyTree = (this.treeView as ThirdPartyTreeViewWidget);
+      if (columnId === 'site' && this.treeView instanceof ThirdPartyTreeView.ThirdPartyTreeViewWidget) {
+        const thirdPartyTree = this.treeView;
         let badgeText = '';
 
         if (thirdPartyTree.nodeIsFirstParty(this.profileNode)) {
@@ -753,7 +764,8 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
     let maxTime: number|undefined;
     let event: Trace.Types.Events.Event|null;
     let isSize = false;
-    const thirdPartyView = this.treeView as ThirdPartyTreeViewWidget;
+    let showBottomUpButton = false;
+    const thirdPartyView = this.treeView as ThirdPartyTreeView.ThirdPartyTreeViewWidget;
     switch (columnId) {
       case 'start-time': {
         event = this.profileNode.event;
@@ -769,6 +781,7 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
         value = this.profileNode.selfTime;
         maxTime = this.maxSelfTime;
         showPercents = true;
+        showBottomUpButton = thirdPartyView instanceof ThirdPartyTreeView.ThirdPartyTreeViewWidget;
         break;
       case 'total':
         value = this.profileNode.totalTime;
@@ -804,8 +817,38 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
       cell.createChild('div', 'background-bar-container').createChild('div', 'background-bar').style.width =
           (value * 100 / maxTime).toFixed(1) + '%';
     }
+    // Generate button on hover for 3P self time cell.
+    if (showBottomUpButton) {
+      this.generateBottomUpButton(cell);
+    }
     return cell;
   }
+
+  // Generates bottom up tree hover button and appends it to the provided cell element.
+  private generateBottomUpButton(cell: HTMLElement): void {
+    const buttonContainer = document.createElement('div');
+    buttonContainer.className = 'button-container';
+    cell.classList.add('hover-bottom-up-button');
+
+    const button = new Buttons.Button.Button();
+    button.data = {
+      variant: Buttons.Button.Variant.ICON,
+      iconName: 'account-tree',
+      size: Buttons.Button.Size.SMALL,
+      toggledIconName: i18nString(UIStrings.bottomUp),
+    };
+    UI.ARIAUtils.setLabel(button, i18nString(UIStrings.viewBottomUp));
+    button.addEventListener('click', () => this.#bottomUpButtonClicked());
+    buttonContainer.appendChild(button);
+    UI.Tooltip.Tooltip.install(button, i18nString(UIStrings.bottomUp));
+
+    // Append the button to the last column
+    cell.appendChild(buttonContainer);
+  }
+
+  #bottomUpButtonClicked(): void {
+    this.treeView.dispatchEventToListeners(TimelineTreeView.Events.BOTTOM_UP_BUTTON_CLICKED, this.profileNode);
+  }
 }
 
 export class TreeGridNode extends GridNode {
@@ -852,7 +895,7 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
     this.stackView.addEventListener(TimelineStackView.Events.SELECTION_CHANGED, this.onStackViewSelectionChanged, this);
   }
 
-  setGroupBySettingForTests(groupBy: AggregatedTimelineTreeView.GroupBy): void {
+  setGroupBySetting(groupBy: AggregatedTimelineTreeView.GroupBy): void {
     this.groupBySetting.set(groupBy);
   }
 

front_end/panels/timeline/TimelineTreeView.ts

@@ -74,6 +74,9 @@
   tr .site-column {
     border-left: none;
     border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+    height: auto;
+    min-height: var(--sys-size-12);
+    align-content: center;
   }
 
   .bottom-filler-td,
@@ -83,10 +86,14 @@
 
   th {
     background-color: var(--sys-color-cdt-base-container);
+    font-weight: var(--ref-typeface-weight-medium);
   }
 
-  tr.revealed.selected {
-    background-color: transparent;
+  tr.revealed:hover {
+    .button-container {
+      align-items: center;
+      display: block;
+    }
   }
 }
 
@@ -127,3 +134,14 @@
   overflow: inherit;
   max-width: 60%;
 }
+
+.hover-bottom-up-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.button-container {
+  display: none;
+}