chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

package/front_end/models/issues_manager/PermissionElementIssue.ts

@@ -0,0 +1,262 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
+
+import {type AffectedElement, Issue, IssueCategory, IssueKind} from './Issue.js';
+import type {MarkdownIssueDescription} from './MarkdownIssueDescription.js';
+
+export class PermissionElementIssue extends Issue<Protocol.Audits.PermissionElementIssueDetails> {
+  #issueDetails: Protocol.Audits.PermissionElementIssueDetails;
+
+  constructor(
+      issueDetails: Protocol.Audits.PermissionElementIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
+    const issueCode = [
+      Protocol.Audits.InspectorIssueCode.PermissionElementIssue,
+      issueDetails.issueType,
+    ].join('::');
+    super(issueCode, issueDetails, issuesModel);
+    this.#issueDetails = issueDetails;
+  }
+
+  getCategory(): IssueCategory {
+    return IssueCategory.PERMISSION_ELEMENT;
+  }
+
+  getDescription(): MarkdownIssueDescription|null {
+    const issueType = this.#issueDetails.issueType;
+
+    switch (issueType) {
+      case Protocol.Audits.PermissionElementIssueType.InvalidType:
+        return {
+          file: 'permissionElementInvalidType.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.FencedFrameDisallowed:
+        return {
+          file: 'permissionElementFencedFrameDisallowed.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.CspFrameAncestorsMissing:
+        return {
+          file: 'permissionElementCspFrameAncestorsMissing.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.PermissionsPolicyBlocked:
+        return {
+          file: 'permissionElementPermissionsPolicyBlocked.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+            ['PLACEHOLDER_PermissionName', this.#issueDetails.permissionName || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.PaddingRightUnsupported:
+        return {
+          file: 'permissionElementPaddingRightUnsupported.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.PaddingBottomUnsupported:
+        return {
+          file: 'permissionElementPaddingBottomUnsupported.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.InsetBoxShadowUnsupported:
+        return {
+          file: 'permissionElementInsetBoxShadowUnsupported.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.RequestInProgress:
+        return {
+          file: 'permissionElementRequestInProgress.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.UntrustedEvent:
+        return {
+          file: 'permissionElementUntrustedEvent.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.RegistrationFailed:
+        return {
+          file: 'permissionElementRegistrationFailed.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.TypeNotSupported:
+        return {
+          file: 'permissionElementTypeNotSupported.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.InvalidTypeActivation:
+        return {
+          file: 'permissionElementInvalidTypeActivation.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.SecurityChecksFailed:
+        return {
+          file: 'permissionElementSecurityChecksFailed.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.ActivationDisabled: {
+        if (this.#issueDetails.occluderNodeInfo && this.#issueDetails.occluderParentNodeInfo) {
+          return {
+            file: 'permissionElementActivationDisabledWithOccluderParent.md',
+            substitutions: new Map([
+              ['PLACEHOLDER_DisableReason', this.#issueDetails.disableReason || ''],
+              ['PLACEHOLDER_OccluderInfo', this.#issueDetails.occluderNodeInfo || ''],
+              ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+              ['PLACEHOLDER_OccluderParentInfo', this.#issueDetails.occluderParentNodeInfo || ''],
+            ]),
+            links: [],
+          };
+        }
+
+        if (this.#issueDetails.occluderNodeInfo) {
+          return {
+            file: 'permissionElementActivationDisabledWithOccluder.md',
+            substitutions: new Map([
+              ['PLACEHOLDER_DisableReason', this.#issueDetails.disableReason || ''],
+              ['PLACEHOLDER_OccluderInfo', this.#issueDetails.occluderNodeInfo || ''],
+              ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+            ]),
+            links: [],
+          };
+        }
+
+        return {
+          file: 'permissionElementActivationDisabled.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_DisableReason', this.#issueDetails.disableReason || ''],
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      }
+      case Protocol.Audits.PermissionElementIssueType.GeolocationDeprecated:
+        return {
+          file: 'permissionElementGeolocationDeprecated.md',
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.InvalidDisplayStyle:
+        return {
+          file: 'permissionElementInvalidDisplayStyle.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.NonOpaqueColor:
+        return {
+          file: 'permissionElementNonOpaqueColor.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.LowContrast:
+        return {
+          file: 'permissionElementLowContrast.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.FontSizeTooSmall:
+        return {
+          file: 'permissionElementFontSizeTooSmall.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.FontSizeTooLarge:
+        return {
+          file: 'permissionElementFontSizeTooLarge.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      case Protocol.Audits.PermissionElementIssueType.InvalidSizeValue:
+        return {
+          file: 'permissionElementInvalidSizeValue.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_Type', this.#issueDetails.type || ''],
+          ]),
+          links: [],
+        };
+      default:
+        console.warn('Unknown PermissionElementIssueType:', issueType);
+        return null;
+    }
+  }
+
+  override elements(): Iterable<AffectedElement> {
+    if (this.#issueDetails.nodeId) {
+      const target = this.model()?.target();
+      const result = [{
+        backendNodeId: this.#issueDetails.nodeId,
+        nodeName: this.#issueDetails.type || 'Affected element',
+        target: target || null,
+      }];
+      return result;
+    }
+    return [];
+  }
+
+  getKind(): IssueKind {
+    return this.#issueDetails.isWarning ? IssueKind.IMPROVEMENT : IssueKind.PAGE_ERROR;
+  }
+
+  primaryKey(): string {
+    return `${Protocol.Audits.InspectorIssueCode.PermissionElementIssue}-${JSON.stringify(this.#issueDetails)}`;
+  }
+
+  static fromInspectorIssue(
+      issuesModel: SDK.IssuesModel.IssuesModel|null,
+      inspectorIssue: Protocol.Audits.InspectorIssue): PermissionElementIssue[] {
+    const permissionElementIssueDetails = inspectorIssue.details.permissionElementIssueDetails;
+    if (!permissionElementIssueDetails) {
+      console.warn('Permission element issue without details received.');
+      return [];
+    }
+    return [new PermissionElementIssue(permissionElementIssueDetails, issuesModel)];
+  }
+}

package/front_end/models/issues_manager/descriptions/permissionElementActivationDisabled.md

@@ -0,0 +1,7 @@
+# Activation disabled
+
+The "{PLACEHOLDER_Type}" element could not be activated for the following reason: {PLACEHOLDER_DisableReason}.
+
+To resolve this issue, ensure that the element follows all styling restrictions and is fully visible to the user.
+
+You can use the command line flag `--runtime-enabled-features=BypassPepcSecurityForTesting` to bypass this behavior for testing purposes.

package/front_end/models/issues_manager/descriptions/permissionElementActivationDisabledWithOccluder.md

@@ -0,0 +1,9 @@
+# Activation disabled
+
+The "{PLACEHOLDER_Type}" element could not be activated for the following reason: {PLACEHOLDER_DisableReason}.
+
+The element is occluded by: "{PLACEHOLDER_OccluderInfo}"
+
+To resolve this issue, ensure that the element follows all styling restrictions and is fully visible to the user.
+
+You can use the command line flag `--runtime-enabled-features=BypassPepcSecurityForTesting` to bypass this behavior for testing purposes.

package/front_end/models/issues_manager/descriptions/permissionElementActivationDisabledWithOccluderParent.md

@@ -0,0 +1,9 @@
+# Activation disabled
+
+The "{PLACEHOLDER_Type}" element could not be activated for the following reason: {PLACEHOLDER_DisableReason}.
+
+The element is occluded by: "{PLACEHOLDER_OccluderInfo}" (parent element: "{PLACEHOLDER_OccluderParentInfo}")
+
+To resolve this issue, ensure that the element follows all styling restrictions and is fully visible to the user.
+
+You can use the command line flag `--runtime-enabled-features=BypassPepcSecurityForTesting` to bypass this behavior for testing purposes.

package/front_end/models/issues_manager/descriptions/permissionElementCspFrameAncestorsMissing.md

@@ -0,0 +1,5 @@
+# CSP `frame-ancestors` missing
+
+The "{PLACEHOLDER_Type}" element is used in a cross-origin iframe, but the required `frame-ancestors` Content Security Policy directive is missing.
+
+To resolve this issue, add a `frame-ancestors` Content Security Policy directive to the iframe.

package/front_end/models/issues_manager/descriptions/permissionElementFencedFrameDisallowed.md

@@ -0,0 +1,5 @@
+# Fenced frame disallowed
+
+The "{PLACEHOLDER_Type}" element is not allowed in a fenced frame.
+
+To resolve this issue, ensure the element is not used in a fenced frame.

package/front_end/models/issues_manager/descriptions/permissionElementFontSizeTooLarge.md

@@ -0,0 +1,5 @@
+# Font size too large
+
+The "{PLACEHOLDER_Type}" element's font size is too large.
+
+To resolve this issue, ensure that the element's font is at most 'xx-large'.

package/front_end/models/issues_manager/descriptions/permissionElementFontSizeTooSmall.md

@@ -0,0 +1,5 @@
+# Font size too small
+
+The "{PLACEHOLDER_Type}" element's font size is too small.
+
+To resolve this issue, ensure that the element's font is at least 'small'.

package/front_end/models/issues_manager/descriptions/permissionElementGeolocationDeprecated.md

@@ -0,0 +1,5 @@
+# Geolocation deprecated
+
+Using `<permission type="geolocation">` is deprecated.
+
+To resolve this issue, use the `<geolocation>` element instead.

package/front_end/models/issues_manager/descriptions/permissionElementInsetBoxShadowUnsupported.md

@@ -0,0 +1,5 @@
+# Unsupported inset box shadow
+
+The "{PLACEHOLDER_Type}" element does not support `inset` box shadows.
+
+To resolve this issue, remove the `inset` keyword from the relevant stylesheet.

package/front_end/models/issues_manager/descriptions/permissionElementInvalidDisplayStyle.md

@@ -0,0 +1,5 @@
+# Invalid display style
+
+The "{PLACEHOLDER_Type}" element has an invalid display style. Values that result in an unsupported layout are not allowed.
+
+To resolve this issue, consider using 'inline-block', 'block', or 'flex' instead.

package/front_end/models/issues_manager/descriptions/permissionElementInvalidSizeValue.md

@@ -0,0 +1,5 @@
+# Invalid size value
+
+Content, intrinsic, or stretch sizes are not supported as values for the min/max width and height of the "{PLACEHOLDER_Type}" element.
+
+To resolve this issue, use absolute or relative lengths for the element's width and height.

package/front_end/models/issues_manager/descriptions/permissionElementInvalidType.md

@@ -0,0 +1,5 @@
+# Invalid type attribute
+
+The "{PLACEHOLDER_Type}" type is not supported.
+
+To resolve this issue, ensure the element's type is one of the supported values: "camera", "microphone", "geolocation", "camera microphone".

package/front_end/models/issues_manager/descriptions/permissionElementInvalidTypeActivation.md

@@ -0,0 +1,5 @@
+# Invalid type activation
+
+An element with the "{PLACEHOLDER_Type}" type was attempted to be activated. However this type is not supported.
+
+To resolve this issue, ensure the element's type is one of the supported values: "camera", "microphone", "geolocation", "camera microphone".

package/front_end/models/issues_manager/descriptions/permissionElementLowContrast.md

@@ -0,0 +1,5 @@
+# Low contrast
+
+The contrast between the text color and background color of the "{PLACEHOLDER_Type}" element is too low.
+
+To resolve this issue, ensure that your text/background colors have more contrast between them.

package/front_end/models/issues_manager/descriptions/permissionElementNonOpaqueColor.md

@@ -0,0 +1,5 @@
+# Non-opaque color
+
+The text color or background color of the "{PLACEHOLDER_Type}" element is non-opaque.
+
+To resolve this issue, ensure the element's text and background colors have their alpha channel value at 100%.

package/front_end/models/issues_manager/descriptions/permissionElementPaddingBottomUnsupported.md

@@ -0,0 +1,6 @@
+# Unsupported bottom padding
+
+The "{PLACEHOLDER_Type}" element does not support `padding-bottom`.
+`padding-bottom` is always set to be identical to `padding-top`.
+
+To resolve this issue, ensure the element's `padding-bottom` is unset or identical to `padding-top`.

package/front_end/models/issues_manager/descriptions/permissionElementPaddingRightUnsupported.md

@@ -0,0 +1,6 @@
+# Unsupported right padding
+
+The "{PLACEHOLDER_Type}" element does not support `padding-right`.
+`padding-right` is always set to be identical to `padding-left`.
+
+To resolve this issue, ensure the element's `padding-right` is unset or identical to `padding-left`.

package/front_end/models/issues_manager/descriptions/permissionElementPermissionsPolicyBlocked.md

@@ -0,0 +1,5 @@
+# Permissions policy blocked
+
+The "{PLACEHOLDER_Type}" element is blocked by the "{PLACEHOLDER_PermissionName}" permission policy.
+
+To resolve this issue, ensure the frame which contains the element is loaded with the appropriate permission policy by its embedder.

package/front_end/models/issues_manager/descriptions/permissionElementRegistrationFailed.md

@@ -0,0 +1,5 @@
+# Quota exceeded
+
+The "{PLACEHOLDER_Type}" element has surpassed the maximum instances quota per page.
+
+To resolve this issue, ensure that you have no more than 3 elements of the same type per page.

package/front_end/models/issues_manager/descriptions/permissionElementRequestInProgress.md

@@ -0,0 +1,5 @@
+# Request in progress
+
+A permission request on the "{PLACEHOLDER_Type}" element was prevented because a previous request is still in progress.
+
+To resolve this issue, ensure that the site does not allow users to interact with the element behind the current content scrim (for example by moving the element to a document in a new window, which is not covered by the scrim).

package/front_end/models/issues_manager/descriptions/permissionElementSecurityChecksFailed.md

@@ -0,0 +1,5 @@
+# Activation disabled (quota)
+
+The "{PLACEHOLDER_Type}" element could not be activated because the page's quota has been exceeded.
+
+To resolve this issue, ensure that you have no more than 3 elements of the same type per page.

package/front_end/models/issues_manager/descriptions/permissionElementTypeNotSupported.md

@@ -0,0 +1,5 @@
+# Permission not supported
+
+The permission type "{PLACEHOLDER_Type}" is not supported by this browser and therefore the element will not be functional.
+
+To resolve this issue, ensure the element's type is one of the supported values: "camera", "microphone", "geolocation", "camera microphone".

package/front_end/models/issues_manager/descriptions/permissionElementUntrustedEvent.md

@@ -0,0 +1,7 @@
+# Untrusted event
+
+The "{PLACEHOLDER_Type}" element can only be activated by actual user clicks, not simulated ones.
+
+To resolve this issue, do not use frameworks which simulate click events, (e.g. via `click()`) and do not prevent the `DOMActivate` event.
+
+You can use the command line flag `--runtime-enabled-features=BypassPepcSecurityForTesting` to bypass this behavior for testing purposes.

package/front_end/models/issues_manager/issues_manager.ts

@@ -24,6 +24,7 @@ import * as LowTextContrastIssue from './LowTextContrastIssue.js';
 import * as MarkdownIssueDescription from './MarkdownIssueDescription.js';
 import * as MixedContentIssue from './MixedContentIssue.js';
 import * as PartitioningBlobURLIssue from './PartitioningBlobURLIssue.js';
+import * as PermissionElementIssue from './PermissionElementIssue.js';
 import * as PropertyRuleIssue from './PropertyRuleIssue.js';
 import * as QuirksModeIssue from './QuirksModeIssue.js';
 import * as RelatedIssue from './RelatedIssue.js';
@@ -57,6 +58,7 @@ export {
   MarkdownIssueDescription,
   MixedContentIssue,
   PartitioningBlobURLIssue,
+  PermissionElementIssue,
   PropertyRuleIssue,
   QuirksModeIssue,
   RelatedIssue,

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -3154,7 +3154,7 @@ export const NativeFunctions = [
   },
   {
     name: "initKeyboardEvent",
-    signatures: [["typeArg","?bubblesArg","?cancelableArg","?viewArg","?keyArg","?locationArg","?ctrlKey","?altKey","?shiftKey","?metaKey"],["type","?bubbles","?cancelable","?view","?keyIdentifier","?location","?ctrlKey","?altKey","?shiftKey","?metaKey"]]
+    signatures: [["typeArg","?bubblesArg","?cancelableArg","?viewArg","?keyArg","?locationArg","?ctrlKey","?altKey","?shiftKey","?metaKey"]]
   },
   {
     name: "setKeyframes",
@@ -6203,6 +6203,10 @@ export const NativeFunctions = [
     name: "CSSMathProduct",
     signatures: [["...args"]]
   },
+  {
+    name: "CSSMathRandom",
+    signatures: [["baseValue","min","max","?step"]]
+  },
   {
     name: "CSSMathSum",
     signatures: [["...args"]]
@@ -6607,6 +6611,10 @@ export const NativeFunctions = [
     name: "when",
     signatures: [["type","?options"]]
   },
+  {
+    name: "Event",
+    signatures: [["type","?eventInitDict"]]
+  },
   {
     name: "setFormControlRange",
     signatures: [["element","start","end"]]
@@ -6733,10 +6741,6 @@ export const NativeFunctions = [
     name: "TextUpdateEvent",
     signatures: [["type","?options"]]
   },
-  {
-    name: "AnimationEvent",
-    signatures: [["type","?eventInitDict"]]
-  },
   {
     name: "AnimationPlaybackEvent",
     signatures: [["type","?eventInitDict"]]
@@ -6765,10 +6769,6 @@ export const NativeFunctions = [
     name: "ErrorEvent",
     signatures: [["type","?eventInitDict"]]
   },
-  {
-    name: "FocusEvent",
-    signatures: [["type","?eventInitDict"]]
-  },
   {
     name: "HashChangeEvent",
     signatures: [["type","?eventInitDict"]]
@@ -6781,10 +6781,6 @@ export const NativeFunctions = [
     name: "InterestEvent",
     signatures: [["type","?eventInitDict"]]
   },
-  {
-    name: "KeyboardEvent",
-    signatures: [["type","?eventInitDict"]]
-  },
   {
     name: "MessageEvent",
     signatures: [["type","?eventInitDict"]]
@@ -6825,14 +6821,6 @@ export const NativeFunctions = [
     name: "ToggleEvent",
     signatures: [["type","?eventInitDict"]]
   },
-  {
-    name: "TouchEvent",
-    signatures: [["type","?eventInitDict"]]
-  },
-  {
-    name: "TransitionEvent",
-    signatures: [["type","?eventInitDict"]]
-  },
   {
     name: "UIEvent",
     signatures: [["type","?eventInitDict"]]
@@ -7157,6 +7145,10 @@ export const NativeFunctions = [
     name: "NavigationCurrentEntryChangeEvent",
     signatures: [["type","eventInit"]]
   },
+  {
+    name: "addHandler",
+    signatures: [["handler"]]
+  },
   {
     name: "updateCurrentEntry",
     signatures: [["options"]]
@@ -7602,11 +7594,11 @@ export const NativeFunctions = [
   },
   {
     name: "drawElement",
-    signatures: [["element","x","y","?dwidth","?dheight"]]
+    signatures: [["element","dx","dy","?dwidth","?dheight"]]
   },
   {
     name: "drawElementImage",
-    signatures: [["element","x","y","?dwidth","?dheight"]]
+    signatures: [["element","dx","dy","?dwidth","?dheight"],["element","sx","sy","swidth","sheight","dx","dy","?dwidth","?dheight"]]
   },
   {
     name: "Path2D",
@@ -7802,6 +7794,10 @@ export const NativeFunctions = [
     name: "GamepadEvent",
     signatures: [["type","?eventInitDict"]]
   },
+  {
+    name: "GamepadRawInputChangeEvent",
+    signatures: [["type","?eventInitDict"]]
+  },
   {
     name: "addStroke",
     signatures: [["stroke"]]
@@ -8424,6 +8420,10 @@ export const NativeFunctions = [
     name: "RTCSessionDescription",
     signatures: [["?descriptionInitDict"]]
   },
+  {
+    name: "copyPayloadTo",
+    signatures: [["destination"]]
+  },
   {
     name: "RtcTransport",
     signatures: [["name"]]

package/front_end/models/stack_trace/StackTraceModel.ts

@@ -37,25 +37,12 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
 
   async createFromProtocolRuntime(stackTrace: Protocol.Runtime.StackTrace, rawFramesToUIFrames: TranslateRawFrames):
       Promise<StackTrace.StackTrace.StackTrace> {
-    const translatePromises: Array<Promise<unknown>> = [];
-
-    const fragment = this.#createFragment(stackTrace.callFrames);
-    translatePromises.push(this.#translateFragment(fragment, rawFramesToUIFrames));
-
-    const asyncFragments: AsyncFragmentImpl[] = [];
-    const debuggerModel = this.target().model(SDK.DebuggerModel.DebuggerModel);
-    if (debuggerModel) {
-      for await (const {stackTrace: asyncStackTrace, target} of debuggerModel.iterateAsyncParents(stackTrace)) {
-        const model = StackTraceModel.#modelForTarget(target);
-        const asyncFragment = model.#createFragment(asyncStackTrace.callFrames);
-        translatePromises.push(model.#translateFragment(asyncFragment, rawFramesToUIFrames));
-        asyncFragments.push(new AsyncFragmentImpl(asyncStackTrace.description ?? '', asyncFragment));
-      }
-    }
+    const [syncFragment, asyncFragments] = await Promise.all([
+      this.#createSyncFragment(stackTrace, rawFramesToUIFrames),
+      this.#createAsyncFragments(stackTrace, rawFramesToUIFrames),
+    ]);
 
-    await Promise.all(translatePromises);
-
-    return new StackTraceImpl(fragment, asyncFragments);
+    return new StackTraceImpl(syncFragment, asyncFragments);
   }
 
   /** Trigger re-translation of all fragments with the provide script in their call stack */
@@ -81,6 +68,38 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
     }
   }
 
+  async #createSyncFragment(stackTrace: Protocol.Runtime.StackTrace, rawFramesToUIFrames: TranslateRawFrames):
+      Promise<FragmentImpl> {
+    const fragment = this.#createFragment(stackTrace.callFrames);
+    await this.#translateFragment(fragment, rawFramesToUIFrames);
+    return fragment;
+  }
+
+  async #createAsyncFragments(
+      stackTraceOrPausedEvent: Protocol.Runtime.StackTrace|Protocol.Debugger.PausedEvent,
+      rawFramesToUIFrames: TranslateRawFrames): Promise<AsyncFragmentImpl[]> {
+    const asyncFragments: AsyncFragmentImpl[] = [];
+    const translatePromises: Array<Promise<unknown>> = [];
+
+    const debuggerModel = this.target().model(SDK.DebuggerModel.DebuggerModel);
+    if (debuggerModel) {
+      for await (
+          const {stackTrace: asyncStackTrace, target} of debuggerModel.iterateAsyncParents(stackTraceOrPausedEvent)) {
+        if (asyncStackTrace.callFrames.length === 0) {
+          // Skip empty async fragments, they don't add value.
+          continue;
+        }
+        const model = StackTraceModel.#modelForTarget(target);
+        const fragment = model.#createFragment(asyncStackTrace.callFrames);
+        translatePromises.push(model.#translateFragment(fragment, rawFramesToUIFrames));
+        asyncFragments.push(new AsyncFragmentImpl(asyncStackTrace.description ?? '', fragment));
+      }
+    }
+
+    await Promise.all(translatePromises);
+    return asyncFragments;
+  }
+
   #createFragment(frames: RawFrame[]): FragmentImpl {
     return FragmentImpl.getOrCreate(this.#trie.insert(frames));
   }