chrome-devtools-frontend 1.0.1585538 → 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.
@@ -34,17 +33,18 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
-import type * as Protocol from '../../../../generated/protocol.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 {Events as LinkifierEvents, Linkifier} from './Linkifier.js';
+import {Linkifier} from './Linkifier.js';
+
+const {classMap, createRef, ref} = Directives;
 
 const UIStrings = {
   /**
@@ -63,10 +63,6 @@ const UIStrings = {
    * @description A link to rehide frames that are by default hidden.
    */
   showLess: 'Show less',
-  /**
-   * @description Text indicating that source url of a link is currently unknown
-   */
-  unknownSource: 'unknown',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/utils/JSPresentationUtils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -95,97 +91,53 @@ function populateContextMenu(link: Element, event: Event): void {
   void contextMenu.show();
 }
 
-// TODO(crbug.com/456517732): remove when all usages of runtimeStackTrace are migrated.
-function buildStackTraceRowsForLegacyRuntimeStackTrace(
-    stackTrace: Protocol.Runtime.StackTrace,
-    target: SDK.Target.Target|null,
-    linkifier: Linkifier,
-    tabStops: boolean|undefined,
-    updateCallback?: (arg0: Array<StackTraceRegularRow|StackTraceAsyncRow>) => void,
-    showColumnNumber?: boolean,
-    ): Array<StackTraceRegularRow|StackTraceAsyncRow> {
-  const stackTraceRows: Array<StackTraceRegularRow|StackTraceAsyncRow> = [];
-
-  if (updateCallback) {
-    const throttler = new Common.Throttler.Throttler(100);
-    linkifier.addEventListener(LinkifierEvents.LIVE_LOCATION_UPDATED, () => {
-      void throttler.schedule(async () => updateCallback(stackTraceRows));
-    });
-  }
-
-  function buildStackTraceRowsHelper(
-      stackTrace: Protocol.Runtime.StackTrace,
-      previousCallFrames: Protocol.Runtime.CallFrame[]|undefined = undefined): void {
-    let asyncRow: StackTraceAsyncRow|null = null;
-    if (previousCallFrames) {
-      asyncRow = {
-        asyncDescription: UI.UIUtils.asyncStackTraceLabel(stackTrace.description, previousCallFrames),
-      };
-      stackTraceRows.push(asyncRow);
-    }
-    let previousStackFrameWasBreakpointCondition = false;
-    for (const stackFrame of stackTrace.callFrames) {
-      const functionName = UI.UIUtils.beautifyFunctionName(stackFrame.functionName);
-      const link = linkifier.maybeLinkifyConsoleCallFrame(target, stackFrame, {
-        showColumnNumber,
-        tabStop: Boolean(tabStops),
-        inlineFrameIndex: 0,
-        revealBreakpoint: previousStackFrameWasBreakpointCondition,
-      });
-      if (link) {
-        link.setAttribute('jslog', `${VisualLogging.link('stack-trace').track({click: true})}`);
-        link.addEventListener('contextmenu', populateContextMenu.bind(null, link));
-
-        if (!link.textContent) {
-          link.textContent = i18nString(UIStrings.unknownSource);
-        }
-      }
-      stackTraceRows.push({functionName, link});
-      previousStackFrameWasBreakpointCondition = [
-        SDK.DebuggerModel.COND_BREAKPOINT_SOURCE_URL,
-        SDK.DebuggerModel.LOGPOINT_SOURCE_URL,
-      ].includes(stackFrame.url);
-    }
-  }
-
-  buildStackTraceRowsHelper(stackTrace);
-  let previousCallFrames = stackTrace.callFrames;
-  for (let asyncStackTrace = stackTrace.parent; asyncStackTrace; asyncStackTrace = asyncStackTrace.parent) {
-    if (asyncStackTrace.callFrames.length) {
-      buildStackTraceRowsHelper(asyncStackTrace, previousCallFrames);
-    }
-    previousCallFrames = asyncStackTrace.callFrames;
-  }
-  return stackTraceRows;
+export interface ViewInput {
+  stackTrace?: StackTrace.StackTrace.StackTrace;
+  tabStops?: boolean;
+  widthConstrained?: boolean;
+  showColumnNumber?: boolean;
+  expandable?: boolean;
 }
 
-function buildStackTraceRows(
+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,
-    target: SDK.Target.Target|null,
-    linkifier: Linkifier,
-    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,
@@ -199,65 +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>): HTMLElement[] {
-  container.removeChildren();
-  const links: HTMLElement[] = [];
 
   // 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 = ' @ ';
-      if (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);
-        links.push(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');
@@ -286,13 +223,9 @@ function renderStackTraceTable(
     // If we are in a popup, this will trigger a re-layout
     UI.GlassPane.GlassPane.containerMoved(container);
   }, false);
-
-  return links;
 }
 
 export interface Options {
-  // TODO(crbug.com/456517732): remove when all usages of runtimeStackTrace are migrated.
-  runtimeStackTrace?: Protocol.Runtime.StackTrace;
   tabStops?: boolean;
   // Whether the width of stack trace preview
   // is constrained to its container or whether
@@ -304,7 +237,7 @@ export interface Options {
 
 interface StackTraceRegularRow {
   functionName: string;
-  link: HTMLElement|null;
+  link: HTMLElement;
 }
 
 interface StackTraceAsyncRow {
@@ -312,89 +245,40 @@ interface StackTraceAsyncRow {
 }
 
 export class StackTracePreviewContent extends UI.Widget.Widget {
-  #stackTrace?: StackTrace.StackTrace.StackTrace;
-  #target?: SDK.Target.Target;
-  #linkifier?: Linkifier;
-  #ownedLinkifier?: Linkifier;
-  #options: Options;
-  #links: HTMLElement[] = [];
-
-  readonly #table: HTMLElement;
-  /**
-   * Updated when we update to define if we have any rows for the StackTrace;
-   * allowing the caller to know if this element is empty or not.
-   */
-  #hasRows = false;
-
-  constructor(element?: HTMLElement, target?: SDK.Target.Target, linkifier?: Linkifier, options?: Options) {
-    super(element, {useShadowDom: true});
-
-    this.#target = target;
-    this.#linkifier = linkifier;
-    if (!this.#linkifier) {
-      this.#ownedLinkifier = new Linkifier();
-      this.#linkifier = this.#ownedLinkifier;
-    }
-    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';
-
-    UI.DOMUtilities.appendStyle(this.element.shadowRoot as ShadowRoot, jsUtilsStyles);
+  readonly #view: View;
 
-    this.#table = this.contentElement.createChild('table', 'stack-preview-container');
-    this.#table.classList.toggle('width-constrained', this.#options.widthConstrained ?? false);
+  #stackTrace?: StackTrace.StackTrace.StackTrace;
+  #options: Options = {};
 
-    this.performUpdate();
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true, classes: ['monospace', 'stack-preview-container']});
+    this.#view = view;
   }
 
   hasContent(): boolean {
-    return this.#hasRows;
+    if (!this.#stackTrace) {
+      return false;
+    }
+    const {syncFragment, asyncFragments} = this.#stackTrace;
+    return syncFragment.frames.length > 0 || asyncFragments.some(f => f.frames.length > 0);
   }
 
   override performUpdate(): void {
-    if (!this.#linkifier) {
-      return;
-    }
-
-    const {runtimeStackTrace, tabStops} = this.#options;
-
-    if (this.#stackTrace) {
-      const stackTraceRows = buildStackTraceRows(
-          this.#stackTrace, this.#target ?? null, this.#linkifier, tabStops, this.#options.showColumnNumber);
-      this.#hasRows = stackTraceRows.length > 0;
-      this.#links = renderStackTraceTable(this.#table, this.element, this.#options.expandable ?? false, stackTraceRows);
-      return;
-    }
-
-    if (runtimeStackTrace) {
-      // TODO(crbug.com/456517732): remove when all usages of runtimeStackTrace are migrated.
-      const updateCallback =
-          renderStackTraceTable.bind(null, this.#table, this.element, this.#options.expandable ?? false);
-      const stackTraceRows = buildStackTraceRowsForLegacyRuntimeStackTrace(
-          runtimeStackTrace ?? {callFrames: []}, this.#target ?? null, this.#linkifier, tabStops, updateCallback,
-          this.#options.showColumnNumber);
-      this.#hasRows = stackTraceRows.length > 0;
-      this.#links = renderStackTraceTable(this.#table, this.element, this.#options.expandable ?? false, stackTraceRows);
+    const output: {table?: HTMLElement} = {};
+    this.#view(
+        {
+          stackTrace: this.#stackTrace,
+          ...this.#options,
+        },
+        output, this.contentElement);
+
+    if (this.#stackTrace && output.table) {
+      renderStackTraceTable(output.table, this.element, this.#stackTrace, this.#options);
     }
   }
 
   get linkElements(): readonly HTMLElement[] {
-    return this.#links;
-  }
-
-  set target(target: SDK.Target.Target|undefined) {
-    this.#target = target;
-    this.requestUpdate();
-  }
-
-  set linkifier(linkifier: Linkifier) {
-    this.#linkifier = linkifier;
-    this.requestUpdate();
+    return [...this.contentElement.querySelectorAll<HTMLElement>('td.link > .devtools-link')];
   }
 
   set options(options: Options) {
@@ -410,8 +294,4 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
     this.#stackTrace.addEventListener(StackTrace.StackTrace.Events.UPDATED, this.requestUpdate, this);
     this.requestUpdate();
   }
-
-  override onDetach(): void {
-    this.#ownedLinkifier?.dispose();
-  }
 }

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

@@ -17,7 +17,7 @@ import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
 import * as UIHelpers from '../../../helpers/helpers.js';
-import {Directives, html, type LitTemplate, render} from '../../../lit/lit.js';
+import {Directives, html, type LitTemplate, render, type TemplateResult} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -562,7 +562,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     info.icon = icon;
   }
 
-  static renderLinkifiedUrl(url: Platform.DevToolsPath.UrlString, options?: LinkifyURLOptions): LitTemplate {
+  static renderLinkifiedUrl(url: Platform.DevToolsPath.UrlString, options?: LinkifyURLOptions): TemplateResult {
     options = options || {
       showColumnNumber: false,
       inlineFrameIndex: 0,
@@ -639,7 +639,8 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     return link;
   }
 
-  private static renderLink(text: string|HTMLElement, className: string, options: CreateLinkOptions = {}): LitTemplate {
+  private static renderLink(text: string|HTMLElement, className: string, options: CreateLinkOptions = {}):
+      TemplateResult {
     const {maxLength, title, href, preventClick, tabStop, bypassURLTrimming, jslogContext} = options;
     const classes: Record<string, boolean> = {
       'devtools-link': true,
@@ -666,6 +667,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
         if (!link) {
           return;
         }
+        options.onRef?.(link as HTMLElement);
         if (text instanceof HTMLElement) {
           link.appendChild(text);
         } else if (bypassURLTrimming) {
@@ -1153,6 +1155,7 @@ export interface LinkifyURLOptions {
   userMetric?: Host.UserMetrics.Action;
   jslogContext?: string;
   omitOrigin?: boolean;
+  onRef?: (el: HTMLElement) => void;
 }
 
 export interface LinkifyOptions {
@@ -1183,6 +1186,7 @@ interface CreateLinkOptions {
   lineNumber?: number;
   columnNumber?: number;
   userMetric?: Host.UserMetrics.Action;
+  onRef?: (el: HTMLElement) => void;
 }
 
 interface LinkDisplayOptions {

package/front_end/ui/legacy/components/utils/jsUtils.css

@@ -4,15 +4,6 @@
  * found in the LICENSE file.
  */
 
-:host {
-  display: inline;
-}
-
-:host(.width-constrained) {
-  display: inline-block;
-  width: 100%;
-}
-
 .stack-preview-async-description {
   padding: 3px 0 1px;
   font-weight: bold;

package/package.json

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