feat: add fileMenu / viewMenu / appMenu roles (#16328)

lib/browser/api/menu-item-roles.js

@@ -2,14 +2,18 @@
 
 const { app } = require('electron')
 
+const isMac = process.platform === 'darwin'
+const isWindows = process.platform === 'win32'
+const isLinux = process.platform === 'linux'
+
 const roles = {
   about: {
     get label () {
-      return process.platform === 'linux' ? 'About' : `About ${app.getName()}`
+      return isLinux ? 'About' : `About ${app.getName()}`
     }
   },
   close: {
-    label: process.platform === 'darwin' ? 'Close Window' : 'Close',
+    label: isMac ? 'Close Window' : 'Close',
     accelerator: 'CommandOrControl+W',
     windowMethod: 'close'
   },
@@ -78,12 +82,12 @@ const roles = {
         default: return 'Quit'
       }
     },
-    accelerator: process.platform === 'win32' ? null : 'CommandOrControl+Q',
+    accelerator: isWindows ? null : 'CommandOrControl+Q',
     appMethod: 'quit'
   },
   redo: {
     label: 'Redo',
-    accelerator: process.platform === 'win32' ? 'Control+Y' : 'Shift+CommandOrControl+Z',
+    accelerator: isWindows ? 'Control+Y' : 'Shift+CommandOrControl+Z',
     webContentsMethod: 'redo'
   },
   reload: {
@@ -122,13 +126,13 @@ const roles = {
   },
   toggledevtools: {
     label: 'Toggle Developer Tools',
-    accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
+    accelerator: isMac ? 'Alt+Command+I' : 'Ctrl+Shift+I',
     nonNativeMacOSRole: true,
     windowMethod: 'toggleDevTools'
   },
   togglefullscreen: {
     label: 'Toggle Full Screen',
-    accelerator: process.platform === 'darwin' ? 'Control+Command+F' : 'F11',
+    accelerator: isMac ? 'Control+Command+F' : 'F11',
     windowMethod: (window) => {
       window.setFullScreen(!window.isFullScreen())
     }
@@ -167,79 +171,95 @@ const roles = {
       })
     }
   },
-  // Edit submenu (should fit both Mac & Windows)
+  // App submenu should be used for Mac only
+  appmenu: {
+    get label () {
+      return app.getName()
+    },
+    submenu: [
+      { role: 'about' },
+      { type: 'separator' },
+      { role: 'services' },
+      { type: 'separator' },
+      { role: 'hide' },
+      { role: 'hideothers' },
+      { role: 'unhide' },
+      { type: 'separator' },
+      { role: 'quit' }
+    ]
+  },
+  // File submenu
+  filemenu: {
+    label: 'File',
+    submenu: [
+      isMac ? { role: 'close' } : { role: 'quit' }
+    ]
+  },
+  // Edit submenu
   editmenu: {
     label: 'Edit',
     submenu: [
-      {
-        role: 'undo'
-      },
-      {
-        role: 'redo'
-      },
-      {
-        type: 'separator'
-      },
-      {
-        role: 'cut'
-      },
-      {
-        role: 'copy'
-      },
-      {
-        role: 'paste'
-      },
-
-      process.platform === 'darwin' ? {
-        role: 'pasteAndMatchStyle'
-      } : null,
-
-      {
-        role: 'delete'
-      },
-
-      process.platform === 'win32' ? {
-        type: 'separator'
-      } : null,
-
-      {
-        role: 'selectAll'
-      }
+      { role: 'undo' },
+      { role: 'redo' },
+      { type: 'separator' },
+      { role: 'cut' },
+      { role: 'copy' },
+      { role: 'paste' },
+      ...(isMac ? [
+        { role: 'pasteAndMatchStyle' },
+        { role: 'delete' },
+        { role: 'selectAll' },
+        { type: 'separator' },
+        {
+          label: 'Speech',
+          submenu: [
+            { role: 'startspeaking' },
+            { role: 'stopspeaking' }
+          ]
+        }
+      ] : [
+        { role: 'delete' },
+        { type: 'separator' },
+        { role: 'selectAll' }
+      ])
     ]
   },
-
-  // Window submenu should be used for Mac only
+  // View submenu
+  viewmenu: {
+    label: 'View',
+    submenu: [
+      { role: 'reload' },
+      { role: 'forcereload' },
+      { role: 'toggledevtools' },
+      { type: 'separator' },
+      { role: 'resetzoom' },
+      { role: 'zoomin' },
+      { role: 'zoomout' },
+      { type: 'separator' },
+      { role: 'togglefullscreen' }
+    ]
+  },
+  // Window submenu
   windowmenu: {
     label: 'Window',
     submenu: [
-      {
-        role: 'minimize'
-      },
-      {
-        role: 'zoom'
-      },
-      process.platform !== 'darwin' ? {
-        label: 'close'
-      } : null,
-      process.platform === 'darwin' ? {
-        type: 'separator'
-      } : null,
-      process.platform === 'darwin' ? {
-        role: 'front'
-      } : null,
-      process.platform === 'darwin' ? {
-        type: 'separator'
-      } : null,
-      process.platform === 'darwin' ? {
-        role: 'window'
-      } : null
+      { role: 'minimize' },
+      { role: 'zoom' },
+      ...(isMac ? [
+        { type: 'separator' },
+        { role: 'front' },
+        { type: 'separator' },
+        { role: 'window' }
+      ] : [
+        { role: 'close' }
+      ])
     ]
   }
 }
 
 const canExecuteRole = (role) => {
   if (!roles.hasOwnProperty(role)) return false
-  if (process.platform !== 'darwin') return true
+  if (!isMac) return true
 
   // macOS handles all roles natively except for a few
   return roles[role].nonNativeMacOSRole

lib/browser/api/menu.js

@@ -159,13 +159,13 @@ Menu.buildFromTemplate = function (template) {
   if (!Array.isArray(template)) {
     throw new TypeError('Invalid template for Menu: Menu template must be an array')
   }
-  const menu = new Menu()
   if (!areValidTemplateItems(template)) {
     throw new TypeError('Invalid template for MenuItem: must have at least one of label, role or type')
   }
   const filtered = removeExtraSeparators(template)
   const sorted = sortTemplate(filtered)
 
+  const menu = new Menu()
   sorted.forEach((item) => menu.append(new MenuItem(item)))
 
   return menu