Support different monitors

Author: zalmoxisus

package.json

@@ -61,8 +61,10 @@
     "react-redux": "^4.0.6",
     "redux": "^3.0.5",
     "redux-devtools": "^3.0.1",
+    "redux-devtools-chart-monitor": "^1.1.3",
     "redux-devtools-filter-actions": "^1.0.1",
     "redux-devtools-log-monitor": "^1.0.2",
+    "redux-slider-monitor": "^1.0.1",
     "redux-thunk": "^1.0.3",
     "remotedev-app": "^0.2.2"
   }

src/app/containers/App.js

@@ -3,11 +3,11 @@ import styles from 'remotedev-app/lib/styles';
 import Instances from 'remotedev-app/lib/components/Instances';
 import Button from 'remotedev-app/lib/components/Button';
 import SettingsIcon from 'react-icons/lib/md/settings';
+import Monitor from './Monitor';
 
 export default class App extends Component {
   static propTypes = {
-    store: PropTypes.object,
-    children: PropTypes.element
+    store: PropTypes.object
   };
 
   static update = () => ({});
@@ -18,16 +18,16 @@ export default class App extends Component {
   };
 
   render() {
-    const { store, children, ...childProps } = this.props;
-    const Monitor = cloneElement(children, childProps);
+    const { store, ...childProps } = this.props;
     return (
       <div style={styles.container}>
         {store.instances ?
           <div style={styles.buttonBar}>
            <Instances instances={store.instances} onSelect={this.handleSelectInstance}/>
           </div>
         : null }
-        { Monitor }
+        <Monitor {...childProps} />
+
         <div style={styles.buttonBar}>
           <Button
             Icon={SettingsIcon}

src/app/containers/DevTools.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import { createDevTools } from 'redux-devtools';
-import LogMonitor from 'redux-devtools-log-monitor';
-import FilterMonitor from 'redux-devtools-filter-actions';
 import App from './App';
 
-export default createDevTools(<App><FilterMonitor><LogMonitor /></FilterMonitor></App>);
+export default createDevTools(<App/>);

src/app/containers/Monitor.js

@@ -0,0 +1,18 @@
+import React, { createElement } from 'react';
+import FilterMonitor from 'redux-devtools-filter-actions';
+import LogMonitor from 'redux-devtools-log-monitor';
+import ChartMonitor from 'redux-devtools-chart-monitor';
+import SliderMonitor from 'redux-slider-monitor';
+
+function getMonitor() {
+  const monitorType = location.hash.substr(1);
+  switch (monitorType) {
+    case 'SliderMonitor': return SliderMonitor;
+    case 'ChartMonitor': return ChartMonitor;
+    default: return LogMonitor;
+  }
+}
+
+export default (props) => (
+  <FilterMonitor {...props}>{createElement(getMonitor())}</FilterMonitor>
+);

src/browser/extension/background/openWindow.js

@@ -1,3 +1,4 @@
+import getMonitorName from '../options/getMonitorName';
 let windows = {};
 let lastPosition = null;
 
@@ -23,9 +24,11 @@ export default function openDevToolsWindow(position) {
         ...customOptions
       };
       if (action === 'open') {
-        options.url = chrome.extension.getURL(url + '#' + position);
-        chrome.windows.create(options, (win) => {
-          windows[position] = win.id;
+        getMonitorName(position, monitorName => {
+          options.url = chrome.extension.getURL(url + '#' + monitorName);
+          chrome.windows.create(options, (win) => {
+            windows[position] = win.id;
+          });
         });
       }
     });
@@ -37,8 +40,8 @@ export default function openDevToolsWindow(position) {
       params.left = window.screen.availWidth - params.width;
       break;
     case 'devtools-bottom':
-      params.height = 320;
-      params.top = window.screen.availHeight - 320;
+      params.height = 200;
+      params.top = window.screen.availHeight - params.height;
       params.width = window.screen.availWidth;
       break;
     case 'devtools-panel':

src/browser/extension/inject/pageScript.js

@@ -121,7 +121,7 @@ window.devToolsExtension = function(config = {}) {
     if (action.type === '@@INIT') {
       relay('INIT', state, { timestamp: Date.now() });
     } else if (!errorOccurred && lastAction !== 'TOGGLE_ACTION' && lastAction !== 'SWEEP') {
-      if (isLimit(nextActionId) || isFiltered(action)) return;
+      if (lastAction === 'JUMP_TO_STATE' || isLimit(nextActionId) || isFiltered(action)) return;
       relay('ACTION', state, liftedAction, nextActionId);
     } else {
       if (errorOccurred && !liftedState.computedStates[liftedState.currentStateIndex].error) errorOccurred = false;

src/browser/extension/options/getMonitorName.js

@@ -0,0 +1,9 @@
+export default (type, cb) => {
+  window.syncOptions.get(options => {
+    switch (type) {
+      case 'devtools-bottom': cb(options.bottomMonitor); break;
+      case 'devtools-right': cb(options.rightMonitor); break;
+      default: cb(options.leftMonitor);
+    }
+  });
+};