Implement stackTrace, scopes, variables and continue

package.json

@@ -49,6 +49,7 @@
     "@jupyterlab/codemirror": "^1.0.0",
     "@jupyterlab/notebook": "^1.0.0",
     "@phosphor/widgets": "^1.6.0",
+    "@phosphor/disposable": "^1.2.0",
     "codemirror": "~5.47.0",
     "react": "~16.8.4",
     "react-dom": "~16.8.4"

src/components/constants.ts

@@ -0,0 +1 @@
+export const DEBUGGER_HEADER_CLASS = "jp-Debugger-header";

src/components/debugger.tsx

@@ -6,6 +6,8 @@ import { BreakpointsComponent } from "./breakpoints";
 
 import { IDebugger } from "../debugger/tokens";
 import { IDebugSession, IBreakpoint } from "../debugger/session";
+import { VariablesComponent } from "./variables";
+import { DebugProtocol } from "../debugger/debugProtocol";
 
 const DEBUGGER_HEADER_CLASS = "jp-Debugger-header";
 
@@ -17,6 +19,7 @@ interface IDebuggerState {
   started: boolean;
   debugSession: IDebugSession;
   breakpoints: IBreakpoint[];
+  variables: DebugProtocol.Variable[];
 }
 
 export class DebuggerComponent extends React.Component<
@@ -28,7 +31,8 @@ export class DebuggerComponent extends React.Component<
     this.state = {
       started: false,
       debugSession: props.debugger.debugSession,
-      breakpoints: []
+      breakpoints: [],
+      variables: []
     };
   }
 
@@ -82,6 +86,14 @@ export class DebuggerComponent extends React.Component<
     });
   };
 
+  debugContinue = async () => {
+    console.log("Continue");
+    const { debugSession } = this.props.debugger;
+    await debugSession.continue();
+    const { variables, started } = debugSession;
+    this.setState({ variables, started });
+  };
+
   render() {
     return (
       <>
@@ -93,13 +105,20 @@ export class DebuggerComponent extends React.Component<
             iconClassName="jp-BugIcon"
             onClick={this.startDebugger}
           />
+          <ToolbarButtonComponent
+            enabled={this.state.started}
+            tooltip="Continue"
+            iconClassName="jp-RunIcon"
+            onClick={this.debugContinue}
+          />
           <ToolbarButtonComponent
             enabled={this.state.started}
             tooltip="Stop Debugger"
             iconClassName="jp-StopIcon"
             onClick={this.stopDebugger}
           />
         </div>
+        <VariablesComponent variables={this.state.variables} />
         <BreakpointsComponent
           debugSession={this.state.debugSession}
           breakpoints={this.state.breakpoints}

src/components/variables.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import { DEBUGGER_HEADER_CLASS } from "./constants";
+import { DebugProtocol } from "../debugger/debugProtocol";
+
+const DEBUGGER_VARIABLES_LIST_CLASS = "jp-Debugger-variableList";
+const DEBUGGER_VARIABLE_ITEM_VALUE_CLASS = "jp-Debugger-variableItem-name";
+const DEBUGGER_VARIABLE_ITEM_NAME_CLASS = "jp-Debugger-variableItem-value";
+
+interface IVariableProps {
+  name: string;
+  value: string;
+}
+
+interface IVariablesProps {
+  // TODO: handle scopes
+  variables: DebugProtocol.Variable[];
+}
+
+function Variable(props: IVariableProps) {
+  return (
+    <li>
+      <span className={DEBUGGER_VARIABLE_ITEM_NAME_CLASS} title="Name">
+        {props.name}
+      </span>
+      <span className={DEBUGGER_VARIABLE_ITEM_VALUE_CLASS} title="Value">
+        {props.value}
+      </span>
+    </li>
+  );
+}
+
+export function VariablesComponent(props: IVariablesProps) {
+  return (
+    <>
+      <div className={DEBUGGER_HEADER_CLASS}>
+        <h2>Variables</h2>
+      </div>
+      <ul className={DEBUGGER_VARIABLES_LIST_CLASS}>
+        {props.variables.map((variable, i) => (
+          <Variable key={i} name={variable.name} value={variable.value} />
+        ))}
+      </ul>
+    </>
+  );
+}