Merge pull request #1997 from resin-io/fix-devtools-detach

fix(gui): Fix DevTools opening in docked mode

lib/gui/etcher.js

@@ -19,6 +19,7 @@
 const electron = require('electron')
 const path = require('path')
 const EXIT_CODES = require('../shared/exit-codes')
+const buildWindowMenu = require('./menu')
 let mainWindow = null
 
 electron.app.on('window-all-closed', electron.app.quit)
@@ -34,8 +35,6 @@ electron.app.on('before-quit', () => {
 })
 
 electron.app.on('ready', () => {
-  electron.Menu.setApplicationMenu(require('./menu'))
-
   mainWindow = new electron.BrowserWindow({
     width: 800,
     height: 380,
@@ -50,6 +49,8 @@ electron.app.on('ready', () => {
     icon: path.join(__dirname, '..', '..', 'assets', 'icon.png')
   })
 
+  buildWindowMenu(mainWindow)
+
   // Prevent flash of white when starting the application
   mainWindow.on('ready-to-show', mainWindow.show)
 

lib/gui/menu.js

@@ -19,99 +19,130 @@
 const electron = require('electron')
 const packageJson = require('../../package.json')
 
-const menuTemplate = [
-  {
-    role: 'editMenu'
-  },
-  {
-    label: 'View',
-    submenu: [
-      {
-        role: 'toggledevtools',
-        click () {
-          const window = electron.BrowserWindow.getFocusedWindow()
-          if (window) {
-            window.webContents.openDevTools({
-              mode: 'detach'
-            })
+/* eslint-disable no-magic-numbers */
+
+/**
+ * @summary Builds a native application menu for a given window
+ * @param {electron.BrowserWindow} window - BrowserWindow instance
+ * @example
+ * buildWindowMenu(mainWindow)
+ */
+const buildWindowMenu = (window) => {
+  /**
+   * @summary Toggle the main window's devtools
+   * @example
+   * toggleDevTools()
+   */
+  const toggleDevTools = () => {
+    if (!window) {
+      return
+    }
+
+    // NOTE: We can't use `webContents.toggleDevTools()` here,
+    // as we need to force detached mode
+    if (window.webContents.isDevToolsOpened()) {
+      window.webContents.closeDevTools()
+    } else {
+      window.webContents.openDevTools({
+        mode: 'detach'
+      })
+    }
+  }
+
+  /**
+   * @summary Open the main window's settings page
+   * @example
+   * showSettings()
+   */
+  const showSettings = () => {
+    if (window) {
+      window.webContents.send('menu:preferences')
+    }
+  }
+
+  const menuTemplate = [
+    {
+      role: 'editMenu'
+    },
+    {
+      label: 'View',
+      submenu: [
+        {
+          label: 'Toggle Developer Tools',
+          accelerator: process.platform === 'darwin'
+            ? 'Command+Alt+I' : 'Control+Shift+I',
+          click: toggleDevTools
+        }
+      ]
+    },
+    {
+      role: 'windowMenu'
+    },
+    {
+      role: 'help',
+      submenu: [
+        {
+          label: 'Etcher Pro',
+          click () {
+            electron.shell.openExternal('https://etcher.io/pro')
+          }
+        },
+        {
+          label: 'Etcher Website',
+          click () {
+            electron.shell.openExternal('https://etcher.io')
+          }
+        },
+        {
+          label: 'Report an issue',
+          click () {
+            electron.shell.openExternal('https://github.com/resin-io/etcher/issues')
           }
         }
-      }
-    ]
-  },
-  {
-    role: 'windowMenu'
-  },
-  {
-    role: 'help',
-    submenu: [
-      {
-        label: 'Etcher Pro',
-        click () {
-          electron.shell.openExternal('https://etcher.io/pro')
-        }
-      },
-      {
-        label: 'Etcher Website',
-        click () {
-          electron.shell.openExternal('https://etcher.io')
-        }
-      },
-      {
-        label: 'Report an issue',
-        click () {
-          electron.shell.openExternal('https://github.com/resin-io/etcher/issues')
-        }
-      }
-    ]
-  }
-]
+      ]
+    }
+  ]
 
-if (process.platform === 'darwin') {
-  menuTemplate.unshift({
-    label: packageJson.displayName,
-    submenu: [ {
-      role: 'about'
-    }, {
-      type: 'separator'
-    }, {
-      label: 'Preferences',
-      accelerator: 'Command+,',
-      click () {
-        const window = electron.BrowserWindow.getFocusedWindow()
-        if (window) {
-          window.webContents.send('menu:preferences')
-        }
-      }
-    }, {
-      type: 'separator'
-    }, {
-      role: 'hide'
-    }, {
-      role: 'hideothers'
-    }, {
-      role: 'unhide'
-    }, {
-      type: 'separator'
-    }, {
-      role: 'quit'
-    } ]
-  })
-} else {
-  menuTemplate.unshift({
-    label: packageJson.displayName,
-    submenu: [ {
-      label: 'Settings',
-      click () {
-        const window = electron.BrowserWindow.getFocusedWindow()
-        if (window) {
-          window.webContents.send('menu:preferences')
-        }
-      }
-    }, {
-      role: 'quit'
-    } ]
-  })
+  if (process.platform === 'darwin') {
+    menuTemplate.unshift({
+      label: packageJson.displayName,
+      submenu: [ {
+        role: 'about'
+      }, {
+        type: 'separator'
+      }, {
+        label: 'Preferences',
+        accelerator: 'Command+,',
+        click: showSettings
+      }, {
+        type: 'separator'
+      }, {
+        role: 'hide'
+      }, {
+        role: 'hideothers'
+      }, {
+        role: 'unhide'
+      }, {
+        type: 'separator'
+      }, {
+        role: 'quit'
+      } ]
+    })
+  } else {
+    menuTemplate.unshift({
+      label: packageJson.displayName,
+      submenu: [ {
+        label: 'Settings',
+        click: showSettings
+      }, {
+        role: 'quit'
+      } ]
+    })
+  }
+
+  const menu = electron.Menu.buildFromTemplate(menuTemplate)
+
+  electron.Menu.setApplicationMenu(menu)
 }
 
-module.exports = electron.Menu.buildFromTemplate(menuTemplate)
+module.exports = buildWindowMenu