fix(gui): Re-enable application menu (#1888)

* fix(gui): Re-enable application menu

This re-enables the application menu to allow for OS native shortcuts
to work again (i.e. hide/minimize window), which also allows us to
get rid of the global-shortcuts hack to prevent window reloads.

Change-Type: patch
Changelog-Entry: Fix disabled native OS window shortcuts

* refactor(gui): Update kbd shortcut comment to be less specific

lib/gui/app.js

@@ -346,6 +346,13 @@ app.controller('StateController', function ($rootScope, $scope) {
   this.currentName = null
 })
 
+// Handle keyboard shortcut to open the settings
+app.run(($state) => {
+  electron.ipcRenderer.on('menu:preferences', () => {
+    $state.go('settings')
+  })
+})
+
 // Ensure user settings are loaded before
 // we bootstrap the Angular.js application
 angular.element(document).ready(() => {

lib/gui/etcher.js

@@ -17,7 +17,6 @@
 'use strict'
 
 const electron = require('electron')
-const _ = require('lodash')
 const path = require('path')
 const EXIT_CODES = require('../shared/exit-codes')
 let mainWindow = null
@@ -35,8 +34,7 @@ electron.app.on('before-quit', () => {
 })
 
 electron.app.on('ready', () => {
-  // No menu bar
+  electron.Menu.setApplicationMenu(require('./menu'))
-  electron.Menu.setApplicationMenu(null)
 
   mainWindow = new electron.BrowserWindow({
     width: 800,
@@ -44,7 +42,10 @@ electron.app.on('ready', () => {
     useContentSize: true,
     show: false,
     resizable: false,
+    maximizable: false,
     fullscreen: false,
+    fullscreenable: false,
+    autoHideMenuBar: true,
     titleBarStyle: 'hidden-inset',
     icon: path.join(__dirname, '..', '..', 'assets', 'icon.png')
   })
@@ -56,34 +57,6 @@ electron.app.on('ready', () => {
     mainWindow = null
   })
 
-  // For some reason, Electron shortcuts are registered
-  // globally, which means that the app listers for shorcuts
-  // even if its not currently focused, potentially interferring
-  // with shorcuts registered by other applications.
-  // As a workaround, we register all shortcuts when the windows
-  // gains focus, and unregister them when the windows loses focus.
-  // See http://electron.atom.io/docs/api/global-shortcut/
-
-  mainWindow.on('focus', () => {
-    electron.globalShortcut.register('CmdOrCtrl+Alt+I', () => {
-      mainWindow.webContents.openDevTools({
-        mode: 'detach'
-      })
-    })
-
-    // Disable refreshing the browser window
-    // This is supposed to be handled by the `will-navigate`
-    // event, however there seems to be an issue where such
-    // event is not fired in macOS
-    // See: https://github.com/electron/electron/issues/8841
-    electron.globalShortcut.register('CmdOrCtrl+R', _.noop)
-    electron.globalShortcut.register('F5', _.noop)
-  })
-
-  mainWindow.on('blur', () => {
-    electron.globalShortcut.unregisterAll()
-  })
-
   // Prevent the user from being allowed to zoom-in the application.
   //
   // This function should be called on the renderer process. We use

lib/gui/menu.js

@@ -0,0 +1,116 @@
+/*
+ * Copyright 2017 resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict'
+
+const electron = require('electron')
+
+const menuTemplate = [
+  {
+    role: 'editMenu'
+  },
+  {
+    label: 'View',
+    submenu: [
+      {
+        role: 'toggledevtools',
+        click () {
+          const window = electron.BrowserWindow.getFocusedWindow()
+          if (window) {
+            window.webContents.openDevTools({
+              mode: 'detach'
+            })
+          }
+        }
+      }
+    ]
+  },
+  {
+    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: electron.app.getName(),
+    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: electron.app.getName(),
+    submenu: [ {
+      label: 'Settings',
+      click () {
+        const window = electron.BrowserWindow.getFocusedWindow()
+        if (window) {
+          window.webContents.send('menu:preferences')
+        }
+      }
+    }, {
+      role: 'quit'
+    } ]
+  })
+}
+
+module.exports = electron.Menu.buildFromTemplate(menuTemplate)