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,8 +24,7 @@ export function createMenu({
       ? 'Reset Zoom'
       : `Reset Zoom (to ${zoomBuildTimeValue * 100}%, set at build time)`;
 
-  const template: any[] = [
-    {
+  const editMenu: MenuItemConstructorOptions = {
     label: '&Edit',
     submenu: [
       {
@@ -61,20 +66,21 @@ export function createMenu({
       {
         label: 'Paste and Match Style',
         accelerator: 'CmdOrCtrl+Shift+V',
-          role: 'pasteandmatchstyle',
+        role: 'pasteAndMatchStyle',
       },
       {
         label: 'Select All',
         accelerator: 'CmdOrCtrl+A',
-          role: 'selectall',
+        role: 'selectAll',
       },
       {
         label: 'Clear App Data',
         click: clearAppData,
       },
     ],
-    },
-    {
+  };
+
+  const viewMenu: MenuItemConstructorOptions = {
     label: '&View',
     submenu: [
       {
@@ -143,6 +149,14 @@ export function createMenu({
         })(),
         click: zoomReset,
       },
+    ],
+  };
+
+  if (!disableDevTools) {
+    (viewMenu.submenu as MenuItemConstructorOptions[]).push(
+      {
+        type: 'separator',
+      },
       {
         label: 'Toggle Developer Tools',
         accelerator: (() => {
@@ -153,13 +167,14 @@ export function createMenu({
         })(),
         click: (item, focusedWindow) => {
           if (focusedWindow) {
-              focusedWindow.toggleDevTools();
+            focusedWindow.webContents.toggleDevTools();
           }
         },
       },
-      ],
-    },
-    {
+    );
+  }
+
+  const windowMenu: MenuItemConstructorOptions = {
     label: '&Window',
     role: 'window',
     submenu: [
@@ -174,8 +189,9 @@ export function createMenu({
         role: 'close',
       },
     ],
-    },
-    {
+  };
+
+  const helpMenu: MenuItemConstructorOptions = {
     label: '&Help',
     role: 'help',
     submenu: [
@@ -192,17 +208,12 @@ export function createMenu({
         },
       },
     ],
-    },
-  ];
+  };
 
-  if (disableDevTools) {
-    // remove last item (dev tools) from menu > view
-    const { submenu } = template[1];
-    submenu.splice(submenu.length - 1, 1);
-  }
+  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);
 }