@theia/debug 1.67.0-next.59 → 1.67.0

package/src/browser/style/index.css

@@ -69,14 +69,13 @@
   font-size: var(--theia-ui-font-size0);
   line-height: calc(var(--theia-private-horizontal-tab-height) / 2);
   border-radius: 2px;
+  margin-left: calc(var(--theia-ui-padding) / 2);
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .theia-data-breakpoint .theia-access-type {
-    margin-left: var(--theia-ui-padding);
-}
-
-.theia-source-breakpoint > .theia-input {
-  min-height: auto;
+  margin-left: var(--theia-ui-padding);
 }
 
 .theia-debug-session .status,
@@ -187,6 +186,7 @@
 }
 
 .theia-debug-console-variable {
+  display: flex;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -212,6 +212,22 @@
   color: var(--theia-variable-name-color);
 }
 
+.theia-debug-console-variable .lazy-button {
+  margin-left: 3px;
+  border-radius: 5px;
+  cursor: pointer;
+  align-self: center;
+  color: var(--theia-icon-foreground);
+}
+
+.theia-debug-console-variable .lazy-button:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
+}
+
+.theia-debug-console-variable .value {
+  margin-left: 6px;
+}
+
 .theia-TreeNode:not(:hover) .theia-debug-console-variable .action-label {
   visibility: hidden;
 }
@@ -234,6 +250,15 @@
   display: flex;
 }
 
+.theia-debug-breakpoint-actions {
+  display: none;
+}
+
+.theia-source-breakpoint:hover .theia-debug-breakpoint-actions {
+  display: flex;
+  align-items: center;
+}
+
 /** Editor **/
 
 .theia-debug-breakpoint-icon {

package/src/browser/view/debug-action.tsx

@@ -21,7 +21,7 @@ import { MenuPath } from '@theia/core';
 export class DebugAction extends React.Component<DebugAction.Props> {
 
     override render(): React.ReactNode {
-        const { enabled, label, iconClass } = this.props;
+        const { enabled, label, tooltip, iconClass } = this.props;
         const classNames = ['debug-action'];
         if (iconClass) {
             classNames.push(...codiconArray(iconClass, true));
@@ -31,7 +31,7 @@ export class DebugAction extends React.Component<DebugAction.Props> {
         }
         return <span tabIndex={0}
             className={classNames.join(' ')}
-            title={label}
+            title={tooltip || label}
             onClick={() => { this.props.run([]); }}
             ref={this.setRef} >
             {!iconClass && <div>{label}</div>}
@@ -51,6 +51,7 @@ export class DebugAction extends React.Component<DebugAction.Props> {
 export namespace DebugAction {
     export interface Props {
         label: string
+        tooltip?: string
         iconClass: string
         run: (effectiveMenuPath: MenuPath) => void
         enabled?: boolean

package/src/browser/view/debug-breakpoints-source.tsx

@@ -19,6 +19,7 @@ import { TreeSource, TreeElement } from '@theia/core/lib/browser/source-tree';
 import { DebugViewModel } from './debug-view-model';
 import { BreakpointManager } from '../breakpoint/breakpoint-manager';
 import { DebugExceptionBreakpoint } from './debug-exception-breakpoint';
+import { CommandService } from '@theia/core/lib/common';
 
 @injectable()
 export class DebugBreakpointsSource extends TreeSource {
@@ -29,6 +30,9 @@ export class DebugBreakpointsSource extends TreeSource {
     @inject(BreakpointManager)
     protected readonly breakpoints: BreakpointManager;
 
+    @inject(CommandService)
+    protected readonly commandService: CommandService;
+
     @postConstruct()
     protected init(): void {
         this.fireDidChange();
@@ -37,7 +41,7 @@ export class DebugBreakpointsSource extends TreeSource {
 
     *getElements(): IterableIterator<TreeElement> {
         for (const exceptionBreakpoint of this.breakpoints.getExceptionBreakpoints()) {
-            yield new DebugExceptionBreakpoint(exceptionBreakpoint, this.breakpoints);
+            yield new DebugExceptionBreakpoint(exceptionBreakpoint, this.breakpoints, this.commandService);
         }
         yield* this.model.dataBreakpoints;
         yield* this.model.functionBreakpoints;

package/src/browser/view/debug-configuration-widget.tsx

@@ -21,7 +21,7 @@ import * as React from '@theia/core/shared/react';
 import { WorkspaceService } from '@theia/workspace/lib/browser';
 import { DebugConsoleContribution } from '../console/debug-console-contribution';
 import { DebugConfigurationManager } from '../debug-configuration-manager';
-import { DebugCommands } from '../debug-frontend-application-contribution';
+import { DebugCommands } from '../debug-commands';
 import { DebugSessionManager } from '../debug-session-manager';
 import { DebugAction } from './debug-action';
 import { DebugConfigurationSelect } from './debug-configuration-select';

package/src/browser/view/debug-exception-breakpoint.tsx

@@ -18,22 +18,26 @@ import * as React from '@theia/core/shared/react';
 import { TreeElement } from '@theia/core/lib/browser/source-tree';
 import { BreakpointManager } from '../breakpoint/breakpoint-manager';
 import { ExceptionBreakpoint } from '../breakpoint/breakpoint-marker';
-import { SingleTextInputDialog } from '@theia/core/lib/browser/dialogs';
-import { TREE_NODE_INFO_CLASS } from '@theia/core/lib/browser';
-import { nls } from '@theia/core';
+import { SingleTextInputDialog, TREE_NODE_INFO_CLASS, codicon, TreeWidget } from '@theia/core/lib/browser';
+import { SelectableTreeNode } from '@theia/core/lib/browser/tree/tree-selection';
+import { nls, CommandService } from '@theia/core';
+import { DebugCommands } from '../debug-commands';
 
 export class DebugExceptionBreakpoint implements TreeElement {
 
     readonly id: string;
+    protected treeWidget?: TreeWidget;
 
     constructor(
         readonly data: ExceptionBreakpoint,
-        readonly breakpoints: BreakpointManager
+        readonly breakpoints: BreakpointManager,
+        protected readonly commandService: CommandService
     ) {
         this.id = data.raw.filter + ':' + data.raw.label;
     }
 
-    render(): React.ReactNode {
+    render(host: TreeWidget): React.ReactNode {
+        this.treeWidget = host;
         return <div title={this.data.raw.description || this.data.raw.label} className='theia-source-breakpoint'>
             <span className='theia-debug-breakpoint-icon' />
             <input type='checkbox' checked={this.data.enabled} onChange={this.toggle} />
@@ -43,9 +47,30 @@ export class DebugExceptionBreakpoint implements TreeElement {
                     <span title={nls.localizeByDefault('Expression condition: {0}', this.data.condition)}
                         className={'path ' + TREE_NODE_INFO_CLASS}>{this.data.condition} </span>}
             </span>
+            {this.renderActions()}
         </div>;
     }
 
+    protected renderActions(): React.ReactNode {
+        if (this.data.raw.supportsCondition) {
+            return <div className='theia-debug-breakpoint-actions'>
+                <div className={codicon('edit', true)} title={nls.localizeByDefault('Edit Condition...')} onClick={this.onEdit} />
+            </div>;
+        }
+        return undefined;
+    }
+
+    protected onEdit = async () => {
+        await this.selectInTree();
+        this.commandService.executeCommand(DebugCommands.EDIT_BREAKPOINT_CONDITION.id);
+    };
+
+    protected async selectInTree(): Promise<void> {
+        if (this.treeWidget?.model && SelectableTreeNode.is(this)) {
+            this.treeWidget.model.selectNode(this);
+        }
+    }
+
     protected toggle = () => this.breakpoints.toggleExceptionBreakpoint(this.data.raw.filter);
 
     async editCondition(): Promise<void> {

package/src/browser/view/debug-session-widget.ts

@@ -100,11 +100,6 @@ export class DebugSessionWidget extends BaseWidget implements StatefulWidget, Ap
         layout.addWidget(this.viewContainer);
     }
 
-    protected override onActivateRequest(msg: Message): void {
-        super.onActivateRequest(msg);
-        this.toolbar.focus();
-    }
-
     protected override onAfterShow(msg: Message): void {
         super.onAfterShow(msg);
         this.getTrackableWidgets().forEach(w => w.update());

package/src/browser/view/debug-threads-widget.ts

@@ -16,8 +16,9 @@
 
 import { injectable, inject, postConstruct, interfaces, Container } from '@theia/core/shared/inversify';
 import { MenuPath } from '@theia/core';
-import { TreeNode, NodeProps, SelectableTreeNode } from '@theia/core/lib/browser';
+import { TreeNode, NodeProps, SelectableTreeNode, CompositeTreeNode } from '@theia/core/lib/browser';
 import { SourceTreeWidget, TreeElementNode } from '@theia/core/lib/browser/source-tree';
+import { ExpandableTreeNode } from '@theia/core/lib/browser/tree/tree-expansion';
 import { DebugThreadsSource } from './debug-threads-source';
 import { DebugSession } from '../debug-session';
 import { DebugThread } from '../model/debug-thread';
@@ -65,28 +66,105 @@ export class DebugThreadsWidget extends SourceTreeWidget {
         this.toDispose.push(this.threads);
         this.source = this.threads;
 
-        this.toDispose.push(this.viewModel.onDidChange(() => this.updateWidgetSelection()));
+        this.toDispose.push(this.viewModel.onDidChange(() => {
+            this.updateWidgetSelection();
+        }));
         this.toDispose.push(this.model.onSelectionChanged(() => this.updateModelSelection()));
     }
 
     protected updatingSelection = false;
-    protected updateWidgetSelection(): void {
+    protected async updateWidgetSelection(): Promise<void> {
         if (this.updatingSelection) {
             return;
         }
         this.updatingSelection = true;
         try {
+            await this.model.refresh();
+
             const { currentThread } = this.viewModel;
-            if (currentThread) {
-                const node = this.model.getNode(currentThread.id);
-                if (SelectableTreeNode.is(node)) {
+
+            // Check if current selection still exists in the tree
+            const selectedNode = this.model.selectedNodes[0];
+            const selectionStillValid = selectedNode && this.model.getNode(selectedNode.id);
+
+            // Only update selection if:
+            // 1. Current selection is invalid (node no longer in tree), OR
+            // 2. There's a stopped thread to show
+            if (selectionStillValid && (!currentThread || !currentThread.stopped)) {
+                return;
+            }
+
+            // Try to select the current stopped thread, or clear if none
+            if (currentThread && currentThread.stopped) {
+                const node = await this.waitForNode(currentThread);
+
+                // Re-check stopped state after async wait
+                if (!currentThread.stopped) {
+                    return;
+                }
+
+                if (node && SelectableTreeNode.is(node)) {
                     this.model.selectNode(node);
+
+                    // Set context key
+                    if (TreeElementNode.is(node)) {
+                        if (node.element instanceof DebugThread) {
+                            this.debugCallStackItemTypeKey.set('thread');
+                        } else if (node.element instanceof DebugSession) {
+                            this.debugCallStackItemTypeKey.set('session');
+                        }
+                    }
                 }
+            } else if (!selectionStillValid) {
+                // Selection is stale and no stopped thread to select
+                this.model.clearSelection();
             }
         } finally {
             this.updatingSelection = false;
         }
     }
+
+    /**
+     * Wait for a node to appear in the tree, expanding root children to populate the tree
+     */
+    protected async waitForNode(thread: DebugThread): Promise<TreeNode | undefined> {
+        const maxAttempts = 10;
+        const delayMs = 50;
+        const threadId = thread.id;
+
+        for (let attempt = 0; attempt < maxAttempts; attempt++) {
+            // If thread continued during wait, abort
+            if (!thread.stopped) {
+                return undefined;
+            }
+
+            await this.model.refresh();
+
+            const root = this.model.root;
+
+            // Expand all root's direct children to populate the tree
+            if (root && CompositeTreeNode.is(root)) {
+                for (const child of root.children) {
+                    if (ExpandableTreeNode.is(child) && !child.expanded) {
+                        await this.model.expandNode(child);
+                    }
+                }
+            }
+
+            // Now look directly for the thread node
+            const threadNode = this.model.getNode(threadId);
+            if (threadNode) {
+                return threadNode;
+            }
+
+            if (attempt < maxAttempts - 1) {
+                await new Promise(resolve => setTimeout(resolve, delayMs));
+            }
+        }
+
+        return undefined;
+    }
+
     protected updateModelSelection(): void {
         if (this.updatingSelection) {
             return;

package/src/browser/view/debug-toolbar-widget.tsx

@@ -16,69 +16,38 @@
 
 import * as React from '@theia/core/shared/react';
 import { inject, postConstruct, injectable } from '@theia/core/shared/inversify';
-import { CommandMenu, CommandRegistry, CompoundMenuNode, Disposable, DisposableCollection, MenuModelRegistry, MenuPath } from '@theia/core';
+import { CommandMenu, CompoundMenuNode, MenuModelRegistry, MenuPath } from '@theia/core';
+import { KeybindingRegistry } from '@theia/core/lib/browser';
 import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
 import { ReactWidget } from '@theia/core/lib/browser/widgets';
 import { DebugViewModel } from './debug-view-model';
-import { DebugState } from '../debug-session';
 import { DebugAction } from './debug-action';
-import { nls } from '@theia/core/lib/common/nls';
 
 @injectable()
 export class DebugToolBar extends ReactWidget {
 
     static readonly MENU: MenuPath = ['debug-toolbar-menu'];
+    static readonly CONTROLS: MenuPath = [...DebugToolBar.MENU, 'z_controls'];
 
-    @inject(CommandRegistry) protected readonly commandRegistry: CommandRegistry;
     @inject(MenuModelRegistry) protected readonly menuModelRegistry: MenuModelRegistry;
+    @inject(KeybindingRegistry) protected readonly keybindingRegistry: KeybindingRegistry;
     @inject(ContextKeyService) protected readonly contextKeyService: ContextKeyService;
     @inject(DebugViewModel) protected readonly model: DebugViewModel;
 
-    protected readonly onRender = new DisposableCollection();
-
     @postConstruct()
     protected init(): void {
         this.id = 'debug:toolbar:' + this.model.id;
         this.addClass('debug-toolbar');
         this.toDispose.push(this.model);
         this.toDispose.push(this.model.onDidChange(() => this.update()));
+        this.toDispose.push(this.keybindingRegistry.onKeybindingsChanged(() => this.update()));
         this.scrollOptions = undefined;
         this.update();
     }
 
-    focus(): void {
-        if (!this.doFocus()) {
-            this.onRender.push(Disposable.create(() => this.doFocus()));
-            this.update();
-        }
-    }
-    protected doFocus(): boolean {
-        if (!this.stepRef) {
-            return false;
-        }
-        this.stepRef.focus();
-        return true;
-    }
-    protected stepRef: DebugAction | undefined;
-    protected setStepRef = (stepRef: DebugAction | null) => {
-        this.stepRef = stepRef || undefined;
-        this.onRender.dispose();
-    };
-
     protected render(): React.ReactNode {
-        const { state } = this.model;
         return <React.Fragment>
             {this.renderContributedCommands()}
-            {this.renderContinue()}
-            <DebugAction enabled={state === DebugState.Stopped} run={this.stepOver} label={nls.localizeByDefault('Step Over')}
-                iconClass='debug-step-over' ref={this.setStepRef} />
-            <DebugAction enabled={state === DebugState.Stopped} run={this.stepIn} label={nls.localizeByDefault('Step Into')}
-                iconClass='debug-step-into' />
-            <DebugAction enabled={state === DebugState.Stopped} run={this.stepOut} label={nls.localizeByDefault('Step Out')}
-                iconClass='debug-step-out' />
-            <DebugAction enabled={state !== DebugState.Inactive} run={this.restart} label={nls.localizeByDefault('Restart')}
-                iconClass='debug-restart' />
-            {this.renderStart()}
         </React.Fragment>;
     }
 
@@ -99,36 +68,20 @@ export class DebugToolBar extends ReactWidget {
     }
 
     protected debugAction(commandMenuNode: CommandMenu): React.ReactNode {
+        const accelerator = this.acceleratorFor(commandMenuNode.id);
+        const run = (effectiveMenuPath: MenuPath) => commandMenuNode.run(effectiveMenuPath).catch(e => console.error(e));
         return <DebugAction
             key={commandMenuNode.id}
-            enabled={true}
+            enabled={commandMenuNode.isEnabled(DebugToolBar.MENU)}
             label={commandMenuNode.label}
+            tooltip={commandMenuNode.label + (accelerator ? ` (${accelerator})` : '')}
             iconClass={commandMenuNode.icon || ''}
-            run={commandMenuNode.run} />;
+            run={run} />;
     }
 
-    protected renderStart(): React.ReactNode {
-        const { state } = this.model;
-        if (state === DebugState.Inactive && this.model.sessionCount === 1) {
-            return <DebugAction run={this.start} label={nls.localizeByDefault('Start')} iconClass='debug-start' />;
-        }
-        return <DebugAction enabled={state !== DebugState.Inactive} run={this.stop} label={nls.localizeByDefault('Stop')} iconClass='debug-stop' />;
-    }
-    protected renderContinue(): React.ReactNode {
-        const { state } = this.model;
-        if (state === DebugState.Stopped) {
-            return <DebugAction run={this.continue} label={nls.localizeByDefault('Continue')} iconClass='debug-continue' />;
-        }
-        return <DebugAction enabled={state === DebugState.Running} run={this.pause} label={nls.localizeByDefault('Pause')} iconClass='debug-pause' />;
+    protected acceleratorFor(commandId: string): string | undefined {
+        const keybindings = this.keybindingRegistry.getKeybindingsForCommand(commandId);
+        return keybindings.length ? this.keybindingRegistry.acceleratorFor(keybindings[0], '+').join(' ') : undefined;
     }
 
-    protected start = () => this.model.start({ startedByUser: true });
-    protected restart = () => this.model.restart();
-    protected stop = () => this.model.terminate();
-    protected continue = () => this.model.currentThread && this.model.currentThread.continue();
-    protected pause = () => this.model.currentThread && this.model.currentThread.pause();
-    protected stepOver = () => this.model.currentThread && this.model.currentThread.stepOver();
-    protected stepIn = () => this.model.currentThread && this.model.currentThread.stepIn();
-    protected stepOut = () => this.model.currentThread && this.model.currentThread.stepOut();
-
 }

package/src/browser/view/debug-variables-source.ts

@@ -30,6 +30,7 @@ export class DebugVariablesSource extends TreeSource {
     protected init(): void {
         this.refresh();
         this.toDispose.push(this.model.onDidChange(() => this.refresh()));
+        this.toDispose.push(this.model.onDidResolveLazyVariable(() => this.fireDidChange()));
     }
 
     protected readonly refresh = debounce(() => this.fireDidChange(), 400);

package/src/browser/view/debug-variables-widget.ts

@@ -25,6 +25,9 @@ import { SelectableTreeNode, TreeNode, TreeSelection } from '@theia/core/lib/bro
 import { DebugVariable } from '../console/debug-console-items';
 import { BreakpointManager } from '../breakpoint/breakpoint-manager';
 import { DataBreakpoint, DataBreakpointSource, DataBreakpointSourceType } from '../breakpoint/breakpoint-marker';
+import { DebugSessionManager } from '../debug-session-manager';
+import { DebugSession } from '../debug-session';
+import { DebugStackFrame } from '../model/debug-stack-frame';
 
 @injectable()
 export class DebugVariablesWidget extends SourceTreeWidget {
@@ -64,6 +67,12 @@ export class DebugVariablesWidget extends SourceTreeWidget {
     @inject(BreakpointManager)
     protected readonly breakpointManager: BreakpointManager;
 
+    @inject(DebugSessionManager)
+    protected readonly sessionManager: DebugSessionManager;
+
+    protected stackFrame: DebugStackFrame | undefined;
+    protected readonly statePerSession = new Map<string, DebugVariablesWidgetSessionState>();
+
     @postConstruct()
     protected override init(): void {
         super.init();
@@ -71,6 +80,44 @@ export class DebugVariablesWidget extends SourceTreeWidget {
         this.title.label = nls.localizeByDefault('Variables');
         this.toDispose.push(this.variables);
         this.source = this.variables;
+        this.toDispose.push(this.sessionManager.onDidFocusStackFrame(stackFrame => this.handleDidFocusStackFrame(stackFrame)));
+        this.toDispose.push(this.sessionManager.onDidDestroyDebugSession(session => this.handleDidDestroyDebugSession(session)));
+    }
+
+    protected handleDidFocusStackFrame(stackFrame: DebugStackFrame | undefined): void {
+        if (this.stackFrame !== stackFrame) {
+            if (this.stackFrame) {
+                const sessionState = this.getOrCreateSessionState(this.stackFrame.session);
+                sessionState.setStateForStackFrame(this.stackFrame, this.superStoreState());
+            }
+            if (stackFrame) {
+                const sessionState = this.statePerSession.get(stackFrame.session.id);
+                if (sessionState) {
+                    const state = sessionState.getStateForStackFrame(stackFrame);
+                    if (state) {
+                        this.superRestoreState(state);
+                    }
+                }
+            }
+            this.stackFrame = stackFrame;
+        }
+    }
+
+    protected getOrCreateSessionState(session: DebugSession): DebugVariablesWidgetSessionState {
+        let sessionState = this.statePerSession.get(session.id);
+        if (!sessionState) {
+            sessionState = this.newSessionState();
+            this.statePerSession.set(session.id, sessionState);
+        }
+        return sessionState;
+    }
+
+    protected newSessionState(): DebugVariablesWidgetSessionState {
+        return new DebugVariablesWidgetSessionState();
+    }
+
+    protected handleDidDestroyDebugSession(session: DebugSession): void {
+        this.statePerSession.delete(session.id);
     }
 
     protected override handleContextMenuEvent(node: TreeNode | undefined, event: MouseEvent<HTMLElement>): void {
@@ -156,3 +203,15 @@ export class DebugVariablesWidget extends SourceTreeWidget {
         );
     }
 }
+
+export class DebugVariablesWidgetSessionState {
+    protected readonly statePerStackFrame = new Map<string, object>();
+
+    setStateForStackFrame(stackFrame: DebugStackFrame, state: object): void {
+        this.statePerStackFrame.set(stackFrame.id, state);
+    }
+
+    getStateForStackFrame(stackFrame: DebugStackFrame): object | undefined {
+        return this.statePerStackFrame.get(stackFrame.id);
+    }
+}

package/src/browser/view/debug-view-model.ts

@@ -29,6 +29,7 @@ import { DebugFunctionBreakpoint } from '../model/debug-function-breakpoint';
 import { DebugInstructionBreakpoint } from '../model/debug-instruction-breakpoint';
 import { DebugSessionOptionsBase } from '../debug-session-options';
 import { DebugDataBreakpoint } from '../model/debug-data-breakpoint';
+import { DebugVariable } from '../console/debug-console-items';
 
 @injectable()
 export class DebugViewModel implements Disposable {
@@ -46,6 +47,12 @@ export class DebugViewModel implements Disposable {
         this.onDidChangeBreakpointsEmitter.fire(uri);
     }
 
+    protected readonly onDidResolveLazyVariableEmitter = new Emitter<DebugVariable>();
+    readonly onDidResolveLazyVariable: Event<DebugVariable> = this.onDidResolveLazyVariableEmitter.event;
+    protected fireDidResolveLazyVariable(variable: DebugVariable): void {
+        this.onDidResolveLazyVariableEmitter.fire(variable);
+    }
+
     protected readonly _watchExpressions = new Map<number, DebugWatchExpression>();
 
     protected readonly onDidChangeWatchExpressionsEmitter = new Emitter<void>();
@@ -57,6 +64,7 @@ export class DebugViewModel implements Disposable {
     protected readonly toDispose = new DisposableCollection(
         this.onDidChangeEmitter,
         this.onDidChangeBreakpointsEmitter,
+        this.onDidResolveLazyVariableEmitter,
         this.onDidChangeWatchExpressionsEmitter,
     );
 
@@ -88,13 +96,17 @@ export class DebugViewModel implements Disposable {
             this.fireDidChange();
         }));
         this.toDispose.push(this.manager.onDidChange(current => {
-            if (current === this.currentSession) {
-                this.fireDidChange();
-            }
+            // Always fire change to update views, even if session is not current
+            // This ensures threads view updates for all sessions
+            this.fireDidChange();
         }));
         this.toDispose.push(this.manager.onDidChangeBreakpoints(({ session, uri }) => {
-            if (!session || session === this.currentSession) {
-                this.fireDidChangeBreakpoints(uri);
+            // Fire for all sessions since we now show breakpoints from all active sessions
+            this.fireDidChangeBreakpoints(uri);
+        }));
+        this.toDispose.push(this.manager.onDidResolveLazyVariable(({ session, variable }) => {
+            if (session === this.currentSession) {
+                this.fireDidResolveLazyVariable(variable);
             }
         }));
         this.updateWatchExpressions();
@@ -127,15 +139,15 @@ export class DebugViewModel implements Disposable {
     }
 
     get breakpoints(): DebugSourceBreakpoint[] {
-        return this.manager.getBreakpoints(this.currentSession);
+        return this.manager.getBreakpoints();
     }
 
     get functionBreakpoints(): DebugFunctionBreakpoint[] {
-        return this.manager.getFunctionBreakpoints(this.currentSession);
+        return this.manager.getFunctionBreakpoints();
     }
 
     get instructionBreakpoints(): DebugInstructionBreakpoint[] {
-        return this.manager.getInstructionBreakpoints(this.currentSession);
+        return this.manager.getInstructionBreakpoints();
     }
 
     get dataBreakpoints(): DebugDataBreakpoint[] {

package/src/browser/view/debug-watch-expression.tsx

@@ -23,7 +23,7 @@ import { nls } from '@theia/core';
 
 export class DebugWatchExpression extends ExpressionItem {
 
-    readonly id: number;
+    override readonly id: number;
     protected isError: boolean;
     protected isNotAvailable: boolean;
 
@@ -34,12 +34,12 @@ export class DebugWatchExpression extends ExpressionItem {
         remove: () => void,
         onDidChange: () => void
     }) {
-        super(options.expression, options.session);
-        this.id = options.id;
+        super(options.expression, options.session, options.id);
     }
 
     override async evaluate(): Promise<void> {
         await super.evaluate('watch');
+        this.options.onDidChange();
     }
 
     protected override setResult(body?: DebugProtocol.EvaluateResponse['body'], error?: string): void {
@@ -56,14 +56,13 @@ export class DebugWatchExpression extends ExpressionItem {
             super.setResult(body, error);
             this.isError = !!error;
         }
-        this.options.onDidChange();
     }
 
     override render(): React.ReactNode {
         const valueClass = this.valueClass();
         return <div className='theia-debug-console-variable theia-debug-watch-expression'>
             <div className={TREE_NODE_SEGMENT_GROW_CLASS}>
-                <span title={this.type || this._expression} className='name'>{this._expression}: </span>
+                <span title={this.type || this._expression} className='name'>{this._expression}:</span>
                 <span title={this._value} ref={this.setValueRef} className={valueClass}>{this._value}</span>
             </div>
             <div className={codicon('close', true)} title={nls.localizeByDefault('Remove Expression')} onClick={this.options.remove} />
@@ -77,7 +76,7 @@ export class DebugWatchExpression extends ExpressionItem {
         if (this.isNotAvailable) {
             return 'watch-not-available';
         }
-        return '';
+        return 'value';
     }
 
     async open(): Promise<void> {

package/src/browser/view/debug-watch-source.ts

@@ -30,6 +30,7 @@ export class DebugWatchSource extends TreeSource {
     protected init(): void {
         this.refresh();
         this.toDispose.push(this.model.onDidChangeWatchExpressions(() => this.refresh()));
+        this.toDispose.push(this.model.onDidResolveLazyVariable(() => this.refresh()));
     }
 
     protected readonly refresh = debounce(() => this.fireDidChange(), 100);