chrome-devtools-frontend 1.0.1553956 → 1.0.1555430

package/front_end/Images/src/spark.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1320_25512)">
+<path d="M7 12.6319C6.94299 12.6319 6.89549 12.6129 6.85749 12.5749C6.81948 12.5369 6.79098 12.4894 6.77198 12.4324C6.61997 11.8338 6.38245 11.259 6.05942 10.708C5.74589 10.1474 5.37536 9.64862 4.94782 9.21158C4.51078 8.77454 4.01199 8.39926 3.45144 8.08573C2.90039 7.7722 2.32559 7.53943 1.72704 7.38742C1.67003 7.36842 1.62253 7.33992 1.58452 7.30191C1.54652 7.26391 1.52752 7.2164 1.52752 7.1594C1.52752 7.10239 1.54652 7.05489 1.58452 7.01689C1.62253 6.97888 1.67003 6.95038 1.72704 6.93138C2.32559 6.77937 2.90039 6.5466 3.45144 6.23307C4.00249 5.91954 4.50128 5.54426 4.94782 5.10722C5.38486 4.67968 5.76014 4.18564 6.07367 3.62509C6.3872 3.06454 6.61997 2.48499 6.77198 1.88644C6.79098 1.82943 6.81948 1.78193 6.85749 1.74392C6.89549 1.70592 6.94299 1.68692 7 1.68692C7.057 1.68692 7.10451 1.70592 7.14251 1.74392C7.18052 1.78193 7.20902 1.82943 7.22802 1.88644C7.38003 2.48499 7.6128 3.06454 7.92633 3.62509C8.23986 4.17614 8.61514 4.67018 9.05218 5.10722C9.48922 5.54426 9.98326 5.91954 10.5343 6.23307C11.0949 6.5466 11.6744 6.77937 12.273 6.93138C12.33 6.95038 12.3775 6.97888 12.4155 7.01689C12.4535 7.05489 12.4725 7.10239 12.4725 7.1594C12.4725 7.2164 12.4535 7.26391 12.4155 7.30191C12.3775 7.33992 12.33 7.36842 12.273 7.38742C11.6744 7.53943 11.0949 7.7722 10.5343 8.08573C9.97376 8.39926 9.47972 8.77454 9.05218 9.21158C8.61514 9.65812 8.23986 10.1569 7.92633 10.708C7.6128 11.259 7.38003 11.8338 7.22802 12.4324C7.20902 12.4894 7.18052 12.5369 7.14251 12.5749C7.10451 12.6129 7.057 12.6319 7 12.6319Z" fill="#0B57D0"/>
+</g>
+<defs>
+<clipPath id="clip0_1320_25512">
+<rect width="14" height="15.1442" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -40,7 +40,7 @@ export interface Message {
   params?: MessageParams|null;
 }
 
-interface EventMessage extends Message {
+export interface EventMessage extends Message {
   method: QualifiedName;
   params?: MessageParams|null;
 }

package/front_end/core/root/Runtime.ts

@@ -389,7 +389,6 @@ export interface HostConfigFreestyler {
   multimodal?: boolean;
   multimodalUploadInput?: boolean;
   functionCalling?: boolean;
-  featureName?: string;
 }
 
 export interface HostConfigAiAssistanceNetworkAgent {
@@ -397,7 +396,6 @@ export interface HostConfigAiAssistanceNetworkAgent {
   temperature: number;
   enabled: boolean;
   userTier: string;
-  featureName?: string;
 }
 
 export interface HostConfigAiAssistancePerformanceAgent {
@@ -405,7 +403,6 @@ export interface HostConfigAiAssistancePerformanceAgent {
   temperature: number;
   enabled: boolean;
   userTier: string;
-  featureName?: string;
 }
 
 export interface HostConfigAiAssistanceFileAgent {
@@ -413,7 +410,6 @@ export interface HostConfigAiAssistanceFileAgent {
   temperature: number;
   enabled: boolean;
   userTier: string;
-  featureName?: string;
 }
 
 export interface HostConfigAiCodeCompletion {

package/front_end/core/sdk/DOMModel.ts

@@ -108,7 +108,15 @@ export const ARIA_ATTRIBUTES = new Set<string>([
   'aria-valuetext',
 ]);
 
-export class DOMNode {
+export enum DOMNodeEvents {
+  TOP_LAYER_INDEX_CHANGED = 'TopLayerIndexChanged',
+}
+
+export interface DOMNodeEventTypes {
+  [DOMNodeEvents.TOP_LAYER_INDEX_CHANGED]: void;
+}
+
+export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventTypes> {
   #domModel: DOMModel;
   #agent: ProtocolProxyApi.DOMApi;
   ownerDocument!: DOMDocument|null;
@@ -162,8 +170,14 @@ export class DOMNode {
   detached = false;
   #retainedNodes?: Set<Protocol.DOM.BackendNodeId>;
   #adoptedStyleSheets: AdoptedStyleSheet[] = [];
+  /**
+   * 1-based index of the node in the top layer. Only set
+   * for non-backdrop nodes.
+   */
+  #topLayerIndex = -1;
 
   constructor(domModel: DOMModel) {
+    super();
     this.#domModel = domModel;
     this.#agent = this.#domModel.getAgent();
   }
@@ -285,6 +299,18 @@ export class DOMNode {
     return await (childModel?.requestDocument() || null);
   }
 
+  setTopLayerIndex(idx: number): void {
+    const oldIndex = this.#topLayerIndex;
+    this.#topLayerIndex = idx;
+    if (oldIndex !== idx) {
+      this.dispatchEventToListeners(DOMNodeEvents.TOP_LAYER_INDEX_CHANGED);
+    }
+  }
+
+  topLayerIndex(): number {
+    return this.#topLayerIndex;
+  }
+
   isAdFrameNode(): boolean {
     if (this.isIframe() && this.#frameOwnerFrameId) {
       const frame = FrameManager.instance().getFrame(this.#frameOwnerFrameId);
@@ -1203,10 +1229,16 @@ export class DOMNodeShortcut {
   nodeType: number;
   nodeName: string;
   deferredNode: DeferredDOMNode;
-  constructor(target: Target, backendNodeId: Protocol.DOM.BackendNodeId, nodeType: number, nodeName: string) {
+  // Shortctus to elements that children of the element this shortcut is for.
+  // Currently, use for backdrop elements in the top layer.«
+  childShortcuts: DOMNodeShortcut[] = [];
+  constructor(
+      target: Target, backendNodeId: Protocol.DOM.BackendNodeId, nodeType: number, nodeName: string,
+      childShortcuts: DOMNodeShortcut[] = []) {
     this.nodeType = nodeType;
     this.nodeName = nodeName;
     this.deferredNode = new DeferredDOMNode(target, backendNodeId);
+    this.childShortcuts = childShortcuts;
   }
 }
 
@@ -1241,6 +1273,9 @@ export class DOMModel extends SDKModel<EventTypes> {
   #frameOwnerNode?: DOMNode|null;
   #loadNodeAttributesTimeout?: number;
   #searchId?: string;
+  #topLayerThrottler = new Common.Throttler.Throttler(100);
+  #topLayerNodes: DOMNode[] = [];
+
   constructor(target: Target) {
     super(target);
 
@@ -1621,10 +1656,6 @@ export class DOMModel extends SDKModel<EventTypes> {
     this.dispatchEventToListeners(Events.AffectedByStartingStylesFlagUpdated, {node});
   }
 
-  topLayerElementsUpdated(): void {
-    this.dispatchEventToListeners(Events.TopLayerElementsChanged);
-  }
-
   pseudoElementRemoved(parentId: Protocol.DOM.NodeId, pseudoElementId: Protocol.DOM.NodeId): void {
     const parent = this.idToDOMNode.get(parentId);
     if (!parent) {
@@ -1730,6 +1761,69 @@ export class DOMModel extends SDKModel<EventTypes> {
     return this.agent.invoke_getTopLayerElements().then(({nodeIds}) => nodeIds);
   }
 
+  topLayerElementsUpdated(): void {
+    void this.#topLayerThrottler.schedule(async () => {
+      // This returns top layer nodes for all local frames.
+      const result = await this.agent.invoke_getTopLayerElements();
+      if (result.getError()) {
+        return;
+      }
+      // Re-set indexes as we re-create top layer nodes list.
+      const previousDocs = new Set<DOMDocument>();
+      for (const node of this.#topLayerNodes) {
+        node.setTopLayerIndex(-1);
+        if (node.ownerDocument) {
+          previousDocs.add(node.ownerDocument);
+        }
+      }
+      this.#topLayerNodes.splice(0);
+      const nodes: DOMNode[] =
+          result.nodeIds.map(id => this.idToDOMNode.get(id)).filter((node): node is DOMNode => Boolean(node));
+      const nodesByDocument = new Map<DOMDocument, DOMNode[]>();
+      for (const node of nodes) {
+        const document = node.ownerDocument;
+        if (!document) {
+          continue;
+        }
+        if (!nodesByDocument.has(document)) {
+          nodesByDocument.set(document, []);
+        }
+        nodesByDocument.get(document)?.push(node);
+      }
+      for (const [document, nodes] of nodesByDocument) {
+        let topLayerIdx = 1;
+        const documentShortcuts = [];
+        for (const [idx, node] of nodes.entries()) {
+          if (node.nodeName() === '::backdrop') {
+            continue;
+          }
+          const childShortcuts = [];
+          const previousNode = result.nodeIds[idx - 1] ? this.idToDOMNode.get(result.nodeIds[idx - 1]) : null;
+          if (previousNode && previousNode.nodeName() === '::backdrop') {
+            childShortcuts.push(
+                new DOMNodeShortcut(this.target(), previousNode.backendNodeId(), 0, previousNode.nodeName()));
+          }
+          const shortcut = new DOMNodeShortcut(this.target(), node.backendNodeId(), 0, node.nodeName(), childShortcuts);
+          node.setTopLayerIndex(topLayerIdx++);
+          this.#topLayerNodes.push(node);
+          documentShortcuts.push(shortcut);
+          previousDocs.delete(document);
+        }
+        this.dispatchEventToListeners(Events.TopLayerElementsChanged, {
+          document,
+          documentShortcuts,
+        });
+      }
+      // Emit empty events for documents that are no longer in the top layer.
+      for (const document of previousDocs) {
+        this.dispatchEventToListeners(Events.TopLayerElementsChanged, {
+          document,
+          documentShortcuts: [],
+        });
+      }
+    });
+  }
+
   getDetachedDOMNodes(): Promise<Protocol.DOM.DetachedElementInfo[]|null> {
     return this.agent.invoke_getDetachedDomNodes().then(({detachedNodes}) => detachedNodes);
   }
@@ -1823,7 +1917,7 @@ export interface EventTypes {
   [Events.ChildNodeCountUpdated]: DOMNode;
   [Events.DistributedNodesChanged]: DOMNode;
   [Events.MarkersChanged]: DOMNode;
-  [Events.TopLayerElementsChanged]: void;
+  [Events.TopLayerElementsChanged]: {document: DOMDocument, documentShortcuts: DOMNodeShortcut[]};
   [Events.ScrollableFlagUpdated]: {node: DOMNode};
   [Events.AffectedByStartingStylesFlagUpdated]: {node: DOMNode};
   [Events.AdoptedStyleSheetsModified]: DOMNode;

package/front_end/core/sdk/ResourceTreeModel.ts

@@ -105,7 +105,6 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
       return null;
     }
 
-    // TODO(crbug.com/445966299): Refactor to use `storageAgent().invoke_getStorageKey()` instead.
     const response = await this.storageAgent.invoke_getStorageKey({frameId});
     if (response.getError() === 'Frame tree node for given frame not found') {
       return null;

package/front_end/generated/SupportedCSSProperties.js

@@ -757,6 +757,7 @@ export const generatedProperties = [
    "transition-property",
    "transition-timing-function",
    "translate",
+   "trigger-scope",
    "types",
    "unicode-range",
    "user-select",
@@ -1712,6 +1713,7 @@ export const generatedProperties = [
   "inherited": false,
   "keywords": [
    "none",
+   "auto",
    "spanning-item",
    "intersection"
   ],
@@ -3722,6 +3724,7 @@ export const generatedProperties = [
   "inherited": false,
   "keywords": [
    "none",
+   "auto",
    "spanning-item",
    "intersection"
   ],
@@ -4650,6 +4653,13 @@ export const generatedProperties = [
  {
   "name": "translate"
  },
+ {
+  "keywords": [
+   "none",
+   "all"
+  ],
+  "name": "trigger-scope"
+ },
  {
   "name": "types"
  },
@@ -5421,6 +5431,7 @@ export const generatedPropertyValues = {
  "column-rule-break": {
   "values": [
    "none",
+   "auto",
    "spanning-item",
    "intersection"
   ]
@@ -6546,6 +6557,7 @@ export const generatedPropertyValues = {
  "row-rule-break": {
   "values": [
    "none",
+   "auto",
    "spanning-item",
    "intersection"
   ]
@@ -7027,6 +7039,12 @@ export const generatedPropertyValues = {
    "step-end"
   ]
  },
+ "trigger-scope": {
+  "values": [
+   "none",
+   "all"
+  ]
+ },
  "unicode-bidi": {
   "values": [
    "normal",

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -9,7 +9,7 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Tracing from '../../../services/tracing/tracing.js';
-import * as Annotations from '../../../ui/components/annotations/annotations.js';
+import * as Annotations from '../../annotations/annotations.js';
 import * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
 import * as Trace from '../../trace/trace.js';
 import {

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -8,7 +8,7 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
-import * as Annotations from '../../../ui/components/annotations/annotations.js';
+import * as Annotations from '../../annotations/annotations.js';
 import {ChangeManager} from '../ChangeManager.js';
 import {debugLog} from '../debug.js';
 import {EvaluateAction, formatError, SideEffectError} from '../EvaluateAction.js';

package/front_end/models/ai_assistance/data_formatters/NetworkRequestFormatter.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import type * as SDK from '../../../core/sdk/sdk.js';
-import * as Annotations from '../../../ui/components/annotations/annotations.js';
+import * as Annotations from '../../annotations/annotations.js';
 import * as Logs from '../../logs/logs.js';
 import * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
 import * as TextUtils from '../../text_utils/text_utils.js';

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -4,7 +4,7 @@
 
 import type * as Platform from '../../../core/platform/platform.js';
 import type * as Protocol from '../../../generated/protocol.js';
-import * as Annotations from '../../../ui/components/annotations/annotations.js';
+import * as Annotations from '../../annotations/annotations.js';
 import * as CrUXManager from '../../crux-manager/crux-manager.js';
 import type * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
 import * as Trace from '../../trace/trace.js';

package/front_end/{ui/components → models}/annotations/AnnotationRepository.ts

@@ -2,9 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../../core/common/common.js';
-import * as Root from '../../../core/root/root.js';
-import type * as SDK from '../../../core/sdk/sdk.js';
+import * as Common from '../../core/common/common.js';
+import * as Root from '../../core/root/root.js';
+import type * as SDK from '../../core/sdk/sdk.js';
 
 import {AnnotationType} from './AnnotationType.js';
 

package/front_end/models/annotations/README.md

@@ -0,0 +1,7 @@
+# Annotations Model
+
+**IMPORTANT**: this model exists because on the GreenDev project we prototyped a build of DevTools that is able to add annotations to various parts of the UI.
+
+This feature is only enabled when Chromium is run with the GreenDev feature flag enabled. There are currently NO PLANS to ship this code to production.
+
+If you are reading this and you want to use this code, please speak to jacktfranklin@ first. This code is for a prototype and not in a production state.

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -191,6 +191,14 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
     return await model.createFromProtocolRuntime(stackTrace, this.#translateRawFrames.bind(this));
   }
 
+  async createStackTraceFromDebuggerPaused(
+      pausedDetails: SDK.DebuggerModel.DebuggerPausedDetails,
+      target: SDK.Target.Target): Promise<StackTrace.StackTrace.DebuggableStackTrace> {
+    const model =
+        target.model(StackTraceImpl.StackTraceModel.StackTraceModel) as StackTraceImpl.StackTraceModel.StackTraceModel;
+    return await model.createFromDebuggerPaused(pausedDetails, this.#translateRawFrames.bind(this));
+  }
+
   async createLiveLocation(
       rawLocation: SDK.DebuggerModel.Location, updateDelegate: (arg0: LiveLocation) => Promise<void>,
       locationPool: LiveLocationPool): Promise<Location|null> {

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",
@@ -6611,6 +6611,10 @@ export const NativeFunctions = [
     name: "when",
     signatures: [["type","?options"]]
   },
+  {
+    name: "Event",
+    signatures: [["type","?eventInitDict"]]
+  },
   {
     name: "setFormControlRange",
     signatures: [["element","start","end"]]
@@ -6737,10 +6741,6 @@ export const NativeFunctions = [
     name: "TextUpdateEvent",
     signatures: [["type","?options"]]
   },
-  {
-    name: "AnimationEvent",
-    signatures: [["type","?eventInitDict"]]
-  },
   {
     name: "AnimationPlaybackEvent",
     signatures: [["type","?eventInitDict"]]
@@ -6769,10 +6769,6 @@ export const NativeFunctions = [
     name: "ErrorEvent",
     signatures: [["type","?eventInitDict"]]
   },
-  {
-    name: "FocusEvent",
-    signatures: [["type","?eventInitDict"]]
-  },
   {
     name: "HashChangeEvent",
     signatures: [["type","?eventInitDict"]]
@@ -6785,10 +6781,6 @@ export const NativeFunctions = [
     name: "InterestEvent",
     signatures: [["type","?eventInitDict"]]
   },
-  {
-    name: "KeyboardEvent",
-    signatures: [["type","?eventInitDict"]]
-  },
   {
     name: "MessageEvent",
     signatures: [["type","?eventInitDict"]]
@@ -6829,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"]]
@@ -7161,6 +7145,10 @@ export const NativeFunctions = [
     name: "NavigationCurrentEntryChangeEvent",
     signatures: [["type","eventInit"]]
   },
+  {
+    name: "addHandler",
+    signatures: [["handler"]]
+  },
   {
     name: "updateCurrentEntry",
     signatures: [["options"]]
@@ -7606,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",
@@ -8432,6 +8420,10 @@ export const NativeFunctions = [
     name: "RTCSessionDescription",
     signatures: [["?descriptionInitDict"]]
   },
+  {
+    name: "copyPayloadTo",
+    signatures: [["destination"]]
+  },
   {
     name: "RtcTransport",
     signatures: [["name"]]

package/front_end/models/stack_trace/StackTrace.ts

@@ -6,8 +6,11 @@ import type * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Workspace from '../workspace/workspace.js';
 
-export interface StackTrace extends Common.EventTarget.EventTarget<EventTypes> {
-  readonly syncFragment: Fragment;
+export type StackTrace = BaseStackTrace<Fragment>;
+export type DebuggableStackTrace = BaseStackTrace<DebuggableFragment>;
+
+export interface BaseStackTrace<SyncFragmentT extends Fragment> extends Common.EventTarget.EventTarget<EventTypes> {
+  readonly syncFragment: SyncFragmentT;
   readonly asyncFragments: readonly AsyncFragment[];
 }
 
@@ -19,6 +22,10 @@ export interface AsyncFragment extends Fragment {
   readonly description: string;
 }
 
+export interface DebuggableFragment {
+  readonly frames: readonly DebuggableFrame[];
+}
+
 export interface Frame {
   readonly url?: string;
   readonly uiSourceCode?: Workspace.UISourceCode.UISourceCode;
@@ -29,6 +36,10 @@ export interface Frame {
   readonly missingDebugInfo?: MissingDebugInfo;
 }
 
+export interface DebuggableFrame extends Frame {
+  readonly sdkFrame: SDK.DebuggerModel.CallFrame;
+}
+
 export const enum MissingDebugInfoType {
   /** No debug information at all for the call frame */
   NO_INFO = 'NO_INFO',

package/front_end/models/stack_trace/StackTraceImpl.ts

@@ -3,29 +3,36 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Workspace from '../workspace/workspace.js';
 
 import type * as StackTrace from './stack_trace.js';
 import type {FrameNode} from './Trie.js';
 
-export class StackTraceImpl extends Common.ObjectWrapper.ObjectWrapper<StackTrace.StackTrace.EventTypes> implements
-    StackTrace.StackTrace.StackTrace {
-  readonly syncFragment: FragmentImpl;
+export type AnyStackTraceImpl = StackTraceImpl<FragmentImpl|DebuggableFragmentImpl>;
+
+export class StackTraceImpl<SyncFragmentT extends FragmentImpl|DebuggableFragmentImpl = FragmentImpl> extends
+    Common.ObjectWrapper.ObjectWrapper<StackTrace.StackTrace.EventTypes> implements
+        StackTrace.StackTrace.BaseStackTrace<SyncFragmentT> {
+  readonly syncFragment: SyncFragmentT;
   readonly asyncFragments: readonly AsyncFragmentImpl[];
 
-  constructor(syncFragment: FragmentImpl, asyncFragments: AsyncFragmentImpl[]) {
+  constructor(syncFragment: SyncFragmentT, asyncFragments: AsyncFragmentImpl[]) {
     super();
     this.syncFragment = syncFragment;
     this.asyncFragments = asyncFragments;
 
-    syncFragment.stackTraces.add(this);
+    const fragment =
+        syncFragment instanceof DebuggableFragmentImpl ? syncFragment.fragment : syncFragment as FragmentImpl;
+    fragment.stackTraces.add(this);
+
     this.asyncFragments.forEach(asyncFragment => asyncFragment.fragment.stackTraces.add(this));
   }
 }
 
 export class FragmentImpl implements StackTrace.StackTrace.Fragment {
   readonly node: FrameNode;
-  readonly stackTraces = new Set<StackTraceImpl>();
+  readonly stackTraces = new Set<AnyStackTraceImpl>();
 
   /**
    * Fragments are deduplicated based on the node.
@@ -83,3 +90,71 @@ export class FrameImpl implements StackTrace.StackTrace.Frame {
     this.missingDebugInfo = missingDebugInfo;
   }
 }
+
+/**
+ * A DebuggableFragmentImpl wraps an existing FragmentImpl. This is important: We can pause at the
+ * same location multiple times and the paused information changes each and everytime while the underlying
+ * FragmentImpl will stay the same.
+ */
+export class DebuggableFragmentImpl implements StackTrace.StackTrace.DebuggableFragment {
+  constructor(readonly fragment: FragmentImpl, private readonly callFrames: SDK.DebuggerModel.CallFrame[]) {
+  }
+
+  get frames(): DebuggableFrameImpl[] {
+    const frames: DebuggableFrameImpl[] = [];
+
+    let index = 0;
+    for (const node of this.fragment.node.getCallStack()) {
+      for (const frame of node.frames) {
+        // Each inlined frame gets the same DebugerModel.CallFrame for debugging.
+        frames.push(new DebuggableFrameImpl(frame, this.callFrames[index]));
+      }
+      index++;
+    }
+
+    return frames;
+  }
+}
+
+/**
+ * A DebuggableFrameImpl wraps an existing FrameImpl. This is important: We can pause at the
+ * same location multiple times and the paused information changes each and everytime while the underlying
+ * FrameImpl will stay the same.
+ */
+export class DebuggableFrameImpl implements StackTrace.StackTrace.DebuggableFrame {
+  readonly #frame: FrameImpl;
+  readonly #sdkFrame: SDK.DebuggerModel.CallFrame;
+
+  constructor(frame: FrameImpl, sdkFrame: SDK.DebuggerModel.CallFrame) {
+    this.#frame = frame;
+    this.#sdkFrame = sdkFrame;
+  }
+
+  get url(): string|undefined {
+    return this.#frame.url;
+  }
+
+  get uiSourceCode(): Workspace.UISourceCode.UISourceCode|undefined {
+    return this.#frame.uiSourceCode;
+  }
+
+  get name(): string|undefined {
+    return this.#frame.name;
+  }
+
+  get line(): number {
+    return this.#frame.line;
+  }
+
+  get column(): number {
+    return this.#frame.column;
+  }
+
+  get missingDebugInfo(): StackTrace.StackTrace.MissingDebugInfo|undefined {
+    return this.#frame.missingDebugInfo;
+  }
+
+  get sdkFrame(): SDK.DebuggerModel.CallFrame {
+    return this.#sdkFrame;
+  }
+}