[ui] Use 'StackTracePreview' widget instead of plain function

Migrates two more use sites.

[email protected]

Bug: 407752215,433162438
Change-Id: Iacca303c0939fcabc7c8bf005f42e03bd61dabfb
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6796895
Commit-Queue: Simon Zünd <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>

Author: szuend

front_end/panels/console/ConsoleViewMessage.test.ts

@@ -172,7 +172,7 @@ describeWithMockConnection('ConsoleViewMessage', () => {
     const IGNORE_LIST_LINK = 'ignore-list-link';
 
     function findStackPreviewContainer(element: HTMLElement) {
-      const outer = element.querySelector('span.stack-preview-container');
+      const outer = element.querySelector('.stack-preview-container');
       assert.isNotNull(outer);
       const inner = outer.shadowRoot;
       assert.isNotNull(inner);

front_end/panels/console/ConsoleViewMessage.ts

@@ -705,10 +705,11 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     clickableElement.tabIndex = -1;
     clickableElement.appendChild(messageElement);
     const stackTraceElement = contentElement.createChild('div');
-    const stackTracePreview = Components.JSPresentationUtils.buildStackTracePreviewContents(
-        target, this.linkifier, {stackTrace, tabStops: undefined, widthConstrained: true});
-    stackTraceElement.appendChild(stackTracePreview.element);
-    for (const linkElement of stackTracePreview.links) {
+    const stackTracePreview = new Components.JSPresentationUtils.StackTracePreviewContent(
+        undefined, target ?? undefined, this.linkifier, {stackTrace, widthConstrained: true});
+    stackTracePreview.markAsRoot();
+    stackTracePreview.show(stackTraceElement);
+    for (const linkElement of stackTracePreview.linkElements) {
       this.selectableChildren.push({element: linkElement, forceSelect: () => linkElement.focus()});
     }
     stackTraceElement.classList.add('hidden-stack-trace');

front_end/panels/timeline/TimelineUIUtils.ts

@@ -2407,9 +2407,11 @@ export class TimelineDetailsContentHelper {
     }
     const stackTraceElement =
         this.tableElement.createChild('div', 'timeline-details-view-row timeline-details-stack-values');
-    const callFrameContents = LegacyComponents.JSPresentationUtils.buildStackTracePreviewContents(
-        this.target, this.linkifierInternal, {stackTrace: resolvedStackTrace, tabStops: true, showColumnNumber: true});
-    stackTraceElement.appendChild(callFrameContents.element);
+    const callFrameContents = new LegacyComponents.JSPresentationUtils.StackTracePreviewContent(
+        undefined, this.target ?? undefined, this.linkifierInternal,
+        {stackTrace: resolvedStackTrace, tabStops: true, showColumnNumber: true});
+    callFrameContents.markAsRoot();
+    callFrameContents.show(stackTraceElement);
   }
 }
 

test/e2e/helpers/console-helpers.ts

@@ -228,7 +228,7 @@ export async function getStructuredConsoleMessages(devToolsPage?: DevToolsPage)
       const source = wrapper.querySelector('.devtools-link')?.textContent;
       const consoleMessage = wrapper.querySelector('.console-message');
       const repeatCount = wrapper.querySelector('.console-message-repeat-count');
-      const stackPreviewRoot = wrapper.querySelector('.hidden-stack-trace > span');
+      const stackPreviewRoot = wrapper.querySelector('.hidden-stack-trace > div');
       const stackPreview = stackPreviewRoot?.shadowRoot?.querySelectorAll('tbody') ?? null;
       return {
         message,