chrome-devtools-frontend 1.0.1586699 → 1.0.1587905

package/front_end/third_party/puppeteer/package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "puppeteer-core",
-  "version": "24.37.4",
+  "version": "24.37.5",
   "description": "A high-level API to control headless Chrome over the DevTools Protocol",
   "keywords": [
     "puppeteer",

package/front_end/third_party/puppeteer/package/src/revisions.ts

@@ -8,7 +8,7 @@
  * @internal
  */
 export const PUPPETEER_REVISIONS = Object.freeze({
-  chrome: '145.0.7632.76',
-  'chrome-headless-shell': '145.0.7632.76',
+  chrome: '145.0.7632.77',
+  'chrome-headless-shell': '145.0.7632.77',
   firefox: 'stable_147.0.4',
 });

package/front_end/third_party/puppeteer/package/src/util/version.ts

@@ -6,5 +6,5 @@
 
 // If moved update release-please config
 // x-release-please-start-version
-export const packageVersion = '24.37.4';
+export const packageVersion = '24.37.5';
 // x-release-please-end

package/front_end/ui/legacy/Toolbar.ts

@@ -40,6 +40,10 @@ const UIStrings = {
    * @description Placeholder for filter bars that shows before the user types in a filter keyword.
    */
   filter: 'Filter',
+  /**
+   * @description Tooltip shown when the user hovers over the regex icon to toggle regular-expression filtering.
+   */
+  useRegularExpression: 'Use regular expression',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/Toolbar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -693,7 +697,6 @@ export namespace ToolbarButton {
 export class ToolbarInput extends ToolbarItem<ToolbarInput.EventTypes> {
   private prompt: TextPrompt;
   private readonly proxyElement: Element;
-
   constructor(
       placeholder: string, accessiblePlaceholder?: string, growFactor?: number, shrinkFactor?: number, tooltip?: string,
       completions?: ((arg0: string, arg1: string, arg2?: boolean|undefined) => Promise<Suggestion[]>),
@@ -759,6 +762,10 @@ export class ToolbarInput extends ToolbarItem<ToolbarInput.EventTypes> {
     this.updateEmptyStyles();
   }
 
+  protected insertTrailingElement(element: Element): void {
+    this.element.appendChild(element);
+  }
+
   override applyEnabledState(enabled: boolean): void {
     if (enabled) {
       this.element.classList.remove('disabled');
@@ -818,7 +825,8 @@ export class ToolbarFilter extends ToolbarInput {
   constructor(
       filterBy?: Common.UIString.LocalizedString, growFactor?: number, shrinkFactor?: number, tooltip?: string,
       completions?: ((arg0: string, arg1: string, arg2?: boolean|undefined) => Promise<Suggestion[]>),
-      dynamicCompletions?: boolean, jslogContext?: string, element?: HTMLElement) {
+      dynamicCompletions?: boolean, jslogContext?: string, element?: HTMLElement, showRegexToggle?: boolean,
+      onRegexToggle?: () => void) {
     const filterPlaceholder = filterBy ? filterBy : i18nString(UIStrings.filter);
     super(
         filterPlaceholder, filterPlaceholder, growFactor, shrinkFactor, tooltip, completions, dynamicCompletions,
@@ -827,17 +835,36 @@ export class ToolbarFilter extends ToolbarInput {
     const filterIcon = createIcon('filter');
     this.element.prepend(filterIcon);
     this.element.classList.add('toolbar-filter');
+
+    if (showRegexToggle) {
+      const regexIconName = 'regular-expression';
+      const regexButton = new Buttons.Button.Button();
+      regexButton.data = {
+        variant: Buttons.Button.Variant.ICON_TOGGLE,
+        size: Buttons.Button.Size.SMALL,
+        iconName: regexIconName,
+        toggledIconName: regexIconName,
+        toggleType: Buttons.Button.ToggleType.PRIMARY,
+        toggled: false,
+        title: i18nString(UIStrings.useRegularExpression),
+        jslogContext: regexIconName,
+      };
+      ARIAUtils.setLabel(regexButton, i18nString(UIStrings.useRegularExpression));
+      regexButton.addEventListener('click', () => {
+        onRegexToggle?.();
+      });
+      this.insertTrailingElement(regexButton);
+    }
   }
 }
 
 export class ToolbarInputElement extends HTMLElement {
-  static observedAttributes = ['value', 'disabled'];
+  static observedAttributes = ['value', 'disabled', 'regex'];
 
   item?: ToolbarInput;
   datalist: HTMLDataListElement|null = null;
   #value: string|undefined = undefined;
   #disabled = false;
-
   connectedCallback(): void {
     if (this.item) {
       return;
@@ -855,7 +882,8 @@ export class ToolbarInputElement extends HTMLElement {
       this.item = new ToolbarFilter(
           placeholder as Platform.UIString.LocalizedString, /* growFactor=*/ undefined,
           /* shrinkFactor=*/ undefined, tooltip, this.datalist ? this.#onAutocomplete.bind(this) : undefined,
-          /* dynamicCompletions=*/ undefined, jslogContext || 'filter', this);
+          /* dynamicCompletions=*/ undefined, jslogContext || 'filter', this, this.hasAttribute('regex'),
+          this.#onRegexToggle.bind(this));
     } else {
       this.item = new ToolbarInput(
           placeholder, accessiblePlaceholder, /* growFactor=*/ undefined,
@@ -880,6 +908,10 @@ export class ToolbarInputElement extends HTMLElement {
     this.item?.focus();
   }
 
+  #onRegexToggle(): void {
+    this.dispatchEvent(new CustomEvent('regextoggle'));
+  }
+
   async #onAutocomplete(expression: string, prefix: string, force?: boolean): Promise<Suggestion[]> {
     if (!prefix && !force && expression || !this.datalist) {
       return [];

package/front_end/ui/legacy/UIUtils.ts

@@ -2034,8 +2034,8 @@ export class InterceptBindingDirective extends Lit.Directive.Directive {
   }
 
   /* eslint-disable-next-line @typescript-eslint/no-unsafe-function-type */
-  render(_listener: Function): undefined {
-    return undefined;
+  render(listener: Function): Function {
+    return listener;
   }
 
   static setEventListeners(templateElement: Element, renderedElement: Element): void {
@@ -2092,7 +2092,17 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
   }
 
   private static patchLitTemplate(template: Lit.LitTemplate): void {
-    const wrapper = Lit.Directive.directive(InterceptBindingDirective);
+    const interceptingWrapper = Lit.Directive.directive(InterceptBindingDirective);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const patchingWrapper = <Args extends any[], R>(fn: (...args: Args) => R): ((...args: Args) => R) => {
+      return function(this: unknown, ...args: Args): R {
+        const result = fn.apply(this, args);
+        if (isLitTemplate(result)) {
+          HTMLElementWithLightDOMTemplate.patchLitTemplate(result);
+        }
+        return result;
+      };
+    };
     if (template === Lit.nothing) {
       return;
     }
@@ -2104,10 +2114,19 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
           value['_$litType$'] === 1);
     }
 
+    function isLitDirective(value: unknown): value is {values: unknown[]} {
+      return Boolean(typeof value === 'object' && value && '_$litDirective$' in value && 'values' in value);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function isCallable(value: unknown): value is(...args: any[]) => any {
+      return typeof value === 'function';
+    }
+
     function patchValue(value: unknown): unknown {
-      if (typeof value === 'function') {
+      if (isCallable(value)) {
         try {
-          return wrapper(value);
+          return interceptingWrapper(value);
         } catch {
           return value;
         }
@@ -2116,6 +2135,17 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
         HTMLElementWithLightDOMTemplate.patchLitTemplate(value);
         return value;
       }
+      if (isLitDirective(value)) {
+        for (let i = 0; i < value.values.length; i++) {
+          const subvalue = value.values[i];
+          if (isCallable(subvalue)) {
+            value.values[i] = patchingWrapper(subvalue);
+          } else {
+            value.values[i] = patchValue(subvalue);
+          }
+        }
+        return value;
+      }
       if (Array.isArray(value) || value instanceof Iterator) {
         return value.map(patchValue);
       }

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

@@ -37,14 +37,14 @@ 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 {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, createRef, ref} = Directives;
+const {classMap} = Directives;
 
 const UIStrings = {
   /**
@@ -97,134 +97,105 @@ export interface ViewInput {
   widthConstrained?: boolean;
   showColumnNumber?: boolean;
   expandable?: boolean;
+  expanded?: boolean;
+  showIgnoreListed?: boolean;
+  onExpand: () => void;
+  onShowMore: () => void;
+  onShowLess: () => void;
 }
 
-export type View = (input: ViewInput, output: {table?: HTMLElement}, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 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 classes = {
     'stack-preview-container': true,
     'width-constrained': Boolean(input.widthConstrained),
+    expandable: Boolean(input.expandable),
+    expanded: Boolean(input.expanded),
+    'show-hidden-rows': Boolean(input.showIgnoreListed),
   };
-  // TODO(crbug.com/483576322): Remove once fully migrated.
-  const tableRef = createRef<HTMLElement>();
+  const {stackTrace} = input;
   // clang-format off
   render(html`
     <style>${jsUtilsStyles}</style>
-    <table class=${classMap(classes)} ${ref(tableRef)}>
+    <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
-  output.table = tableRef.value;
 };
 
-function renderStackTraceTable(
-    container: Element,
-    parent: Element,
-    stackTrace: StackTrace.StackTrace.StackTrace,
-    options: Options,
-    ): void {
-  container.removeChildren();
-
-  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: Boolean(options.showColumnNumber),
-        tabStop: Boolean(options.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 ?? '');
-    }
-
-    return stackTraceRows;
-  }
-
-  // The tableSection groups one or more synchronous call frames together.
-  // Wherever there is an asynchronous call, a new section is created.
-  let firstRow = true;
-  for (const fragment of [stackTrace.syncFragment, ...stackTrace.asyncFragments]) {
-    if (fragment.frames.length === 0) {
-      continue;
-    }
-
-    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);
-      }
-    }
-  }
-
-  const 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);
-}
-
 export interface Options {
   tabStops?: boolean;
   // Whether the width of stack trace preview
@@ -235,20 +206,13 @@ 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;
 
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
     super(element, {useShadowDom: true, classes: ['monospace', 'stack-preview-container']});
@@ -264,17 +228,20 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
   }
 
   override performUpdate(): void {
-    const output: {table?: HTMLElement} = {};
-    this.#view(
-        {
-          stackTrace: this.#stackTrace,
-          ...this.#options,
-        },
-        output, this.contentElement);
+    this.element.classList.toggle('expandable', this.#options.expandable);
+    this.element.classList.toggle('expanded', this.#expanded);
+    this.element.classList.toggle('show-hidden-rows', this.#showIgnoreListed);
 
-    if (this.#stackTrace && output.table) {
-      renderStackTraceTable(output.table, this.element, this.#stackTrace, this.#options);
-    }
+    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[] {
@@ -294,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.1586699"
+  "version": "1.0.1587905"
 }