Work

extension/src/app/api/importState.js

@@ -1,6 +1,6 @@
 import mapValues from 'lodash/mapValues';
 import jsan from 'jsan';
-import seralizeImmutable from 'remotedev-serialize/immutable/serialize';
+import seralizeImmutable from '@redux-devtools/serialize/lib/immutable/serialize';
 
 function deprecate(param) {
   // eslint-disable-next-line no-console

extension/src/app/api/index.js

@@ -1,7 +1,7 @@
 import jsan from 'jsan';
 import throttle from 'lodash/throttle';
-import seralizeImmutable from 'remotedev-serialize/immutable/serialize';
+import seralizeImmutable from '@redux-devtools/serialize/lib/immutable/serialize';
-import { getActionsArray } from 'remotedev-utils';
+import { getActionsArray } from '@redux-devtools/utils';
 import { getLocalFilter, isFiltered } from './filters';
 import importState from './importState';
 import generateId from './generateInstanceId';

extension/src/app/containers/App.js

@@ -1,33 +1,12 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import SliderMonitor from 'remotedev-slider/lib/Slider';
+import { Container, Notification } from 'devui';
-import { liftedDispatch, getReport } from 'remotedev-app/lib/actions';
+import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
-import { getActiveInstance } from 'remotedev-app/lib/reducers/instances';
+import Settings from '@redux-devtools/app/lib/components/Settings';
-import styles from 'remotedev-app/lib/styles';
+import Actions from '@redux-devtools/app/lib/containers/Actions';
-import enhance from 'remotedev-app/lib/hoc';
+import Header from '@redux-devtools/app/lib/components/Header';
-import DevTools from 'remotedev-app/lib/containers/DevTools';
+import { clearNotification } from '@redux-devtools/app/lib/actions';
-import Dispatcher from 'remotedev-app/lib/containers/monitors/Dispatcher';
-import MonitorSelector from 'remotedev-app/lib/components/MonitorSelector';
-import Notification from 'remotedev-app/lib/components/Notification';
-import Instances from 'remotedev-app/lib/components/Instances';
-import Button from 'remotedev-app/lib/components/Button';
-import RecordButton from 'remotedev-app/lib/components/buttons/RecordButton';
-import LockButton from 'remotedev-app/lib/components/buttons/LockButton';
-import DispatcherButton from 'remotedev-app/lib/components/buttons/DispatcherButton';
-import SliderButton from 'remotedev-app/lib/components/buttons/SliderButton';
-import ImportButton from 'remotedev-app/lib/components/buttons/ImportButton';
-import ExportButton from 'remotedev-app/lib/components/buttons/ExportButton';
-import PrintButton from 'remotedev-app/lib/components/buttons/PrintButton';
-import {
-  MdSettings,
-  MdBorderLeft,
-  MdBorderRight,
-  MdBorderBottom,
-} from 'react-icons/md';
-import { GoRadioTower, GoPin } from 'react-icons/go';
 
-@enhance
 class App extends Component {
   openWindow = (position) => {
     chrome.runtime.sendMessage({ type: 'OPEN', position });
@@ -41,15 +20,7 @@ class App extends Component {
   };
 
   render() {
-    const {
+    const { position, options, section, theme, notification } = this.props;
-      monitor,
-      position,
-      togglePersist,
-      dispatcherIsOpen,
-      sliderIsOpen,
-      options,
-      liftedState,
-    } = this.props;
     if (!position && (!options || !options.features)) {
       return (
         <div style={{ padding: '20px', width: '100%', textAlign: 'center' }}>
@@ -64,139 +35,46 @@ class App extends Component {
         </div>
       );
     }
-    const features = options.features || {};
+
+    let body;
+    switch (section) {
+      case 'Settings':
+        body = <Settings />;
+        break;
+      default:
+        body = <Actions />;
+    }
+
     return (
-      <div style={styles.container}>
+      <Container themeData={theme}>
-        <div style={styles.buttonBar}>
+        <Header section={section} />
-          <MonitorSelector selected={monitor} />
+        {body}
-          <Instances selected={this.props.selected} />
+        {notification && (
-        </div>
+          <Notification
-        <DevTools
+            type={notification.type}
-          monitor={monitor}
+            onClose={this.props.clearNotification}
-          liftedState={liftedState}
-          monitorState={this.props.monitorState}
-          dispatch={this.props.liftedDispatch}
-          lib={options.lib || options.explicitLib}
-        />
-        <Notification />
-        {sliderIsOpen && options.connectionId && options.features.jump && (
-          <SliderMonitor
-            monitor="SliderMonitor"
-            liftedState={liftedState}
-            dispatch={this.props.liftedDispatch}
-            getReport={this.props.getReport}
-            reports={this.props.reports}
-            showActions={monitor === 'ChartMonitor'}
-            style={{ padding: '15px 5px' }}
-            fillColor="rgb(120, 144, 156)"
-          />
-        )}
-        {dispatcherIsOpen &&
-          options.connectionId &&
-          options.features.dispatch && <Dispatcher options={options} />}
-        <div style={styles.buttonBar}>
-          {!window.isElectron && position !== '#left' && (
-            <Button
-              Icon={MdBorderLeft}
-              onClick={() => {
-                this.openWindow('left');
-              }}
-            />
-          )}
-          {!window.isElectron && position !== '#right' && (
-            <Button
-              Icon={MdBorderRight}
-              onClick={() => {
-                this.openWindow('right');
-              }}
-            />
-          )}
-          {!window.isElectron && position !== '#bottom' && (
-            <Button
-              Icon={MdBorderBottom}
-              onClick={() => {
-                this.openWindow('bottom');
-              }}
-            />
-          )}
-          {features.pause && <RecordButton paused={liftedState.isPaused} />}
-          {features.lock && <LockButton locked={liftedState.isLocked} />}
-          {features.persist && (
-            <Button Icon={GoPin} onClick={togglePersist}>
-              Persist
-            </Button>
-          )}
-          {features.dispatch && (
-            <DispatcherButton dispatcherIsOpen={dispatcherIsOpen} />
-          )}
-          {features.jump && <SliderButton isOpen={sliderIsOpen} />}
-          {features.import && <ImportButton />}
-          {features.export && <ExportButton />}
-          {position &&
-            (position !== '#popup' ||
-              navigator.userAgent.indexOf('Firefox') !== -1) && <PrintButton />}
-          {!window.isElectron && (
-            <Button
-              Icon={GoRadioTower}
-              onClick={() => {
-                this.openWindow('remote');
-              }}
           >
-              Remote
+            {notification.message}
-            </Button>
+          </Notification>
         )}
-          {(chrome.runtime.openOptionsPage ||
+      </Container>
-            navigator.userAgent.indexOf('Firefox') !== -1) && (
-            <Button Icon={MdSettings} onClick={this.openOptionsPage}>
-              Settings
-            </Button>
-          )}
-        </div>
-      </div>
     );
   }
 }
 
-App.propTypes = {
-  bgStore: PropTypes.object,
-  liftedDispatch: PropTypes.func.isRequired,
-  getReport: PropTypes.func.isRequired,
-  togglePersist: PropTypes.func.isRequired,
-  selected: PropTypes.string,
-  liftedState: PropTypes.object.isRequired,
-  monitorState: PropTypes.object,
-  options: PropTypes.object.isRequired,
-  monitor: PropTypes.string,
-  position: PropTypes.string,
-  reports: PropTypes.array.isRequired,
-  dispatcherIsOpen: PropTypes.bool,
-  sliderIsOpen: PropTypes.bool,
-};
-
 function mapStateToProps(state) {
   const instances = state.instances;
   const id = getActiveInstance(instances);
   return {
-    selected: instances.selected,
-    liftedState: instances.states[id],
-    monitorState: state.monitor.monitorState,
     options: instances.options[id],
-    monitor: state.monitor.selected,
+    section: state.section,
-    dispatcherIsOpen: state.monitor.dispatcherIsOpen,
+    theme: state.theme,
-    sliderIsOpen: state.monitor.sliderIsOpen,
+    notification: state.notification,
-    reports: state.reports.data,
-    shouldSync: state.instances.sync,
   };
 }
 
-function mapDispatchToProps(dispatch) {
+const actionCreators = {
-  return {
+  clearNotification,
-    liftedDispatch: bindActionCreators(liftedDispatch, dispatch),
-    getReport: bindActionCreators(getReport, dispatch),
-    togglePersist: () => {
-      dispatch({ type: 'TOGGLE_PERSIST' });
-    },
 };
-}
 
-export default connect(mapStateToProps, mapDispatchToProps)(App);
+export default connect(mapStateToProps, actionCreators)(App);

extension/src/app/middlewares/api.js

@@ -1,10 +1,10 @@
-import stringifyJSON from 'remotedev-app/lib/utils/stringifyJSON';
+import stringifyJSON from '@redux-devtools/app/lib/utils/stringifyJSON';
 import {
   UPDATE_STATE,
   REMOVE_INSTANCE,
   LIFTED_ACTION,
-} from 'remotedev-app/lib/constants/actionTypes';
+} from '@redux-devtools/app/lib/constants/actionTypes';
-import { nonReduxDispatch } from 'remotedev-app/lib/utils/monitorActions';
+import { nonReduxDispatch } from '@redux-devtools/app/lib/utils/monitorActions';
 import syncOptions from '../../browser/extension/options/syncOptions';
 import openDevToolsWindow from '../../browser/extension/background/openWindow';
 import { getReport } from '../../browser/extension/background/logging';

extension/src/app/middlewares/instanceSelector.js

@@ -1,7 +1,7 @@
 import {
   SELECT_INSTANCE,
   UPDATE_STATE,
-} from 'remotedev-app/lib/constants/actionTypes';
+} from '@redux-devtools/app/lib/constants/actionTypes';
 
 function selectInstance(tabId, store, next) {
   const instances = store.getState().instances;

extension/src/app/middlewares/panelSync.js

@@ -2,8 +2,8 @@ import {
   LIFTED_ACTION,
   UPDATE_STATE,
   SELECT_INSTANCE,
-} from 'remotedev-app/lib/constants/actionTypes';
+} from '@redux-devtools/app/lib/constants/actionTypes';
-import { getActiveInstance } from 'remotedev-app/lib/reducers/instances';
+import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
 
 function panelDispatcher(bgConnection) {
   let autoselected = false;

extension/src/app/middlewares/windowSync.js

@@ -1,8 +1,8 @@
 import {
   UPDATE_STATE,
   LIFTED_ACTION,
-} from 'remotedev-app/lib/constants/actionTypes';
+} from '@redux-devtools/app/lib/constants/actionTypes';
-import { getActiveInstance } from 'remotedev-app/lib/reducers/instances';
+import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
 
 const syncStores = (baseStore) => (store) => (next) => (action) => {
   if (action.type === UPDATE_STATE) {

extension/src/app/reducers/background/index.js

@@ -1,5 +1,5 @@
 import { combineReducers } from 'redux';
-import instances from 'remotedev-app/lib/reducers/instances';
+import instances from '@redux-devtools/app/lib/reducers/instances';
 import persistStates from './persistStates';
 
 const rootReducer = combineReducers({

extension/src/app/reducers/panel/index.js

@@ -1,16 +1,18 @@
 import { combineReducers } from 'redux';
-import instances from 'remotedev-app/lib/reducers/instances';
+import instances from '@redux-devtools/app/lib/reducers/instances';
-import monitor from 'remotedev-app/lib/reducers/monitor';
+import monitor from '@redux-devtools/app/lib/reducers/monitor';
-import notification from 'remotedev-app/lib/reducers/notification';
+import notification from '@redux-devtools/app/lib/reducers/notification';
-import test from 'remotedev-app/lib/reducers/test';
+import reports from '@redux-devtools/app/lib/reducers/reports';
-import reports from 'remotedev-app/lib/reducers/reports';
+import section from '@redux-devtools/app/lib/reducers/section';
+import theme from '@redux-devtools/app/lib/reducers/theme';
 
 const rootReducer = combineReducers({
   instances,
   monitor,
-  test,
   reports,
   notification,
+  section,
+  theme,
 });
 
 export default rootReducer;

extension/src/app/reducers/window/index.js

@@ -1,18 +1,20 @@
 import { combineReducers } from 'redux';
 import instances from './instances';
-import monitor from 'remotedev-app/lib/reducers/monitor';
+import monitor from '@redux-devtools/app/lib/reducers/monitor';
-import notification from 'remotedev-app/lib/reducers/notification';
+import notification from '@redux-devtools/app/lib/reducers/notification';
-import socket from 'remotedev-app/lib/reducers/socket';
+import socket from '@redux-devtools/app/lib/reducers/socket';
-import reports from 'remotedev-app/lib/reducers/reports';
+import reports from '@redux-devtools/app/lib/reducers/reports';
-import test from 'remotedev-app/lib/reducers/test';
+import section from '@redux-devtools/app/lib/reducers/section';
+import theme from '@redux-devtools/app/lib/reducers/theme';
 
 const rootReducer = combineReducers({
   instances,
   monitor,
-  test,
   socket,
   reports,
   notification,
+  section,
+  theme,
 });
 
 export default rootReducer;

extension/src/app/reducers/window/instances.js

@@ -1,12 +1,12 @@
 import {
   initialState,
   dispatchAction,
-} from 'remotedev-app/lib/reducers/instances';
+} from '@redux-devtools/app/lib/reducers/instances';
 import {
   UPDATE_STATE,
   SELECT_INSTANCE,
   LIFTED_ACTION,
-} from 'remotedev-app/lib/constants/actionTypes';
+} from '@redux-devtools/app/lib/constants/actionTypes';
 
 export default function instances(state = initialState, action) {
   switch (action.type) {

extension/src/app/stores/enhancerStore.js

@@ -1,6 +1,6 @@
 import { compose } from 'redux';
-import instrument from 'redux-devtools-instrument';
+import instrument from '@redux-devtools/instrument';
-import persistState from 'redux-devtools/lib/persistState';
+import persistState from '@redux-devtools/core/lib/persistState';
 
 export function getUrlParam(key) {
   const matches = window.location.href.match(

extension/src/app/stores/panelStore.js

@@ -1,14 +1,9 @@
 import { createStore, applyMiddleware } from 'redux';
-import persist from 'remotedev-app/lib/middlewares/persist';
+import exportState from '@redux-devtools/app/lib/middlewares/exportState';
-import exportState from 'remotedev-app/lib/middlewares/exportState';
 import panelDispatcher from '../middlewares/panelSync';
 import rootReducer from '../reducers/panel';
 
 export default function configureStore(position, bgConnection, preloadedState) {
-  const enhancer = applyMiddleware(
+  const enhancer = applyMiddleware(exportState, panelDispatcher(bgConnection));
-    exportState,
-    panelDispatcher(bgConnection),
-    persist(position)
-  );
   return createStore(rootReducer, preloadedState, enhancer);
 }

extension/src/app/stores/windowStore.js

@@ -1,20 +1,14 @@
 import { createStore, compose, applyMiddleware } from 'redux';
-import persist from 'remotedev-app/lib/middlewares/persist';
+import exportState from '@redux-devtools/app/lib/middlewares/exportState';
-import exportState from 'remotedev-app/lib/middlewares/exportState';
+import api from '@redux-devtools/app/lib/middlewares/api';
-import api from 'remotedev-app/lib/middlewares/api';
+import { CONNECT_REQUEST } from '@redux-devtools/app/lib/constants/socketActionTypes';
-import { CONNECT_REQUEST } from 'remotedev-app/lib/constants/socketActionTypes';
 import syncStores from '../middlewares/windowSync';
 import instanceSelector from '../middlewares/instanceSelector';
 import rootReducer from '../reducers/window';
 
 export default function configureStore(baseStore, position, preloadedState) {
   let enhancer;
-  const middlewares = [
+  const middlewares = [exportState, api, syncStores(baseStore)];
-    exportState,
-    api,
-    syncStores(baseStore),
-    persist(position),
-  ];
   if (!position || position === '#popup') {
     // select current tab instance for devPanel and pageAction
     middlewares.push(instanceSelector);

extension/src/browser/extension/background/logging.js

@@ -1,4 +1,4 @@
-import { LIFTED_ACTION } from 'remotedev-app/lib/constants/actionTypes';
+import { LIFTED_ACTION } from '@redux-devtools/app/lib/constants/actionTypes';
 
 export function getReport(reportId, tabId, instanceId) {
   chrome.storage.local.get(['s:hostname', 's:port', 's:secure'], (options) => {

extension/src/browser/extension/devpanel/index.js

@@ -1,8 +1,7 @@
-import 'remotedev-monitor-components/lib/presets';
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Provider } from 'react-redux';
-import { REMOVE_INSTANCE } from 'remotedev-app/lib/constants/actionTypes';
+import { REMOVE_INSTANCE } from '@redux-devtools/app/lib/constants/actionTypes';
 import App from '../../../app/containers/App';
 import configureStore from '../../../app/stores/panelStore';
 import getPreloadedState from '../background/getPreloadedState';

extension/src/browser/extension/inject/pageScript.js

@@ -1,4 +1,4 @@
-import { getActionsArray, evalAction } from 'remotedev-utils';
+import { getActionsArray, evalAction } from '@redux-devtools/utils';
 import throttle from 'lodash/throttle';
 import createStore from '../../../app/stores/createStore';
 import configureStore, { getUrlParam } from '../../../app/stores/enhancerStore';

extension/src/browser/extension/window/index.js

@@ -1,8 +1,7 @@
-import 'remotedev-monitor-components/lib/presets';
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
-import { UPDATE_STATE } from 'remotedev-app/lib/constants/actionTypes';
+import { UPDATE_STATE } from '@redux-devtools/app/lib/constants/actionTypes';
 import App from '../../../app/containers/App';
 import configureStore from '../../../app/stores/windowStore';
 import getPreloadedState from '../background/getPreloadedState';

extension/src/browser/extension/window/remote.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';
-import App from 'remotedev-app';
+import App from '@redux-devtools/app';
 
 import '../../views/remote.pug';