Implement toggle React/Redux DevTools on menu

jhen0409 · Jun 2, 2016 · 0482a4d · 0482a4d
1 parent ad4906b
commit 0482a4d
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 6 deletions.
diff --git a/app/containers/App.js b/app/containers/App.js
@@ -7,6 +7,8 @@ import Debugger from './Debugger';
 import ReduxDevTools from './ReduxDevTools';
 import ReactDevTools from './ReactDevTools';
 
+import { ipcRenderer } from 'electron';
+
 const styles = {
   container: {
     width: '100%',
@@ -32,6 +34,29 @@ const styles = {
     bottom: 0,
     backgroundColor: 'white',
   },
+  wrapBackground: {
+    display: 'flex',
+    position: 'fixed',
+    width: '100%',
+    height: '100%',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    color: '#ccc',
+    fontSize: '25px',
+    '-webkit-user-select': 'none',
+  },
+  text: {
+    textAlign: 'center',
+    margin: '7px',
+  },
+  shortcut: {
+    fontFamily: 'Monaco, monospace',
+    color: '#ddd',
+    backgroundColor: '#555',
+    padding: '4px',
+    borderRadius: '4px',
+    letterSpacing: '3px',
+  }
 };
 
 @connect(
@@ -41,16 +66,67 @@ const styles = {
   dispatch => bindActionCreators(debuggerActions, dispatch)
 )
 export default class App extends Component {
+  state = {
+    react: true,
+    redux: true,
+  };
+
+  componentDidMount() {
+    ipcRenderer.on('toggle-devtools', (e, name) => {
+      this.setState({ [name]: !this.state[name] });
+    });
+  }
+
+  componentWillUnmount() {
+    ipcRenderer.removeAllListeners('toggle-devtools');
+  }
+
+  renderReduxDevTools() {
+    const wrapStyle = {
+      ...styles.wrapReduxPanel,
+      ...(this.state.react ? {} : { height: '100%' }),
+      ...(this.state.redux ? {} : { display: 'none' }),
+    };
+    return (
+      <div style={wrapStyle}>
+        <ReduxDevTools style={styles.reduxPanel} />
+      </div>
+    );
+  }
+
+  renderReactDevTools() {
+    const wrapStyle = {
+      ...styles.wrapReactPanel,
+      ...(this.state.redux ? {} : { height: '100%' }),
+      ...(this.state.react ? {} : { display: 'none' }),
+    };
+    return (
+      <div style={wrapStyle}>
+        <ReactDevTools />
+      </div>
+    );
+  }
+
+  renderBackground() {
+    return (
+      <div style={styles.wrapBackground}>
+        <div style={styles.text}>
+          <span style={styles.shortcut}>⌥⌘K</span> to toggle Redux DevTools
+        </div>
+        <div style={styles.text}>
+          <span style={styles.shortcut}>⌥⌘J</span> to toggle React DevTools
+        </div>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div style={styles.container}>
         <Debugger />
-        <div style={styles.wrapReduxPanel}>
-          <ReduxDevTools style={styles.reduxPanel} />
-        </div>
-        <div style={styles.wrapReactPanel}>
-          <ReactDevTools />
-        </div>
+        {this.renderReduxDevTools()}
+        {this.renderReactDevTools()}
+        {!this.state.react && !this.state.redux && this.renderBackground()}
       </div>
     );
   }

diff --git a/electron/main.js b/electron/main.js
@@ -111,6 +111,18 @@ app.on('ready', () => {
         click() {
           mainWindow.toggleDevTools();
         },
+      }, {
+        label: 'Toggle React DevTools',
+        accelerator: 'Alt+Command+J',
+        click() {
+          mainWindow.webContents.send('toggle-devtools', 'react');
+        },
+      }, {
+        label: 'Toggle Redux DevTools',
+        accelerator: 'Alt+Command+K',
+        click() {
+          mainWindow.webContents.send('toggle-devtools', 'redux');
+        },
       }],
     }, {
       label: 'Window',