Add buttons for opening monotor windows

Author: zalmoxisus

src/app/containers/App.js

@@ -1,10 +1,17 @@
 import React, { cloneElement, Component, PropTypes } from 'react';
+import { sendToBg } from 'crossmessaging';
 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 LeftIcon from 'react-icons/lib/md/border-left';
+import RightIcon from 'react-icons/lib/md/border-right';
+import BottomIcon from 'react-icons/lib/md/border-bottom';
 import Monitor from './Monitor';
 
+let monitorPosition;
+if (location.hash) monitorPosition = location.hash.substr(location.hash.indexOf('-') + 1);
+
 export default class App extends Component {
   static propTypes = {
     store: PropTypes.object
@@ -17,6 +24,10 @@ export default class App extends Component {
     this.props.store.setInstance(this.props.store.instance, true);
   };
 
+  openWindow = (position) => {
+    sendToBg({ type: 'OPEN', position });
+  };
+
   render() {
     const { store, ...childProps } = this.props;
     return (
@@ -29,6 +40,24 @@ export default class App extends Component {
         <Monitor {...childProps} />
         {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 }
             <Button
               Icon={SettingsIcon}
               onClick={() => { chrome.runtime.openOptionsPage(); }}

src/app/containers/Monitor.js

@@ -5,8 +5,9 @@ import ChartMonitor from 'redux-devtools-chart-monitor';
 import SliderMonitor from 'redux-slider-monitor';
 
 function getMonitor() {
-  const monitorType = location.hash.substr(1);
-  switch (monitorType) {
+  if (!location.hash) return LogMonitor;
+  const monitorTypes = location.hash.substr(1).split('/');
+  switch (monitorTypes[0]) {
     case 'SliderMonitor': return SliderMonitor;
     case 'ChartMonitor': return ChartMonitor;
     default: return LogMonitor;

src/browser/extension/background/openWindow.js

@@ -25,7 +25,7 @@ export default function openDevToolsWindow(position) {
       };
       if (action === 'open') {
         getMonitorName(position, monitorName => {
-          options.url = chrome.extension.getURL(url + '#' + monitorName);
+          options.url = chrome.extension.getURL(url + '#' + monitorName + '/' + position);
           chrome.windows.create(options, (win) => {
             windows[position] = win.id;
           });