feature: stop debugging button

packages/embark-api-client/src/index.js

@@ -208,6 +208,10 @@ class EmbarkAPI {
     return post('/debugger/start', {params: payload, credentials: payload.credentials});
   }
 
+  stopDebug(payload) {
+    return post('/debugger/stop', {params: payload, credentials: payload.credentials});
+  }
+
   debugJumpBack(payload) {
     return post('/debugger/jumpBack', {params: payload, credentials: payload.credentials});
   }

packages/embark-ui/src/actions/index.js

@@ -374,6 +374,13 @@ export const startDebug = {
   failure: (error) => action(START_DEBUG[FAILURE], {error})
 };
 
+export const STOP_DEBUG = createRequestTypes('STOP_DEBUG');
+export const stopDebug = {
+  request: () => action(STOP_DEBUG[REQUEST]),
+  success: () => action(STOP_DEBUG[SUCCESS]),
+  failure: (error) => action(STOP_DEBUG[FAILURE], {error})
+};
+
 export const DEBUG_JUMP_BACK = createRequestTypes('DEBUG_JUMP_BACK');
 export const debugJumpBack = {
   request: () => action(DEBUG_JUMP_BACK[REQUEST], {}),

packages/embark-ui/src/components/ContractDebugger.js

@@ -8,6 +8,7 @@ import {
 } from "reactstrap";
 import ReactJson from 'react-json-view';
 import DebugButton from './DebugButton';
+import {withRouter} from "react-router-dom";
 
 class ContractDebugger extends Component {
   constructor(props) {
@@ -50,6 +51,11 @@ class ContractDebugger extends Component {
     this.props.debugStepIntoBackward();
   }
 
+  stopDebug(_e) {
+    this.props.stopDebug();
+    this.props.history.push('/editor');
+  }
+
   canGoPrevious() {
     const { possibleSteps } = this.props.debuggerInfo;
     return possibleSteps && possibleSteps.canGoPrevious;
@@ -79,6 +85,7 @@ class ContractDebugger extends Component {
             <Button color="light" className={"btn-square debugButton stepOverForward" + (this.canGoNext() ? '' : ' disabled')} alt="step over" onClick={(e) => this.debugStepOverForward(e)}></Button>
             <Button color="light" className="btn-square debugButton stepIntoForward" alt="step into" onClick={(e) => this.debugStepIntoForward(e)}></Button>
             <Button color="light" className="btn-square debugButton stepIntoBack" alt="step out" onClick={(e) => this.debugStepIntoBackward(e)}></Button>
+            <Button color="light" className="btn-square debugButton stop" alt="stop" onClick={(e) => this.stopDebug(e)}></Button>
           </Col>
         </Row>
         <Row>
@@ -97,14 +104,16 @@ class ContractDebugger extends Component {
 ContractDebugger.propTypes = {
   debuggerTransactionHash: PropTypes.string,
   startDebug: PropTypes.func,
+  stopDebug: PropTypes.func,
   debugJumpBack: PropTypes.func,
   debugJumpForward: PropTypes.func,
   debugStepOverForward: PropTypes.func,
   debugStepOverBackward: PropTypes.func,
   debugStepIntoForward: PropTypes.func,
   debugStepIntoBackward: PropTypes.func,
-  debuggerInfo: PropTypes.object
+  debuggerInfo: PropTypes.object,
+  history: PropTypes.object
 };
 
-export default ContractDebugger;
+export default withRouter(ContractDebugger);
 

packages/embark-ui/src/containers/ContractDebuggerContainer.js

@@ -3,6 +3,7 @@ import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import {
   startDebug,
+  stopDebug,
   debugJumpBack,
   debugJumpForward,
   debugStepOverForward,
@@ -13,12 +14,12 @@ import {
 import ContractDebugger from '../components/ContractDebugger';
 import {getDebuggerInfo} from "../reducers/selectors";
 
-
 class ContractDebuggerContainer extends Component {
   render() {
     return (
       <ContractDebugger debuggerTransactionHash={this.props.debuggerTransactionHash}
                         startDebug={this.props.startDebug}
+                        stopDebug={this.props.stopDebug}
                         debugJumpBack={this.props.debugJumpBack}
                         debugJumpForward={this.props.debugJumpForward}
                         debugStepOverForward={this.props.debugStepOverForward}
@@ -39,6 +40,7 @@ function mapStateToProps(state, props) {
 ContractDebuggerContainer.propTypes = {
   debuggerTransactionHash: PropTypes.string,
   startDebug: PropTypes.func,
+  stopDebug: PropTypes.func,
   debugJumpBack: PropTypes.func,
   debugJumpForward: PropTypes.func,
   debugStepOverBackward: PropTypes.func,
@@ -52,6 +54,7 @@ export default connect(
   mapStateToProps,
   {
     startDebug: startDebug.request,
+    stopDebug: stopDebug.request,
     debugJumpBack: debugJumpBack.request,
     debugJumpForward: debugJumpForward.request,
     debugStepOverForward: debugStepOverForward.request,

packages/embark-ui/src/index.css

@@ -74,6 +74,11 @@
   background-image: url(images/icons.png);
 }
 
+.stop {
+  background-position: -196px 48px;
+  background-image: url(images/icons.png);
+}
+
 .no-underline {
   text-decoration: none;
 }
@@ -85,4 +90,4 @@
 
 .pointer {
   cursor: pointer;
-}
+}

packages/embark-ui/src/reducers/index.js

@@ -3,7 +3,7 @@ import {REQUEST, SUCCESS, FAILURE, CONTRACT_COMPILE, FILES, LOGOUT, AUTHENTICATE
         FETCH_CREDENTIALS, UPDATE_BASE_ETHER, CHANGE_THEME, FETCH_THEME, EXPLORER_SEARCH, DEBUGGER_INFO,
         SIGN_MESSAGE, VERIFY_MESSAGE, TOGGLE_BREAKPOINT, UPDATE_PREVIEW_URL,
         UPDATE_DEPLOYMENT_PIPELINE, WEB3_CONNECT, WEB3_DEPLOY, WEB3_ESTIMAGE_GAS, FETCH_EDITOR_TABS,
-        SAVE_FILE, SAVE_FOLDER, REMOVE_FILE, DECODED_TRANSACTION, WEB3_IS_DEPLOYED} from "../actions";
+        SAVE_FILE, SAVE_FOLDER, REMOVE_FILE, DECODED_TRANSACTION, WEB3_IS_DEPLOYED, STOP_DEBUG} from "../actions";
 import {EMBARK_PROCESS_NAME, DARK_THEME, DEPLOYMENT_PIPELINES, DEFAULT_HOST, ELEMENTS_LIMIT} from '../constants';
 
 const BN_FACTOR = 10000;
@@ -393,6 +393,8 @@ function web3(state = {deployments: {}, gasEstimates: {}, contractsDeployed: {}}
 function debuggerInfo(state={}, action) {
   if (action.type === DEBUGGER_INFO[SUCCESS]) {
     return action.data;
+  } else if(action.type === STOP_DEBUG[SUCCESS]) {
+    return {};
   }
   return state;
 }

packages/embark-ui/src/sagas/index.js

@@ -83,6 +83,7 @@ export const postFolder = doRequest.bind(null, actions.saveFolder, api.postFolde
 export const deleteFile = doRequest.bind(null, actions.removeFile, api.deleteFile);
 export const fetchEthGas = doRequest.bind(null, actions.gasOracle, api.getEthGasAPI);
 export const startDebug = doRequest.bind(null, actions.startDebug, api.startDebug);
+export const stopDebug = doRequest.bind(null, actions.stopDebug, api.stopDebug);
 export const debugJumpBack = doRequest.bind(null, actions.debugJumpBack, api.debugJumpBack);
 export const debugJumpForward = doRequest.bind(null, actions.debugJumpForward, api.debugJumpForward);
 export const debugStepOverForward = doRequest.bind(null, actions.debugStepOverForward, api.debugStepOverForward);
@@ -268,6 +269,10 @@ export function *watchStartDebug() {
   yield takeEvery(actions.START_DEBUG[actions.REQUEST], startDebug);
 }
 
+export function *watchStopDebug() {
+  yield takeEvery(actions.STOP_DEBUG[actions.REQUEST], stopDebug);
+}
+
 export function *watchDebugJumpBack() {
   yield takeEvery(actions.DEBUG_JUMP_BACK[actions.REQUEST], debugJumpBack);
 }
@@ -624,6 +629,7 @@ export default function *root() {
     fork(watchFetchCredentials),
     fork(watchFetchEthGas),
     fork(watchStartDebug),
+    fork(watchStopDebug),
     fork(watchDebugJumpBack),
     fork(watchDebugJumpForward),
     fork(watchDebugStepOverForward),

packages/embark-ui/src/services/api.js

@@ -138,6 +138,10 @@ export function startDebug(payload) {
   return embarkAPI.startDebug(payload);
 }
 
+export function stopDebug(payload) {
+  return embarkAPI.stopDebug(payload);
+}
+
 export function debugJumpBack(payload) {
   return embarkAPI.debugJumpBack(payload);
 }

packages/embark/src/lib/modules/debugger/index.ts

@@ -134,6 +134,13 @@ class TransactionDebugger {
       });
     });
 
+    this.embark.registerAPICall("post", "/embark-api/debugger/stop", (req: any, res: any) => {
+      this.apiDebugger.unload();
+      this.apiDebugger.events.emit("stop");
+      this.apiDebugger = false;
+      res.send({ok: true});
+    });
+
     this.embark.registerAPICall("post", "/embark-api/debugger/JumpBack", (req: any, res: any) => {
       this.apiDebugger.stepJumpNextBreakpoint();
       res.send({ok: true});
@@ -173,6 +180,8 @@ class TransactionDebugger {
     this.embark.registerAPICall("ws", "/embark-api/debugger", (ws: any, req: any) => {
       if (!this.apiDebugger) { return; }
 
+      this.apiDebugger.events.on("stop", () => { ws.close(1000); });
+
       this.apiDebugger.events.on("source", (lineColumnPos: any, rawLocation: any) => {
         this.debuggerData.sources = {lineColumnPos, rawLocation};
         this.debuggerData.possibleSteps = {