chrome-devtools-frontend 1.0.1555174 → 1.0.1556696

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

@@ -125,6 +125,7 @@ export interface RequestOptions {
 export interface AgentOptions {
   aidaClient: Host.AidaClient.AidaClient;
   serverSideLoggingEnabled?: boolean;
+  sessionId?: string;
   confirmSideEffectForTest?: typeof Promise.withResolvers;
 }
 
@@ -270,7 +271,7 @@ export abstract class AiAgent<T> {
   abstract readonly userTier: string|undefined;
   abstract handleContextDetails(select: ConversationContext<T>|null): AsyncGenerator<ContextResponse, void, void>;
 
-  readonly #sessionId: string = crypto.randomUUID();
+  readonly #sessionId: string;
   readonly #aidaClient: Host.AidaClient.AidaClient;
   readonly #serverSideLoggingEnabled: boolean;
   readonly confirmSideEffect: typeof Promise.withResolvers;
@@ -284,12 +285,6 @@ export abstract class AiAgent<T> {
     aidaResponse: Host.AidaClient.DoConversationResponse,
   }> = [];
 
-  /**
-   * Might need to be part of history in case we allow chatting in
-   * historical conversations.
-   */
-  #origin?: string;
-
   /**
    * `context` does not change during `AiAgent.run()`, ensuring that calls to JS
    * have the correct `context`. We don't want element selection by the user to
@@ -297,7 +292,6 @@ export abstract class AiAgent<T> {
    */
   protected context?: ConversationContext<T>;
 
-  #id: string = crypto.randomUUID();
   #history: Host.AidaClient.Content[] = [];
 
   #facts: Set<Host.AidaClient.RequestFact> = new Set<Host.AidaClient.RequestFact>();
@@ -305,6 +299,7 @@ export abstract class AiAgent<T> {
   constructor(opts: AgentOptions) {
     this.#aidaClient = opts.aidaClient;
     this.#serverSideLoggingEnabled = opts.serverSideLoggingEnabled ?? false;
+    this.#sessionId = opts.sessionId ?? crypto.randomUUID();
     this.confirmSideEffect = opts.confirmSideEffectForTest ?? (() => Promise.withResolvers());
   }
 
@@ -393,12 +388,8 @@ export abstract class AiAgent<T> {
     return request;
   }
 
-  get id(): string {
-    return this.#id;
-  }
-
-  get origin(): string|undefined {
-    return this.#origin;
+  get sessionId(): string {
+    return this.#sessionId;
   }
 
   /**
@@ -496,15 +487,8 @@ export abstract class AiAgent<T> {
           multimodalInput?: MultimodalInput,
           ): AsyncGenerator<ResponseData, void, void> {
     await options.selected?.refresh();
-
     if (options.selected) {
-      // First context set on the agent determines its origin from now on.
-      if (this.#origin === undefined) {
-        this.#origin = options.selected.getOrigin();
-      }
-      if (options.selected.isOriginAllowed(this.#origin)) {
-        this.context = options.selected;
-      }
+      this.context = options.selected;
     }
 
     const enhancedQuery = await this.enhanceQuery(initialQuery, options.selected, multimodalInput?.type);
@@ -596,10 +580,16 @@ export abstract class AiAgent<T> {
 
       if (functionCall) {
         try {
-          const result = yield* this.#callFunction(functionCall.name, functionCall.args, {
-            ...options,
-            explanation: textResponse,
-          });
+          const result = yield*
+              this.#callFunction(
+                  functionCall.name,
+                  functionCall.args,
+                  {
+                    ...options,
+                    explanation: textResponse,
+                  },
+              );
+
           if (options.signal?.aborted) {
             yield this.#createErrorResponse(ErrorType.ABORT);
             break;
@@ -720,7 +710,7 @@ export abstract class AiAgent<T> {
 
       result = await call.handler(args, {
         ...options,
-        approved: approvedRun,
+        approved: true,
       });
     }
 

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

@@ -9,9 +9,11 @@ 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 Logs from '../../logs/logs.js';
 import * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
 import * as Trace from '../../trace/trace.js';
+import {ArtifactsManager} from '../ArtifactsManager.js';
 import {
   PerformanceInsightFormatter,
 } from '../data_formatters/PerformanceInsightFormatter.js';
@@ -67,7 +69,49 @@ const greenDevAdditionalAnnotationsGuidelines = `
 - The annotationMessage should be descriptive and relevant to why the element or network request is being highlighted.
 `;
 
-const greenDevAdditionalWidgetGuidelines = `
+const getGreenDevAdditionalWidgetGuidelines = (): string => {
+  // GreenDev is experimenting with multiple ways to display widget:
+  // if widgetsFromFunctionCalls is true, then we use function calls to add widgets
+  // otherwise we use ai-insight tags
+  const widgetsFromFunctionCalls = true;
+
+  if (widgetsFromFunctionCalls) {
+    return `
+- CRITICAL: You have access to three functions for adding rich, interactive widgets to your response:
+  \`addInsightWidget\`, \`addNetworkRequestWidget\`, and \`addFlameChartWidget\`.
+  You MUST use these functions whenever you refer to a corresponding entity.
+
+- **\`addInsightWidget({insightType: '...'})\`**:
+  - **When to use**: Call this function every time you mention a specific performance insight (e.g., LCP, INP,
+    CLS culprits).
+  - **Purpose**: It embeds an interactive widget that provides a detailed breakdown and visualization of the
+    insight.
+  - **Example**: If you are explaining the causes of a poor LCP score, you MUST also call
+    \`addInsightWidget({insightType: 'LCPBreakdown'})\`. This provides the user with the data to explore
+    alongside your explanation.
+- **\`addNetworkRequestWidget({eventKey: '...'})\`**:
+  - **When to use**: Call this function whenever you discuss a specific network request.
+  - **Purpose**: It adds a widget displaying the full details of the network request, such as its timing,
+    headers, and priority.
+  - **Critical**: The eventKey should be the trace event key (only the number, no letters prefix or -) of that
+    script's network request.
+  - **Example**: If you identify a render-blocking script, you MUST also call
+    \`addNetworkRequestWidget({eventKey: '...'})\` with the trace event key (only the number, no letters prefix
+    or -) of that script's network request.
+- **\`addFlameChartWidget({start: ..., end: ...})\`**:
+  - **When to use**: Call this function to highlight a specific time range within the trace, especially when
+    discussing long tasks, specific events, or periods of high activity.
+    - **Purpose**: It embeds a focused flame chart visualization for the given time range (in microseconds).
+    - **Example**: If you find a long task that is blocking the main thread, you MUST also call
+      \`addFlameChartWidget({start: 123456, end: 789012})\`. This provides the user with the data to explore
+      alongside your explanation.
+- **General Rules**:
+  - You MUST call these functions as soon as you identify the entity you are discussing.
+  - Do NOT add more than one widget for the same insight, network request, or time range to avoid redundancy.
+`;
+  }
+
+  return `
 - **Visualizing Insights**: When discussing the breakdown of specific metrics or a performance problem,
 you must render the appropriate Insight Overview component. Use these tags on a new line within your response:
   - For LCP breakdown: <ai-insight value="LCPBreakdown">
@@ -102,6 +146,7 @@ you must render the appropriate Insight Overview component. Use these tags on a
   - For example, for LCP, the phases like Time to First Byte will be part of the insight widget, so you must not state them in the text. This applies to other insights and network request timings.
 - Do not display any of the same widgets more than once. For example, if you have already displayed a network request widget for a specific event, do not display it again in the same response.
 `;
+};
 
 /**
  * Preamble clocks in at ~1341 tokens.
@@ -111,7 +156,7 @@ you must render the appropriate Insight Overview component. Use these tags on a
  * Check token length in https://aistudio.google.com/
  */
 const buildPreamble = (): string => {
-  const greenDevEnabled = Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled;
+  const greenDevEnabled = Boolean(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled);
   const annotationsEnabled = Annotations.AnnotationRepository.annotationsEnabled();
   return `You are an assistant, expert in web performance and highly skilled with Chrome DevTools.
 
@@ -166,7 +211,7 @@ Note: if the user asks a specific question about the trace (such as "What is my
 - Be direct and to the point. Avoid unnecessary introductory phrases or filler content. Focus on delivering actionable advice efficiently.
 
 ${annotationsEnabled ? greenDevAdditionalAnnotationsGuidelines : ''}
-${greenDevEnabled ? greenDevAdditionalWidgetGuidelines : ''}
+${greenDevEnabled ? getGreenDevAdditionalWidgetGuidelines() : ''}
 
 ## Strict Constraints
 
@@ -1200,6 +1245,109 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         },
       });
     }
+
+    if (Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled) {
+      this.declareFunction<{insightType: Trace.Insights.Types.InsightKeys}>('addInsightWidget', {
+        description:
+            'Adds an insight widget to the response. When mentioning an insight, call this function to also display an appropriate widget.',
+        parameters: {
+          type: Host.AidaClient.ParametersTypes.OBJECT,
+          description: '',
+          nullable: false,
+          properties: {
+            insightType: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description:
+                  'The name of the insight. Only use the insight names given in the "Available insights" list.',
+              nullable: false,
+            },
+          },
+        },
+        handler: async _params => {
+          ArtifactsManager.instance().addArtifact({type: 'insight', insightType: _params.insightType});
+          return {result: {success: true}};
+        },
+      });
+
+      this.declareFunction<{eventKey: string}, object|{error: string}>('addNetworkRequestWidget', {
+        description:
+            'Adds a network request widget to the response. When mentioning a network request, call this function with its trace event key.',
+        parameters: {
+          type: Host.AidaClient.ParametersTypes.OBJECT,
+          description: '',
+          nullable: false,
+          properties: {
+            eventKey: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description: 'The trace event key for the network request.',
+              nullable: false,
+            },
+          },
+        },
+        handler: async _params => {
+          const rawTraceEvent =
+              Trace.Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents().at(
+                  Number(_params.eventKey));
+          // Get the trace event object if it is available.
+          // If the trace is uploaded, we need to use the synthetic event.
+          if (rawTraceEvent && Trace.Types.Events.isSyntheticNetworkRequest(rawTraceEvent)) {
+            const rawTraceEventId = rawTraceEvent?.args?.data?.requestId;
+            const rawTraceEventUrl = rawTraceEvent?.args?.data?.url;
+            const networkRequest = rawTraceEvent ? Logs.NetworkLog.NetworkLog.instance()
+                                                       .requestsForId(rawTraceEventId)
+                                                       .find(r => r.url() === rawTraceEventUrl) :
+                                                   null;
+            if (networkRequest) {
+              ArtifactsManager.instance().addArtifact({type: 'network-request', request: networkRequest});
+              return {result: {success: true}};
+            }
+          }
+
+          const syntheticRequest =
+              Trace.Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().syntheticEventForRawEventIndex(
+                  Number(_params.eventKey));
+
+          if (syntheticRequest && Trace.Types.Events.isSyntheticNetworkRequest(syntheticRequest)) {
+            ArtifactsManager.instance().addArtifact({
+              type: 'network-request',
+              request: syntheticRequest,
+            });
+            return {result: {success: true}};
+          }
+
+          return {result: {error: 'Could not find network request'}};
+        },
+      });
+
+      this.declareFunction<{start: number, end: number}, object|{error: string}>('addFlameChartWidget', {
+        description: 'Adds a flame chart widget to the response.',
+        parameters: {
+          type: Host.AidaClient.ParametersTypes.OBJECT,
+          description: '',
+          nullable: false,
+          properties: {
+            start: {
+              type: Host.AidaClient.ParametersTypes.INTEGER,
+              description: 'The start time of the flame chart in microseconds.',
+              nullable: false,
+            },
+            end: {
+              type: Host.AidaClient.ParametersTypes.INTEGER,
+              description: 'The end time of the flame chart in microseconds.',
+              nullable: false,
+            },
+          },
+        },
+        handler: async _params => {
+          ArtifactsManager.instance().addArtifact({
+            type: 'flamechart',
+            start: Trace.Types.Timing.Micro(_params.start),
+            end: Trace.Types.Timing.Micro(_params.end),
+          });
+          return {result: {success: true}};
+        },
+      });
+    }
   }
 
   async addElementAnnotation(elementId: string, annotationMessage: string):

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';
@@ -275,7 +275,7 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
     this.#changes = opts.changeManager || new ChangeManager();
     this.#execJs = opts.execJs ?? executeJsCode;
     this.#createExtensionScope = opts.createExtensionScope ?? ((changes: ChangeManager) => {
-                                   return new ExtensionScope(changes, this.id, this.context?.getItem() ?? null);
+                                   return new ExtensionScope(changes, this.sessionId, this.context?.getItem() ?? null);
                                  });
 
     this.declareFunction<{

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -13,6 +13,7 @@ import * as StylingAgent from './agents/StylingAgent.js';
 import * as AiConversation from './AiConversation.js';
 import * as AiHistoryStorage from './AiHistoryStorage.js';
 import * as AiUtils from './AiUtils.js';
+import * as ArtifactsManager from './ArtifactsManager.js';
 import * as BuiltInAi from './BuiltInAi.js';
 import * as ChangeManager from './ChangeManager.js';
 import * as ConversationHandler from './ConversationHandler.js';
@@ -38,6 +39,7 @@ export {
   AiHistoryStorage,
   AIQueries,
   AiUtils,
+  ArtifactsManager,
   BuiltInAi,
   ChangeManager,
   ConversationHandler,

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/PerformanceInsightFormatter.ts

@@ -262,8 +262,6 @@ export class PerformanceInsightFormatter {
       });
 
       rootCauses.unsizedImages.forEach(img => {
-        // TODO(b/413284569): if we store a nice human readable name for this
-        // image in the trace metadata, we can do something much nicer here.
         const url = img.paintImageEvent.args.data.url;
         const nodeName = img.paintImageEvent.args.data.nodeName;
         const extraText = url ? `url: ${this.#formatUrl(url)}` : `id: ${img.backendNodeId}`;

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 type * as SDK from '../../core/sdk/sdk.js';
+import * as GreenDev from '../greendev/greendev.js';
 
 import {AnnotationType} from './AnnotationType.js';
 
@@ -63,7 +63,7 @@ export class AnnotationRepository {
   }
 
   static annotationsEnabled(): boolean {
-    const enabled = Boolean(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled);
+    const enabled = GreenDev.Prototypes.instance().isEnabled('aiAnnotations');
     // TODO(finnur): Fix race when Repository is created before feature flags have been set properly.
     if (!enabled) {
       this.#hasRepliedGreenDevDisabled = true;

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/greendev/Prototypes.ts

@@ -0,0 +1,56 @@
+// 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 * as Common from '../../core/common/common.js';
+import * as Root from '../../core/root/root.js';
+
+let instance: Prototypes|null = null;
+
+export interface GreenDevSettings {
+  inDevToolsFloaty: Common.Settings.Setting<boolean>;
+  inlineWidgets: Common.Settings.Setting<boolean>;
+  artifactViewer: Common.Settings.Setting<boolean>;
+  aiAnnotations: Common.Settings.Setting<boolean>;
+}
+
+export class Prototypes {
+  private constructor() {
+  }
+
+  static instance(): Prototypes {
+    if (instance) {
+      return instance;
+    }
+    instance = new Prototypes();
+    return instance;
+  }
+
+  /**
+   * Returns true if the specific setting is turned on AND the GreenDev flag is enabled
+   */
+  isEnabled(setting: keyof GreenDevSettings): boolean {
+    const greendevFlagEnabled = Boolean(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled);
+
+    return greendevFlagEnabled && this.settings()[setting].get();
+  }
+
+  settings(): Readonly<GreenDevSettings> {
+    const settings = Common.Settings.Settings.instance();
+    const inDevToolsFloaty =
+        settings.createSetting('greendev-in-devtools-floaty-enabled', false, Common.Settings.SettingStorageType.LOCAL);
+
+    const inlineWidgets =
+        settings.createSetting('greendev-inline-widgets-enabled', false, Common.Settings.SettingStorageType.LOCAL);
+
+    const aiAnnotations = settings.createSetting(
+        'greendev-ai-annotations-enabled',
+        false,
+        Common.Settings.SettingStorageType.LOCAL,
+    );
+
+    const artifactViewer =
+        settings.createSetting('greendev-artifact-viewer-enabled', false, Common.Settings.SettingStorageType.LOCAL);
+    return {inDevToolsFloaty, inlineWidgets, aiAnnotations, artifactViewer};
+  }
+}

package/front_end/models/greendev/README.md

@@ -0,0 +1,5 @@
+# GreenDev Model
+
+As part of GreenDev we are building a bunch of prototypes into DevTools to user test. This model holds which prototypes are enabled for a given user.
+
+The settings is only stored in local storage, and not synced across devices or persisted in anyway beyond that.

package/front_end/models/greendev/greendev.ts

@@ -0,0 +1,5 @@
+// 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.
+
+export * from './Prototypes.js';

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;
+  }
+}