[RPP] Add badge test for 3p table

drive by css adjustment to table: adds borders from the mocks

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

front_end/panels/timeline/BUILD.gn

@@ -191,6 +191,7 @@ ts_library("unittests") {
     "Initiators.test.ts",
     "ModificationsManager.test.ts",
     "SaveFileFormatter.test.ts",
+    "ThirdPartyTreeView.test.ts",
     "TimelineController.test.ts",
     "TimelineDetailsView.test.ts",
     "TimelineFilters.test.ts",

front_end/panels/timeline/ThirdPartyTreeView.test.ts

@@ -0,0 +1,53 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Trace from '../../models/trace/trace.js';
+import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import {TraceLoader} from '../../testing/TraceLoader.js';
+
+import * as Timeline from './timeline.js';
+import * as Utils from './utils/utils.js';
+
+describeWithEnvironment('TimelineTreeView', function() {
+  describe('Third party tree', function() {
+    it('includes 1p and extension badges', async function() {
+      // This trace creates 2 nodes in the tree. One representing the first party entity, and one for
+      // a chrome extension.
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'extension-tracks-and-marks.json.gz');
+      const treeView = new Timeline.ThirdPartyTreeView.ThirdPartyTreeViewWidget();
+      const mapper = new Utils.EntityMapper.EntityMapper(parsedTrace);
+      const events = [...mapper.mappings().eventsByEntity.values()].flat();
+
+      treeView.setModelWithEvents(events, parsedTrace, mapper);
+      const sel: Timeline.TimelineSelection.TimeRangeSelection = {
+        bounds: parsedTrace.Meta.traceBounds,
+      };
+      treeView.updateContents(sel);
+      const tree = treeView.buildTree() as Trace.Extras.TraceTree.BottomUpRootNode;
+      const topNodesIterator = [...tree.children().values()].flat();
+
+      // Node with ext
+      const firstNode = topNodesIterator[0];
+      assert.strictEqual(firstNode.id.toString(), 'ienfalfjdbdpebioblfackkekamfmbnh');
+
+      const extensionNode = new Timeline.TimelineTreeView.TreeGridNode(
+          firstNode, firstNode.totalTime, firstNode.selfTime, firstNode.totalTime, treeView);
+      const extEntity = extensionNode?.createCell('site');
+
+      let gotBadgeName = extEntity.querySelector<HTMLTableRowElement>('.entity-badge-name')?.textContent || '';
+      assert.strictEqual(gotBadgeName, 'Extension');
+
+      // Node with first party
+      const secondNode = topNodesIterator[1] as Trace.Extras.TraceTree.Node;
+      assert.strictEqual(secondNode.id.toString(), 'localhost');
+
+      const firstPartyNode = new Timeline.TimelineTreeView.TreeGridNode(
+          secondNode, secondNode.totalTime, secondNode.selfTime, secondNode.totalTime, treeView);
+      const firstPartyEntity = firstPartyNode?.createCell('site');
+
+      gotBadgeName = firstPartyEntity.querySelector<HTMLTableRowElement>('.entity-badge-name')?.textContent || '';
+      assert.strictEqual(gotBadgeName, '1st party');
+    });
+  });
+});

front_end/panels/timeline/TimelineUIUtils.ts

@@ -2317,10 +2317,16 @@ export class TimelineUIUtils {
     const treeView = new ThirdPartyTreeView.ThirdPartyTreeView();
     treeView.treeView = thirdPartyTree;
     const treeSlot = document.createElement('slot');
+
+    const thirdPartyDiv = document.createElement('div');
+    thirdPartyDiv.className = 'third-party-table';
+
     treeSlot.name = 'third-party-table';
     treeSlot.append(treeView);
+
+    thirdPartyDiv.appendChild(treeSlot);
     if (summaryTable.shadowRoot) {
-      summaryTable.shadowRoot?.appendChild(treeSlot);
+      summaryTable.shadowRoot?.appendChild(thirdPartyDiv);
     }
     return element;
   }

front_end/panels/timeline/components/TimelineSummary.ts

@@ -89,7 +89,7 @@ export class TimelineSummary extends HTMLElement {
                 </div>
           </div>
           </div>
-          <div class="third-party-table"><slot name="third-party-table"></slot></div>
+          <slot name="third-party-table"></slot>
         </div>`;
     // clang-format on
     render(output, this.#shadow, {host: this});

front_end/panels/timeline/components/timelineSummary.css

@@ -84,6 +84,10 @@
   th {
     background-color: var(--sys-color-cdt-base-container);
   }
+
+  tr.revealed.selected {
+    background-color: transparent;
+  }
 }
 
 .widget.vbox.timeline-tree-view {
@@ -93,8 +97,12 @@
 
 .third-party-table {
   display: flex;
-  padding: var(--sys-size-4) var(--sys-size-8) var(--sys-size-4);
-  gap: var(--sys-size-5);
+  margin: var(--sys-size-4) var(--sys-size-8) var(--sys-size-4);
+  padding-left: var(--sys-size-4);
+  padding-right: var(--sys-size-4);
+  border-left: var(--sys-size-1) solid var(--sys-color-divider);
+  border-right: var(--sys-size-1) solid var(--sys-color-divider);
+  max-width: var(--sys-size-35);
 }
 
 .name-container {