Establish connection for debug adapter and webview with the messaging service

Author: xnkevinnguyen

src/extension_utils/debugAdapter.ts

@@ -28,8 +28,10 @@ export class DebugAdapter implements DebugAdapterTracker {
         console.log(JSON.stringify(message));
         if (message.command) {
             // Only send pertinent debug messages
+            console.log("command exists")
+            console.log(message.command)
 
-            if (message.command in DEBUG_COMMANDS) {
+            if (Object.values(DEBUG_COMMANDS).includes(message.command)) {
                 this.handleAdapterMessages(message.command);
             }
         }

src/view/App.tsx

@@ -7,17 +7,24 @@ import {
     DEVICE_LIST_KEY,
     VSCODE_MESSAGES_TO_WEBVIEW,
     DEBUG_COMMANDS,
+    VIEW_STATE,
 } from "./constants";
 import { Device } from "./container/device/Device";
+import {ViewStateContext} from './context'
 
 interface IState {
     currentDevice: string;
+    viewState:VIEW_STATE;
 }
 
 const defaultState = {
     currentDevice: DEVICE_LIST_KEY.CPX,
+    viewState:VIEW_STATE.RUNNING
 };
 
+
+
+
 class App extends React.Component<{}, IState> {
     constructor() {
         super({});
@@ -43,23 +50,29 @@ class App extends React.Component<{}, IState> {
         return (
             <div className="App">
                 <main className="App-main">
+                    <ViewStateContext.Provider value ={this.state.viewState}>
                     <Device currentSelectedDevice={this.state.currentDevice} />
-                </main>
+                    </ViewStateContext.Provider></main>
             </div>
         );
     }
 
     handleMessage = (event: any): void => {
         const message = event.data;
-        console.log(JSON.stringify(message));
+        console.log(
+            "blabla"+JSON.stringify(message));
         switch (message.command) {
             case VSCODE_MESSAGES_TO_WEBVIEW.SET_DEVICE:
                 if (message.active_device !== this.state.currentDevice) {
                     this.setState({ currentDevice: message.active_device });
                 }
                 break;
             case DEBUG_COMMANDS.CONTINUE:
+                this.setState({viewState:VIEW_STATE.RUNNING})
+                break;
             case DEBUG_COMMANDS.STACK_TRACE:
+                this.setState({viewState:VIEW_STATE.PAUSE})
+
                 break;
         }
     };

src/view/components/Button.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
 import "../styles/Button.css";
+import {ViewStateContext} from '../context'
+import { VIEW_STATE } from "../constants";
 
 export interface IButtonProps {
     label: string;
@@ -15,6 +17,9 @@ const Button: React.FC<IButtonProps> = props => {
     const iconSvg: SVGElement = props.image as SVGElement;
     const buttonStyle = { width: props.width };
     const tabIndex = props.focusable ? 0 : -1;
+    const isButtonDisabled = (React.useContext(ViewStateContext) === VIEW_STATE.PAUSE)
+    console.log(React.useContext(ViewStateContext))
+    console.log(isButtonDisabled)
 
     return (
         <button
@@ -25,6 +30,7 @@ const Button: React.FC<IButtonProps> = props => {
             onClick={props.onClick}
             style={buttonStyle}
             tabIndex={tabIndex}
+            disabled={isButtonDisabled}
         >
             {iconSvg}
         </button>

src/view/constants.ts

@@ -55,6 +55,12 @@ export enum DEVICE_LIST_KEY {
     MICROBIT = "micro:bit",
 }
 
+// Pauses on Debug mode alter the state of the view
+export enum VIEW_STATE{
+    PAUSE="debug-pause",
+    RUNNING="running"
+}
+
 //
 export enum WEBVIEW_MESSAGES {
     SWITCH_DEVICE = "switch-device",

src/view/context.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { VIEW_STATE } from "./constants";
+
+// View is running by default
+
+export const ViewStateContext = React.createContext(
+    VIEW_STATE.RUNNING )