@theia/debug 1.67.0-next.59 → 1.67.0-next.86

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@theia/debug",
-  "version": "1.67.0-next.59+3f14297ea",
+  "version": "1.67.0-next.86+03f92ff1d",
   "description": "Theia - Debug Extension",
   "dependencies": {
-    "@theia/console": "1.67.0-next.59+3f14297ea",
-    "@theia/core": "1.67.0-next.59+3f14297ea",
-    "@theia/editor": "1.67.0-next.59+3f14297ea",
-    "@theia/filesystem": "1.67.0-next.59+3f14297ea",
-    "@theia/markers": "1.67.0-next.59+3f14297ea",
-    "@theia/monaco": "1.67.0-next.59+3f14297ea",
+    "@theia/console": "1.67.0-next.86+03f92ff1d",
+    "@theia/core": "1.67.0-next.86+03f92ff1d",
+    "@theia/editor": "1.67.0-next.86+03f92ff1d",
+    "@theia/filesystem": "1.67.0-next.86+03f92ff1d",
+    "@theia/markers": "1.67.0-next.86+03f92ff1d",
+    "@theia/monaco": "1.67.0-next.86+03f92ff1d",
     "@theia/monaco-editor-core": "1.96.302",
-    "@theia/output": "1.67.0-next.59+3f14297ea",
-    "@theia/process": "1.67.0-next.59+3f14297ea",
-    "@theia/task": "1.67.0-next.59+3f14297ea",
-    "@theia/terminal": "1.67.0-next.59+3f14297ea",
-    "@theia/test": "1.67.0-next.59+3f14297ea",
-    "@theia/variable-resolver": "1.67.0-next.59+3f14297ea",
-    "@theia/workspace": "1.67.0-next.59+3f14297ea",
+    "@theia/output": "1.67.0-next.86+03f92ff1d",
+    "@theia/process": "1.67.0-next.86+03f92ff1d",
+    "@theia/task": "1.67.0-next.86+03f92ff1d",
+    "@theia/terminal": "1.67.0-next.86+03f92ff1d",
+    "@theia/test": "1.67.0-next.86+03f92ff1d",
+    "@theia/variable-resolver": "1.67.0-next.86+03f92ff1d",
+    "@theia/workspace": "1.67.0-next.86+03f92ff1d",
     "@vscode/debugprotocol": "^1.51.0",
     "fast-deep-equal": "^3.1.3",
     "jsonc-parser": "^2.2.0",
@@ -64,5 +64,5 @@
   "nyc": {
     "extends": "../../configs/nyc.json"
   },
-  "gitHead": "3f14297ea2edcdb1fffd74afee0613e70b43e125"
+  "gitHead": "03f92ff1d97dcb199de39b48e60a53535de22808"
 }

package/src/browser/console/debug-console-items.tsx

@@ -16,12 +16,12 @@
 
 import * as React from '@theia/core/shared/react';
 import { DebugProtocol } from '@vscode/debugprotocol/lib/debugProtocol';
-import { SingleTextInputDialog } from '@theia/core/lib/browser';
+import { codicon, SingleTextInputDialog } from '@theia/core/lib/browser';
 import { ConsoleItem, CompositeConsoleItem } from '@theia/console/lib/browser/console-session';
 import { DebugSession, formatMessage } from '../debug-session';
 import { Severity } from '@theia/core/lib/common/severity';
 import * as monaco from '@theia/monaco-editor-core';
-import { nls } from '@theia/core';
+import { generateUuid, nls } from '@theia/core';
 
 export type DebugSessionProvider = () => DebugSession | undefined;
 
@@ -34,17 +34,24 @@ export class ExpressionContainer implements CompositeConsoleItem {
         return this.sessionProvider();
     }
 
+    readonly id: string | number;
     protected variablesReference: number;
     protected namedVariables: number | undefined;
     protected indexedVariables: number | undefined;
+    protected presentationHint: DebugProtocol.VariablePresentationHint | undefined;
     protected readonly startOfVariables: number;
 
     constructor(options: ExpressionContainer.Options) {
         this.sessionProvider = options.session;
+        this.id = options.id ?? generateUuid();
         this.variablesReference = options.variablesReference || 0;
         this.namedVariables = options.namedVariables;
         this.indexedVariables = options.indexedVariables;
         this.startOfVariables = options.startOfVariables || 0;
+        this.presentationHint = options.presentationHint;
+        if (this.lazy) {
+            (this as CompositeConsoleItem).expandByDefault = () => !this.lazy && !this.session?.autoExpandLazyVariables;
+        }
     }
 
     render(): React.ReactNode {
@@ -56,7 +63,31 @@ export class ExpressionContainer implements CompositeConsoleItem {
     }
 
     get hasElements(): boolean {
-        return this.variablesReference !== undefined;
+        return !!this.variablesReference && !this.lazy;
+    }
+
+    get lazy(): boolean {
+        return !!this.presentationHint?.lazy;
+    }
+
+    async resolveLazy(): Promise<void> {
+        const { session, variablesReference, lazy } = this;
+        if (!session || !variablesReference || !lazy) {
+            return;
+        }
+        const response = await session.sendRequest('variables', { variablesReference });
+        const { variables } = response.body;
+        if (variables.length !== 1) {
+            return;
+        }
+        this.handleResolvedLazy(variables[0]);
+    }
+
+    protected handleResolvedLazy(resolved: DebugProtocol.Variable): void {
+        this.variablesReference = resolved.variablesReference;
+        this.namedVariables = resolved.namedVariables;
+        this.indexedVariables = resolved.indexedVariables;
+        this.presentationHint = resolved.presentationHint;
     }
 
     protected elements: Promise<ExpressionContainer[]> | undefined;
@@ -85,13 +116,15 @@ export class ExpressionContainer implements CompositeConsoleItem {
                     const start = this.startOfVariables + i * chunkSize;
                     const count = Math.min(chunkSize, this.indexedVariables - i * chunkSize);
                     const { variablesReference } = this;
+                    const name = `[${start}..${start + count - 1}]`;
                     result.push(new DebugVirtualVariable({
                         session: this.sessionProvider,
+                        id: `${this.id}:${name}`,
                         variablesReference,
                         namedVariables: 0,
                         indexedVariables: count,
                         startOfVariables: start,
-                        name: `[${start}..${start + count - 1}]`
+                        name
                     }));
                 }
                 return result;
@@ -105,14 +138,23 @@ export class ExpressionContainer implements CompositeConsoleItem {
     protected fetch(result: ConsoleItem[], filter: 'indexed', start: number, count?: number): Promise<void>;
     protected async fetch(result: ConsoleItem[], filter: 'indexed' | 'named', start?: number, count?: number): Promise<void> {
         try {
-            const { variablesReference } = this;
-            const response = await this.session!.sendRequest('variables', { variablesReference, filter, start, count });
-            const { variables } = response.body;
-            const names = new Set<string>();
-            for (const variable of variables) {
-                if (!names.has(variable.name)) {
-                    result.push(new DebugVariable(this.sessionProvider, variable, this));
-                    names.add(variable.name);
+            const { session } = this;
+            if (session) {
+                const { variablesReference } = this;
+                const response = await session.sendRequest('variables', { variablesReference, filter, start, count });
+                const { variables } = response.body;
+                const names = new Set<string>();
+                const debugVariables: DebugVariable[] = [];
+                for (const variable of variables) {
+                    if (!names.has(variable.name)) {
+                        const v = new DebugVariable(this.sessionProvider, variable, this);
+                        debugVariables.push(v);
+                        result.push(v);
+                        names.add(variable.name);
+                    }
+                }
+                if (session.autoExpandLazyVariables) {
+                    await Promise.all(debugVariables.map(v => v.lazy && v.resolveLazy()));
                 }
             }
         } catch (e) {
@@ -128,10 +170,12 @@ export class ExpressionContainer implements CompositeConsoleItem {
 export namespace ExpressionContainer {
     export interface Options {
         session: DebugSessionProvider,
+        id?: string | number,
         variablesReference?: number
         namedVariables?: number
         indexedVariables?: number
         startOfVariables?: number
+        presentationHint?: DebugProtocol.VariablePresentationHint
     }
 }
 
@@ -147,9 +191,11 @@ export class DebugVariable extends ExpressionContainer {
     ) {
         super({
             session,
+            id: `${parent.id}:${variable.name}`,
             variablesReference: variable.variablesReference,
             namedVariables: variable.namedVariables,
-            indexedVariables: variable.indexedVariables
+            indexedVariables: variable.indexedVariables,
+            presentationHint: variable.presentationHint
         });
     }
 
@@ -169,17 +215,20 @@ export class DebugVariable extends ExpressionContainer {
     }
 
     get readOnly(): boolean {
-        return this.variable.presentationHint?.attributes?.includes('readOnly') ?? false;
+        return this.presentationHint?.attributes?.includes('readOnly') || this.lazy;
     }
 
     override render(): React.ReactNode {
-        const { type, value, name } = this;
+        const { type, value, name, lazy } = this;
         return <div className={this.variableClassName}>
-            <span title={type || name} className='name' ref={this.setNameRef}>{name}{!!value && ': '}</span>
-            <span title={value} ref={this.setValueRef}>{value}</span>
+            <span title={type || name} className='name' ref={this.setNameRef}>{name}{(value || lazy) && ': '}</span>
+            {lazy && <span title={nls.localizeByDefault('Click to expand')} className={codicon('eye') + ' lazy-button'} onClick={this.handleLazyButtonClick} />}
+            <span title={value} className='value' ref={this.setValueRef}>{value}</span>
         </div>;
     }
 
+    private readonly handleLazyButtonClick = () => this.resolveLazy();
+
     protected get variableClassName(): string {
         const { type, value } = this;
         const classNames = ['theia-debug-console-variable'];
@@ -195,6 +244,13 @@ export class DebugVariable extends ExpressionContainer {
         return classNames.join(' ');
     }
 
+    protected override handleResolvedLazy(resolved: DebugProtocol.Variable): void {
+        this._value = resolved.value;
+        this._type = resolved.type || this._type;
+        super.handleResolvedLazy(resolved);
+        this.session?.['onDidResolveLazyVariableEmitter'].fire(this);
+    }
+
     get supportSetVariable(): boolean {
         return !!this.session && !!this.session.capabilities.supportsSetVariable;
     }
@@ -312,9 +368,10 @@ export class ExpressionItem extends ExpressionContainer {
 
     constructor(
         protected _expression: string,
-        session: DebugSessionProvider
+        session: DebugSessionProvider,
+        id?: string | number
     ) {
-        super({ session });
+        super({ session, id });
     }
 
     get expression(): string {
@@ -333,7 +390,7 @@ export class ExpressionItem extends ExpressionContainer {
         </div>;
     }
 
-    async evaluate(context: string = 'repl'): Promise<void> {
+    async evaluate(context: string = 'repl', resolveLazy = true): Promise<void> {
         const session = this.session;
         if (!session?.currentFrame) {
             this.setResult(undefined, ExpressionItem.notAvailable);
@@ -343,6 +400,9 @@ export class ExpressionItem extends ExpressionContainer {
         try {
             const body = await session.evaluate(this._expression, context);
             this.setResult(body);
+            if (this.lazy && resolveLazy) {
+                await this.resolveLazy();
+            }
         } catch (err) {
             this.setResult(undefined, err.message);
         }
@@ -356,6 +416,7 @@ export class ExpressionItem extends ExpressionContainer {
             this.variablesReference = body.variablesReference;
             this.namedVariables = body.namedVariables;
             this.indexedVariables = body.indexedVariables;
+            this.presentationHint = body.presentationHint;
             this.severity = Severity.Log;
         } else {
             this._value = error;
@@ -364,21 +425,29 @@ export class ExpressionItem extends ExpressionContainer {
             this.variablesReference = 0;
             this.namedVariables = undefined;
             this.indexedVariables = undefined;
+            this.presentationHint = undefined;
             this.severity = Severity.Error;
         }
         this.elements = undefined;
     }
 
+    protected override handleResolvedLazy(resolved: DebugProtocol.Variable): void {
+        this._value = resolved.value;
+        this._type = resolved.type || this._type;
+        super.handleResolvedLazy(resolved);
+    }
 }
 
 export class DebugScope extends ExpressionContainer {
 
     constructor(
         protected readonly raw: DebugProtocol.Scope,
-        session: DebugSessionProvider
+        session: DebugSessionProvider,
+        id: number
     ) {
         super({
             session,
+            id: `${raw.name}:${id}`,
             variablesReference: raw.variablesReference,
             namedVariables: raw.namedVariables,
             indexedVariables: raw.indexedVariables

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

@@ -85,6 +85,7 @@ export class DebugConsoleSession extends ConsoleSession {
             triggerCharacters: ['.'],
             provideCompletionItems: (model, position) => this.completions(model, position),
         }));
+        this.toDispose.push(this.sessionManager.onDidResolveLazyVariable(() => this.fireDidChange()));
     }
 
     getElements(): IterableIterator<ConsoleItem> {

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

@@ -146,7 +146,9 @@ export class DefaultDebugSessionFactory implements DebugSessionFactory {
             this.messages,
             this.fileService,
             this.debugContributionProvider,
-            this.workspaceService);
+            this.workspaceService,
+            this.debugPreferences
+        );
     }
 
     protected getTraceOutputChannel(): OutputChannel | undefined {

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

@@ -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;
 
@@ -544,6 +553,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;

package/src/browser/debug-session.tsx

@@ -25,7 +25,7 @@ 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,7 @@ export class DebugSession implements CompositeTreeElement {
         protected readonly fileService: FileService,
         protected readonly debugContributionProvider: ContributionProvider<DebugContribution>,
         protected readonly workspaceService: WorkspaceService,
+        protected readonly debugPreferences: DebugPreferences,
         /**
          * Number of millis after a `stop` request times out. It's 5 seconds by default.
          */
@@ -157,7 +162,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 +194,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();

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

package/src/browser/style/index.css

@@ -187,6 +187,7 @@
 }
 
 .theia-debug-console-variable {
+  display: flex;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -212,6 +213,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;
 }

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);