+
+
+
diff --git a/packages/redux-devtools-inspector/demo/src/js/DemoApp.jsx b/packages/redux-devtools-inspector/demo/src/js/DemoApp.jsx
new file mode 100644
index 00000000..608b8748
--- /dev/null
+++ b/packages/redux-devtools-inspector/demo/src/js/DemoApp.jsx
@@ -0,0 +1,244 @@
+import React from 'react';
+import PageHeader from 'react-bootstrap/lib/PageHeader';
+import { connect } from 'react-redux';
+import pkg from '../../../package.json';
+import Button from 'react-bootstrap/lib/Button';
+import FormGroup from 'react-bootstrap/lib/FormGroup';
+import FormControl from 'react-bootstrap/lib/FormControl';
+import ControlLabel from 'react-bootstrap/lib/ControlLabel';
+import Form from 'react-bootstrap/lib/Form';
+import Col from 'react-bootstrap/lib/Col';
+import InputGroup from 'react-bootstrap/lib/InputGroup';
+import Combobox from 'react-input-enhancements/lib/Combobox';
+import * as base16 from 'base16';
+import * as inspectorThemes from '../../../src/themes';
+import getOptions from './getOptions';
+import { push as pushRoute } from 'react-router-redux';
+
+const styles = {
+ wrapper: {
+ height: '100vh',
+ width: '80%',
+ margin: '0 auto',
+ paddingTop: '1px'
+ },
+ header: {
+ },
+ content: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ height: '50%'
+ },
+ buttons: {
+ display: 'flex',
+ width: '40rem',
+ justifyContent: 'center',
+ flexWrap: 'wrap'
+ },
+ muted: {
+ color: '#CCCCCC'
+ },
+ button: {
+ margin: '0.5rem'
+ },
+ links: {
+ textAlign: 'center'
+ },
+ link: {
+ margin: '0 0.5rem',
+ cursor: 'pointer',
+ display: 'block'
+ },
+ input: {
+ display: 'inline-block',
+ textAlign: 'left',
+ width: '30rem'
+ }
+};
+
+const themeOptions = [
+ ...Object.keys(inspectorThemes)
+ .map(value => ({ value, label: inspectorThemes[value].scheme })),
+ null,
+ ...Object.keys(base16)
+ .map(value => ({ value, label: base16[value].scheme }))
+ .filter(opt => opt.label)
+];
+
+const ROOT = process.env.NODE_ENV === 'production' ? '/redux-devtools-inspector/' : '/';
+
+function buildUrl(options) {
+ return `${ROOT}?` + [
+ options.useExtension ? 'ext' : '',
+ options.supportImmutable ? 'immutable' : '',
+ options.theme ? 'theme=' + options.theme : '',
+ options.dark ? 'dark' : ''
+ ].filter(s => s).join('&');
+}
+
+class DemoApp extends React.Component {
+ render() {
+ const options = getOptions();
+
+ return (
+
+
+ {pkg.name || Package Name}
+
+
+ );
+ }
+
+ toggleExtension = () => {
+ const options = getOptions();
+
+ this.props.pushRoute(buildUrl({ ...options, useExtension: !options.useExtension }));
+ };
+
+ toggleImmutableSupport = () => {
+ const options = getOptions();
+
+ this.props.pushRoute(buildUrl({ ...options, supportImmutable: !options.supportImmutable }));
+ };
+
+ toggleTheme = () => {
+ const options = getOptions();
+
+ this.props.pushRoute(buildUrl({ ...options, dark: !options.dark }));
+ };
+
+ setTheme = (options, theme) => {
+ this.props.pushRoute(buildUrl({ ...options, theme }));
+ };
+
+ toggleTimeoutUpdate = () => {
+ const enabled = !this.props.timeoutUpdateEnabled;
+ this.props.toggleTimeoutUpdate(enabled);
+
+ if (enabled) {
+ this.timeout = setInterval(this.props.timeoutUpdate, 1000);
+ } else {
+ clearTimeout(this.timeout);
+ }
+ }
+}
+
+export default connect(
+ state => state,
+ {
+ toggleTimeoutUpdate: timeoutUpdateEnabled => ({
+ type: 'TOGGLE_TIMEOUT_UPDATE', timeoutUpdateEnabled
+ }),
+ timeoutUpdate: () => ({ type: 'TIMEOUT_UPDATE' }),
+ increment: () => ({ type: 'INCREMENT' }),
+ push: () => ({ type: 'PUSH' }),
+ pop: () => ({ type: 'POP' }),
+ replace: () => ({ type: 'REPLACE' }),
+ changeNested: () => ({ type: 'CHANGE_NESTED' }),
+ pushHugeArray: () => ({ type: 'PUSH_HUGE_ARRAY' }),
+ addIterator: () => ({ type: 'ADD_ITERATOR' }),
+ addHugeObect: () => ({ type: 'ADD_HUGE_OBJECT' }),
+ addRecursive: () => ({ type: 'ADD_RECURSIVE' }),
+ addImmutableMap: () => ({ type: 'ADD_IMMUTABLE_MAP' }),
+ changeImmutableNested: () => ({ type: 'CHANGE_IMMUTABLE_NESTED' }),
+ hugePayload: () => ({
+ type: 'HUGE_PAYLOAD',
+ payload: Array.from({ length: 10000 }).map((_, i) => i)
+ }),
+ addFunction: () => ({ type: 'ADD_FUNCTION' }),
+ addSymbol: () => ({ type: 'ADD_SYMBOL' }),
+ shuffleArray: () => ({ type: 'SHUFFLE_ARRAY' }),
+ pushRoute
+ }
+)(DemoApp);
diff --git a/packages/redux-devtools-inspector/demo/src/js/getOptions.js b/packages/redux-devtools-inspector/demo/src/js/getOptions.js
new file mode 100644
index 00000000..52db6a7f
--- /dev/null
+++ b/packages/redux-devtools-inspector/demo/src/js/getOptions.js
@@ -0,0 +1,11 @@
+export default function getOptions() {
+ return {
+ useExtension: window.location.search.indexOf('ext') !== -1,
+ supportImmutable: window.location.search.indexOf('immutable') !== -1,
+ theme: do {
+ const match = window.location.search.match(/theme=([^&]+)/);
+ match ? match[1] : 'inspector'
+ },
+ dark: window.location.search.indexOf('dark') !== -1
+ };
+}
diff --git a/packages/redux-devtools-inspector/demo/src/js/index.js b/packages/redux-devtools-inspector/demo/src/js/index.js
new file mode 100644
index 00000000..aa552d37
--- /dev/null
+++ b/packages/redux-devtools-inspector/demo/src/js/index.js
@@ -0,0 +1,100 @@
+import 'babel-polyfill';
+import React from 'react';
+import { render } from 'react-dom';
+import DemoApp from './DemoApp';
+import { Provider } from 'react-redux';
+import reducers from './reducers';
+import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
+import createLogger from 'redux-logger';
+import { Router, Route, browserHistory } from 'react-router';
+import { syncHistoryWithStore, routerReducer, routerMiddleware } from 'react-router-redux';
+import { createDevTools, persistState } from 'redux-devtools';
+import DevtoolsInspector from '../../../src/DevtoolsInspector';
+import DockMonitor from 'redux-devtools-dock-monitor';
+import getOptions from './getOptions';
+
+function getDebugSessionKey() {
+ const matches = window.location.href.match(/[?&]debug_session=([^&#]+)\b/);
+ return (matches && matches.length > 0)? matches[1] : null;
+}
+
+const CustomComponent = () =>
+ {pkg.description || Package Description}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
;
+
+const getDevTools = options =>
+ createDevTools(
+ Custom Tab Content
+
+ {router}
+ {!useDevtoolsExtension &&
+
+ 0}
+ hasStagedActions={actionIds.length > 1} />
+
+ );
+ }
+}
diff --git a/packages/redux-devtools-inspector/src/ActionListHeader.jsx b/packages/redux-devtools-inspector/src/ActionListHeader.jsx
new file mode 100644
index 00000000..097813e5
--- /dev/null
+++ b/packages/redux-devtools-inspector/src/ActionListHeader.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import RightSlider from './RightSlider';
+
+const getActiveButtons = (hasSkippedActions) => [
+ hasSkippedActions && 'Sweep',
+ 'Commit'
+].filter(a => a);
+
+const ActionListHeader =
+ ({
+ styling, onSearch, hasSkippedActions, hasStagedActions, onCommit, onSweep, hideMainButtons
+ }) =>
+
+ {filteredActionIds.map(actionId =>
+ = startActionId && actionId <= selectedActionId ||
+ actionId === selectedActionId
+ }
+ isInFuture={
+ actionIds.indexOf(actionId) > actionIds.indexOf(currentActionId)
+ }
+ onSelect={(e) => onSelect(e, actionId)}
+ timestamps={getTimestamps(actions, actionIds, actionId)}
+ action={actions[actionId].action}
+ onToggleClick={() => onToggleAction(actionId)}
+ onJumpClick={() => onJumpToState(actionId)}
+ onCommitClick={() => onCommit(actionId)}
+ hideActionButtons={hideActionButtons}
+ isSkipped={skippedActionIds.indexOf(actionId) !== -1} />
+ )}
+
+
+ onSearch(e.target.value)}
+ placeholder='filter...'
+ />
+ {!hideMainButtons &&
+
;
+
+export default ActionListHeader;
diff --git a/packages/redux-devtools-inspector/src/ActionListRow.jsx b/packages/redux-devtools-inspector/src/ActionListRow.jsx
new file mode 100644
index 00000000..b7e30cde
--- /dev/null
+++ b/packages/redux-devtools-inspector/src/ActionListRow.jsx
@@ -0,0 +1,128 @@
+import React, { Component, PropTypes } from 'react';
+import shouldPureComponentUpdate from 'react-pure-render/function';
+import dateformat from 'dateformat';
+import debounce from 'lodash.debounce';
+import RightSlider from './RightSlider';
+
+const BUTTON_SKIP = 'Skip';
+const BUTTON_JUMP = 'Jump';
+
+export default class ActionListRow extends Component {
+ state = { hover: false };
+
+ static propTypes = {
+ styling: PropTypes.func.isRequired,
+ isSelected: PropTypes.bool.isRequired,
+ action: PropTypes.object.isRequired,
+ isInFuture: PropTypes.bool.isRequired,
+ isInitAction: PropTypes.bool.isRequired,
+ onSelect: PropTypes.func.isRequired,
+ timestamps: PropTypes.shape({
+ current: PropTypes.number.isRequired,
+ previous: PropTypes.number.isRequired
+ }).isRequired,
+ isSkipped: PropTypes.bool.isRequired
+ };
+
+ shouldComponentUpdate = shouldPureComponentUpdate
+
+ render() {
+ const { styling, isSelected, action, actionId, isInitAction, onSelect,
+ timestamps, isSkipped, isInFuture, hideActionButtons } = this.props;
+ const { hover } = this.state;
+ const timeDelta = timestamps.current - timestamps.previous;
+ const showButtons = hover && !isInitAction || isSkipped;
+
+ const isButtonSelected = btn =>
+ btn === BUTTON_SKIP && isSkipped;
+
+ let actionType = action.type;
+ if (typeof actionType === 'undefined') actionType = '
+
+
+
+ }
+
+ {getActiveButtons(hasSkippedActions).map(btn =>
+
+ ({
+ Commit: onCommit,
+ Sweep: onSweep
+ })[btn]()}
+ {...styling([
+ 'selectorButton',
+ 'selectorButtonSmall'], false, true)}
+ >
+ {btn}
+
+ )}
+
+
+
+ :
+
+ );
+ }
+
+ handleButtonClick(btn, e) {
+ e.stopPropagation();
+
+ switch(btn) {
+ case BUTTON_SKIP:
+ this.props.onToggleClick();
+ break;
+ case BUTTON_JUMP:
+ this.props.onJumpClick();
+ break;
+ }
+ }
+
+ handleMouseEnter = e => {
+ if (this.hover) return;
+ this.handleMouseLeave.cancel();
+ this.handleMouseEnterDebounced(e.buttons);
+ }
+
+ handleMouseEnterDebounced = debounce((buttons) => {
+ if (buttons) return;
+ this.setState({ hover: true });
+ }, 150)
+
+ handleMouseLeave = debounce(() => {
+ this.handleMouseEnterDebounced.cancel();
+ if (this.state.hover) this.setState({ hover: false });
+ }, 100)
+
+ handleMouseDown = e => {
+ if (e.target.className.indexOf('selectorButton') === 0) return;
+ this.handleMouseLeave();
+ }
+}
diff --git a/packages/redux-devtools-inspector/src/ActionPreview.jsx b/packages/redux-devtools-inspector/src/ActionPreview.jsx
new file mode 100644
index 00000000..97730129
--- /dev/null
+++ b/packages/redux-devtools-inspector/src/ActionPreview.jsx
@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import { DEFAULT_STATE } from './redux';
+import ActionPreviewHeader from './ActionPreviewHeader';
+import DiffTab from './tabs/DiffTab';
+import StateTab from './tabs/StateTab';
+import ActionTab from './tabs/ActionTab';
+
+const DEFAULT_TABS = [{
+ name: 'Action',
+ component: ActionTab
+}, {
+ name: 'Diff',
+ component: DiffTab
+}, {
+ name: 'State',
+ component: StateTab
+}]
+
+class ActionPreview extends Component {
+ static defaultProps = {
+ tabName: DEFAULT_STATE.tabName
+ }
+
+ render() {
+ const {
+ styling, delta, error, nextState, onInspectPath, inspectedPath, tabName,
+ isWideLayout, onSelectTab, action, actions, selectedActionId, startActionId,
+ computedStates, base16Theme, invertTheme, tabs, dataTypeKey, monitorState, updateMonitorState
+ } = this.props;
+
+ const renderedTabs = (typeof tabs === 'function') ?
+ tabs(DEFAULT_TABS) :
+ (tabs ? tabs : DEFAULT_TABS);
+
+ const { component: TabComponent } = (
+ renderedTabs.find(tab => tab.name === tabName)
+ || renderedTabs.find(tab => tab.name === DEFAULT_STATE.tabName)
+ );
+
+ return (
+
+ {actionType}
+
+ {hideActionButtons ?
+
+ {timeDelta === 0 ? '+00:00:00' :
+ dateformat(timeDelta, timestamps.previous ? '+MM:ss.L' : 'h:MM:ss.L')}
+
+
+
+
+
+
+
+ }
+
+ {timeDelta === 0 ? '+00:00:00' :
+ dateformat(timeDelta, timestamps.previous ? '+MM:ss.L' : 'h:MM:ss.L')}
+
+
+ {[BUTTON_JUMP, BUTTON_SKIP].map(btn => (!isInitAction || btn !== BUTTON_SKIP) &&
+
+
+ {btn}
+
+ )}
+
+
+ );
+ }
+
+ labelRenderer = ([key, ...rest], nodeType, expanded) => {
+ const { styling, onInspectPath, inspectedPath } = this.props;
+
+ return (
+
+
+ {key}
+
+ onInspectPath([
+ ...inspectedPath.slice(0, inspectedPath.length - 1),
+ ...[key, ...rest].reverse()
+ ])}>
+ {'(pin)'}
+
+ {!expanded && ': '}
+
+ );
+ }
+}
+
+export default ActionPreview;
diff --git a/packages/redux-devtools-inspector/src/ActionPreviewHeader.jsx b/packages/redux-devtools-inspector/src/ActionPreviewHeader.jsx
new file mode 100644
index 00000000..8623dfae
--- /dev/null
+++ b/packages/redux-devtools-inspector/src/ActionPreviewHeader.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+const ActionPreviewHeader =
+ ({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) =>
+
+
+ }
+ {error &&
+ {error}
+ }
+
+
;
+
+export default ActionPreviewHeader;
diff --git a/packages/redux-devtools-inspector/src/DevtoolsInspector.js b/packages/redux-devtools-inspector/src/DevtoolsInspector.js
new file mode 100644
index 00000000..b8212820
--- /dev/null
+++ b/packages/redux-devtools-inspector/src/DevtoolsInspector.js
@@ -0,0 +1,269 @@
+import React, { Component, PropTypes } from 'react';
+import { createStylingFromTheme, base16Themes } from './utils/createStylingFromTheme';
+import shouldPureComponentUpdate from 'react-pure-render/function';
+import ActionList from './ActionList';
+import ActionPreview from './ActionPreview';
+import getInspectedState from './utils/getInspectedState';
+import createDiffPatcher from './createDiffPatcher';
+import { getBase16Theme } from 'react-base16-styling';
+import { reducer, updateMonitorState } from './redux';
+import { ActionCreators } from 'redux-devtools';
+
+const { commit, sweep, toggleAction, jumpToAction, jumpToState, reorderAction } = ActionCreators;
+
+function getLastActionId(props) {
+ return props.stagedActionIds[props.stagedActionIds.length - 1];
+}
+
+function getCurrentActionId(props, monitorState) {
+ return monitorState.selectedActionId === null ?
+ props.stagedActionIds[props.currentStateIndex] : monitorState.selectedActionId;
+}
+
+function getFromState(actionIndex, stagedActionIds, computedStates, monitorState) {
+ const { startActionId } = monitorState;
+ if (startActionId === null) {
+ return actionIndex > 0 ? computedStates[actionIndex - 1] : null;
+ }
+ let fromStateIdx = stagedActionIds.indexOf(startActionId - 1);
+ if (fromStateIdx === -1) fromStateIdx = 0;
+ return computedStates[fromStateIdx];
+}
+
+function createIntermediateState(props, monitorState) {
+ const { supportImmutable, computedStates, stagedActionIds,
+ actionsById: actions, diffObjectHash, diffPropertyFilter } = props;
+ const { inspectedStatePath, inspectedActionPath } = monitorState;
+ const currentActionId = getCurrentActionId(props, monitorState);
+ const currentAction = actions[currentActionId] && actions[currentActionId].action;
+
+ const actionIndex = stagedActionIds.indexOf(currentActionId);
+ const fromState = getFromState(actionIndex, stagedActionIds, computedStates, monitorState);
+ const toState = computedStates[actionIndex];
+ const error = toState && toState.error;
+
+ const fromInspectedState = !error && fromState &&
+ getInspectedState(fromState.state, inspectedStatePath, supportImmutable);
+ const toInspectedState =
+ !error && toState && getInspectedState(toState.state, inspectedStatePath, supportImmutable);
+ const delta = !error && fromState && toState &&
+ createDiffPatcher(diffObjectHash, diffPropertyFilter).diff(
+ fromInspectedState,
+ toInspectedState
+ );
+
+ return {
+ delta,
+ nextState: toState && getInspectedState(toState.state, inspectedStatePath, false),
+ action: getInspectedState(currentAction, inspectedActionPath, false),
+ error
+ };
+}
+
+function createThemeState(props) {
+ const base16Theme = getBase16Theme(props.theme, base16Themes);
+ const styling = createStylingFromTheme(props.theme, props.invertTheme);
+
+ return { base16Theme, styling };
+}
+
+export default class DevtoolsInspector extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ ...createIntermediateState(props, props.monitorState),
+ isWideLayout: false,
+ themeState: createThemeState(props)
+ };
+ }
+
+ static propTypes = {
+ dispatch: PropTypes.func,
+ computedStates: PropTypes.array,
+ stagedActionIds: PropTypes.array,
+ actionsById: PropTypes.object,
+ currentStateIndex: PropTypes.number,
+ monitorState: PropTypes.shape({
+ initialScrollTop: PropTypes.number
+ }),
+ preserveScrollTop: PropTypes.bool,
+ draggableActions: PropTypes.bool,
+ stagedActions: PropTypes.array,
+ select: PropTypes.func.isRequired,
+ theme: PropTypes.oneOfType([
+ PropTypes.object,
+ PropTypes.string
+ ]),
+ supportImmutable: PropTypes.bool,
+ diffObjectHash: PropTypes.func,
+ diffPropertyFilter: PropTypes.func,
+ hideMainButtons: PropTypes.bool,
+ hideActionButtons: PropTypes.bool
+ };
+
+ static update = reducer;
+
+ static defaultProps = {
+ select: (state) => state,
+ supportImmutable: false,
+ draggableActions: true,
+ theme: 'inspector',
+ invertTheme: true
+ };
+
+ shouldComponentUpdate = shouldPureComponentUpdate;
+
+ componentDidMount() {
+ this.updateSizeMode();
+ this.updateSizeTimeout = window.setInterval(this.updateSizeMode.bind(this), 150);
+ }
+
+ componentWillUnmount() {
+ window.clearTimeout(this.updateSizeTimeout);
+ }
+
+ updateMonitorState = monitorState => {
+ this.props.dispatch(updateMonitorState(monitorState));
+ };
+
+ updateSizeMode() {
+ const isWideLayout = this.refs.inspector.offsetWidth > 500;
+
+ if (isWideLayout !== this.state.isWideLayout) {
+ this.setState({ isWideLayout });
+ }
+ }
+
+ componentWillReceiveProps(nextProps) {
+ let nextMonitorState = nextProps.monitorState;
+ const monitorState = this.props.monitorState;
+
+ if (
+ getCurrentActionId(this.props, monitorState) !==
+ getCurrentActionId(nextProps, nextMonitorState) ||
+ monitorState.startActionId !== nextMonitorState.startActionId ||
+ monitorState.inspectedStatePath !== nextMonitorState.inspectedStatePath ||
+ monitorState.inspectedActionPath !== nextMonitorState.inspectedActionPath ||
+ this.props.computedStates !== nextProps.computedStates ||
+ this.props.stagedActionIds !== nextProps.stagedActionIds
+ ) {
+ this.setState(createIntermediateState(nextProps, nextMonitorState));
+ }
+
+ if (this.props.theme !== nextProps.theme ||
+ this.props.invertTheme !== nextProps.invertTheme) {
+ this.setState({ themeState: createThemeState(nextProps) });
+ }
+ }
+
+ render() {
+ const {
+ stagedActionIds: actionIds, actionsById: actions, computedStates, draggableActions,
+ tabs, invertTheme, skippedActionIds, currentStateIndex, monitorState, dataTypeKey,
+ hideMainButtons, hideActionButtons
+ } = this.props;
+ const { selectedActionId, startActionId, searchValue, tabName } = monitorState;
+ const inspectedPathType = tabName === 'Action' ? 'inspectedActionPath' : 'inspectedStatePath';
+ const {
+ themeState, isWideLayout, action, nextState, delta, error
+ } = this.state;
+ const { base16Theme, styling } = themeState;
+
+ return (
+
+ {tabs.map(tab =>
+
+ onSelectTab(tab.name)}
+ key={tab.name}
+ {...styling([
+ 'selectorButton',
+ tab.name === tabName && 'selectorButtonSelected'
+ ], tab.name === tabName)}>
+ {tab.name}
+
+ )}
+
+ {inspectedPath.length ?
+
+ onInspectPath([])}
+ {...styling('inspectedPathKeyLink')}>
+ {tabName}
+
+ : tabName
+ }
+ {inspectedPath.map((key, idx) =>
+ idx === inspectedPath.length - 1 ? {key} :
+
+ onInspectPath(inspectedPath.slice(0, idx + 1))}
+ {...styling('inspectedPathKeyLink')}>
+ {key}
+
+
+ )}
+
+
+
+ );
+ }
+
+ handleToggleAction = actionId => {
+ 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));
+ }
+ };
+
+ handleReorderAction = (actionId, beforeActionId) => {
+ if (reorderAction) this.props.dispatch(reorderAction(actionId, beforeActionId));
+ };
+
+ handleCommit = () => {
+ this.props.dispatch(commit());
+ };
+
+ handleSweep = () => {
+ this.props.dispatch(sweep());
+ };
+
+ handleSearch = val => {
+ this.updateMonitorState({ searchValue: val });
+ };
+
+ handleSelectAction = (e, actionId) => {
+ const { monitorState } = this.props;
+ let startActionId;
+ let selectedActionId;
+
+ if (e.shiftKey && monitorState.selectedActionId !== null) {
+ if (monitorState.startActionId !== null) {
+ if (actionId >= monitorState.startActionId) {
+ startActionId = Math.min(monitorState.startActionId, monitorState.selectedActionId);
+ selectedActionId = actionId;
+ } else {
+ selectedActionId = Math.max(monitorState.startActionId, monitorState.selectedActionId);
+ startActionId = actionId;
+ }
+ } else {
+ startActionId = Math.min(actionId, monitorState.selectedActionId);
+ selectedActionId = Math.max(actionId, monitorState.selectedActionId);
+ }
+ } else {
+ startActionId = null;
+ if (actionId === monitorState.selectedActionId || monitorState.startActionId !== null) {
+ selectedActionId = null;
+ } else {
+ selectedActionId = actionId;
+ }
+ }
+
+ this.updateMonitorState({ startActionId, selectedActionId });
+ };
+
+ handleInspectPath = (pathType, path) => {
+ this.updateMonitorState({ [pathType]: path });
+ };
+
+ handleSelectTab = tabName => {
+ this.updateMonitorState({ tabName });
+ };
+}
diff --git a/packages/redux-devtools-inspector/src/RightSlider.jsx b/packages/redux-devtools-inspector/src/RightSlider.jsx
new file mode 100644
index 00000000..be0401c4
--- /dev/null
+++ b/packages/redux-devtools-inspector/src/RightSlider.jsx
@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react';
+
+const RightSlider = ({ styling, shown, children, rotate }) =>
+
+ {children}
+
;
+
+RightSlider.propTypes = {
+ shown: PropTypes.bool
+};
+
+export default RightSlider;
diff --git a/packages/redux-devtools-inspector/src/createDiffPatcher.js b/packages/redux-devtools-inspector/src/createDiffPatcher.js
new file mode 100644
index 00000000..6124cdac
--- /dev/null
+++ b/packages/redux-devtools-inspector/src/createDiffPatcher.js
@@ -0,0 +1,29 @@
+import { DiffPatcher } from 'jsondiffpatch/src/diffpatcher';
+
+const defaultObjectHash = (o, idx) =>
+ o === null && '$$null' ||
+ o && (o.id || o.id === 0) && `$$id:${JSON.stringify(o.id)}` ||
+ o && (o._id ||o._id === 0) && `$$_id:${JSON.stringify(o._id)}` ||
+ '$$index:' + idx;
+
+const defaultPropertyFilter = (name, context) =>
+ typeof context.left[name] !== 'function' &&
+ typeof context.right[name] !== 'function';
+
+const defaultDiffPatcher = new DiffPatcher({
+ arrays: { detectMove: false },
+ objectHash: defaultObjectHash,
+ propertyFilter: defaultPropertyFilter
+});
+
+export default function createDiffPatcher(objectHash, propertyFilter) {
+ if (!objectHash && !propertyFilter) {
+ return defaultDiffPatcher;
+ }
+
+ return new DiffPatcher({
+ arrays: { detectMove: false },
+ objectHash: objectHash || defaultObjectHash,
+ propertyFilter: propertyFilter || defaultPropertyFilter
+ });
+}
diff --git a/packages/redux-devtools-inspector/src/index.js b/packages/redux-devtools-inspector/src/index.js
new file mode 100644
index 00000000..2040c41e
--- /dev/null
+++ b/packages/redux-devtools-inspector/src/index.js
@@ -0,0 +1 @@
+export default from './DevtoolsInspector';
diff --git a/packages/redux-devtools-inspector/src/redux.js b/packages/redux-devtools-inspector/src/redux.js
new file mode 100644
index 00000000..8c36f436
--- /dev/null
+++ b/packages/redux-devtools-inspector/src/redux.js
@@ -0,0 +1,26 @@
+const UPDATE_MONITOR_STATE = '@@redux-devtools-inspector/UPDATE_MONITOR_STATE';
+
+export const DEFAULT_STATE = {
+ selectedActionId: null,
+ startActionId: null,
+ inspectedActionPath: [],
+ inspectedStatePath: [],
+ tabName: 'Diff'
+};
+
+export function updateMonitorState(monitorState) {
+ return { type: UPDATE_MONITOR_STATE, monitorState };
+}
+
+function reduceUpdateState(state, action) {
+ return (action.type === UPDATE_MONITOR_STATE) ? {
+ ...state,
+ ...action.monitorState
+ } : state;
+}
+
+export function reducer(props, state=DEFAULT_STATE, action) {
+ return {
+ ...reduceUpdateState(state, action)
+ };
+}
diff --git a/packages/redux-devtools-inspector/src/tabs/ActionTab.jsx b/packages/redux-devtools-inspector/src/tabs/ActionTab.jsx
new file mode 100644
index 00000000..f4b4d57b
--- /dev/null
+++ b/packages/redux-devtools-inspector/src/tabs/ActionTab.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import JSONTree from 'react-json-tree';
+import getItemString from './getItemString';
+import getJsonTreeTheme from './getJsonTreeTheme';
+
+const ActionTab = ({
+ action, styling, base16Theme, invertTheme, labelRenderer, dataTypeKey, isWideLayout
+}) =>
+
+ (states are equal)
+
+ );
+ }
+
+ return (
+