chrome-devtools-frontend 1.0.1585664 → 1.0.1587572

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, nothing, render, type TemplateResult} 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} = Directives;
+
 const UIStrings = {
   /**
    * @description Text to stop preventing the debugger from stepping into library code
@@ -89,128 +91,110 @@ function populateContextMenu(link: Element, event: Event): void {
   void contextMenu.show();
 }
 
-function buildStackTraceRows(
-    stackTrace: StackTrace.StackTrace.StackTrace,
-    tabStops: boolean|undefined,
-    showColumnNumber?: boolean,
-    ): Array<StackTraceRegularRow|StackTraceAsyncRow> {
-  const stackTraceRows: Array<StackTraceRegularRow|StackTraceAsyncRow> = [];
-
-  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);
-    }
-    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),
-        inlineFrameIndex: 0,
-        revealBreakpoint: previousStackFrameWasBreakpointCondition,
-        maxLength: UI.UIUtils.MaxLengthForDisplayedURLsInConsole,
-      });
-      link.setAttribute('jslog', `${VisualLogging.link('stack-trace').track({click: true})}`);
-      link.addEventListener('contextmenu', populateContextMenu.bind(null, link));
-
-      stackTraceRows.push({functionName, link});
-      previousStackFrameWasBreakpointCondition = [
-        SDK.DebuggerModel.COND_BREAKPOINT_SOURCE_URL,
-        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;
+export interface ViewInput {
+  stackTrace?: StackTrace.StackTrace.StackTrace;
+  tabStops?: boolean;
+  widthConstrained?: boolean;
+  showColumnNumber?: boolean;
+  expandable?: boolean;
+  expanded?: boolean;
+  showIgnoreListed?: boolean;
+  onExpand: () => void;
+  onShowMore: () => void;
+  onShowLess: () => void;
 }
 
-function renderStackTraceTable(
-    container: Element, parent: Element, expandable: boolean,
-    stackTraceRows: Array<StackTraceRegularRow|StackTraceAsyncRow>): void {
-  container.removeChildren();
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
-  // 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');
-    }
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  let renderExpandButton = Boolean(input.expandable);
+  const maybeRenderExpandButton = (): TemplateResult => {
+    // clang-format off
+    const result = html`
+      ${renderExpandButton ? html`
+        <button class="arrow-icon-button" jslog=${VisualLogging.expand().track({click: true})} @click=${input.onExpand}>
+          <span class="arrow-icon"></span>
+        </button>
+      ` : '\n'}`;
+    // clang-format on
+    renderExpandButton = false;
+    return result;
+  };
 
-    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);
-    }
-  }
-
-  tableSection = container.createChild('tfoot');
-  const showAllRow = tableSection.createChild('tr', 'show-all-link');
-  showAllRow.createChild('td');
-  const cell = showAllRow.createChild('td');
-  cell.colSpan = 4;
-  const showAllLink = cell.createChild('span', 'link');
-  // Don't directly put the text of the link in the DOM, as it will likely be
-  // invisible and it may be confusing if it is copied to the clipboard.
-  showAllLink.createChild('span', 'css-inserted-text')
-      .setAttribute('data-inserted-text', i18nString(UIStrings.showMoreFrames));
-  showAllLink.addEventListener('click', () => {
-    container.classList.add('show-hidden-rows');
-    parent.classList.add('show-hidden-rows');
-    // If we are in a popup, this will trigger a re-layout
-    UI.GlassPane.GlassPane.containerMoved(container);
-  }, false);
-  const showLessRow = tableSection.createChild('tr', 'show-less-link');
-  showLessRow.createChild('td');
-  const showLesscell = showLessRow.createChild('td');
-  showLesscell.colSpan = 4;
-  const showLessLink = showLesscell.createChild('span', 'link');
-  showLessLink.createChild('span', 'css-inserted-text')
-      .setAttribute('data-inserted-text', i18nString(UIStrings.showLess));
-  showLessLink.addEventListener('click', () => {
-    container.classList.remove('show-hidden-rows');
-    parent.classList.remove('show-hidden-rows');
-    // If we are in a popup, this will trigger a re-layout
-    UI.GlassPane.GlassPane.containerMoved(container);
-  }, false);
-}
+  const classes = {
+    'stack-preview-container': true,
+    'width-constrained': Boolean(input.widthConstrained),
+    expandable: Boolean(input.expandable),
+    expanded: Boolean(input.expanded),
+    'show-hidden-rows': Boolean(input.showIgnoreListed),
+  };
+  const {stackTrace} = input;
+  // clang-format off
+  render(html`
+    <style>${jsUtilsStyles}</style>
+    <table class=${classMap(classes)}>
+      ${stackTrace ? html`
+        ${[stackTrace.syncFragment, ...stackTrace.asyncFragments].map(fragment => html`
+          <tbody>
+            ${'description' in fragment ? html`
+              <tr class="stack-preview-async-row">
+                <td>${maybeRenderExpandButton()}</td>
+                <td class="stack-preview-async-description">
+                  ${UI.UIUtils.asyncFragmentLabel(stackTrace, fragment as StackTrace.StackTrace.AsyncFragment)}
+                </td>
+                <td></td>
+                <td></td>
+              </tr>
+            ` : nothing}
+            ${fragment.frames.map((frame, i) => {
+              const previousStackFrameWasBreakpointCondition = i > 0 && [
+                SDK.DebuggerModel.COND_BREAKPOINT_SOURCE_URL,
+                SDK.DebuggerModel.LOGPOINT_SOURCE_URL,
+              ].includes(fragment.frames[i - 1].url ?? '');
+              const link = Linkifier.linkifyStackTraceFrame(frame, {
+                showColumnNumber: Boolean(input.showColumnNumber),
+                tabStop: Boolean(input.tabStops),
+                inlineFrameIndex: 0,
+                revealBreakpoint: previousStackFrameWasBreakpointCondition,
+                maxLength: UI.UIUtils.MaxLengthForDisplayedURLsInConsole,
+              });
+              link.setAttribute('jslog', `${VisualLogging.link('stack-trace').track({click: true})}`);
+              link.addEventListener('contextmenu', populateContextMenu.bind(null, link));
+              return html`
+                <tr>
+                  <td>${maybeRenderExpandButton()}</td>
+                  <td class="function-name">
+                    ${UI.UIUtils.beautifyFunctionName(frame.name ?? '')}
+                  </td>
+                  <td> @ </td>
+                  <td class="link">${link}</td>
+                </tr>
+            `;})}
+          </tbody>
+        `)}
+        <tfoot>
+          <tr class="show-all-link">
+            <td></td>
+            <td colspan="3">
+              <span class="link" @click=${input.onShowMore}>
+                <span class="css-inserted-text" data-inserted-text=${i18nString(UIStrings.showMoreFrames)}></span>
+              </span>
+            </td>
+          </tr>
+          <tr class="show-less-link">
+            <td></td>
+            <td colspan="3">
+              <span class="link" @click=${input.onShowLess}>
+                <span class="css-inserted-text" data-inserted-text=${i18nString(UIStrings.showLess)}></span>
+              </span>
+            </td>
+          </tr>
+        </tfoot>
+      ` : nothing}
+    </table>
+  `, target);
+  // clang-format on
+};
 
 export interface Options {
   tabStops?: boolean;
@@ -222,27 +206,17 @@ export interface Options {
   expandable?: boolean;
 }
 
-interface StackTraceRegularRow {
-  functionName: string;
-  link: HTMLElement;
-}
-
-interface StackTraceAsyncRow {
-  asyncDescription: string;
-}
-
 export class StackTracePreviewContent extends UI.Widget.Widget {
+  readonly #view: View;
+
   #stackTrace?: StackTrace.StackTrace.StackTrace;
   #options: Options = {};
+  #expanded = false;
+  #showIgnoreListed = false;
 
-  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 +228,20 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
   }
 
   override performUpdate(): void {
-    if (!this.#stackTrace) {
-      return;
-    }
+    this.element.classList.toggle('expandable', this.#options.expandable);
+    this.element.classList.toggle('expanded', this.#expanded);
+    this.element.classList.toggle('show-hidden-rows', this.#showIgnoreListed);
 
-    const stackTraceRows =
-        buildStackTraceRows(this.#stackTrace, this.#options.tabStops, this.#options.showColumnNumber);
-    renderStackTraceTable(this.#table, this.element, this.#options.expandable ?? false, stackTraceRows);
+    const input: ViewInput = {
+      stackTrace: this.#stackTrace,
+      ...this.#options,
+      expanded: this.#expanded,
+      showIgnoreListed: this.#showIgnoreListed,
+      onExpand: this.#onExpand.bind(this),
+      onShowMore: this.#onShowMoreLess.bind(this, true),
+      onShowLess: this.#onShowMoreLess.bind(this, false),
+    };
+    this.#view(input, {}, this.contentElement);
   }
 
   get linkElements(): readonly HTMLElement[] {
@@ -269,7 +250,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();
   }
 
@@ -281,4 +261,17 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
     this.#stackTrace.addEventListener(StackTrace.StackTrace.Events.UPDATED, this.requestUpdate, this);
     this.requestUpdate();
   }
+
+  #onShowMoreLess(more: boolean): void {
+    this.#showIgnoreListed = more;
+    this.requestUpdate();
+
+    // If we are in a popup, this will trigger a re-layout
+    void this.updateComplete.then(() => UI.GlassPane.GlassPane.containerMoved(this.contentElement));
+  }
+
+  #onExpand(): void {
+    this.#expanded = !this.#expanded;
+    this.requestUpdate();
+  }
 }

package/package.json

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