chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -183,7 +183,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
   createElementForItem(item: string): Element {
     const listItemElement = document.createElement('div');
     UI.ARIAUtils.markAsListitem(listItemElement);
-    const element = listItemElement.createChild('div', 'breakpoint-entry') as HTMLElement;
+    const element = listItemElement.createChild('div', 'breakpoint-entry');
     containerToBreakpointEntry.set(listItemElement, element);
     const enabled = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().xhrBreakpoints().get(item) || false;
     UI.ARIAUtils.markAsCheckbox(element);
@@ -192,7 +192,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
 
     const title = item ? i18nString(UIStrings.urlContainsS, {PH1: item}) : i18nString(UIStrings.anyXhrOrFetch);
     const label = UI.UIUtils.CheckboxLabel.create(title, enabled, undefined, undefined, /* small */ true);
-    UI.ARIAUtils.markAsHidden(label);
+    UI.ARIAUtils.setHidden(label, true);
     UI.ARIAUtils.setLabel(element, title);
     element.appendChild(label);
     label.checkboxElement.addEventListener('click', this.checkboxClicked.bind(this, item, enabled), false);
@@ -372,7 +372,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     this.update();
   }
 
-  private update(): void {
+  override update(): void {
     const isEmpty = this.#breakpoints.length === 0;
     this.#list.element.classList.toggle('hidden', isEmpty);
     this.#emptyElement.classList.toggle('hidden', !isEmpty);

package/front_end/panels/browser_debugger/categorizedBreakpointsSidebarPane.css

@@ -44,6 +44,6 @@
   z-index: -1;
 }
 
-.source-code[is="dt-checkbox"] {
+dt-checkbox.source-code {
   max-width: 100%;
 }

package/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css

@@ -40,7 +40,7 @@
   background-color: var(--sys-color-tonal-container);
 }
 
-.breakpoint-entry [is="dt-checkbox"] {
+.breakpoint-entry dt-checkbox {
   max-width: 100%;
 }
 

package/front_end/panels/console/ConsoleContextSelector.ts

@@ -212,8 +212,7 @@ export class ConsoleContextSelector implements SDK.TargetManager.SDKModelObserve
 
   createElementForItem(item: SDK.RuntimeModel.ExecutionContext): Element {
     const element = document.createElement('div');
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(
-        element, {cssFile: [consoleContextSelectorStyles], delegatesFocus: undefined});
+    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: [consoleContextSelectorStyles]});
     const title = shadowRoot.createChild('div', 'title');
     UI.UIUtils.createTextChild(title, Platform.StringUtilities.trimEndWithMaxLength(this.titleFor(item), 100));
     const subTitle = shadowRoot.createChild('div', 'subtitle');

package/front_end/panels/console/ConsolePinPane.ts

@@ -9,7 +9,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
-// eslint-disable-next-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es-modules-import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -182,7 +182,7 @@ export class ConsolePin {
   private deletePinIcon: UI.UIUtils.DevToolsCloseButton;
 
   constructor(expression: string, private readonly pinPane: ConsolePinPane, private readonly focusOut: () => void) {
-    this.deletePinIcon = document.createElement('div', {is: 'dt-close-button'}) as UI.UIUtils.DevToolsCloseButton;
+    this.deletePinIcon = document.createElement('dt-close-button');
     this.deletePinIcon.classList.add('close-button');
     this.deletePinIcon.setTabbable(true);
     if (expression.length) {
@@ -371,8 +371,7 @@ export class ConsolePin {
     if (!previewText || previewText !== this.pinPreview.deepTextContent()) {
       this.pinPreview.removeChildren();
       if (result && SDK.RuntimeModel.RuntimeModel.isSideEffectFailure(result)) {
-        const sideEffectLabel =
-            (this.pinPreview.createChild('span', 'object-value-calculate-value-button') as HTMLElement);
+        const sideEffectLabel = this.pinPreview.createChild('span', 'object-value-calculate-value-button');
         sideEffectLabel.textContent = '(…)';
         UI.Tooltip.Tooltip.install(sideEffectLabel, i18nString(UIStrings.evaluateAllowingSideEffects));
       } else if (previewText) {

package/front_end/panels/console/ConsoleSidebar.ts

@@ -242,7 +242,7 @@ export class FilterTreeElement extends ConsoleSidebarTreeElement {
 
   private updateGroupTitle(messageCount: number): string {
     if (this.uiStringForFilterCount) {
-      // eslint-disable-next-line rulesdir/l10n_i18nString_call_only_with_uistrings
+      // eslint-disable-next-line rulesdir/l10n-i18nString-call-only-with-uistrings
       return i18nString(this.uiStringForFilterCount, {n: messageCount});
     }
     return '';

package/front_end/panels/console/ConsoleView.test.ts

@@ -208,7 +208,7 @@ describeWithMockConnection('ConsoleView', () => {
       assert.instanceOf(messagesElement, HTMLElement);
       dispatchPasteEvent(messagesElement, {clipboardData: dt, bubbles: true});
 
-      assert.strictEqual(Common.Console.Console.instance().messages().length, 0);
+      assert.lengthOf(Common.Console.Console.instance().messages(), 0);
       stub.restore();
     });
   });
@@ -227,7 +227,7 @@ describeWithMockConnection('ConsoleView', () => {
         SDK.ConsoleModel.Events.MessageAdded,
         createConsoleMessage(target, 'await new Promise(() => ())', SDK.ConsoleModel.FrontendMessageType.Command));
 
-    assert.deepStrictEqual(consoleHistorySetting.get(), ['await new Promise(() => ())']);
+    assert.deepEqual(consoleHistorySetting.get(), ['await new Promise(() => ())']);
   });
 
   it('keeps updating the issue counter when re-attached after detaching', async () => {

package/front_end/panels/console/ConsoleView.ts

@@ -44,7 +44,7 @@ import * as Logs from '../../models/logs/logs.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
-// eslint-disable-next-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es-modules-import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -512,7 +512,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     // FIXME: This is a workaround for the selection machinery bug. See crbug.com/410899
     const selectAllFixer = this.messagesElement.createChild('div', 'console-view-fix-select-all');
     selectAllFixer.textContent = '.';
-    UI.ARIAUtils.markAsHidden(selectAllFixer);
+    UI.ARIAUtils.setHidden(selectAllFixer, true);
 
     this.registerShortcuts();
 
@@ -584,8 +584,9 @@ export class ConsoleView extends UI.Widget.VBox implements
   }
 
   static appendSettingsCheckboxToToolbar(
-      toolbar: UI.Toolbar.Toolbar, settingOrSetingName: Common.Settings.Setting<boolean>|string, title: string,
-      alternateTitle?: string): UI.Toolbar.ToolbarSettingCheckbox {
+      toolbar: UI.Toolbar.Toolbar, settingOrSetingName: Common.Settings.Setting<boolean>|string,
+      title: Common.UIString.LocalizedString,
+      alternateTitle?: Common.UIString.LocalizedString): UI.Toolbar.ToolbarSettingCheckbox {
     let setting: Common.Settings.Setting<boolean>;
     if (typeof settingOrSetingName === 'string') {
       setting = Common.Settings.Settings.instance().moduleSetting(settingOrSetingName);

package/front_end/panels/console/ConsoleViewMessage.test.ts

@@ -16,10 +16,35 @@ import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import * as Console from './console.js';
 // The css files aren't exported by the bundle, so we need to import it directly.
-// eslint-disable-next-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es-modules-import
 import consoleViewStyles from './consoleView.css.js';
 
+describe('ConsoleViewMessage', () => {
+  describe('concatErrorDescriptionAndIssueSummary', () => {
+    const {concatErrorDescriptionAndIssueSummary} = Console.ConsoleViewMessage;
+
+    it('correctly appends the issue summary in case of single line error descriptions', () => {
+      assert.strictEqual(
+          concatErrorDescriptionAndIssueSummary(
+              'TypeError: Failed to fetch',
+              'Access blocked by CORS policy: Cross origin requests are not allowed by request mode.'),
+          'TypeError: Failed to fetch. Access blocked by CORS policy: Cross origin requests are not allowed by request mode.',
+      );
+    });
+
+    it('correctly inserts the issue summary in case of multi-line error descriptions', () => {
+      assert.strictEqual(
+          concatErrorDescriptionAndIssueSummary(
+              'TypeError: Failed to fetch\n  at (index):25:5',
+              'Access blocked by CORS policy: Cross origin requests are not allowed by request mode.'),
+          'TypeError: Failed to fetch. Access blocked by CORS policy: Cross origin requests are not allowed by request mode.\n  at (index):25:5',
+      );
+    });
+  });
+});
+
 describeWithMockConnection('ConsoleViewMessage', () => {
   describe('anchor rendering', () => {
     it('links to the top frame for normal console message', () => {
@@ -179,17 +204,23 @@ describeWithMockConnection('ConsoleViewMessage', () => {
       assert.isTrue(showLess.checkVisibility());
     }
 
-    function errorMessageForStack(stack: Protocol.Runtime.StackTrace) {
-      return [
+    function errorMessageForStack(stack: Protocol.Runtime.StackTrace, withBuiltinFrames?: boolean) {
+      const lines = [
         'Error:',
-        ...(stack.callFrames.map(
-            frame => `    at ${frame.functionName} (${frame.url}:${frame.lineNumber}:${frame.columnNumber})`)),
-      ].join('\n');
+        ...(stack.callFrames.flatMap(frame => {
+          const line = `    at ${frame.functionName} (${frame.url}:${frame.lineNumber}:${frame.columnNumber})`;
+          if (withBuiltinFrames) {
+            return [line, '    at JSON.parse (<anonymous>)'];
+          }
+          return [line];
+        })),
+      ];
+      return lines.join('\n');
     }
 
     function getCallFrames(element: HTMLElement): string[] {
       const results = [];
-      for (const line of element.querySelectorAll('.formatted-stack-frame')) {
+      for (const line of element.querySelectorAll('.formatted-stack-frame,.formatted-builtin-stack-frame')) {
         if (line.checkVisibility()) {
           results.push(line.textContent ?? 'Error: line was null or undefined');
         }
@@ -221,7 +252,8 @@ describeWithMockConnection('ConsoleViewMessage', () => {
       (showLess.querySelector('.link') as HTMLElement).click();
     }
 
-    async function createConsoleMessageWithIgnoreListing(ignoreListFn: (url: string) => Boolean): Promise<HTMLElement> {
+    async function createConsoleMessageWithIgnoreListing(
+        ignoreListFn: (url: string) => Boolean, withBuiltinFrames?: boolean): Promise<HTMLElement> {
       const target = createTarget();
       const runtimeModel = target.model(SDK.RuntimeModel.RuntimeModel);
       const stackTrace = createStackTrace([
@@ -229,7 +261,7 @@ describeWithMockConnection('ConsoleViewMessage', () => {
         'USER_ID::userFunction::http://example.com/script.js::10::2',
         'APP_ID::entry::http://example.com/app.js::25::10',
       ]);
-      const stackTraceMessage = errorMessageForStack(stackTrace);
+      const stackTraceMessage = errorMessageForStack(stackTrace, withBuiltinFrames);
       const messageDetails = {
         type: Protocol.Runtime.ConsoleAPICalledEventType.Error,
         stackTrace,
@@ -280,6 +312,20 @@ describeWithMockConnection('ConsoleViewMessage', () => {
       '    at userNestedFunction (/script.js:40:15)\n',
       '    at userFunction (/script.js:10:2)\n',
     ];
+    const EXPANDED_UNSTRUCTURED_WITH_BUILTIN = [
+      '    at userNestedFunction (/script.js:40:15)\n',
+      '    at JSON.parse (<anonymous>)\n',
+      '    at userFunction (/script.js:10:2)\n',
+      '    at JSON.parse (<anonymous>)\n',
+      '    at entry (/app.js:25:10)\n',
+      '    at JSON.parse (<anonymous>)',
+    ];
+    const COLLAPSED_UNSTRUCTURED_WITH_BUILTIN = [
+      '    at userNestedFunction (/script.js:40:15)\n',
+      '    at JSON.parse (<anonymous>)\n',
+      '    at userFunction (/script.js:10:2)\n',
+      '    at JSON.parse (<anonymous>)\n',
+    ];
     const EXPANDED_STRUCTURED = [
       '\nuserNestedFunction @ example.com/script.js:41',
       '\nuserFunction @ example.com/script.js:11',
@@ -335,5 +381,51 @@ describeWithMockConnection('ConsoleViewMessage', () => {
       assert.deepEqual(getStructuredCallFrames(element), COLLAPSED_STRUCTURED);
       assert.deepEqual(getCallFrames(element), COLLAPSED_UNSTRUCTURED);
     });
+
+    it('shows everything with no links when nothing is ignore listed, including builtin frames', async () => {
+      const element = await createConsoleMessageWithIgnoreListing(_ => false, true);
+      assertNoLinks(element);
+      assert.deepEqual(getCallFrames(element), EXPANDED_UNSTRUCTURED_WITH_BUILTIN);
+      assert.deepEqual(getStructuredCallFrames(element), []);
+      expandStructuredTrace(element);
+      assertNoLinks(element);
+      assert.deepEqual(getStructuredCallFrames(element), EXPANDED_STRUCTURED);
+    });
+
+    it('shows everything with no links when everything is ignore listed, including builtin frames', async () => {
+      const element = await createConsoleMessageWithIgnoreListing(_ => true, true);
+      assertNoLinks(element);
+      assert.deepEqual(getCallFrames(element), EXPANDED_UNSTRUCTURED_WITH_BUILTIN);
+      assert.deepEqual(getStructuredCallFrames(element), []);
+      expandStructuredTrace(element);
+      assertNoLinks(element);
+      assert.deepEqual(getStructuredCallFrames(element), EXPANDED_STRUCTURED);
+    });
+
+    it('shows expandable list when something is ignore listed, collapsing builtin frames', async () => {
+      const element = await createConsoleMessageWithIgnoreListing(url => url.includes('/app.js'), true);
+      assertShowAllLink(element);
+      assert.deepEqual(getStructuredCallFrames(element), []);
+      assert.deepEqual(getCallFrames(element), COLLAPSED_UNSTRUCTURED_WITH_BUILTIN);
+      expandIgnored(element);
+      assertShowLessLink(element);
+      assert.deepEqual(getCallFrames(element), EXPANDED_UNSTRUCTURED_WITH_BUILTIN);
+      collapseIgnored(element);
+      assertShowAllLink(element);
+
+      expandStructuredTrace(element);
+
+      assertShowAllLink(element);
+      assert.deepEqual(getStructuredCallFrames(element), COLLAPSED_STRUCTURED);
+      assert.deepEqual(getCallFrames(element), COLLAPSED_UNSTRUCTURED_WITH_BUILTIN);
+      expandIgnored(element);
+      assertShowLessLink(element);
+      assert.deepEqual(getCallFrames(element), EXPANDED_UNSTRUCTURED_WITH_BUILTIN);
+      assert.deepEqual(getStructuredCallFrames(element), EXPANDED_STRUCTURED);
+      collapseIgnored(element);
+      assertShowAllLink(element);
+      assert.deepEqual(getStructuredCallFrames(element), COLLAPSED_STRUCTURED);
+      assert.deepEqual(getCallFrames(element), COLLAPSED_UNSTRUCTURED_WITH_BUILTIN);
+    });
   });
 });

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -50,7 +50,7 @@ import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.j
 import * as RequestLinkIcon from '../../ui/components/request_link_icon/request_link_icon.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
-// eslint-disable-next-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es-modules-import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -221,6 +221,24 @@ export const getMessageForElement = (element: Element): ConsoleViewMessage|undef
   return elementToMessage.get(element);
 };
 
+/**
+ * Combines the error description (essentially the `Error#stack` property value)
+ * with the `issueSummary`.
+ *
+ * @param description the `description` property of the `Error` remote object.
+ * @param issueSummary the optional `issueSummary` of the `exceptionMetaData`.
+ * @returns the enriched description.
+ * @see https://goo.gle/devtools-reduce-network-noise-design
+ */
+export const concatErrorDescriptionAndIssueSummary = (description: string, issueSummary: string): string => {
+  // Insert the issue summary right after the error message.
+  const pos = description.indexOf('\n');
+  const prefix = pos === -1 ? description : description.substring(0, pos);
+  const suffix = pos === -1 ? '' : description.substring(pos);
+  description = `${prefix}. ${issueSummary}${suffix}`;
+  return description;
+};
+
 // This value reflects the 18px min-height of .console-message, plus the
 // 1px border of .console-message-wrapper. Keep in sync with consoleView.css.
 const defaultConsoleRowHeight = 19;
@@ -1309,7 +1327,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       this.elementInternal.classList.add('console-from-api');
     }
     if (this.inSimilarGroup) {
-      this.similarGroupMarker = (this.consoleRowWrapper.createChild('div', 'nesting-level-marker') as HTMLElement);
+      this.similarGroupMarker = this.consoleRowWrapper.createChild('div', 'nesting-level-marker');
       this.similarGroupMarker.classList.toggle('group-closed', this.lastInSimilarGroup);
     }
 
@@ -1528,8 +1546,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     }
 
     if (!this.repeatCountElement) {
-      this.repeatCountElement =
-          (document.createElement('span', {is: 'dt-small-bubble'}) as UI.UIUtils.DevToolsSmallBubble);
+      this.repeatCountElement = document.createElement('dt-small-bubble');
       this.repeatCountElement.classList.add('console-message-repeat-count');
       switch (this.message.level) {
         case Protocol.Log.LogEntryLevel.Warning:
@@ -1704,6 +1721,11 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       return null;
     }
 
+    const issueSummary = exceptionDetails?.exceptionMetaData?.issueSummary;
+    if (typeof issueSummary === 'string') {
+      string = concatErrorDescriptionAndIssueSummary(string, issueSummary);
+    }
+
     const linkInfos = parseSourcePositionsFromErrorStack(runtimeModel, string);
     if (!linkInfos?.length) {
       return null;
@@ -1717,7 +1739,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
     for (let i = 0; i < linkInfos.length; ++i) {
       const newline = i < linkInfos.length - 1 ? '\n' : '';
-      const {line, link} = linkInfos[i];
+      const {line, link, isCallFrame} = linkInfos[i];
       // Syntax errors don't have a stack frame that points to the source position
       // where the error occurred. We use the source location from the
       // exceptionDetails and append it to the end of the message instead.
@@ -1732,11 +1754,17 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         formattedResult.append(newline);
         continue;
       }
-      if (!link) {
+      if (!isCallFrame) {
         formattedResult.appendChild(this.linkifyStringAsFragment(`${line}${newline}`));
         continue;
       }
       const formattedLine = document.createElement('span');
+      if (!link) {
+        formattedLine.appendChild(this.linkifyStringAsFragment(`${line}${newline}`));
+        formattedLine.classList.add('formatted-builtin-stack-frame');
+        formattedResult.appendChild(formattedLine);
+        continue;
+      }
       const suffix = `${link.suffix}${newline}`;
       formattedLine.appendChild(this.linkifyStringAsFragment(link.prefix));
       const scriptLocationLink = this.linkifier.linkifyScriptLocation(

package/front_end/panels/console/ConsoleViewport.ts

@@ -85,8 +85,8 @@ export class ConsoleViewport {
     this.topGapElement.textContent = '\uFEFF';
     this.bottomGapElement.textContent = '\uFEFF';
 
-    UI.ARIAUtils.markAsHidden(this.topGapElement);
-    UI.ARIAUtils.markAsHidden(this.bottomGapElement);
+    UI.ARIAUtils.setHidden(this.topGapElement, true);
+    UI.ARIAUtils.setHidden(this.bottomGapElement, true);
 
     this.provider = provider;
     this.element.addEventListener('scroll', this.onScroll.bind(this), false);

package/front_end/panels/console/ErrorStackParser.test.ts

@@ -84,7 +84,7 @@ describe('ErrorStackParser', () => {
         at foo (file:///testing.js:10:3)`);
 
     assert.exists(frames);
-    assert.deepStrictEqual(frames[1].link, {
+    assert.deepEqual(frames[1].link, {
       url: fileTestingUrl,
       prefix: '        at foo (',
       suffix: ')',
@@ -99,7 +99,7 @@ describe('ErrorStackParser', () => {
         at foo (file:///testing.js)`);
 
     assert.exists(frames);
-    assert.deepStrictEqual(frames[1].link, {
+    assert.deepEqual(frames[1].link, {
       url: fileTestingUrl,
       prefix: '        at foo (',
       suffix: ')',
@@ -114,7 +114,7 @@ describe('ErrorStackParser', () => {
         at file:///testing.js:42:3`);
 
     assert.exists(frames);
-    assert.deepStrictEqual(frames[1].link, {
+    assert.deepEqual(frames[1].link, {
       url: fileTestingUrl,
       prefix: '        at ',
       suffix: '',
@@ -129,7 +129,7 @@ describe('ErrorStackParser', () => {
         at async file:///testing.js:42:3`);
 
     assert.exists(frames);
-    assert.deepStrictEqual(frames[1].link, {
+    assert.deepEqual(frames[1].link, {
       url: fileTestingUrl,
       prefix: '        at async ',
       suffix: '',
@@ -148,7 +148,7 @@ describe('ErrorStackParser', () => {
 
     assert.exists(frames);
     assert.lengthOf(frames, 3);
-    assert.deepStrictEqual(frames[1].link, {
+    assert.deepEqual(frames[1].link, {
       url,
       prefix: '        at load (',
       suffix: ')',
@@ -156,7 +156,7 @@ describe('ErrorStackParser', () => {
       columnNumber: 4,  // 0-based.
       enclosedInBraces: true,
     });
-    assert.deepStrictEqual(frames[2].link, {
+    assert.deepEqual(frames[2].link, {
       url,
       prefix: '        at ',
       suffix: '',
@@ -173,7 +173,7 @@ describe('ErrorStackParser', () => {
 
     assert.exists(frames);
     assert.lengthOf(frames, 2);
-    assert.deepStrictEqual(frames[1].link, {
+    assert.deepEqual(frames[1].link, {
       url,
       prefix: '    at eval (eval at <anonymous> (',
       suffix: '), <anonymous>:1:1)',
@@ -198,7 +198,7 @@ describe('ErrorStackParser', () => {
 
     assert.exists(frames);
     assert.lengthOf(frames, 3);
-    assert.deepStrictEqual(frames[2].link, {
+    assert.deepEqual(frames[2].link, {
       url: 'http://www.example.org/inspected-page.html' as Platform.DevToolsPath.UrlString,
       prefix: '    at eval (eval at testFunction (',
       suffix: '), <anonymous>:1:10)',
@@ -216,7 +216,7 @@ describe('ErrorStackParser', () => {
 
     assert.exists(frames);
     assert.lengthOf(frames, 4);
-    assert.deepStrictEqual(frames[1].link, {
+    assert.deepEqual(frames[1].link, {
       url: 'http://www.example.org/(abc)/foo.js' as Platform.DevToolsPath.UrlString,
       prefix: '        at foo (',
       suffix: ')',
@@ -224,7 +224,7 @@ describe('ErrorStackParser', () => {
       columnNumber: 2,  // 0-based.
       enclosedInBraces: true,
     });
-    assert.deepStrictEqual(frames[2].link, {
+    assert.deepEqual(frames[2].link, {
       url: 'http://www.example.org/(abc)/foo.js' as Platform.DevToolsPath.UrlString,
       prefix: '        at async bar (',
       suffix: ')',
@@ -232,7 +232,7 @@ describe('ErrorStackParser', () => {
       columnNumber: 1,  // 0-based.
       enclosedInBraces: true,
     });
-    assert.deepStrictEqual(frames[3].link, {
+    assert.deepEqual(frames[3].link, {
       url: 'http://www.example.org/(abc)/foo.js' as Platform.DevToolsPath.UrlString,
       prefix: '        at ',
       suffix: '',
@@ -320,5 +320,25 @@ describe('ErrorStackParser', () => {
       assert.isUndefined(parsedFrames[2].link);
       assert.strictEqual(parsedFrames[3].link?.scriptId, sid('30'));
     });
+
+    it('combines builtin frames', () => {
+      const parsedFrames = parseErrorStack(`Error: some error
+        at foo (http://example.com/a.js:6:3)
+        at Array.forEach (<anonymous>)
+        at JSON.parse (<anonymous>)
+        at bar (http://example.com/b.js:43:14)`);
+      assert.exists(parsedFrames);
+
+      assert.isUndefined(parsedFrames[0].link);
+      assert.isUndefined(parsedFrames[0].isCallFrame);
+      assert.strictEqual(parsedFrames[1].link?.url, 'http://example.com/a.js' as Platform.DevToolsPath.UrlString);
+      assert.isTrue(parsedFrames[1].isCallFrame);
+      assert.isUndefined(parsedFrames[2].link);
+      assert.isTrue(parsedFrames[2].isCallFrame);
+      assert.strictEqual(
+          parsedFrames[2].line, '        at Array.forEach (<anonymous>)\n        at JSON.parse (<anonymous>)');
+      assert.strictEqual(parsedFrames[3].link?.url, 'http://example.com/b.js' as Platform.DevToolsPath.UrlString);
+      assert.isTrue(parsedFrames[3].isCallFrame);
+    });
   });
 });

package/front_end/panels/console/ErrorStackParser.ts

@@ -9,6 +9,7 @@ import type * as Protocol from '../../generated/protocol.js';
 
 export interface ParsedErrorFrame {
   line: string;
+  isCallFrame?: boolean;
   link?: {
     url: Platform.DevToolsPath.UrlString,
     prefix: string,
@@ -41,13 +42,14 @@ export function parseSourcePositionsFromErrorStack(
   for (const line of lines) {
     const match = /^\s*at\s(async\s)?/.exec(line);
     if (!match) {
-      if (linkInfos.length && linkInfos[linkInfos.length - 1].link) {
+      if (linkInfos.length && linkInfos[linkInfos.length - 1].isCallFrame) {
         return null;
       }
       linkInfos.push({line});
       continue;
     }
 
+    const isCallFrame = true;
     let left = match[0].length;
     let right = line.length;
     let enclosedInBraces = false;
@@ -74,7 +76,12 @@ export function parseSourcePositionsFromErrorStack(
     const linkCandidate = line.substring(left, right);
     const splitResult = Common.ParsedURL.ParsedURL.splitLineAndColumn(linkCandidate);
     if (splitResult.url === '<anonymous>') {
-      linkInfos.push({line});
+      if (linkInfos.length && linkInfos[linkInfos.length - 1].isCallFrame && !linkInfos[linkInfos.length - 1].link) {
+        // Combine builtin frames.
+        linkInfos[linkInfos.length - 1].line += `\n${line}`;
+      } else {
+        linkInfos.push({line, isCallFrame});
+      }
       continue;
     }
     let url = parseOrScriptMatch(debuggerModel, splitResult.url);
@@ -87,6 +94,7 @@ export function parseSourcePositionsFromErrorStack(
 
     linkInfos.push({
       line,
+      isCallFrame,
       link: {
         url,
         prefix: line.substring(0, left),

package/front_end/panels/console/consolePinPane.css

@@ -69,6 +69,6 @@
 }
 
 .console-pin:focus-within .console-pin-preview,
-.console-pin-name:not(:focus-within):not(:hover) {
+.console-pin-name:not(:focus-within, :hover) {
   opacity: 60%;
 }

package/front_end/panels/console/consoleView.css

@@ -246,7 +246,7 @@
   }
 }
 
-.console-message-wrapper:not(.console-error-level):not(.console-warning-level) {
+.console-message-wrapper:not(.console-error-level, .console-warning-level) {
   & .console-message::before,
   & .console-user-command::before {
     width: calc(100% - 25px);
@@ -263,7 +263,7 @@
   }
 }
 
-.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level):not(.console-warning-level) {
+.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level, .console-warning-level) {
   border-top-width: 0;
 }
 
@@ -271,16 +271,16 @@
   border-top-color: transparent;
 }
 
-.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level):not(.console-warning-level):focus {
+.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level, .console-warning-level):focus {
   border-top-width: 1px;
 }
 
-.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level):not(.console-warning-level):focus .console-message {
+.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level, .console-warning-level):focus .console-message {
   padding-top: 2px;
   min-height: 16px;
 }
 
-.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level):not(.console-warning-level):focus .command-result-icon {
+.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level, .console-warning-level):focus .command-result-icon {
   top: 3px;
 }
 
@@ -389,6 +389,12 @@
   .formatted-stack-frame:has(.ignore-list-link) {
     display: var(--display-ignored-formatted-stack-frame);
     opacity: 60%;
+
+    /* Subsequent builtin stack frames are also treated as ignored */
+    & + .formatted-builtin-stack-frame {
+      display: var(--display-ignored-formatted-stack-frame);
+      opacity: 60%;
+    }
   }
 }
 

package/front_end/panels/coverage/CoverageListView.ts

@@ -195,7 +195,7 @@ export class CoverageListView extends UI.Widget.VBox {
     this.setDefaultFocusedChild(dataGridWidget);
   }
 
-  update(coverageInfo: URLCoverageInfo[]): void {
+  override update(coverageInfo: URLCoverageInfo[] = []): void {
     let hadUpdates = false;
     const maxSize = coverageInfo.reduce((acc, entry) => Math.max(acc, entry.size()), 0);
     const rootNode = this.dataGrid.rootNode();