Almost works

extension/package.json

@@ -77,12 +77,15 @@
     "@redux-devtools/slider-monitor": "^2.0.0-5",
     "@redux-devtools/utils": "^1.0.0-4",
     "jsan": "^3.1.13",
+    "localforage": "^1.9.0",
     "lodash": "^4.17.19",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-icons": "^3.10.0",
     "react-json-tree": "^0.13.0",
     "react-redux": "^7.2.1",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "redux-persist": "^4.10.2"
   }
 }

extension/src/app/containers/App.js

@@ -1,33 +1,14 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import SliderMonitor from '@redux-devtools/slider-monitor';
+import { Container, Notification } from 'devui';
 import { liftedDispatch, getReport } from '@redux-devtools/app/lib/actions';
 import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
-import styles from '@redux-devtools/app/lib/styles';
+import Settings from '@redux-devtools/app/lib/components/Settings';
-import enhance from '@redux-devtools/app/lib/hoc';
+import Actions from '@redux-devtools/app/lib/containers/Actions';
-import DevTools from '@redux-devtools/app/lib/containers/DevTools';
+import Header from '@redux-devtools/app/lib/components/Header';
-import Dispatcher from '@redux-devtools/app/lib/containers/monitors/Dispatcher';
-import MonitorSelector from '@redux-devtools/app/lib/components/MonitorSelector';
-import Notification from '@redux-devtools/app/lib/components/Notification';
-import Instances from '@redux-devtools/app/lib/components/Instances';
-import Button from '@redux-devtools/app/lib/components/Button';
-import RecordButton from '@redux-devtools/app/lib/components/buttons/RecordButton';
-import LockButton from '@redux-devtools/app/lib/components/buttons/LockButton';
-import DispatcherButton from '@redux-devtools/app/lib/components/buttons/DispatcherButton';
-import SliderButton from '@redux-devtools/app/lib/components/buttons/SliderButton';
-import ImportButton from '@redux-devtools/app/lib/components/buttons/ImportButton';
-import ExportButton from '@redux-devtools/app/lib/components/buttons/ExportButton';
-import PrintButton from '@redux-devtools/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 +22,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,95 +37,29 @@ 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}
+            {notification.message}
-          dispatch={this.props.liftedDispatch}
+          </Notification>
-          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 &&
+      </Container>
-          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
-            </Button>
-          )}
-          {(chrome.runtime.openOptionsPage ||
-            navigator.userAgent.indexOf('Firefox') !== -1) && (
-            <Button Icon={MdSettings} onClick={this.openOptionsPage}>
-              Settings
-            </Button>
-          )}
-        </div>
-      </div>
     );
   }
 }

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

@@ -3,12 +3,16 @@ import instances from '@redux-devtools/app/lib/reducers/instances';
 import monitor from '@redux-devtools/app/lib/reducers/monitor';
 import notification from '@redux-devtools/app/lib/reducers/notification';
 import reports from '@redux-devtools/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,
   reports,
   notification,
+  section,
+  theme,
 });
 
 export default rootReducer;

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

@@ -4,6 +4,8 @@ import monitor from '@redux-devtools/app/lib/reducers/monitor';
 import notification from '@redux-devtools/app/lib/reducers/notification';
 import socket from '@redux-devtools/app/lib/reducers/socket';
 import reports from '@redux-devtools/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,
@@ -11,6 +13,8 @@ const rootReducer = combineReducers({
   socket,
   reports,
   notification,
+  theme,
+  section,
 });
 
 export default rootReducer;

extension/src/app/stores/panelStore.js

@@ -1,14 +1,9 @@
 import { createStore, applyMiddleware } from 'redux';
-import persist from '@redux-devtools/app/lib/middlewares/persist';
 import exportState from '@redux-devtools/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,5 +1,4 @@
 import { createStore, compose, applyMiddleware } from 'redux';
-import persist from '@redux-devtools/app/lib/middlewares/persist';
 import exportState from '@redux-devtools/app/lib/middlewares/exportState';
 import api from '@redux-devtools/app/lib/middlewares/api';
 import { CONNECT_REQUEST } from '@redux-devtools/app/lib/constants/socketActionTypes';
@@ -9,12 +8,7 @@ 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);

yarn.lock

@@ -4972,11 +4972,6 @@ ansi-html@0.0.7:
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
   integrity sha1-gTWEAhliqenm/QOflA0S9WynhZ4=
 
-ansi-regex@*, ansi-regex@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
-  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
-
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -4992,6 +4987,11 @@ ansi-regex@^4.1.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
   integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
 
+ansi-regex@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
+  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -8123,7 +8123,7 @@ debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
   dependencies:
     ms "^2.1.1"
 
-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
   integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
@@ -11555,7 +11555,7 @@ import-local@^3.0.2:
     pkg-dir "^4.2.0"
     resolve-cwd "^3.0.0"
 
-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
@@ -13681,11 +13681,6 @@ lodash-es@^4.17.15, lodash-es@^4.17.4:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
   integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
 
-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-  integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw=
-
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
@@ -13694,33 +13689,11 @@ lodash._baseuniq@~4.6.0:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
-lodash._bindcallback@*:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
-  integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4=
-
-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-  integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI=
-
-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM=
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
   integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY=
 
-lodash._getnative@*, lodash._getnative@^3.0.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
-  integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
-
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -13841,11 +13814,6 @@ lodash.padstart@^4.1.0:
   resolved "https://registry.yarnpkg.com/lodash.padstart/-/lodash.padstart-4.6.1.tgz#d2e3eebff0d9d39ad50f5cbd1b52a7bce6bb611b"
   integrity sha1-0uPuv/DZ05rVD1y9G1KnvOa7YRs=
 
-lodash.restparam@*:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-  integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=
-
 lodash.set@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
@@ -17685,7 +17653,7 @@ readable-stream@~2.1.5:
     string_decoder "~0.10.x"
     util-deprecate "~1.0.1"
 
-readdir-scoped-modules@*, readdir-scoped-modules@^1.0.0:
+readdir-scoped-modules@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz#8d45407b4f870a0dcaebc0e28670d18e74514309"
   integrity sha512-asaikDeqAQg7JifRsZn1NJZXo9E+VwlyCfbkZhwyISinqk5zNS6266HS5kah6P0SaQKGF6SkNnZVHUzHFYxYDw==
@@ -21033,7 +21001,7 @@ v8flags@^3.1.3:
   dependencies:
     homedir-polyfill "^1.0.1"
 
-validate-npm-package-license@*, validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.3, validate-npm-package-license@~3.0.1:
+validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.3, validate-npm-package-license@~3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
   integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==