Identify actions from "the future"

Author: zalmoxisus

src/ActionList.jsx

@@ -37,7 +37,7 @@ export default class ActionList extends Component {
 
   render() {
     const { styling, actions, actionIds, isWideLayout, onToggleAction, skippedActionIds,
-            selectedActionId, startActionId, onSelect, onSearch, searchValue,
+            selectedActionId, startActionId, onSelect, onSearch, searchValue, currentActionId,
             onCommit, onSweep } = this.props;
     const lowerSearchValue = searchValue && searchValue.toLowerCase();
     const filteredActionIds = searchValue ? actionIds.filter(
@@ -63,6 +63,7 @@ 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}

src/ActionListRow.jsx

@@ -12,6 +12,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 +34,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 +49,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}

src/DevtoolsInspector.js

@@ -17,7 +17,7 @@ function getLastActionId(props) {
 
 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 (
@@ -169,6 +171,7 @@ export default class DevtoolsInspector extends Component {
                     onCommit={this.handleCommit}
                     onSweep={this.handleSweep}
                     skippedActionIds={skippedActionIds}
+                    currentActionId={actionIds[currentStateIndex]}
                     lastActionId={getLastActionId(this.props)} />
         <ActionPreview {...{
           base16Theme, invertTheme, isWideLayout, tabs, tabName, delta, error, nextState,

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',