[ui] Turn 'buildStackTracePreviewContents' into a widget

As part of the 'consistent stack traces' project we need to turn the
JSPresentationUtils into a proper widget to keep track of updates
to the stack trace.

As a first step, lets turn the existing implementation into a widget.
Once the new abstraction is available, we can then also address the
UI vision violations.

Not all use-sites are migrated by this CL but the ones in the network
panel are, to show how this will look like.

[email protected]

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

Author: szuend

front_end/panels/network/NetworkLogViewColumns.ts

@@ -889,7 +889,7 @@ export class NetworkLogViewColumns {
         if (!content) {
           return false;
         }
-        popover.contentElement.appendChild(content.element);
+        content.show(popover.contentElement);
         return true;
       },
       hide: this.popupLinkifier.reset.bind(this.popupLinkifier),

front_end/panels/network/RequestInitiatorView.ts

@@ -48,19 +48,16 @@ export class RequestInitiatorView extends UI.Widget.VBox {
   }
 
   static createStackTracePreview(
-      request: SDK.NetworkRequest.NetworkRequest, linkifier: Components.Linkifier.Linkifier, focusableLink?: boolean): {
-    element: Element,
-    links: Element[],
-  }|null {
+      request: SDK.NetworkRequest.NetworkRequest, linkifier: Components.Linkifier.Linkifier,
+      focusableLink?: boolean): Components.JSPresentationUtils.StackTracePreviewContent|null {
     const initiator = request.initiator();
     if (!initiator?.stack) {
       return null;
     }
     const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
-    const target = networkManager ? networkManager.target() : null;
-    const stackTrace = Components.JSPresentationUtils.buildStackTracePreviewContents(
-        target, linkifier, {stackTrace: initiator.stack, tabStops: focusableLink});
-    return stackTrace;
+    const target = networkManager ? networkManager.target() : undefined;
+    return new Components.JSPresentationUtils.StackTracePreviewContent(
+        undefined, target, linkifier, {stackTrace: initiator.stack, tabStops: focusableLink});
   }
 
   private createTree(): UI.TreeOutline.TreeOutlineInShadow {
@@ -124,16 +121,20 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     }
   }
 
-  private buildStackTraceSection(content: Element, title: string, tree: UI.TreeOutline.TreeOutlineInShadow): void {
+  private buildStackTraceSection(
+      stackTracePreview: Components.JSPresentationUtils.StackTracePreviewContent, title: string,
+      tree: UI.TreeOutline.TreeOutlineInShadow): void {
     const root = new UI.TreeOutline.TreeElement(title);
     tree.appendChild(root);
 
     if (root.titleElement instanceof HTMLElement) {
       root.titleElement.classList.add('request-initiator-view-section-title');
     }
 
-    const contentElement = new UI.TreeOutline.TreeElement(content, false);
+    const contentElement = new UI.TreeOutline.TreeElement(undefined, false);
     contentElement.selectable = false;
+    stackTracePreview.markAsRoot();
+    stackTracePreview.show(contentElement.listItemElement);
 
     root.appendChild(contentElement);
     root.expand();
@@ -151,7 +152,7 @@ export class RequestInitiatorView extends UI.Widget.VBox {
 
     if (stackTracePreview) {
       initiatorDataPresent = true;
-      this.buildStackTraceSection(stackTracePreview.element, i18nString(UIStrings.requestCallStack), containerTree);
+      this.buildStackTraceSection(stackTracePreview, i18nString(UIStrings.requestCallStack), containerTree);
     }
 
     const initiatorGraph = Logs.NetworkLog.NetworkLog.instance().initiatorGraphForRequest(this.request);

front_end/ui/legacy/components/utils/JSPresentationUtils.test.ts

@@ -32,7 +32,8 @@ describeWithMockConnection('JSPresentationUtils', () => {
     const callFrame = {scriptId: 'scriptId', functionName: 'func', url, lineNumber: 0, columnNumber: 0};
     const stackTrace = {callFrames: [callFrame]};
     const options = {tabStops: false, stackTrace} as Components.JSPresentationUtils.Options;
-    const {links} = Components.JSPresentationUtils.buildStackTracePreviewContents(target, linkifier, options);
+    const {linkElements: links} =
+        new Components.JSPresentationUtils.StackTracePreviewContent(undefined, target, linkifier, options);
     assert.lengthOf(links, 1);
     assert.strictEqual(links[0].textContent, expectedLinkContent);
   }

front_end/ui/legacy/components/utils/JSPresentationUtils.ts

@@ -36,6 +36,7 @@
 
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as Bindings from '../../../../models/bindings/bindings.js';
@@ -156,6 +157,7 @@ export function buildStackTraceRows(
   return stackTraceRows;
 }
 
+/** @deprecated Use {@link StackTracePreviewContent} widget instead. */
 export function buildStackTracePreviewContents(
     target: SDK.Target.Target|null, linkifier: Linkifier, options: Options = {
       widthConstrained: false,
@@ -245,8 +247,8 @@ function renderStackTraceTable(
 }
 
 export interface Options {
-  stackTrace: Protocol.Runtime.StackTrace|undefined;
-  tabStops: boolean|undefined;
+  stackTrace?: Protocol.Runtime.StackTrace;
+  tabStops?: boolean;
   // Whether the width of stack trace preview
   // is constrained to its container or whether
   // it can grow the container.
@@ -262,3 +264,51 @@ export interface StackTraceRegularRow {
 export interface StackTraceAsyncRow {
   asyncDescription: string;
 }
+
+export class StackTracePreviewContent extends UI.Widget.Widget {
+  #target?: SDK.Target.Target;
+  #linkifier?: Linkifier;
+  #options: Options;
+  #links: HTMLElement[] = [];
+
+  readonly #table: HTMLElement;
+
+  constructor(element?: HTMLElement, target?: SDK.Target.Target, linkifier?: Linkifier, options?: Options) {
+    super(true, undefined, element);
+
+    this.#target = target;
+    this.#linkifier = linkifier;
+    this.#options = options || {
+      widthConstrained: false,
+    };
+
+    this.element.classList.add('monospace');
+    this.element.classList.add('stack-preview-container');
+    this.element.classList.toggle('width-constrained', this.#options.widthConstrained ?? false);
+    this.element.style.display = 'inline-block';
+
+    Platform.DOMUtilities.appendStyle(this.element.shadowRoot as ShadowRoot, jsUtilsStyles);
+
+    this.#table = this.contentElement.createChild('table', 'stack-preview-container');
+    this.#table.classList.toggle('width-constrained', this.#options.widthConstrained ?? false);
+
+    this.performUpdate();
+  }
+
+  override performUpdate(): void {
+    if (!this.#linkifier) {
+      return;
+    }
+
+    const {stackTrace, tabStops} = this.#options;
+    const updateCallback = renderStackTraceTable.bind(null, this.#table, this.element);
+    const stackTraceRows = buildStackTraceRows(
+        stackTrace ?? {callFrames: []}, this.#target ?? null, this.#linkifier, tabStops, updateCallback,
+        this.#options.showColumnNumber);
+    this.#links = renderStackTraceTable(this.#table, this.element, stackTraceRows);
+  }
+
+  get linkElements(): readonly HTMLElement[] {
+    return this.#links;
+  }
+}