Add proper states for debugging command buttons

public/js/actions/pause.js

@@ -50,10 +50,10 @@ function breakOnNext() {
   return ({ dispatch, threadClient }) => {
     threadClient.breakOnNext();
 
-    return {
+    return dispatch({
       type: constants.BREAK_ON_NEXT,
       value: true
-    };
+    });
   };
 }
 

public/js/components/RightSidebar.css

@@ -8,8 +8,23 @@
   padding: 5px;
 }
 
-.command-bar span {
-  margin-right: 8px;
+.command-bar > span {
+  cursor: pointer;
+  margin-right: 0.2em;
+  width: 1.8em;
+  height: 1.1em;
+  display: inline-block;
+  text-align: center;
+  transition: opacity 200ms;
+}
+
+.command-bar > span.disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+.command-bar .isvg.loading::after {
+  /* Make sure the SVG has some size while it's loading */
+  content: "\007C\00a0\00a0";
 }
 
 .accordion ._content {

public/js/components/RightSidebar.js

@@ -4,33 +4,42 @@ const React = require("react");
 const { DOM: dom } = React;
 const { connect } = require("react-redux");
 const { bindActionCreators } = require("redux");
-const { getPause } = require("../selectors");
+const { getPause, getIsWaitingOnBreak } = require("../selectors");
 const Isvg = React.createFactory(require("react-inlinesvg"));
 
 const actions = require("../actions");
 const Breakpoints = React.createFactory(require("./Breakpoints"));
 const Accordion = React.createFactory(require("./Accordion"));
 require("./RightSidebar.css");
 
-function debugBtn(onClick, type) {
+function debugBtn(onClick, type, className) {
   return dom.span(
-    { onClick },
+    { onClick, className, key: type },
     Isvg({ src: `images/${type}.svg`})
   );
 }
 
-function RightSidebar({ resume, command, breakOnNext, pause }) {
+function RightSidebar({ resume, command, breakOnNext, pause, isWaitingOnBreak }) {
   return (
     dom.div({className: "right-sidebar"},
       dom.div({className: "command-bar"},
         (
           pause
-            ? debugBtn(() => command({ type: "resume" }), "resume")
-            : debugBtn(breakOnNext, "pause")
-        ),
-        debugBtn(() => command({ type: "stepOver" }), "stepOver"),
-        debugBtn(() => command({ type: "stepIn" }), "stepIn"),
-        debugBtn(() => command({ type: "stepOut" }), "stepOut")
+            ? [
+              debugBtn(() => command({ type: "resume" }), "resume"),
+              debugBtn(() => command({ type: "stepOver" }), "stepOver"),
+              debugBtn(() => command({ type: "stepIn" }), "stepIn"),
+              debugBtn(() => command({ type: "stepOut" }), "stepOut")
+            ]
+            : [
+              isWaitingOnBreak
+                ? debugBtn(null, "pause", "disabled")
+                : debugBtn(breakOnNext, "pause"),
+              debugBtn(null, "stepOver", "disabled"),
+              debugBtn(null, "stepIn", "disabled"),
+              debugBtn(null, "stepOut", "disabled")
+            ]
+        )
       ),
       Accordion({
         items: [
@@ -50,6 +59,9 @@ function RightSidebar({ resume, command, breakOnNext, pause }) {
 }
 
 module.exports = connect(
-  state => ({ pause: getPause(state) }),
+  state => ({
+    pause: getPause(state),
+    isWaitingOnBreak: getIsWaitingOnBreak(state)
+  }),
   dispatch => bindActionCreators(actions, dispatch)
 )(RightSidebar);

public/js/reducers/pause.js

@@ -8,7 +8,7 @@ const { fromJS } = require("immutable");
 
 const initialState = fromJS({
   pause: null,
-  breakOnNext: false
+  isWaitingOnBreak: false
 });
 
 function update(state = initialState, action, emit) {
@@ -20,11 +20,13 @@ function update(state = initialState, action, emit) {
         pause.frame.where.actor = pause.frame.where.source.actor;
       }
 
-      return state.set("pause", fromJS(pause));
+      return state
+        .set("isWaitingOnBreak", false)
+        .set("pause", fromJS(pause));
     case constants.RESUME:
       return state.set("pause", null);
     case constants.BREAK_ON_NEXT:
-      return state.set("breakOnNext", true);
+      return state.set("isWaitingOnBreak", true);
   }
 
   return state;

public/js/selectors.js

@@ -43,6 +43,10 @@ function getPause(state) {
   return state.pause.get("pause");
 }
 
+function getIsWaitingOnBreak(state) {
+  return state.pause.get("isWaitingOnBreak");
+}
+
 /* selectors */
 function getSource(state, actor) {
   return getSources(state).get(actor);
@@ -99,6 +103,7 @@ module.exports = {
   getTabs,
   getSelectedTab,
   getPause,
+  getIsWaitingOnBreak,
   makeLocationId,
   isCurrentlyPausedAtBreakpoint
 };