[RPP] Include first party and extension badge for 3p table

https://screenshot.googleplex.com/9gkRsbanfZgLwz6

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

Author: Adriana Ixba

front_end/panels/timeline/ThirdPartyTreeView.ts

@@ -97,7 +97,7 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
         {
           id: 'site',
           title: i18nString(UIStrings.firstOrThirdPartyName),
-          width: '80px',
+          width: '100px',
           fixedWidth: true,
           sortable: true,
         },
@@ -197,6 +197,24 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
     }
     return {transferSize: summary.transferSize, mainThreadTime: summary.mainThreadTime};
   }
+
+  nodeIsFirstParty(node: Trace.Extras.TraceTree.Node): boolean {
+    const mapper = this.entityMapper();
+    if (!mapper) {
+      return false;
+    }
+    const firstParty = mapper.firstPartyEntity();
+    return firstParty === mapper.entityForEvent(node.event);
+  }
+
+  nodeIsExtension(node: Trace.Extras.TraceTree.Node): boolean {
+    const mapper = this.entityMapper();
+    if (!mapper) {
+      return false;
+    }
+    const entity = mapper.entityForEvent(node.event);
+    return Boolean(entity) && entity?.category === 'Chrome Extension';
+  }
 }
 
 export class ThirdPartyTreeView extends UI.Widget.WidgetElement<UI.Widget.Widget> {

front_end/panels/timeline/TimelineTreeView.ts

@@ -698,6 +698,23 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
       if (info.icon) {
         iconContainer.insertBefore(info.icon, icon);
       }
+
+      // Include badges with the name, if relevant.
+      if (columnId === 'site' && (this.treeView as ThirdPartyTreeViewWidget)) {
+        const thirdPartyTree = (this.treeView as ThirdPartyTreeViewWidget);
+        let badgeText = '';
+
+        if (thirdPartyTree.nodeIsFirstParty(this.profileNode)) {
+          badgeText = '1st party';
+        } else if (thirdPartyTree.nodeIsExtension(this.profileNode)) {
+          badgeText = 'Extension';
+        }
+
+        if (badgeText) {
+          const badge = container.createChild('div', 'entity-badge');
+          badge.createChild('div', 'entity-badge-name').textContent = badgeText;
+        }
+      }
     } else if (event) {
       name.textContent = TimelineUIUtils.eventTitle(event);
       const parsedTrace = this.treeView.parsedTrace();

front_end/panels/timeline/components/timelineSummary.css

@@ -96,3 +96,26 @@
   padding: var(--sys-size-4) var(--sys-size-8) var(--sys-size-4);
   gap: var(--sys-size-5);
 }
+
+.name-container {
+  display: flex;
+  align-items: center;
+}
+
+.entity-badge {
+  margin-left: var(--sys-size-4);
+}
+
+.entity-badge-name {
+  font-weight: var(--ref-typeface-weight-bold);
+  padding-left: var(--sys-size-3);
+  padding-right: var(--sys-size-3);
+  background-color: var(--sys-color-tonal-container);
+  border-radius: var(--sys-shape-corner-extra-small);
+}
+
+.activity-name {
+  text-overflow: ellipsis;
+  overflow: inherit;
+  max-width: 60%;
+}