Merge pull request #94 from KsavinN/breakpointLine

Add line highlight for breakpoints

src/debugger.ts

@@ -123,6 +123,10 @@ export namespace Debugger {
       this._codeValue = observableString;
     }
 
+    get currentLineChanged() {
+      return this._currentLineChanged;
+    }
+
     dispose(): void {
       this._isDisposed = true;
     }
@@ -140,6 +144,7 @@ export namespace Debugger {
     private _isDisposed = false;
     private _mode: IDebugger.Mode;
     private _modeChanged = new Signal<this, IDebugger.Mode>(this);
+    private _currentLineChanged = new Signal<this, number>(this);
   }
 
   export namespace Model {

src/handlers/cell.ts

@@ -8,11 +8,15 @@ import { CodeMirrorEditor } from '@jupyterlab/codemirror';
 import { Editor, Doc } from 'codemirror';
 
 import { Breakpoints, SessionTypes } from '../breakpoints';
+
 import { Debugger } from '../debugger';
 import { IDebugger } from '../tokens';
 import { IDisposable } from '@phosphor/disposable';
+
 import { Signal } from '@phosphor/signaling';
 
+const LINE_HIGHLIGHT_CLASS = 'jp-breakpoint-line-highlight';
+
 export class CellManager implements IDisposable {
   constructor(options: CellManager.IOptions) {
     this._debuggerModel = options.debuggerModel;
@@ -28,6 +32,10 @@ export class CellManager implements IDisposable {
       }
       this.clearGutter(this.activeCell);
     });
+
+    this._debuggerModel.currentLineChanged.connect((_, lineNumber) => {
+      this.showCurrentLine(lineNumber);
+    });
   }
 
   private _previousCell: CodeCell;
@@ -39,6 +47,26 @@ export class CellManager implements IDisposable {
   private _activeCell: CodeCell;
   isDisposed: boolean;
 
+  private showCurrentLine(lineNumber: number) {
+    if (!this.activeCell) {
+      return;
+    }
+    const editor = this.activeCell.editor as CodeMirrorEditor;
+    this.cleanupHighlight();
+    editor.editor.addLineClass(lineNumber - 1, 'wrap', LINE_HIGHLIGHT_CLASS);
+  }
+
+  // TODO: call when the debugger stops
+  private cleanupHighlight() {
+    if (!this.activeCell) {
+      return;
+    }
+    const editor = this.activeCell.editor as CodeMirrorEditor;
+    editor.doc.eachLine(line => {
+      editor.editor.removeLineClass(line, 'wrap', LINE_HIGHLIGHT_CLASS);
+    });
+  }
+
   dispose(): void {
     if (this.isDisposed) {
       return;
@@ -47,6 +75,7 @@ export class CellManager implements IDisposable {
       this.removeListener(this.previousCell);
     }
     this.removeListener(this.activeCell);
+    this.cleanupHighlight();
     Signal.clearData(this);
   }
 

src/service.ts

@@ -86,6 +86,7 @@ export class DebugService implements IDebugger.IService {
       });
       if (index === 0) {
         this._model.sidebar.variables.model.scopes = values;
+        this._model.currentLineChanged.emit(frame.line);
       }
     });
 

style/breakpoints.css

@@ -11,5 +11,9 @@
   position: absolute;
   left: -35px;
   top: -1px;
-  color: #f22;
+  color: var(--jp-error-color1);
+}
+
+.jp-breakpoint-line-highlight {
+  background-color: var(--jp-warn-color0);
 }