Use monitor app for devpanel

Author: zalmoxisus

src/app/containers/App.js

@@ -42,38 +42,38 @@ export default class App extends Component {
           </div>
         }
         <DevTools monitor={monitor} store={store} key={`${monitor}-${store.instance}`} />
-        {chrome.runtime.openOptionsPage ?
-          <div style={styles.buttonBar}>
-            {monitorPosition !== 'left' ?
-              <Button
-                Icon={LeftIcon}
-                onClick={() => { this.openWindow('left'); }}
-              />
-            : null }
-            {monitorPosition !== 'right' ?
-              <Button
-                Icon={RightIcon}
-                onClick={() => { this.openWindow('right'); }}
-              />
-            : null }
-            {monitorPosition !== 'bottom' ?
-              <Button
-                Icon={BottomIcon}
-                onClick={() => { this.openWindow('bottom'); }}
-              />
-            : null }
-            <ImportButton importState={store.importState} />
-            <ExportButton exportState={store.getState} />
+        <div style={styles.buttonBar}>
+          {monitorPosition !== 'left' &&
+            <Button
+              Icon={LeftIcon}
+              onClick={() => { this.openWindow('left'); }}
+            />
+          }
+          {monitorPosition !== 'right' &&
             <Button
-              Icon={RemoteIcon}
-              onClick={() => { this.openWindow('remote'); }}
-            >Remote</Button>
+              Icon={RightIcon}
+              onClick={() => { this.openWindow('right'); }}
+            />
+          }
+          {monitorPosition !== 'bottom' &&
+            <Button
+              Icon={BottomIcon}
+              onClick={() => { this.openWindow('bottom'); }}
+            />
+          }
+          <ImportButton importState={store.importState} />
+          <ExportButton exportState={store.getState} />
+          <Button
+            Icon={RemoteIcon}
+            onClick={() => { this.openWindow('remote'); }}
+          >Remote</Button>
+          {chrome.runtime.openOptionsPage &&
             <Button
               Icon={SettingsIcon}
               onClick={() => { chrome.runtime.openOptionsPage(); }}
             >Settings</Button>
-          </div>
-        : null }
+          }
+        </div>
       </div>
     );
   }

src/app/containers/ConnectedApp.js

@@ -0,0 +1,4 @@
+import { connect } from 'react-redux';
+import App from './App';
+
+export default connect(state => state)(App);

src/browser/extension/devpanel/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import updateState from 'remotedev-app/lib/store/updateState';
 import createDevStore from 'remotedev-app/lib/store/createDevStore';
-import DevTools from '../../../app/containers/DevTools';
+import ConnectedApp from '../../../app/containers/ConnectedApp';
 
 const backgroundPageConnection = connect();
 
@@ -25,7 +25,7 @@ let rendered = false;
 function showDevTools() {
   if (!rendered) {
     render(
-      <DevTools store={store} />,
+      <ConnectedApp store={store} />,
       document.getElementById('root')
     );
     rendered = true;

src/browser/extension/window/index.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { connect } from 'react-redux';
-import App from '../../../app/containers/App';
+import ConnectedApp from '../../../app/containers/ConnectedApp';
 
 chrome.runtime.getBackgroundPage(background => {
   const { store, unsubscribe } = background.getStore();
-  const ConnectedApp = connect(state => state)(App);
   render(
     <ConnectedApp store={store} />,
     document.getElementById('root')