Change line highlighting when switching callstack

src/callstack/index.ts

@@ -96,6 +96,7 @@ export namespace Callstack {
     set frames(newFrames: IFrame[]) {
       this._state = newFrames;
       this._framesChanged.emit(newFrames);
+      this.frame = newFrames[0];
     }
 
     get frames(): IFrame[] {

src/handlers/cell.ts

@@ -41,14 +41,15 @@ export class CellManager implements IDisposable {
     }
     this.breakpointsModel = this._debuggerModel.breakpointsModel;
 
-    this._debuggerModel.variablesModel.changed.connect(() => {
-      this.cleanupHighlight();
-      const firstFrame = this._debuggerModel.callstackModel.frames[0];
-      if (!firstFrame) {
-        return;
+    this._debuggerModel.callstackModel.currentFrameChanged.connect(
+      (_, frame) => {
+        this.cleanupHighlight();
+        if (!frame) {
+          return;
+        }
+        this.showCurrentLine(frame.line);
       }
-      this.showCurrentLine(firstFrame.line);
-    });
+    );
 
     this.breakpointsModel.changed.connect(async () => {
       if (

src/service.ts

@@ -88,6 +88,7 @@ export class DebugService implements IDebugger {
       } else if (event.event === 'continued') {
         this._stoppedThreads.delete(event.body.threadId);
         this.clearModel();
+        this.clearSignals();
       }
       this._eventMessage.emit(event);
     });
@@ -350,34 +351,21 @@ export class DebugService implements IDebugger {
   }
 
   getAllFrames = async () => {
-    const stackFrames = await this.getFrames(this.currentThread());
-
-    stackFrames.forEach(async (frame, index) => {
-      const scopes = await this.getScopes(frame);
-      const variables = await this.getVariables(scopes);
-      const values = this.convertScope(scopes, variables);
-      this.frames.push({
-        id: frame.id,
-        scopes: values
-      });
-      if (index === 0) {
-        this._model.variablesModel.scopes = values;
-      }
-    });
-
-    if (stackFrames) {
-      this._model.callstackModel.frames = stackFrames;
-    }
-
     this._model.callstackModel.currentFrameChanged.connect(this.onChangeFrame);
     this._model.variablesModel.variableExpanded.connect(this.getVariable);
+
+    const stackFrames = await this.getFrames(this.currentThread());
+    this._model.callstackModel.frames = stackFrames;
   };
 
-  onChangeFrame = (_: Callstack.Model, update: Callstack.IFrame) => {
-    const frame = this.frames.find(ele => ele.id === update.id);
-    if (frame && frame.scopes) {
-      this._model.variablesModel.scopes = frame.scopes;
+  onChangeFrame = async (_: Callstack.Model, frame: Callstack.IFrame) => {
+    if (!frame) {
+      return;
     }
+    const scopes = await this.getScopes(frame);
+    const variables = await this.getVariables(scopes);
+    const variableScopes = this.convertScope(scopes, variables);
+    this._model.variablesModel.scopes = variableScopes;
   };
 
   dumpCell = async (code: string) => {
@@ -476,6 +464,13 @@ export class DebugService implements IDebugger {
     this._model.variablesModel.scopes = [];
   }
 
+  private clearSignals() {
+    this._model.callstackModel.currentFrameChanged.disconnect(
+      this.onChangeFrame
+    );
+    this._model.variablesModel.variableExpanded.disconnect(this.getVariable);
+  }
+
   private currentThread(): number {
     // TODO: ask the model for the current thread ID
     return 1;
@@ -507,18 +502,10 @@ export class DebugService implements IDebugger {
   private _tmpFilePrefix: string;
   private _tmpFileSuffix: string;
 
-  // TODO: remove frames from the service
-  private frames: Frame[] = [];
-
   // TODO: move this in model
   private _stoppedThreads = new Set();
 }
 
-export type Frame = {
-  id: number;
-  scopes: Variables.IScope[];
-};
-
 namespace Private {
   export function toSourceBreakpoints(breakpoints: Breakpoints.IBreakpoint[]) {
     return breakpoints.map(breakpoint => {