@theia/debug 1.67.0-next.59 → 1.67.0

package/src/browser/debug-session-manager.ts

@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { DisposableCollection, Emitter, Event, MessageService, nls, ProgressService, WaitUntilEvent } from '@theia/core';
+import { CommandService, DisposableCollection, Emitter, Event, MessageService, nls, ProgressService, WaitUntilEvent } from '@theia/core';
 import { LabelProvider, ApplicationShell, ConfirmDialog } from '@theia/core/lib/browser';
 import { ContextKey, ContextKeyService } from '@theia/core/lib/browser/context-key-service';
 import URI from '@theia/core/lib/common/uri';
@@ -39,6 +39,7 @@ import * as monaco from '@theia/monaco-editor-core';
 import { DebugInstructionBreakpoint } from './model/debug-instruction-breakpoint';
 import { DebugSessionConfigurationLabelProvider } from './debug-session-configuration-label-provider';
 import { DebugDataBreakpoint } from './model/debug-data-breakpoint';
+import { DebugVariable } from './console/debug-console-items';
 
 export interface WillStartDebugSession extends WaitUntilEvent {
 }
@@ -57,6 +58,11 @@ export interface DidChangeBreakpointsEvent {
     uri: URI
 }
 
+export interface DidResolveLazyVariableEvent {
+    readonly session: DebugSession
+    readonly variable: DebugVariable
+}
+
 export interface DebugSessionCustomEvent {
     readonly body?: any // eslint-disable-line @typescript-eslint/no-explicit-any
     readonly event: string
@@ -112,6 +118,9 @@ export class DebugSessionManager {
         this.onDidChangeEmitter.fire(current);
     }
 
+    protected readonly onDidResolveLazyVariableEmitter = new Emitter<DidResolveLazyVariableEvent>();
+    readonly onDidResolveLazyVariable: Event<DidResolveLazyVariableEvent> = this.onDidResolveLazyVariableEmitter.event;
+
     @inject(DebugSessionFactory)
     protected readonly debugSessionFactory: DebugSessionFactory;
 
@@ -124,6 +133,9 @@ export class DebugSessionManager {
     @inject(EditorManager)
     protected readonly editorManager: EditorManager;
 
+    @inject(CommandService)
+    protected commandService: CommandService;
+
     @inject(BreakpointManager)
     protected readonly breakpoints: BreakpointManager;
 
@@ -417,9 +429,15 @@ export class DebugSessionManager {
                 state = session.state;
                 if (state === DebugState.Stopped) {
                     this.onDidStopDebugSessionEmitter.fire(session);
+                    // Only switch to this session if a thread actually stopped (not just state change)
+                    if (session.currentThread && session.currentThread.stopped) {
+                        this.updateCurrentSession(session);
+                    }
                 }
             }
-            this.updateCurrentSession(session);
+            // Always fire change event to update views (threads, variables, etc.)
+            // The selection logic in widgets will handle not jumping to non-stopped threads
+            this.fireDidChange(session);
         });
         session.onDidChangeBreakpoints(uri => this.fireDidChangeBreakpoints({ session, uri }));
         session.on('terminated', async event => {
@@ -438,7 +456,14 @@ export class DebugSessionManager {
         });
 
         session.onDispose(() => this.cleanup(session));
-        session.start().then(() => this.onDidStartDebugSessionEmitter.fire(session)).catch(e => {
+        session.start().then(() => {
+            this.onDidStartDebugSessionEmitter.fire(session);
+            // Set as current session if no current session exists
+            // This ensures the UI shows the running session and buttons are enabled
+            if (!this.currentSession) {
+                this.updateCurrentSession(session);
+            }
+        }).catch(e => {
             session.stop(false, () => {
                 this.debug.terminateDebugSession(session.id);
             });
@@ -544,6 +569,7 @@ export class DebugSessionManager {
                 }
                 this.fireDidChange(current);
             }));
+            this.disposeOnCurrentSessionChanged.push(current.onDidResolveLazyVariable(variable => this.onDidResolveLazyVariableEmitter.fire({ session: current, variable })));
             this.disposeOnCurrentSessionChanged.push(current.onDidFocusStackFrame(frame => this.onDidFocusStackFrameEmitter.fire(frame)));
             this.disposeOnCurrentSessionChanged.push(current.onDidFocusThread(thread => this.onDidFocusThreadEmitter.fire(thread)));
             const { currentThread } = current;
@@ -598,7 +624,7 @@ export class DebugSessionManager {
         return currentThread && currentThread.topFrame;
     }
 
-    getFunctionBreakpoints(session: DebugSession | undefined = this.currentSession): DebugFunctionBreakpoint[] {
+    getFunctionBreakpoints(session?: DebugSession): DebugFunctionBreakpoint[] {
         if (session && session.state > DebugState.Initializing) {
             return session.getFunctionBreakpoints();
         }
@@ -606,7 +632,7 @@ export class DebugSessionManager {
         return this.breakpoints.getFunctionBreakpoints().map(origin => new DebugFunctionBreakpoint(origin, { labelProvider, breakpoints, editorManager }));
     }
 
-    getInstructionBreakpoints(session = this.currentSession): DebugInstructionBreakpoint[] {
+    getInstructionBreakpoints(session?: DebugSession): DebugInstructionBreakpoint[] {
         if (session && session.state > DebugState.Initializing) {
             return session.getInstructionBreakpoints();
         }
@@ -626,12 +652,39 @@ export class DebugSessionManager {
     getBreakpoints(uri: URI, session?: DebugSession): DebugSourceBreakpoint[];
     getBreakpoints(arg?: URI | DebugSession, arg2?: DebugSession): DebugSourceBreakpoint[] {
         const uri = arg instanceof URI ? arg : undefined;
-        const session = arg instanceof DebugSession ? arg : arg2 instanceof DebugSession ? arg2 : this.currentSession;
+        const session = arg instanceof DebugSession ? arg : arg2 instanceof DebugSession ? arg2 : undefined;
         if (session && session.state > DebugState.Initializing) {
             return session.getSourceBreakpoints(uri);
         }
+
+        const activeSessions = this.sessions.filter(s => s.state > DebugState.Initializing);
+
+        // Start with all breakpoints from markers (not installed = shows as filled circle)
         const { labelProvider, breakpoints, editorManager } = this;
-        return this.breakpoints.findMarkers({ uri }).map(({ data }) => new DebugSourceBreakpoint(data, { labelProvider, breakpoints, editorManager }));
+        const breakpointMap = new Map<string, DebugSourceBreakpoint>();
+        const markers = this.breakpoints.findMarkers({ uri });
+
+        for (const { data } of markers) {
+            const bp = new DebugSourceBreakpoint(data, { labelProvider, breakpoints, editorManager }, this.commandService);
+            breakpointMap.set(bp.id, bp);
+        }
+
+        // Overlay with VERIFIED breakpoints from active sessions only
+        // We only replace a marker-based breakpoint if the session has VERIFIED it
+        // This ensures breakpoints show as filled (not installed) rather than hollow (installed but unverified)
+        for (const activeSession of activeSessions) {
+            const sessionBps = activeSession.getSourceBreakpoints(uri);
+
+            for (const bp of sessionBps) {
+                if (bp.verified) {
+                    // Session has verified this breakpoint - use the session's version
+                    breakpointMap.set(bp.id, bp);
+                }
+                // If not verified, keep the marker-based one (shows as not installed = filled circle)
+            }
+        }
+
+        return Array.from(breakpointMap.values());
     }
 
     getLineBreakpoints(uri: URI, line: number): DebugSourceBreakpoint[] {
@@ -641,7 +694,7 @@ export class DebugSessionManager {
         }
         const { labelProvider, breakpoints, editorManager } = this;
         return this.breakpoints.getLineBreakpoints(uri, line).map(origin =>
-            new DebugSourceBreakpoint(origin, { labelProvider, breakpoints, editorManager })
+            new DebugSourceBreakpoint(origin, { labelProvider, breakpoints, editorManager }, this.commandService)
         );
     }
 
@@ -652,7 +705,7 @@ export class DebugSessionManager {
         }
         const origin = this.breakpoints.getInlineBreakpoint(uri, line, column);
         const { labelProvider, breakpoints, editorManager } = this;
-        return origin && new DebugSourceBreakpoint(origin, { labelProvider, breakpoints, editorManager });
+        return origin && new DebugSourceBreakpoint(origin, { labelProvider, breakpoints, editorManager }, this.commandService);
     }
 
     /**

package/src/browser/debug-session.tsx

@@ -19,13 +19,13 @@
 import * as React from '@theia/core/shared/react';
 import { LabelProvider } from '@theia/core/lib/browser';
 import { DebugProtocol } from '@vscode/debugprotocol';
-import { Emitter, Event, DisposableCollection, Disposable, MessageClient, MessageType, Mutable, ContributionProvider } from '@theia/core/lib/common';
+import { Emitter, Event, DisposableCollection, Disposable, MessageClient, MessageType, Mutable, ContributionProvider, CommandService } from '@theia/core/lib/common';
 import { TerminalService } from '@theia/terminal/lib/browser/base/terminal-service';
 import { EditorManager } from '@theia/editor/lib/browser';
 import { CompositeTreeElement } from '@theia/core/lib/browser/source-tree';
 import { DebugSessionConnection, DebugRequestTypes, DebugEventTypes } from './debug-session-connection';
 import { DebugThread, StoppedDetails, DebugThreadData } from './model/debug-thread';
-import { DebugScope } from './console/debug-console-items';
+import { DebugScope, DebugVariable } from './console/debug-console-items';
 import { DebugStackFrame } from './model/debug-stack-frame';
 import { DebugSource } from './model/debug-source';
 import { DebugBreakpoint, DebugBreakpointOptions } from './model/debug-breakpoint';
@@ -47,6 +47,7 @@ import { nls } from '@theia/core';
 import { TestService, TestServices } from '@theia/test/lib/browser/test-service';
 import { DebugSessionManager } from './debug-session-manager';
 import { DebugDataBreakpoint } from './model/debug-data-breakpoint';
+import { DebugPreferences } from '../common/debug-preferences';
 
 export enum DebugState {
     Inactive,
@@ -103,6 +104,9 @@ export class DebugSession implements CompositeTreeElement {
         this.onDidChangeBreakpointsEmitter.fire(uri);
     }
 
+    protected readonly onDidResolveLazyVariableEmitter = new Emitter<DebugVariable>();
+    readonly onDidResolveLazyVariable: Event<DebugVariable> = this.onDidResolveLazyVariableEmitter.event;
+
     protected readonly childSessions = new Map<string, DebugSession>();
     protected readonly toDispose = new DisposableCollection();
 
@@ -124,6 +128,8 @@ export class DebugSession implements CompositeTreeElement {
         protected readonly fileService: FileService,
         protected readonly debugContributionProvider: ContributionProvider<DebugContribution>,
         protected readonly workspaceService: WorkspaceService,
+        protected readonly debugPreferences: DebugPreferences,
+        protected readonly commandService: CommandService,
         /**
          * Number of millis after a `stop` request times out. It's 5 seconds by default.
          */
@@ -157,7 +163,10 @@ export class DebugSession implements CompositeTreeElement {
         this.connection.onDidClose(() => this.toDispose.dispose());
         this.toDispose.pushAll([
             this.onDidChangeEmitter,
+            this.onDidFocusStackFrameEmitter,
+            this.onDidFocusThreadEmitter,
             this.onDidChangeBreakpointsEmitter,
+            this.onDidResolveLazyVariableEmitter,
             Disposable.create(() => {
                 this.clearBreakpoints();
                 this.doUpdateThreads([]);
@@ -186,6 +195,10 @@ export class DebugSession implements CompositeTreeElement {
         return this._capabilities;
     }
 
+    get autoExpandLazyVariables(): boolean {
+        return this.debugPreferences['debug.autoExpandLazyVariables'] === 'on';
+    }
+
     protected readonly sources = new Map<string, DebugSource>();
     getSource(raw: DebugProtocol.Source): DebugSource {
         const uri = DebugSource.toUri(raw).toString();
@@ -675,7 +688,7 @@ export class DebugSession implements CompositeTreeElement {
                     const origin = SourceBreakpoint.create(uri, { line: raw.line, column: raw.column });
                     if (this.breakpoints.addBreakpoint(origin)) {
                         const breakpoints = this.getSourceBreakpoints(uri);
-                        const breakpoint = new DebugSourceBreakpoint(origin, this.asDebugBreakpointOptions());
+                        const breakpoint = new DebugSourceBreakpoint(origin, this.asDebugBreakpointOptions(), this.commandService);
                         breakpoint.update({ raw });
                         breakpoints.push(breakpoint);
                         this.setSourceBreakpoints(uri, breakpoints);
@@ -812,7 +825,7 @@ export class DebugSession implements CompositeTreeElement {
         const known = this._breakpoints.get(affectedUri.toString());
         const all = this.breakpoints.findMarkers({ uri: affectedUri }).map(({ data }) =>
             known?.find((candidate): candidate is DebugSourceBreakpoint => candidate instanceof DebugSourceBreakpoint && candidate.origin.id === data.id) ??
-            new DebugSourceBreakpoint(data, this.asDebugBreakpointOptions())
+            new DebugSourceBreakpoint(data, this.asDebugBreakpointOptions(), this.commandService)
         );
         const enabled = all.filter(b => b.enabled);
         try {

package/src/browser/editor/debug-hover-source.tsx

@@ -18,7 +18,7 @@ import * as React from '@theia/core/shared/react';
 import { TreeSource, TreeElement } from '@theia/core/lib/browser/source-tree';
 import { ExpressionContainer, ExpressionItem, DebugVariable } from '../console/debug-console-items';
 import { DebugSessionManager } from '../debug-session-manager';
-import { injectable, inject } from '@theia/core/shared/inversify';
+import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
 
 @injectable()
 export class DebugHoverSource extends TreeSource {
@@ -36,6 +36,11 @@ export class DebugHoverSource extends TreeSource {
         return this.elements[Symbol.iterator]();
     }
 
+    @postConstruct()
+    init(): void {
+        this.toDispose.push(this.sessions.onDidResolveLazyVariable(() => this.fireDidChange()));
+    }
+
     protected renderTitle(element: ExpressionItem | DebugVariable): React.ReactNode {
         return <div className='theia-debug-hover-title' title={element.value}>{element.value}</div>;
     }
@@ -101,5 +106,4 @@ export class DebugHoverSource extends TreeSource {
             return this.doFindVariable(variables[0], namesToFind.slice(1));
         }
     }
-
 }

package/src/browser/editor/debug-inline-value-decorator.ts

@@ -194,7 +194,7 @@ export class DebugInlineValueDecorator implements FrontendApplicationContributio
                                     }
                                     if (expr) {
                                         const expression = new ExpressionItem(expr, () => stackFrame.thread.session);
-                                        await expression.evaluate('watch');
+                                        await expression.evaluate('watch', false);
                                         if (expression.available) {
                                             text = this.formatInlineValue(expr, expression.value);
                                         }

package/src/browser/model/debug-breakpoint.tsx

@@ -18,8 +18,9 @@ import * as React from '@theia/core/shared/react';
 import { DebugProtocol } from '@vscode/debugprotocol/lib/debugProtocol';
 import URI from '@theia/core/lib/common/uri';
 import { EditorManager } from '@theia/editor/lib/browser';
-import { LabelProvider, DISABLED_CLASS } from '@theia/core/lib/browser';
+import { LabelProvider, DISABLED_CLASS, TreeWidget } from '@theia/core/lib/browser';
 import { TreeElement } from '@theia/core/lib/browser/source-tree';
+import { SelectableTreeNode } from '@theia/core/lib/browser/tree/tree-selection';
 import { DebugSession } from '../debug-session';
 import { BaseBreakpoint } from '../breakpoint/breakpoint-marker';
 import { BreakpointManager } from '../breakpoint/breakpoint-manager';
@@ -44,6 +45,7 @@ export class DebugBreakpointDecoration {
 export abstract class DebugBreakpoint<T extends BaseBreakpoint = BaseBreakpoint> extends DebugBreakpointOptions implements TreeElement {
 
     readonly raw?: DebugProtocol.Breakpoint;
+    protected treeWidget?: TreeWidget;
 
     constructor(
         readonly uri: URI,
@@ -76,7 +78,7 @@ export abstract class DebugBreakpoint<T extends BaseBreakpoint = BaseBreakpoint>
     }
 
     get verified(): boolean {
-        return !!this.raw ? this.raw.verified : true;
+        return !!this.raw ? this.raw.verified : false;
     }
 
     get message(): string {
@@ -91,7 +93,8 @@ export abstract class DebugBreakpoint<T extends BaseBreakpoint = BaseBreakpoint>
         this.setEnabled(event.target.checked);
     };
 
-    render(): React.ReactNode {
+    render(host: TreeWidget): React.ReactNode {
+        this.treeWidget = host;
         const classNames = ['theia-source-breakpoint'];
         if (!this.isEnabled()) {
             classNames.push(DISABLED_CLASS);
@@ -149,4 +152,10 @@ export abstract class DebugBreakpoint<T extends BaseBreakpoint = BaseBreakpoint>
 
     protected abstract getBreakpointDecoration(message?: string[]): DebugBreakpointDecoration;
 
+    protected async selectInTree(): Promise<void> {
+        if (this.treeWidget?.model && SelectableTreeNode.is(this)) {
+            this.treeWidget.model.selectNode(this);
+        }
+    }
+
 }

package/src/browser/model/debug-data-breakpoint.tsx

@@ -16,6 +16,7 @@
 
 import { nls } from '@theia/core';
 import * as React from '@theia/core/shared/react';
+import { codicon } from '@theia/core/lib/browser';
 import { BreakpointManager } from '../breakpoint/breakpoint-manager';
 import { DataBreakpoint } from '../breakpoint/breakpoint-marker';
 import { DebugBreakpoint, DebugBreakpointDecoration, DebugBreakpointOptions } from './debug-breakpoint';
@@ -44,12 +45,26 @@ export class DebugDataBreakpoint extends DebugBreakpoint<DataBreakpoint> {
     }
 
     protected doRender(): React.ReactNode {
-        return <span className="line-info theia-data-breakpoint" title={this.origin.info.description}>
-            <span className="name">{this.origin.info.description}</span>
-            <span className="theia-TreeNodeInfo theia-access-type" >{this.getAccessType()}</span>
-        </span>;
+        return <>
+            <span className="line-info theia-data-breakpoint" title={this.origin.info.description}>
+                <span className="name">{this.origin.info.description}</span>
+                <span className="theia-TreeNodeInfo theia-access-type" >{this.getAccessType()}</span>
+            </span>
+            {this.renderActions()}
+        </>;
     }
 
+    protected renderActions(): React.ReactNode {
+        return <div className='theia-debug-breakpoint-actions'>
+            <div className={codicon('close', true)} title={nls.localizeByDefault('Remove Breakpoint')} onClick={this.onRemove} />
+        </div>;
+    }
+
+    protected onRemove = async () => {
+        await this.selectInTree();
+        this.remove();
+    };
+
     protected getAccessType(): string {
         switch (this.origin.raw.accessType) {
             case 'read': return 'Read';
@@ -62,7 +77,7 @@ export class DebugDataBreakpoint extends DebugBreakpoint<DataBreakpoint> {
         if (!this.isSupported()) {
             return {
                 className: 'codicon-debug-breakpoint-unsupported',
-                message: message ?? [nls.localize('theia/debug/data-breakpoint', 'Data Breakpoint')],
+                message: message ?? [nls.localizeByDefault('Data Breakpoint')],
             };
         }
         if (this.origin.raw.condition || this.origin.raw.hitCondition) {
@@ -73,7 +88,7 @@ export class DebugDataBreakpoint extends DebugBreakpoint<DataBreakpoint> {
         }
         return {
             className: 'codicon-debug-breakpoint-data',
-            message: message || [nls.localize('theia/debug/data-breakpoint', 'Data Breakpoint')]
+            message: message || [nls.localizeByDefault('Data Breakpoint')]
         };
     }
 }

package/src/browser/model/debug-function-breakpoint.tsx

@@ -21,6 +21,7 @@ import { BreakpointManager } from '../breakpoint/breakpoint-manager';
 import { DebugBreakpoint, DebugBreakpointOptions, DebugBreakpointDecoration } from './debug-breakpoint';
 import { SingleTextInputDialog } from '@theia/core/lib/browser/dialogs';
 import { nls } from '@theia/core';
+import { codicon } from '@theia/core/lib/browser';
 
 export class DebugFunctionBreakpoint extends DebugBreakpoint<FunctionBreakpoint> implements TreeElement {
 
@@ -59,9 +60,29 @@ export class DebugFunctionBreakpoint extends DebugBreakpoint<FunctionBreakpoint>
     }
 
     protected doRender(): React.ReactNode {
-        return <span className='line-info'>{this.name}</span>;
+        return <React.Fragment>
+            <span className='line-info'>{this.name}</span>
+            {this.renderActions()}
+        </React.Fragment>;
     }
 
+    protected renderActions(): React.ReactNode {
+        return <div className='theia-debug-breakpoint-actions'>
+            <div className={codicon('edit', true)} title={nls.localizeByDefault('Edit Condition...')} onClick={this.onEdit} />
+            <div className={codicon('close', true)} title={nls.localizeByDefault('Remove Breakpoint')} onClick={this.onRemove} />
+        </div>;
+    }
+
+    protected onEdit = async () => {
+        await this.selectInTree();
+        this.open();
+    };
+
+    protected onRemove = async () => {
+        await this.selectInTree();
+        this.remove();
+    };
+
     protected override doGetDecoration(): DebugBreakpointDecoration {
         if (!this.isSupported()) {
             return this.getDisabledBreakpointDecoration(nls.localizeByDefault('Function breakpoints are not supported by this debug type'));

package/src/browser/model/debug-instruction-breakpoint.tsx

@@ -16,6 +16,7 @@
 
 import { nls } from '@theia/core';
 import * as React from '@theia/core/shared/react';
+import { codicon } from '@theia/core/lib/browser';
 import { BreakpointManager } from '../breakpoint/breakpoint-manager';
 import { InstructionBreakpoint } from '../breakpoint/breakpoint-marker';
 import { DebugBreakpoint, DebugBreakpointDecoration, DebugBreakpointOptions } from './debug-breakpoint';
@@ -44,9 +45,23 @@ export class DebugInstructionBreakpoint extends DebugBreakpoint<InstructionBreak
     }
 
     protected doRender(): React.ReactNode {
-        return <span className="line-info">{this.origin.instructionReference}</span>;
+        return <React.Fragment>
+            <span className="line-info">{this.origin.instructionReference}</span>;
+            {this.renderActions()}
+        </React.Fragment>;
     }
 
+    protected renderActions(): React.ReactNode {
+        return <div className='theia-debug-breakpoint-actions'>
+            <div className={codicon('close', true)} title={nls.localizeByDefault('Remove Breakpoint')} onClick={this.onRemove} />
+        </div>;
+    }
+
+    protected onRemove = async () => {
+        await this.selectInTree();
+        this.remove();
+    };
+
     protected getBreakpointDecoration(message?: string[]): DebugBreakpointDecoration {
         if (!this.isSupported()) {
             return {

package/src/browser/model/debug-source-breakpoint.tsx

@@ -16,14 +16,15 @@
 
 import * as React from '@theia/core/shared/react';
 import { DebugProtocol } from '@vscode/debugprotocol/lib/debugProtocol';
-import { nls, RecursivePartial } from '@theia/core';
+import { CommandService, nls, RecursivePartial } from '@theia/core';
 import URI from '@theia/core/lib/common/uri';
 import { EditorWidget, Range } from '@theia/editor/lib/browser';
-import { TREE_NODE_INFO_CLASS, WidgetOpenerOptions } from '@theia/core/lib/browser';
+import { TREE_NODE_INFO_CLASS, WidgetOpenerOptions, codicon } from '@theia/core/lib/browser';
 import { TreeElement } from '@theia/core/lib/browser/source-tree';
 import { SourceBreakpoint } from '../breakpoint/breakpoint-marker';
 import { DebugSource } from './debug-source';
 import { DebugBreakpoint, DebugBreakpointOptions, DebugBreakpointData, DebugBreakpointDecoration } from './debug-breakpoint';
+import { DebugCommands } from '../debug-commands';
 
 export class DebugSourceBreakpointData extends DebugBreakpointData {
     readonly origins: SourceBreakpoint[];
@@ -31,11 +32,13 @@ export class DebugSourceBreakpointData extends DebugBreakpointData {
 
 export class DebugSourceBreakpoint extends DebugBreakpoint<SourceBreakpoint> implements TreeElement {
 
+    protected readonly commandService: CommandService;
     readonly origins: SourceBreakpoint[];
 
-    constructor(origin: SourceBreakpoint, options: DebugBreakpointOptions) {
+    constructor(origin: SourceBreakpoint, options: DebugBreakpointOptions, commandService: CommandService) {
         super(new URI(origin.uri), options);
         this.origins = [origin];
+        this.commandService = commandService;
     }
 
     override update(data: Partial<DebugSourceBreakpointData>): void {
@@ -150,10 +153,28 @@ export class DebugSourceBreakpoint extends DebugBreakpoint<SourceBreakpoint> imp
                 <span className='name'>{this.labelProvider.getName(this.uri)} </span>
                 <span className={'path ' + TREE_NODE_INFO_CLASS}>{this.labelProvider.getLongName(this.uri.parent)} </span>
             </span>
+            {this.renderActions()}
             <span className='line'>{this.renderPosition()}</span>
         </React.Fragment>;
     }
 
+    protected renderActions(): React.ReactNode {
+        return <div className='theia-debug-breakpoint-actions'>
+            <div className={codicon('edit', true)} title={nls.localizeByDefault('Edit Breakpoint')} onClick={this.onEdit} />
+            <div className={codicon('close', true)} title={nls.localizeByDefault('Remove Breakpoint')} onClick={this.onRemove} />
+        </div>;
+    }
+
+    protected onEdit = async () => {
+        await this.selectInTree();
+        this.commandService.executeCommand(DebugCommands.EDIT_BREAKPOINT.id, this);
+    };
+
+    protected onRemove = async () => {
+        await this.selectInTree();
+        this.remove();
+    };
+
     renderPosition(): string {
         return this.line + (typeof this.column === 'number' ? ':' + this.column : '');
     }

package/src/browser/model/debug-stack-frame.tsx

@@ -31,6 +31,7 @@ import { RecursivePartial } from '@theia/core';
 import { DebugSession } from '../debug-session';
 import { DebugThread } from './debug-thread';
 import * as monaco from '@theia/monaco-editor-core';
+import { stringHash } from '@theia/core/lib/common/hash';
 
 export class DebugStackFrameData {
     readonly raw: DebugProtocol.StackFrame;
@@ -40,15 +41,12 @@ export class DebugStackFrame extends DebugStackFrameData implements TreeElement
 
     constructor(
         readonly thread: DebugThread,
-        readonly session: DebugSession
+        readonly session: DebugSession,
+        readonly id: string
     ) {
         super();
     }
 
-    get id(): string {
-        return this.session.id + ':' + this.thread.id + ':' + this.raw.id;
-    }
-
     /**
      * Returns the frame identifier from the debug protocol.
      */
@@ -115,7 +113,16 @@ export class DebugStackFrame extends DebugStackFrameData implements TreeElement
         if (!response) {
             return [];
         }
-        return response.body.scopes.map(raw => new DebugScope(raw, () => this.session));
+        const scopeIds = new Set<number>();
+        return response.body.scopes.map(raw => {
+            // just as in VS Code, the id is based on the name and location to retain expansion state across multiple pauses
+            let id = 0;
+            do {
+                id = stringHash(`${raw.name}:${raw.line}:${raw.column}`, id);
+            } while (scopeIds.has(id));
+            scopeIds.add(id);
+            return new DebugScope(raw, () => this.session, id);
+        });
     }
 
     // https://github.com/theia-ide/vscode/blob/standalone/0.19.x/src/vs/workbench/contrib/debug/common/debugModel.ts#L324-L335

package/src/browser/model/debug-thread.tsx

@@ -164,7 +164,7 @@ export class DebugThread extends DebugThreadData implements TreeElement {
         }
     }
 
-    protected readonly _frames = new Map<number, DebugStackFrame>();
+    protected readonly _frames = new Map<string, DebugStackFrame>();
     get frames(): IterableIterator<DebugStackFrame> {
         return this._frames.values();
     }
@@ -189,7 +189,7 @@ export class DebugThread extends DebugThreadData implements TreeElement {
                 if (cancel.isCancellationRequested) {
                     return [];
                 }
-                return this.doUpdateFrames(frames);
+                return this.doUpdateFrames(start, frames);
             } catch (e) {
                 console.error('fetchFrames failed:', e);
                 return [];
@@ -219,15 +219,19 @@ export class DebugThread extends DebugThreadData implements TreeElement {
             return [];
         }
     }
-    protected doUpdateFrames(frames: DebugProtocol.StackFrame[]): DebugStackFrame[] {
+    protected doUpdateFrames(startFrame: number, frames: DebugProtocol.StackFrame[]): DebugStackFrame[] {
         const result = new Set<DebugStackFrame>();
-        for (const raw of frames) {
-            const id = raw.id;
-            const frame = this._frames.get(id) || new DebugStackFrame(this, this.session);
+        frames.forEach((raw, index) => {
+            // Similarly to VS Code, we no longer use `raw.frameId` in computation of the DebugStackFrame id.
+            // The `raw.frameId` was changing in every step and was not allowing us to correlate stack frames between step events.
+            // Refs: https://github.com/microsoft/vscode/commit/18fc2bcf718e22265b5e09bb7fd0e9c090264cd2, https://github.com/microsoft/vscode/issues/93230#issuecomment-642558395
+            const source = raw.source && this.session.getSource(raw.source);
+            const id = `${this.id}:${startFrame + index}:${source?.name}`;
+            const frame = this._frames.get(id) || new DebugStackFrame(this, this.session, id);
             this._frames.set(id, frame);
             frame.update({ raw });
             result.add(frame);
-        }
+        });
         this.updateCurrentFrame();
         return [...result.values()];
     }
@@ -247,9 +251,9 @@ export class DebugThread extends DebugThreadData implements TreeElement {
     }
     protected updateCurrentFrame(): void {
         const { currentFrame } = this;
-        const frameId = currentFrame && currentFrame.raw.id;
-        this.currentFrame = typeof frameId === 'number' &&
-            this._frames.get(frameId) ||
+        const id = currentFrame && currentFrame.id;
+        this.currentFrame = typeof id === 'string' &&
+            this._frames.get(id) ||
             this._frames.values().next().value;
     }