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

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

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,
     );
 
@@ -97,6 +105,11 @@ export class DebugViewModel implements Disposable {
                 this.fireDidChangeBreakpoints(uri);
             }
         }));
+        this.toDispose.push(this.manager.onDidResolveLazyVariable(({ session, variable }) => {
+            if (session === this.currentSession) {
+                this.fireDidResolveLazyVariable(variable);
+            }
+        }));
         this.updateWatchExpressions();
         this.toDispose.push(this.watch.onDidChange(() => this.updateWatchExpressions()));
     }

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

package/src/common/debug-preferences.ts

@@ -64,7 +64,17 @@ export const debugPreferencesSchema: PreferenceSchema = {
             description: nls.localizeByDefault('Show Source Code in Disassembly View.'),
             type: 'boolean',
             default: true,
-        }
+        },
+        'debug.autoExpandLazyVariables': {
+            type: 'string',
+            enum: ['on', 'off'],
+            default: 'off',
+            enumDescriptions: [
+                nls.localizeByDefault('Always automatically expand lazy variables.'),
+                nls.localizeByDefault('Never automatically expand lazy variables.')
+            ],
+            description: nls.localizeByDefault('Controls whether variables that are lazily resolved, such as getters, are automatically resolved and expanded by the debugger.')
+        },
     }
 };
 
@@ -76,6 +86,7 @@ export class DebugConfiguration {
     'debug.showInStatusBar': 'never' | 'always' | 'onFirstSessionStart';
     'debug.confirmOnExit': 'never' | 'always';
     'debug.disassemblyView.showSourceCode': boolean;
+    'debug.autoExpandLazyVariables': 'on' | 'off';
 }
 
 export const DebugPreferenceContribution = Symbol('DebugPreferenceContribution');