[DOMSize] Use NodeLink for dom stats node refs

Bug: 394124938
Change-Id: I6001174995c05981a61f03d0f3fc1bb1d13dab04
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6226255
Reviewed-by: Connor Clark <[email protected]>
Commit-Queue: Adam Raine <[email protected]>
Auto-Submit: Adam Raine <[email protected]>

Author: Adam Raine

front_end/panels/timeline/components/insights/DOMSize.ts

@@ -4,6 +4,7 @@
 
 import '../../../../ui/components/icon_button/icon_button.js';
 import './Table.js';
+import './NodeLink.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {DOMSizeInsightModel} from '../../../../models/trace/insights/DOMSize.js';
@@ -12,6 +13,7 @@ import * as Lit from '../../../../ui/lit/lit.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
+import type * as NodeLink from './NodeLink.js';
 import type {TableData} from './Table.js';
 
 const UIStrings = {
@@ -68,12 +70,34 @@ export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
 
     if (domStatsData.maxDepth) {
       const {nodeId, nodeName} = domStatsData.maxDepth;
-      rows.push({values: [i18nString(UIStrings.maxDOMDepth), this.renderNode(nodeId, nodeName)]});
+      // clang-format off
+      const template = html`
+        <devtools-performance-node-link
+          .data=${{
+            backendNodeId: nodeId,
+            frame: domStatsData.frame,
+            fallbackText: nodeName,
+          } as NodeLink.NodeLinkData}>
+        </devtools-performance-node-link>
+      `;
+      // clang-format on
+      rows.push({values: [i18nString(UIStrings.maxDOMDepth), template]});
     }
 
     if (domStatsData.maxChildren) {
       const {nodeId, nodeName} = domStatsData.maxChildren;
-      rows.push({values: [i18nString(UIStrings.maxChildren), this.renderNode(nodeId, nodeName)]});
+      // clang-format off
+      const template = html`
+        <devtools-performance-node-link
+          .data=${{
+            backendNodeId: nodeId,
+            frame: domStatsData.frame,
+            fallbackText: nodeName,
+          } as NodeLink.NodeLinkData}>
+        </devtools-performance-node-link>
+      `;
+      // clang-format on
+      rows.push({values: [i18nString(UIStrings.maxChildren), template]});
     }
 
     if (!rows.length) {