chrome-devtools-frontend 1.0.1585664 → 1.0.1586699

package/front_end/ui/legacy/UIUtils.ts

@@ -41,6 +41,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Geometry from '../../models/geometry/geometry.js';
+import type * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as Buttons from '../components/buttons/buttons.js';
 import {Icon, type IconData} from '../kit/kit.js';
 import * as Lit from '../lit/lit.js';
@@ -628,23 +629,39 @@ export function anotherProfilerActiveLabel(): string {
   return i18nString(UIStrings.anotherProfilerIsAlreadyActive);
 }
 
-export function asyncStackTraceLabel(
-    description: string|undefined, previousCallFrames: Array<{functionName: string}>): string {
-  if (description) {
-    if (description === 'Promise.resolve') {
-      return i18nString(UIStrings.promiseResolvedAsync);
-    }
-    if (description === 'Promise.reject') {
-      return i18nString(UIStrings.promiseRejectedAsync);
+export function asyncFragmentLabel(
+    stackTrace: StackTrace.StackTrace.StackTrace|StackTrace.StackTrace.DebuggableStackTrace,
+    asyncFragment: StackTrace.StackTrace.AsyncFragment): string {
+  const description = asyncFragment.description;
+  if (!description) {
+    return i18nString(UIStrings.asyncCall);
+  }
+
+  if (description === 'Promise.resolve') {
+    return i18nString(UIStrings.promiseResolvedAsync);
+  }
+  if (description === 'Promise.reject') {
+    return i18nString(UIStrings.promiseRejectedAsync);
+  }
+
+  if (description === 'await') {
+    const asyncFragments = stackTrace.asyncFragments;
+    const index = asyncFragments.indexOf(asyncFragment);
+    let previousFragment: StackTrace.StackTrace.Fragment|undefined;
+
+    if (index === 0) {
+      previousFragment = stackTrace.syncFragment;
+    } else if (index > 0) {
+      previousFragment = asyncFragments[index - 1];
     }
-    if (description === 'await' && previousCallFrames.length !== 0) {
-      const lastPreviousFrame = previousCallFrames[previousCallFrames.length - 1];
-      const lastPreviousFrameName = beautifyFunctionName(lastPreviousFrame.functionName);
-      description = `await in ${lastPreviousFrameName}`;
+
+    const lastPreviousFrame = previousFragment?.frames.at(-1);
+    if (lastPreviousFrame) {
+      const lastPreviousFrameName = beautifyFunctionName(lastPreviousFrame.name || '');
+      return `await in ${lastPreviousFrameName}`;
     }
-    return description;
   }
-  return i18nString(UIStrings.asyncCall);
+  return description;
 }
 
 export function addPlatformClass(element: HTMLElement): void {

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

@@ -1,7 +1,6 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
@@ -38,12 +37,15 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as StackTrace from '../../../../models/stack_trace/stack_trace.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
+import {Directives, html, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
 import jsUtilsStyles from './jsUtils.css.js';
 import {Linkifier} from './Linkifier.js';
 
+const {classMap, createRef, ref} = Directives;
+
 const UIStrings = {
   /**
    * @description Text to stop preventing the debugger from stepping into library code
@@ -89,31 +91,53 @@ function populateContextMenu(link: Element, event: Event): void {
   void contextMenu.show();
 }
 
-function buildStackTraceRows(
+export interface ViewInput {
+  stackTrace?: StackTrace.StackTrace.StackTrace;
+  tabStops?: boolean;
+  widthConstrained?: boolean;
+  showColumnNumber?: boolean;
+  expandable?: boolean;
+}
+
+export type View = (input: ViewInput, output: {table?: HTMLElement}, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const classes = {
+    'stack-preview-container': true,
+    'width-constrained': Boolean(input.widthConstrained),
+  };
+  // TODO(crbug.com/483576322): Remove once fully migrated.
+  const tableRef = createRef<HTMLElement>();
+  // clang-format off
+  render(html`
+    <style>${jsUtilsStyles}</style>
+    <table class=${classMap(classes)} ${ref(tableRef)}>
+    </table>
+  `, target);
+  // clang-format on
+  output.table = tableRef.value;
+};
+
+function renderStackTraceTable(
+    container: Element,
+    parent: Element,
     stackTrace: StackTrace.StackTrace.StackTrace,
-    tabStops: boolean|undefined,
-    showColumnNumber?: boolean,
-    ): Array<StackTraceRegularRow|StackTraceAsyncRow> {
-  const stackTraceRows: Array<StackTraceRegularRow|StackTraceAsyncRow> = [];
+    options: Options,
+    ): void {
+  container.removeChildren();
 
-  function buildStackTraceRowsHelper(
-      fragment: StackTrace.StackTrace.Fragment|StackTrace.StackTrace.AsyncFragment,
-      previousFragment: StackTrace.StackTrace.Fragment|undefined = undefined): void {
-    let asyncRow: StackTraceAsyncRow|null = null;
-    const isAsync = 'description' in fragment;
-    if (previousFragment && isAsync) {
-      asyncRow = {
-        asyncDescription: UI.UIUtils.asyncStackTraceLabel(
-            fragment.description, previousFragment.frames.map(f => ({functionName: f.name ?? ''}))),
-      };
-      stackTraceRows.push(asyncRow);
+  function buildStackTraceRowsHelper(fragment: StackTrace.StackTrace.Fragment|StackTrace.StackTrace.AsyncFragment):
+      Array<StackTraceRegularRow|StackTraceAsyncRow> {
+    const stackTraceRows: Array<StackTraceRegularRow|StackTraceAsyncRow> = [];
+    if ('description' in fragment) {
+      stackTraceRows.push({asyncDescription: UI.UIUtils.asyncFragmentLabel(stackTrace, fragment)});
     }
     let previousStackFrameWasBreakpointCondition = false;
     for (const frame of fragment.frames) {
       const functionName = UI.UIUtils.beautifyFunctionName(frame.name ?? '');
       const link = Linkifier.linkifyStackTraceFrame(frame, {
-        showColumnNumber,
-        tabStop: Boolean(tabStops),
+        showColumnNumber: Boolean(options.showColumnNumber),
+        tabStop: Boolean(options.tabStops),
         inlineFrameIndex: 0,
         revealBreakpoint: previousStackFrameWasBreakpointCondition,
         maxLength: UI.UIUtils.MaxLengthForDisplayedURLsInConsole,
@@ -127,61 +151,50 @@ function buildStackTraceRows(
         SDK.DebuggerModel.LOGPOINT_SOURCE_URL,
       ].includes(frame.url ?? '');
     }
-  }
 
-  buildStackTraceRowsHelper(stackTrace.syncFragment);
-  let previousFragment = stackTrace.syncFragment;
-  for (const asyncFragment of stackTrace.asyncFragments) {
-    if (asyncFragment.frames.length) {
-      buildStackTraceRowsHelper(asyncFragment, previousFragment);
-    }
-    previousFragment = asyncFragment;
+    return stackTraceRows;
   }
-  return stackTraceRows;
-}
-
-function renderStackTraceTable(
-    container: Element, parent: Element, expandable: boolean,
-    stackTraceRows: Array<StackTraceRegularRow|StackTraceAsyncRow>): void {
-  container.removeChildren();
 
   // The tableSection groups one or more synchronous call frames together.
   // Wherever there is an asynchronous call, a new section is created.
-  let tableSection: Element|null = null;
   let firstRow = true;
-  for (const item of stackTraceRows) {
-    if (!tableSection || 'asyncDescription' in item) {
-      tableSection = container.createChild('tbody');
+  for (const fragment of [stackTrace.syncFragment, ...stackTrace.asyncFragments]) {
+    if (fragment.frames.length === 0) {
+      continue;
     }
 
-    const row = tableSection.createChild('tr');
-    if (firstRow && expandable) {
-      const button = row.createChild('td').createChild('button', 'arrow-icon-button');
-      button.createChild('span', 'arrow-icon');
-      parent.classList.add('expandable');
-      container.classList.add('expandable');
-      button.addEventListener('click', () => {
-        button.setAttribute('jslog', `${VisualLogging.expand().track({click: true})}`);
-        parent.classList.toggle('expanded');
-        container.classList.toggle('expanded');
-      });
-      firstRow = false;
-    } else {
-      row.createChild('td').textContent = '\n';
-    }
-    if ('asyncDescription' in item) {
-      row.createChild('td', 'stack-preview-async-description').textContent = item.asyncDescription;
-      row.createChild('td');
-      row.createChild('td');
-      row.classList.add('stack-preview-async-row');
-    } else {
-      row.createChild('td', 'function-name').textContent = item.functionName;
-      row.createChild('td').textContent = ' @ ';
-      row.createChild('td', 'link').appendChild(item.link);
+    const stackTraceRows = buildStackTraceRowsHelper(fragment);
+    const tableSection = container.createChild('tbody');
+    for (const item of stackTraceRows) {
+      const row = tableSection.createChild('tr');
+      if (firstRow && options.expandable) {
+        const button = row.createChild('td').createChild('button', 'arrow-icon-button');
+        button.createChild('span', 'arrow-icon');
+        parent.classList.add('expandable');
+        container.classList.add('expandable');
+        button.addEventListener('click', () => {
+          button.setAttribute('jslog', `${VisualLogging.expand().track({click: true})}`);
+          parent.classList.toggle('expanded');
+          container.classList.toggle('expanded');
+        });
+        firstRow = false;
+      } else {
+        row.createChild('td').textContent = '\n';
+      }
+      if ('asyncDescription' in item) {
+        row.createChild('td', 'stack-preview-async-description').textContent = item.asyncDescription;
+        row.createChild('td');
+        row.createChild('td');
+        row.classList.add('stack-preview-async-row');
+      } else {
+        row.createChild('td', 'function-name').textContent = item.functionName;
+        row.createChild('td').textContent = ' @ ';
+        row.createChild('td', 'link').appendChild(item.link);
+      }
     }
   }
 
-  tableSection = container.createChild('tfoot');
+  const tableSection = container.createChild('tfoot');
   const showAllRow = tableSection.createChild('tr', 'show-all-link');
   showAllRow.createChild('td');
   const cell = showAllRow.createChild('td');
@@ -232,17 +245,14 @@ interface StackTraceAsyncRow {
 }
 
 export class StackTracePreviewContent extends UI.Widget.Widget {
+  readonly #view: View;
+
   #stackTrace?: StackTrace.StackTrace.StackTrace;
   #options: Options = {};
 
-  readonly #table: HTMLElement;
-
-  constructor(element?: HTMLElement) {
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
     super(element, {useShadowDom: true, classes: ['monospace', 'stack-preview-container']});
-
-    UI.DOMUtilities.appendStyle(this.element.shadowRoot as ShadowRoot, jsUtilsStyles);
-
-    this.#table = this.contentElement.createChild('table', 'stack-preview-container');
+    this.#view = view;
   }
 
   hasContent(): boolean {
@@ -254,13 +264,17 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
   }
 
   override performUpdate(): void {
-    if (!this.#stackTrace) {
-      return;
-    }
+    const output: {table?: HTMLElement} = {};
+    this.#view(
+        {
+          stackTrace: this.#stackTrace,
+          ...this.#options,
+        },
+        output, this.contentElement);
 
-    const stackTraceRows =
-        buildStackTraceRows(this.#stackTrace, this.#options.tabStops, this.#options.showColumnNumber);
-    renderStackTraceTable(this.#table, this.element, this.#options.expandable ?? false, stackTraceRows);
+    if (this.#stackTrace && output.table) {
+      renderStackTraceTable(output.table, this.element, this.#stackTrace, this.#options);
+    }
   }
 
   get linkElements(): readonly HTMLElement[] {
@@ -269,7 +283,6 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
 
   set options(options: Options) {
     this.#options = options;
-    this.#table.classList.toggle('width-constrained', this.#options.widthConstrained ?? false);
     this.requestUpdate();
   }
 

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1585664"
+  "version": "1.0.1586699"
 }