Support for time travelling

src/ActionList.jsx

@@ -37,8 +37,8 @@ export default class ActionList extends Component {
 
   render() {
     const { styling, actions, actionIds, isWideLayout, onToggleAction, skippedActionIds,
-            selectedActionId, startActionId, onSelect, onSearch, searchValue,
-            onCommit, onSweep } = this.props;
+            selectedActionId, startActionId, onSelect, onSearch, searchValue, currentActionId,
+            onCommit, onSweep, onJumpToState } = this.props;
     const lowerSearchValue = searchValue && searchValue.toLowerCase();
     const filteredActionIds = searchValue ? actionIds.filter(
       id => actions[id].action.type.toLowerCase().indexOf(lowerSearchValue) !== -1
@@ -63,10 +63,12 @@ export default class ActionList extends Component {
                             actionId >= startActionId && actionId <= selectedActionId ||
                             actionId === selectedActionId
                            }
+                           isInFuture={actionId > currentActionId}
                            onSelect={(e) => onSelect(e, actionId)}
                            timestamps={getTimestamps(actions, actionIds, actionId)}
                            action={actions[actionId].action}
-                           onViewClick={() => onToggleAction(actionId)}
+                           onToggleClick={() => onToggleAction(actionId)}
+                           onJumpClick={() => onJumpToState(actionId)}
                            onCommitClick={() => onCommit(actionId)}
                            isSkipped={skippedActionIds.indexOf(actionId) !== -1} />
           )}

src/ActionListRow.jsx

@@ -4,6 +4,7 @@ import dateformat from 'dateformat';
 import RightSlider from './RightSlider';
 
 const BUTTON_SKIP = 'Skip';
+const BUTTON_JUMP = 'Jump';
 
 export default class ActionListRow extends Component {
   state = { hover: false };
@@ -12,6 +13,7 @@ export default class ActionListRow extends Component {
     styling: PropTypes.func.isRequired,
     isSelected: PropTypes.bool.isRequired,
     action: PropTypes.shape({ type: PropTypes.string.isRequired }).isRequired,
+    isInFuture: PropTypes.bool.isRequired,
     isInitAction: PropTypes.bool.isRequired,
     onSelect: PropTypes.func.isRequired,
     timestamps: PropTypes.shape({
@@ -33,7 +35,7 @@ export default class ActionListRow extends Component {
 
   render() {
     const { styling, isSelected, action, isInitAction, onSelect,
-            timestamps, isSkipped } = this.props;
+            timestamps, isSkipped, isInFuture } = this.props;
     const { hover } = this.state;
     const timeDelta = timestamps.current - timestamps.previous;
     const showButtons = hover && !isInitAction || isSkipped;
@@ -48,7 +50,8 @@ export default class ActionListRow extends Component {
            {...styling([
              'actionListItem',
              isSelected && 'actionListItemSelected',
-             isSkipped && 'actionListItemSkipped'
+             isSkipped && 'actionListItemSkipped',
+             isInFuture && 'actionListFromFuture'
            ], isSelected, action)}>
         <div {...styling(['actionListItemName', isSkipped && 'actionListItemNameSkipped'])}>
           {action.type}
@@ -62,7 +65,7 @@ export default class ActionListRow extends Component {
           </RightSlider>
           <RightSlider styling={styling} shown={showButtons} rotate>
             <div {...styling('actionListItemSelector')}>
-              {[BUTTON_SKIP].map(btn => (!isInitAction || btn !== BUTTON_SKIP) &&
+              {[BUTTON_JUMP, BUTTON_SKIP].map(btn => (!isInitAction || btn !== BUTTON_SKIP) &&
                 <div key={btn}
                      onClick={this.handleButtonClick.bind(this, btn)}
                      {...styling([
@@ -84,7 +87,10 @@ export default class ActionListRow extends Component {
 
     switch(btn) {
     case BUTTON_SKIP:
-      this.props.onViewClick();
+      this.props.onToggleClick();
+      break;
+    case BUTTON_JUMP:
+      this.props.onJumpClick();
       break;
     }
   }

src/DevtoolsInspector.js

@@ -9,15 +9,15 @@ import { getBase16Theme } from 'react-base16-styling';
 import { reducer, updateMonitorState } from './redux';
 import { ActionCreators } from 'redux-devtools';
 
-const { commit, sweep, toggleAction } = ActionCreators;
+const { commit, sweep, toggleAction, jumpToAction, jumpToState } = ActionCreators;
 
 function getLastActionId(props) {
   return props.stagedActionIds[props.stagedActionIds.length - 1];
 }
 
 function getCurrentActionId(props, monitorState) {
   return monitorState.selectedActionId === null ?
-    getLastActionId(props) : monitorState.selectedActionId;
+    props.stagedActionIds[props.currentStateIndex] : monitorState.selectedActionId;
 }
 
 function getFromState(actionIndex, stagedActionIds, computedStates, monitorState) {
@@ -149,10 +149,12 @@ export default class DevtoolsInspector extends Component {
 
   render() {
     const { stagedActionIds: actionIds, actionsById: actions, computedStates,
-      tabs, invertTheme, skippedActionIds, monitorState } = this.props;
+      tabs, invertTheme, skippedActionIds, currentStateIndex, monitorState } = this.props;
     const { selectedActionId, startActionId, searchValue, tabName } = monitorState;
     const inspectedPathType = tabName === 'Action' ? 'inspectedActionPath' : 'inspectedStatePath';
-    const { themeState, isWideLayout, action, nextState, delta, error } = this.state;
+    const {
+      themeState, isWideLayout, action, nextState, delta, error
+    } = this.state;
     const { base16Theme, styling } = themeState;
 
     return (
@@ -166,9 +168,11 @@ export default class DevtoolsInspector extends Component {
                     onSearch={this.handleSearch}
                     onSelect={this.handleSelectAction}
                     onToggleAction={this.handleToggleAction}
+                    onJumpToState={this.handleJumpToState}
                     onCommit={this.handleCommit}
                     onSweep={this.handleSweep}
                     skippedActionIds={skippedActionIds}
+                    currentActionId={actionIds[currentStateIndex]}
                     lastActionId={getLastActionId(this.props)} />
         <ActionPreview {...{
           base16Theme, invertTheme, isWideLayout, tabs, tabName, delta, error, nextState,
@@ -186,6 +190,15 @@ export default class DevtoolsInspector extends Component {
     this.props.dispatch(toggleAction(actionId));
   };
 
+  handleJumpToState = actionId => {
+    if (jumpToAction) {
+      this.props.dispatch(jumpToAction(actionId));
+    } else { // Fallback for redux-devtools-instrument < 1.5
+      const index = this.props.stagedActionIds.indexOf(actionId);
+      if (index !== -1) this.props.dispatch(jumpToState(index));
+    }
+  };
+
   handleCommit = () => {
     this.props.dispatch(commit());
   };

src/utils/createStylingFromTheme.js

@@ -120,6 +120,10 @@ const getSheetFromColorMap = map => ({
     'background-color': map.SKIPPED_BACKGROUND_COLOR
   },
 
+  actionListFromFuture: {
+    opacity: '0.6'
+  },
+
   actionListItemButtons: {
     position: 'relative',
     height: '20px',