chore(extension): add extension to yarn workspaces (#747)

* Add packages

* misc changes

* Work

* Fix missing package

* Remove lint for now

* Test differently

* Try no-sandbox

* Test

* Try that

* Try that

* Test

* Not headless?

* Test electron

* Try Windows

* lerna run test

* Update

.github/workflows/CI.yml

@@ -17,7 +17,3 @@ jobs:
       - run: yarn build:all
       - run: yarn lint:all
       - run: yarn test:all
-      - working-directory: ./extension
-        run: yarn install --immutable
-      - working-directory: ./extension
-        run: yarn test

extension/jest.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   setupFilesAfterEnv: ['<rootDir>/test/setup.js'],
+  testPathIgnorePatterns: ['<rootDir>/examples'],
 };

extension/package.json

@@ -1,9 +1,17 @@
 {
-  "version": "2.17.2",
   "name": "remotedev-redux-devtools-extension",
+  "version": "2.17.2",
   "description": "Redux Developer Tools for debugging application state changes.",
+  "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/extension",
+  "license": "MIT",
+  "author": "Mihail Diordiev <zalmoxisus@gmail.com> (https://github.com/zalmoxisus)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/reduxjs/redux-devtools.git"
+  },
   "scripts": {
     "start": "webpack --config webpack/dev.config.babel.js",
+    "build": "npm run build:extension && npm run build:firefox",
     "build:extension": "rimraf build/extension && webpack --config webpack/wrap.config.babel.js && webpack --config webpack/prod.config.babel.js",
     "build:firefox": "webpack --config webpack/prod.firefox.config.babel.js",
     "build:examples": "babel-node examples/buildAll.js",
@@ -17,73 +25,46 @@
     "docs:watch": "npm run docs:prepare && gitbook serve",
     "docs:publish": "npm run docs:clean && npm run docs:build && cd _book && git init && git commit --allow-empty -m 'update book' && git checkout -b gh-pages && touch .nojekyll && git add . && git commit -am 'update book' && git push git@github.com:zalmoxisus/redux-devtools-extension gh-pages --force",
     "clean": "rimraf build/ && rimraf dev/",
-    "lint": "eslint .",
     "test:app": "cross-env BABEL_ENV=test jest test/app",
     "test:chrome": "jest test/chrome",
     "test:electron": "jest test/electron",
     "test": "npm run test:app && npm run build:extension && npm run test:chrome && npm run test:electron"
   },
-  "repository": {
+  "dependencies": {
-    "type": "git",
+    "@redux-devtools/app": "^1.0.0-8",
-    "url": "https://github.com/zalmoxisus/redux-devtools-extension"
+    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/instrument": "^1.11.0",
+    "@redux-devtools/serialize": "^0.3.0",
+    "@redux-devtools/slider-monitor": "^2.0.0-8",
+    "@redux-devtools/utils": "^1.0.0-6",
+    "jsan": "^3.1.13",
+    "lodash": "^4.17.21",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-icons": "^3.11.0",
+    "react-json-tree": "^0.15.0",
+    "react-redux": "^7.2.4",
+    "redux": "^4.1.0"
   },
-  "homepage": "https://github.com/zalmoxisus/redux-devtools-extension",
-  "author": "Mihail Diordiev <zalmoxisus@gmail.com> (https://github.com/zalmoxisus)",
-  "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.14.5",
-    "@babel/core": "^7.14.6",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-proposal-decorators": "^7.14.5",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.14.5",
-    "@babel/preset-react": "^7.14.5",
     "@babel/register": "^7.14.5",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
     "bestzip": "^2.2.0",
     "chromedriver": "^91.0.1",
-    "copy-webpack-plugin": "^6.4.1",
-    "cross-env": "^7.0.3",
     "electron": "^13.1.2",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-15.4": "^1.4.4",
+    "enzyme-adapter-react-16": "^1.15.6",
-    "eslint": "^7.29.0",
+    "eslint": "^7.28.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "file-loader": "^6.2.0",
     "gitbook-cli": "^2.3.2",
-    "jest": "^26.6.3",
-    "pug-html-loader": "^1.1.5",
-    "raw-loader": "^4.0.2",
-    "react-addons-test-utils": "^15.6.2",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
-    "rimraf": "^3.0.2",
     "selenium-webdriver": "^3.6.0",
-    "sinon-chrome": "^1.2.0",
+    "sinon-chrome": "^1.2.0"
-    "style-loader": "^1.3.0",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12"
-  },
-  "dependencies": {
-    "jsan": "^3.1.13",
-    "lodash": "^4.17.21",
-    "react": "^15.7.0",
-    "react-dom": "^15.7.0",
-    "react-icons": "^3.11.0",
-    "react-json-tree": "^0.15.0",
-    "react-redux": "^5.1.2",
-    "redux": "^3.7.2",
-    "redux-devtools": "^3.7.0",
-    "redux-devtools-instrument": "^1.10.0",
-    "remotedev-app": "^0.10.13-beta",
-    "remotedev-monitor-components": "^0.0.5",
-    "remotedev-serialize": "^0.1.9",
-    "remotedev-slider": "^1.1.3",
-    "remotedev-utils": "0.1.6"
   }
 }

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/inject/pageScriptWrap.js

@@ -7,7 +7,7 @@ if (process.env.NODE_ENV === 'production') {
   (document.head || document.documentElement).appendChild(s);
   s.parentNode.removeChild(s);
 } else {
-  s.src = chrome.extension.getURL('js/page.bundle.js');
+  s.src = chrome.extension.getURL('page.bundle.js');
   s.onload = function () {
     this.parentNode.removeChild(this);
   };

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

extension/test/app/containers/App.spec.js

@@ -18,7 +18,7 @@ describe('App container', () => {
 
   it('should contain an empty action list', () => {
     expect(component.find('ActionList').html()).toMatch(
-      /<div class="actionListRows-[0-9]+"><\/div>/
+      /<div class="actionListRows-[0-9-]+"><\/div>/
     );
   });
 });

extension/test/chrome/extension.spec.js

@@ -4,7 +4,7 @@ import chromedriver from 'chromedriver';
 import { switchMonitorTests, delay } from '../utils/e2e';
 
 const port = 9515;
-const path = resolve('build/extension');
+const path = resolve(__dirname, '..', '..', 'build', 'extension');
 const extensionId = 'lmhkpmbekcpmknklioeibfkpmmfibljd';
 const actionsPattern =
   /^@@INIT(.|\n)+@@reduxReactRouter\/routerDidChange(.|\n)+@@reduxReactRouter\/initRoutes(.|\n)+$/;

extension/test/setup.js

@@ -1,7 +1,7 @@
 require('@babel/polyfill');
 global.chrome = require('sinon-chrome');
 import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-15.4';
+import Adapter from 'enzyme-adapter-react-16';
 
 Enzyme.configure({ adapter: new Adapter() });
 

extension/test/utils/e2e.js

@@ -6,26 +6,28 @@ export const delay = (time) =>
 export const switchMonitorTests = {
   'should switch to Log Monitor': async function () {
     await this.driver
-      .findElement(webdriver.By.xpath('//div[text()="Inspector"]'))
+      .findElement(webdriver.By.xpath('//button[text()="Inspector"]'))
       .click();
     await delay(500); // Wait till menu is fully opened
     await this.driver
-      .findElement(webdriver.By.xpath('//div[text()="Log monitor"]'))
+      .findElement(webdriver.By.xpath('//button[text()="Log monitor"]'))
       .click();
     await delay(500);
     await this.driver.findElement(
-      webdriver.By.xpath('//div[a[text()="Reset"] and .//a[text()="Revert"]]')
+      webdriver.By.xpath(
+        '//div[div[button[text()="Reset"]] and .//div[button[text()="Revert"]]]'
+      )
     );
     await delay(500);
   },
 
   'should switch to Chart Monitor': async function () {
     await this.driver
-      .findElement(webdriver.By.xpath('//div[text()="Log monitor"]'))
+      .findElement(webdriver.By.xpath('//button[text()="Log monitor"]'))
       .click();
     await delay(500); // Wait till menu is fully opened
     await this.driver
-      .findElement(webdriver.By.xpath('//div[text()="Chart"]'))
+      .findElement(webdriver.By.xpath('//button[text()="Chart"]'))
       .click();
     await delay(500);
     await this.driver.findElement(
@@ -36,11 +38,11 @@ export const switchMonitorTests = {
 
   'should switch back to Inspector Monitor': async function () {
     await this.driver
-      .findElement(webdriver.By.xpath('//div[text()="Chart"]'))
+      .findElement(webdriver.By.xpath('//button[text()="Chart"]'))
       .click();
     await delay(1000); // Wait till menu is fully opened
     await this.driver
-      .findElement(webdriver.By.xpath('//div[text()="Inspector"]'))
+      .findElement(webdriver.By.xpath('//button[text()="Inspector"]'))
       .click();
     await delay(1500); // Wait till menu is closed
   },

extension/webpack/base.config.js

@@ -7,7 +7,7 @@ const mock = `${extpath}chromeAPIMock.js`;
 
 const baseConfig = (params) => ({
   // devtool: 'source-map',
-  mode: 'production',
+  mode: params.mode,
   entry: params.input || {
     background: [mock, `${extpath}background/index`],
     options: [mock, `${extpath}options/index`],

extension/webpack/dev.config.babel.js

@@ -3,6 +3,7 @@ import webpack from 'webpack';
 import baseConfig from './base.config';
 
 let config = baseConfig({
+  mode: 'development',
   inputExtra: {
     page: [path.join(__dirname, '../src/browser/extension/inject/pageScript')],
   },

extension/webpack/prod.config.babel.js

@@ -2,6 +2,10 @@ import path from 'path';
 import baseConfig from './base.config';
 
 export default baseConfig({
+  mode: 'production',
+  inputExtra: {
+    page: [path.join(__dirname, '../src/browser/extension/inject/pageScript')],
+  },
   output: { path: path.join(__dirname, '../build/extension') },
   globals: {
     'process.env': {

extension/webpack/prod.firefox.config.babel.js

@@ -2,6 +2,7 @@ import path from 'path';
 import baseConfig from './base.config';
 
 export default baseConfig({
+  mode: 'production',
   output: { path: path.join(__dirname, '../build/extension') },
   globals: {
     'process.env': {

extension/webpack/wrap.config.babel.js

@@ -2,6 +2,7 @@ import path from 'path';
 import baseConfig from './base.config';
 
 export default baseConfig({
+  mode: 'production',
   input: {
     page: [path.join(__dirname, '../src/browser/extension/inject/pageScript')],
   },

jest.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  projects: ['<rootDir>/packages/*'],
+  projects: ['<rootDir>/extension', '<rootDir>/packages/*'],
 };

package.json

@@ -6,6 +6,7 @@
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/preset-env": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
     "@types/jest": "^26.0.23",
     "@types/node": "^14.17.3",
@@ -17,6 +18,7 @@
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^6.3.1",
     "cross-env": "^7.0.3",
     "css-loader": "^4.3.0",
     "eslint": "^7.28.0",
@@ -31,6 +33,7 @@
     "jest": "^26.6.3",
     "lerna": "^3.22.1",
     "prettier": "^2.3.1",
+    "pug-html-loader": "^1.1.5",
     "raw-loader": "^4.0.2",
     "rimraf": "^3.0.2",
     "style-loader": "^1.3.0",
@@ -57,9 +60,10 @@
     "prettify": "prettier --write .",
     "prettier:check": "prettier --check .",
     "test": "jest --onlyChanged",
-    "test:all": "jest"
+    "test:all": "lerna run test"
   },
   "workspaces": [
+    "extension",
     "packages/*",
     "packages/d3-state-visualizer/examples/tree",
     "packages/react-json-tree/examples",