debug breakpoints

src/breakpoints/body.tsx

@@ -5,6 +5,7 @@ import React, { useState } from 'react';
 import { Breakpoints } from '.';
 import { ReactWidget } from '@jupyterlab/apputils';
 import { ArrayExt } from '@phosphor/algorithm';
+import { ISignal } from '@phosphor/signaling';
 
 export class Body extends ReactWidget {
   constructor(model: Breakpoints.IModel) {
@@ -22,12 +23,6 @@ export class Body extends ReactWidget {
 
 const BreakpointsComponent = ({ model }: { model: Breakpoints.IModel }) => {
   const [breakpoints, setBreakpoints] = useState(model.breakpoints);
-  const [active, setActive] = useState(model.isActive);
-
-  model.activeChanged.connect((_: Breakpoints.IModel, update: boolean) => {
-    console.log(update);
-    setActive(update);
-  });
 
   model.breakpointsChanged.connect(
     (_: Breakpoints.IModel, updates: Breakpoints.IBreakpoint[]) => {
@@ -44,7 +39,7 @@ const BreakpointsComponent = ({ model }: { model: Breakpoints.IModel }) => {
         <BreakpointComponent
           key={breakpoint.id}
           breakpoint={breakpoint}
-          active={active}
+          breakpointChanged={model.breakpointChanged}
         />
       ))}
     </div>
@@ -53,25 +48,32 @@ const BreakpointsComponent = ({ model }: { model: Breakpoints.IModel }) => {
 
 const BreakpointComponent = ({
   breakpoint,
-  active
+  breakpointChanged
 }: {
-  breakpoint: any;
-  active: any;
+  breakpoint: Breakpoints.IBreakpoint;
+  breakpointChanged: ISignal<Breakpoints.IModel, Breakpoints.IBreakpoint>;
 }) => {
-  const [checkState, setCheck] = useState(breakpoint.verified);
-  breakpoint.verified = checkState;
-  const setBreakpointEnabled = (breakpoint: any, state: boolean) => {
-    setCheck(state);
+  const [active, setActive] = useState(breakpoint.active);
+  breakpoint.active = active;
+
+  breakpointChanged.connect(
+    (_: Breakpoints.IModel, updates: Breakpoints.IBreakpoint) => {
+      setActive(updates.active);
+    }
+  );
+
+  const setBreakpointEnabled = (state: boolean) => {
+    setActive(state);
   };
 
   return (
-    <div className={`breakpoint ${active ? '' : 'disabled'}`}>
+    <div className={`breakpoint`}>
       <input
         onChange={() => {
-          setBreakpointEnabled(breakpoint, !checkState);
+          setBreakpointEnabled(!active);
         }}
         type="checkbox"
-        checked={checkState}
+        checked={active}
       />
       <span>
         {breakpoint.source.name} : {breakpoint.line}

src/breakpoints/index.ts

@@ -26,10 +26,14 @@ export class Breakpoints extends Panel {
       'deactivate',
       new ToolbarButton({
         iconClassName: 'jp-DebuggerDeactivateIcon',
+        tooltip: `${this.isAllAcitve ? 'Deactivate' : 'Activate'} Breakpoints`,
         onClick: () => {
-          this.model.onActive = !this.model.isActive;
-        },
-        tooltip: 'Deactivate Breakpoints'
+          this.isAllAcitve = !this.isAllAcitve;
+          this.model.breakpoints.map((breakpoint: Breakpoints.IBreakpoint) => {
+            breakpoint.active = this.isAllAcitve;
+            this.model.breakpoint = breakpoint;
+          });
+        }
       })
     );
 
@@ -45,8 +49,8 @@ export class Breakpoints extends Panel {
     );
   }
 
+  private isAllAcitve = true;
   readonly body: Widget;
-
   readonly model: Breakpoints.IModel;
 }
 
@@ -67,7 +71,9 @@ class BreakpointsHeader extends Widget {
 }
 
 export namespace Breakpoints {
-  export interface IBreakpoint extends DebugProtocol.Breakpoint {}
+  export interface IBreakpoint extends DebugProtocol.Breakpoint {
+    active: boolean;
+  }
 
   /**
    * The breakpoints UI model.
@@ -83,21 +89,12 @@ export namespace Breakpoints {
       return this._breakpointsChanged;
     }
 
-    get activeChanged(): ISignal<this, boolean> {
-      return this._activeChange;
-    }
-
     get breakpoints(): IBreakpoint[] {
       return this._state;
     }
 
-    get isActive(): boolean {
-      return this._activeBreakpoints;
-    }
-
-    set onActive(value: boolean) {
-      this._activeBreakpoints = value;
-      this._activeChange.emit(value);
+    get breakpointChanged(): ISignal<this, IBreakpoint> {
+      return this._breakpointChanged;
     }
 
     set breakpoints(breakpoints: IBreakpoint[]) {
@@ -107,13 +104,15 @@ export namespace Breakpoints {
 
     set breakpoint(breakpoint: IBreakpoint) {
       const index = this._state.findIndex(ele => ele.id === breakpoint.id);
-      if (index !== -1) this._state[index] = breakpoint;
+      if (index !== -1) {
+        this._state[index] = breakpoint;
+        this._breakpointChanged.emit(breakpoint);
+      }
     }
 
     private _state: IBreakpoint[];
-    private _activeBreakpoints: boolean = true;
     private _breakpointsChanged = new Signal<this, IBreakpoint[]>(this);
-    private _activeChange = new Signal<this, boolean>(this);
+    private _breakpointChanged = new Signal<this, IBreakpoint>(this);
   }
 
   /**
@@ -125,6 +124,7 @@ export namespace Breakpoints {
 const MOCK_BREAKPOINTS = [
   {
     id: 0,
+    active: true,
     verified: true,
     source: {
       name: 'untitled.py'
@@ -134,6 +134,7 @@ const MOCK_BREAKPOINTS = [
   {
     id: 1,
     verified: true,
+    active: false,
     source: {
       name: 'untitled.py'
     },

style/breakpoints.css

@@ -6,7 +6,3 @@
 .jp-DebuggerBreakpoints-body {
   padding: 10px;
 }
-
-.jp-DebuggerBreakpoints .breakpoint.disabled {
-  opacity: 0.4;
-}