Add menu for open Dev Tools and Chrome Dev Tools

src/main/app.js

@@ -24,6 +24,16 @@ const getWindowPosition = (height, width, display = screen.getPrimaryDisplay())
   }
 }
 
+const handleCloseWindow = w => e => {
+  if (!forceClose) {
+    e.preventDefault()
+
+    if (w !== null) {
+      w.hide()
+    }
+  }
+}
+
 const getDefaultUrl = () =>
   __DEV__
     ? `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT || ''}`
@@ -89,22 +99,16 @@ function createMainWindow() {
   const url = getDefaultUrl()
 
   if (devTools) {
-    window.webContents.openDevTools()
+    window.webContents.openDevTools({
+      mode: 'detach',
+    })
   }
 
   saveWindowSettings(window)
 
   window.loadURL(url)
 
-  window.on('close', e => {
+  window.on('close', handleCloseWindow(window))
-    if (!forceClose) {
-      e.preventDefault()
-
-      if (mainWindow !== null) {
-        mainWindow.hide()
-      }
-    }
-  })
 
   window.webContents.on('devtools-opened', () => {
     window.focus()
@@ -120,16 +124,16 @@ function createDevWindow() {
   const MIN_HEIGHT = 500
   const MIN_WIDTH = 360
 
-  const savedDimensions = db.getIn('settings', 'window.DevWindow.dimensions', {})
   const savedPositions = db.getIn('settings', 'window.DevWindow.positions', null)
 
-  const width = savedDimensions.width || MIN_WIDTH
+  const width = MIN_WIDTH
-  const height = savedDimensions.height || MIN_HEIGHT
+  const height = MIN_HEIGHT
 
   const windowOptions = {
     ...defaultWindowOptions,
     ...(savedPositions !== null ? savedPositions : {}),
     fullscreenable: false,
+    resizable: false,
     height,
     minHeight: MIN_HEIGHT,
     minWidth: MIN_WIDTH,
@@ -149,6 +153,8 @@ function createDevWindow() {
 
   window.loadURL(`${url}/#/dev`)
 
+  window.on('close', handleCloseWindow(window))
+
   window.on('ready-to-show', () => {
     window.show()
   })

src/main/menu.js

@@ -1,30 +1,69 @@
-import { app, Menu } from 'electron'
+import { BrowserWindow, app, Menu } from 'electron'
+
+const props = (predicate, values, defaultValue = {}) => (predicate ? values : defaultValue)
 
 const template = [
-  ...(process.platform === 'darwin'
+  ...props(
-    ? [
+    process.platform === 'darwin',
-        {
+    [
-          label: app.getName(),
+      {
-          submenu: [
+        label: app.getName(),
-            { role: 'hide' },
+        submenu: [
-            { role: 'hideothers' },
+          { role: 'hide' },
-            { role: 'unhide' },
+          { role: 'hideothers' },
+          { role: 'unhide' },
+          { type: 'separator' },
+          { role: 'quit' },
+        ],
+      },
+    ],
+    [],
+  ),
+  ...props(process.platform === 'darwin' || __DEV__, [
+    {
+      role: 'window',
+      submenu: [
+        ...props(
+          __DEV__,
+          [
+            {
+              label: 'App Dev Tools',
+              click() {
+                const devWindow = BrowserWindow.getAllWindows().find(w => w.name === 'DevWindow')
+                if (devWindow) {
+                  devWindow.show()
+                }
+              },
+            },
+            {
+              label: 'Main Window Dev Tools',
+              click() {
+                const mainWindow = BrowserWindow.getAllWindows().find(w => w.name === 'MainWindow')
+                if (mainWindow) {
+                  mainWindow.openDevTools({
+                    mode: 'detach',
+                  })
+                }
+              },
+            },
             { type: 'separator' },
-            { role: 'quit' },
           ],
-        },
+          [],
-        {
+        ),
-          role: 'window',
+        ...props(
-          submenu: [
+          process.platform === 'darwin',
+          [
             { role: 'close' },
             { role: 'minimize' },
             { role: 'zoom' },
             { type: 'separator' },
             { role: 'front' },
           ],
-        },
+          [],
-      ]
+        ),
-    : []),
+      ],
+    },
+  ]),
 ]
 
 export default Menu.buildFromTemplate(template)