App/menu: cleanup, typing, properly hide devtools when asked (fix #842)

app/src/components/menu.ts

@@ -1,4 +1,10 @@
-import { Menu, clipboard, globalShortcut, shell } from 'electron';
+import {
+  Menu,
+  clipboard,
+  globalShortcut,
+  shell,
+  MenuItemConstructorOptions,
+} from 'electron';
 
 export function createMenu({
   nativefierVersion,
@@ -18,191 +24,196 @@ export function createMenu({
       ? 'Reset Zoom'
       : `Reset Zoom (to ${zoomBuildTimeValue * 100}%, set at build time)`;
 
-  const template: any[] = [
+  const editMenu: MenuItemConstructorOptions = {
-    {
+    label: '&Edit',
-      label: '&Edit',
+    submenu: [
-      submenu: [
+      {
-        {
+        label: 'Undo',
-          label: 'Undo',
+        accelerator: 'CmdOrCtrl+Z',
-          accelerator: 'CmdOrCtrl+Z',
+        role: 'undo',
-          role: 'undo',
+      },
+      {
+        label: 'Redo',
+        accelerator: 'Shift+CmdOrCtrl+Z',
+        role: 'redo',
+      },
+      {
+        type: 'separator',
+      },
+      {
+        label: 'Cut',
+        accelerator: 'CmdOrCtrl+X',
+        role: 'cut',
+      },
+      {
+        label: 'Copy',
+        accelerator: 'CmdOrCtrl+C',
+        role: 'copy',
+      },
+      {
+        label: 'Copy Current URL',
+        accelerator: 'CmdOrCtrl+L',
+        click: () => {
+          const currentURL = getCurrentUrl();
+          clipboard.writeText(currentURL);
         },
-        {
+      },
-          label: 'Redo',
+      {
-          accelerator: 'Shift+CmdOrCtrl+Z',
+        label: 'Paste',
-          role: 'redo',
+        accelerator: 'CmdOrCtrl+V',
-        },
+        role: 'paste',
-        {
+      },
-          type: 'separator',
+      {
-        },
+        label: 'Paste and Match Style',
-        {
+        accelerator: 'CmdOrCtrl+Shift+V',
-          label: 'Cut',
+        role: 'pasteAndMatchStyle',
-          accelerator: 'CmdOrCtrl+X',
+      },
-          role: 'cut',
+      {
-        },
+        label: 'Select All',
-        {
+        accelerator: 'CmdOrCtrl+A',
-          label: 'Copy',
+        role: 'selectAll',
-          accelerator: 'CmdOrCtrl+C',
+      },
-          role: 'copy',
+      {
-        },
+        label: 'Clear App Data',
-        {
+        click: clearAppData,
-          label: 'Copy Current URL',
+      },
-          accelerator: 'CmdOrCtrl+L',
+    ],
-          click: () => {
+  };
-            const currentURL = getCurrentUrl();
-            clipboard.writeText(currentURL);
-          },
-        },
-        {
-          label: 'Paste',
-          accelerator: 'CmdOrCtrl+V',
-          role: 'paste',
-        },
-        {
-          label: 'Paste and Match Style',
-          accelerator: 'CmdOrCtrl+Shift+V',
-          role: 'pasteandmatchstyle',
-        },
-        {
-          label: 'Select All',
-          accelerator: 'CmdOrCtrl+A',
-          role: 'selectall',
-        },
-        {
-          label: 'Clear App Data',
-          click: clearAppData,
-        },
-      ],
-    },
-    {
-      label: '&View',
-      submenu: [
-        {
-          label: 'Back',
-          accelerator: (() => {
-            globalShortcut.register('Alt+Left', goBack);
-            return 'CmdOrCtrl+[';
-          })(),
-          click: goBack,
-        },
-        {
-          label: 'Forward',
-          accelerator: (() => {
-            globalShortcut.register('Alt+Right', goForward);
-            return 'CmdOrCtrl+]';
-          })(),
-          click: goForward,
-        },
-        {
-          label: 'Reload',
-          accelerator: 'CmdOrCtrl+R',
-          click: (item, focusedWindow) => {
-            if (focusedWindow) {
-              focusedWindow.reload();
-            }
-          },
-        },
-        {
-          type: 'separator',
-        },
-        {
-          label: 'Toggle Full Screen',
-          accelerator: (() => {
-            if (process.platform === 'darwin') {
-              return 'Ctrl+Cmd+F';
-            }
-            return 'F11';
-          })(),
-          click: (item, focusedWindow) => {
-            if (focusedWindow) {
-              focusedWindow.setFullScreen(!focusedWindow.isFullScreen());
-            }
-          },
-        },
-        {
-          label: 'Zoom In',
-          accelerator: (() => {
-            globalShortcut.register('CmdOrCtrl+numadd', zoomIn);
-            return 'CmdOrCtrl+=';
-          })(),
-          click: zoomIn,
-        },
-        {
-          label: 'Zoom Out',
-          accelerator: (() => {
-            globalShortcut.register('CmdOrCtrl+numsub', zoomOut);
-            return 'CmdOrCtrl+-';
-          })(),
-          click: zoomOut,
-        },
-        {
-          label: zoomResetLabel,
-          accelerator: (() => {
-            globalShortcut.register('CmdOrCtrl+num0', zoomReset);
-            return 'CmdOrCtrl+0';
-          })(),
-          click: zoomReset,
-        },
-        {
-          label: 'Toggle Developer Tools',
-          accelerator: (() => {
-            if (process.platform === 'darwin') {
-              return 'Alt+Cmd+I';
-            }
-            return 'Ctrl+Shift+I';
-          })(),
-          click: (item, focusedWindow) => {
-            if (focusedWindow) {
-              focusedWindow.toggleDevTools();
-            }
-          },
-        },
-      ],
-    },
-    {
-      label: '&Window',
-      role: 'window',
-      submenu: [
-        {
-          label: 'Minimize',
-          accelerator: 'CmdOrCtrl+M',
-          role: 'minimize',
-        },
-        {
-          label: 'Close',
-          accelerator: 'CmdOrCtrl+W',
-          role: 'close',
-        },
-      ],
-    },
-    {
-      label: '&Help',
-      role: 'help',
-      submenu: [
-        {
-          label: `Built with Nativefier v${nativefierVersion}`,
-          click: () => {
-            shell.openExternal('https://github.com/jiahaog/nativefier');
-          },
-        },
-        {
-          label: 'Report an Issue',
-          click: () => {
-            shell.openExternal('https://github.com/jiahaog/nativefier/issues');
-          },
-        },
-      ],
-    },
-  ];
 
-  if (disableDevTools) {
+  const viewMenu: MenuItemConstructorOptions = {
-    // remove last item (dev tools) from menu > view
+    label: '&View',
-    const { submenu } = template[1];
+    submenu: [
-    submenu.splice(submenu.length - 1, 1);
+      {
+        label: 'Back',
+        accelerator: (() => {
+          globalShortcut.register('Alt+Left', goBack);
+          return 'CmdOrCtrl+[';
+        })(),
+        click: goBack,
+      },
+      {
+        label: 'Forward',
+        accelerator: (() => {
+          globalShortcut.register('Alt+Right', goForward);
+          return 'CmdOrCtrl+]';
+        })(),
+        click: goForward,
+      },
+      {
+        label: 'Reload',
+        accelerator: 'CmdOrCtrl+R',
+        click: (item, focusedWindow) => {
+          if (focusedWindow) {
+            focusedWindow.reload();
+          }
+        },
+      },
+      {
+        type: 'separator',
+      },
+      {
+        label: 'Toggle Full Screen',
+        accelerator: (() => {
+          if (process.platform === 'darwin') {
+            return 'Ctrl+Cmd+F';
+          }
+          return 'F11';
+        })(),
+        click: (item, focusedWindow) => {
+          if (focusedWindow) {
+            focusedWindow.setFullScreen(!focusedWindow.isFullScreen());
+          }
+        },
+      },
+      {
+        label: 'Zoom In',
+        accelerator: (() => {
+          globalShortcut.register('CmdOrCtrl+numadd', zoomIn);
+          return 'CmdOrCtrl+=';
+        })(),
+        click: zoomIn,
+      },
+      {
+        label: 'Zoom Out',
+        accelerator: (() => {
+          globalShortcut.register('CmdOrCtrl+numsub', zoomOut);
+          return 'CmdOrCtrl+-';
+        })(),
+        click: zoomOut,
+      },
+      {
+        label: zoomResetLabel,
+        accelerator: (() => {
+          globalShortcut.register('CmdOrCtrl+num0', zoomReset);
+          return 'CmdOrCtrl+0';
+        })(),
+        click: zoomReset,
+      },
+    ],
+  };
+
+  if (!disableDevTools) {
+    (viewMenu.submenu as MenuItemConstructorOptions[]).push(
+      {
+        type: 'separator',
+      },
+      {
+        label: 'Toggle Developer Tools',
+        accelerator: (() => {
+          if (process.platform === 'darwin') {
+            return 'Alt+Cmd+I';
+          }
+          return 'Ctrl+Shift+I';
+        })(),
+        click: (item, focusedWindow) => {
+          if (focusedWindow) {
+            focusedWindow.webContents.toggleDevTools();
+          }
+        },
+      },
+    );
   }
 
+  const windowMenu: MenuItemConstructorOptions = {
+    label: '&Window',
+    role: 'window',
+    submenu: [
+      {
+        label: 'Minimize',
+        accelerator: 'CmdOrCtrl+M',
+        role: 'minimize',
+      },
+      {
+        label: 'Close',
+        accelerator: 'CmdOrCtrl+W',
+        role: 'close',
+      },
+    ],
+  };
+
+  const helpMenu: MenuItemConstructorOptions = {
+    label: '&Help',
+    role: 'help',
+    submenu: [
+      {
+        label: `Built with Nativefier v${nativefierVersion}`,
+        click: () => {
+          shell.openExternal('https://github.com/jiahaog/nativefier');
+        },
+      },
+      {
+        label: 'Report an Issue',
+        click: () => {
+          shell.openExternal('https://github.com/jiahaog/nativefier/issues');
+        },
+      },
+    ],
+  };
+
+  let menuTemplate: MenuItemConstructorOptions[];
+
   if (process.platform === 'darwin') {
-    template.unshift({
+    const electronMenu: MenuItemConstructorOptions = {
       label: 'E&lectron',
       submenu: [
         {
@@ -221,7 +232,7 @@ export function createMenu({
         {
           label: 'Hide Others',
           accelerator: 'Cmd+Shift+H',
-          role: 'hideothers',
+          role: 'hideOthers',
         },
         {
           label: 'Show All',
@@ -236,8 +247,8 @@ export function createMenu({
           click: appQuit,
         },
       ],
-    });
+    };
-    template[3].submenu.push(
+    (windowMenu.submenu as MenuItemConstructorOptions[]).push(
       {
         type: 'separator',
       },
@@ -246,8 +257,11 @@ export function createMenu({
         role: 'front',
       },
     );
+    menuTemplate = [electronMenu, editMenu, viewMenu, windowMenu, helpMenu];
+  } else {
+    menuTemplate = [editMenu, viewMenu, windowMenu, helpMenu];
   }
 
-  const menu = Menu.buildFromTemplate(template);
+  const menu = Menu.buildFromTemplate(menuTemplate);
   Menu.setApplicationMenu(menu);
 }