Resolve issues with Notebook Handler

src/handlers/cell.ts

@@ -47,7 +47,11 @@ export class CellManager implements IDisposable {
     });
 
     this.breakpointsModel.changed.connect(async () => {
-      if (!this.activeCell || this.activeCell.isDisposed) {
+      if (
+        !this.activeCell ||
+        !this.activeCell.isVisible ||
+        this.activeCell.isDisposed
+      ) {
         return;
       }
       this.addBreakpointsToEditor(this.activeCell);
@@ -69,7 +73,7 @@ export class CellManager implements IDisposable {
 
   // TODO: call when the debugger stops
   private cleanupHighlight() {
-    if (!this.activeCell) {
+    if (!this.activeCell || this.activeCell.isDisposed) {
       return;
     }
     const editor = this.activeCell.editor as CodeMirrorEditor;
@@ -165,6 +169,9 @@ export class CellManager implements IDisposable {
   }
 
   protected removeListener(cell: CodeCell) {
+    if (cell.isDisposed) {
+      return;
+    }
     const editor = cell.editor as CodeMirrorEditor;
     editor.editor.off('gutterClick', this.onGutterClick);
     editor.editor.off('renderLine', this.onNewRenderLine);

src/handlers/notebook.ts

@@ -22,6 +22,7 @@ export class NotebookHandler implements IDisposable {
     this.debuggerModel = options.debuggerService.model;
     this.debuggerService = options.debuggerService;
     this.notebookTracker = options.tracker;
+    this.id = options.id;
     this.breakpoints = this.debuggerModel.breakpointsModel;
 
     this.cellManager = new CellManager({
@@ -46,30 +47,34 @@ export class NotebookHandler implements IDisposable {
     }
     this.isDisposed = true;
     this.cellManager.dispose();
-    this.notebookTracker.activeCellChanged.disconnect(
-      this.onActiveCellChanged,
-      this
-    );
     Signal.clearData(this);
   }
 
   protected onActiveCellChanged(
     notebookTracker: NotebookTracker,
     codeCell: CodeCell
   ) {
-    this.cellManager.activeCell = codeCell;
+    if (notebookTracker.currentWidget.id !== this.id) {
+      return;
+    }
+    // TODO: do we need this requestAnimationFrame?
+    requestAnimationFrame(() => {
+      this.cellManager.activeCell = codeCell;
+    });
   }
 
   private notebookTracker: INotebookTracker;
   private debuggerModel: Debugger.Model;
   private debuggerService: IDebugger;
   private breakpoints: Breakpoints.Model;
   private cellManager: CellManager;
+  private id: string;
 }
 
 export namespace NotebookHandler {
   export interface IOptions {
     debuggerService: IDebugger;
     tracker: INotebookTracker;
+    id?: string;
   }
 }

src/index.ts

@@ -96,7 +96,8 @@ class DebuggerHandler<H extends ConsoleHandler | NotebookHandler> {
     if (debug.model && !this.handlers[widget.id]) {
       const handler = new this.builder({
         tracker: tracker,
-        debuggerService: debug
+        debuggerService: debug,
+        id: widget.id
       });
       this.handlers[widget.id] = handler;
       widget.disposed.connect(() => {

style/breakpoints.css

@@ -28,6 +28,8 @@
 }
 
 .jp-CodeCell.jp-mod-selected .CodeMirror-gutter-wrapper:hover::after,
-.jp-Editor.jp-mod-focused .CodeMirror-gutter-wrapper:hover::after {
+.jp-Editor.jp-mod-focused
+  .CodeMirror:not(.jp-mod-readOnly)
+  .CodeMirror-gutter-wrapper:hover::after {
   opacity: 0.5;
 }