add highligth for breakpoints

src/debugger.ts

@@ -152,6 +152,10 @@ export namespace Debugger {
       this._codeValue = observableString;
     }
 
+    get selectCurrentLine() {
+      return this._selectCurrentLine;
+    }
+
     dispose(): void {
       this._isDisposed = true;
     }
@@ -172,6 +176,7 @@ export namespace Debugger {
     private _session: IDebugger.ISession | null;
     private _sessionChanged = new Signal<this, void>(this);
     private _service = new DebugService(null, this);
+    private _selectCurrentLine = new Signal<this, number>(this);
   }
 
   export namespace Model {

src/handlers/cell.ts

@@ -8,8 +8,11 @@ import { CodeMirrorEditor } from '@jupyterlab/codemirror';
 import { Editor, Doc } from 'codemirror';
 
 import { Breakpoints, SessionTypes } from '../breakpoints';
+
 import { Debugger } from '../debugger';
+
 import { IDisposable } from '@phosphor/disposable';
+
 import { Signal } from '@phosphor/signaling';
 
 export class CellManager implements IDisposable {
@@ -26,6 +29,10 @@ export class CellManager implements IDisposable {
       }
       this.clearGutter(this.activeCell);
     });
+
+    this._debuggerModel.selectCurrentLine.connect((_, lineNumber) => {
+      this.showCurrentLine(lineNumber);
+    });
   }
 
   private _previousCell: CodeCell;
@@ -36,6 +43,16 @@ export class CellManager implements IDisposable {
   private _activeCell: CodeCell;
   isDisposed: boolean;
 
+  showCurrentLine(lineNumber: number) {
+    if (this.activeCell) {
+      const editor = this.activeCell.editor as CodeMirrorEditor;
+      editor.doc.eachLine(line => {
+        editor.editor.removeLineClass(line, 'wrap', 'highlight');
+      });
+      editor.editor.addLineClass(lineNumber - 1, 'wrap', 'highlight');
+    }
+  }
+
   dispose(): void {
     if (this.isDisposed) {
       return;

src/service.ts

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

style/breakpoints.css

@@ -13,3 +13,7 @@
   top: -1px;
   color: #f22;
 }
+
+.highlight {
+  background-color: orange;
+}