Integrate app menu with DevTools features, add icons (#57421)

Summary:
Pull Request resolved: #57421

UX polish: Refine RNDT desktop app with new menu items mapping to key features inside the DevTools UI, and add menu item icons (macOS 26+).

**New/changed menu items**

- **[New] File > Reload App** - Unify cmd+R logic — explicitly bound to "Reload App".
- **[New] File > Reload DevTools** - opt+R — reinstates above
    - Note: Reloading and force-reloading the debugger-frontend's UI can also be done with cmd+R and cmd+shift+R *from a DevTools-on-DevTools window*.
- **[New] File > QuickOpen…**
- **[New] View > Command Palette…**
- **[Changed] View > Toggle Developer Tools** - Shown in debug builds only. Delete Reload and Force Reload items here (per above).
- **[New] Help > Keyboard Shortcuts**
- Simplify Edit menu options.

**Notes**

- Icons are configured on macOS 26+ only, and we've left the `{role: '<name>'}` icon templates alone (should be managed upstream in Electron, although today these icons are missing in some cases).

See electron/electron#50609, electron/electron#48909.

Changelog:
[General][Changed] - **React Native DevTools**: Expose new options in the app menu

Reviewed By: motiz88

Differential Revision: D94527813

fbshipit-source-id: e56a83c620efd2a2b41e3e7645a0fe987148de46

Author: huntie

packages/debugger-shell/src/electron/AppMenu.js

@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+const {BrowserWindow, Menu, app, nativeImage, shell} =
+  // $FlowFixMe[unclear-type] We have no Flow types for the Electron API.
+  require('electron') as any;
+
+const {isMacOSAtLeast} = require('./utils');
+
+export function configureAppMenu(): void {
+  const template = [
+    ...(process.platform === 'darwin' ? [{role: 'appMenu'}] : []),
+    {
+      label: 'File',
+      submenu: [
+        {
+          label: 'Reload App',
+          accelerator:
+            process.platform === 'darwin' ? 'Command+R' : 'Control+R',
+          click: () => invokeCommand('inspector-main.reload'),
+        },
+        {
+          label: 'Reload DevTools',
+          accelerator: process.platform === 'darwin' ? 'Option+R' : 'Alt+R',
+          click: () => BrowserWindow.getFocusedWindow()?.webContents.reload(),
+        },
+        {type: 'separator'},
+        {
+          label: 'Quick Open…',
+          ...menuSymbol('doc.text.magnifyingglass'),
+          accelerator:
+            process.platform === 'darwin' ? 'Command+P' : 'Control+P',
+          click: () => invokeCommand('quick-open.show'),
+        },
+        {type: 'separator'},
+        {role: 'close'},
+      ],
+    },
+    {
+      label: 'Edit',
+      submenu: [
+        {role: 'undo'},
+        {role: 'redo'},
+        {type: 'separator'},
+        {role: 'cut'},
+        {role: 'copy'},
+        {role: 'paste'},
+        {role: 'selectAll'},
+      ],
+    },
+    {
+      label: 'View',
+      submenu: [
+        {
+          label: 'Command Palette…',
+          ...menuSymbol('filemenu.and.selection'),
+          accelerator:
+            process.platform === 'darwin'
+              ? 'Command+Shift+P'
+              : 'Control+Shift+P',
+          click: () => invokeCommand('quick-open.show-command-menu'),
+        },
+        // Enable Developer Tools only in development
+        ...(!app.isPackaged
+          ? [{type: 'separator'}, {role: 'toggleDevTools'}]
+          : []),
+        {type: 'separator'},
+        {role: 'resetZoom'},
+        {role: 'zoomIn'},
+        {role: 'zoomOut'},
+        {type: 'separator'},
+        {role: 'togglefullscreen'},
+      ],
+    },
+    {role: 'windowMenu'},
+    {
+      role: 'help',
+      submenu: [
+        {
+          label: 'Keyboard Shortcuts',
+          ...menuSymbol('keyboard'),
+          click: () => invokeCommand('settings.shortcuts'),
+        },
+        {type: 'separator'},
+        {
+          label: 'React Native Website',
+          click: () => shell.openExternal('https://reactnative.dev'),
+        },
+        {
+          label: 'Release Notes',
+          click: () =>
+            shell.openExternal(
+              'https://github.com/facebook/react-native/releases',
+            ),
+        },
+      ],
+    },
+  ];
+  const menu = Menu.buildFromTemplate(template);
+  Menu.setApplicationMenu(menu);
+}
+
+function menuSymbol(symbolName: string): {icon?: unknown} {
+  if (!isMacOSAtLeast(26)) {
+    return {};
+  }
+  return {
+    icon: nativeImage.createMenuSymbol(symbolName),
+  };
+}
+
+function invokeCommand(commandId: string): void {
+  const win = BrowserWindow.getFocusedWindow();
+  win?.webContents.executeJavaScript(
+    `(async () => {
+      const UI = await import('./ui/legacy/legacy.js');
+      return UI.ActionRegistry.ActionRegistry.instance()
+        .getAction(${JSON.stringify(commandId)})?.execute();
+    })()`,
+    true,
+  );
+}

packages/debugger-shell/src/electron/MainInstanceEntryPoint.js

@@ -8,13 +8,14 @@
  * @format
  */
 
+import {configureAppMenu} from './AppMenu.js';
 import SettingsStore from './SettingsStore.js';
 
 const path = require('path');
 const util = require('util');
 
 // $FlowFixMe[unclear-type] We have no Flow types for the Electron API.
-const {BrowserWindow, Menu, app, shell, ipcMain} = require('electron') as any;
+const {BrowserWindow, app, shell, ipcMain} = require('electron') as any;
 
 const appSettings = new SettingsStore();
 const windowMetadata = new WeakMap<
@@ -102,34 +103,6 @@ function handleLaunchArgs(argv: string[]) {
   frontendWindow.focus();
 }
 
-function configureAppMenu() {
-  const template = [
-    ...(process.platform === 'darwin' ? [{role: 'appMenu'}] : []),
-    {role: 'fileMenu'},
-    {role: 'editMenu'},
-    {role: 'viewMenu'},
-    {role: 'windowMenu'},
-    {
-      role: 'help',
-      submenu: [
-        {
-          label: 'React Native Website',
-          click: () => shell.openExternal('https://reactnative.dev'),
-        },
-        {
-          label: 'Release Notes',
-          click: () =>
-            shell.openExternal(
-              'https://github.com/facebook/react-native/releases',
-            ),
-        },
-      ],
-    },
-  ];
-  const menu = Menu.buildFromTemplate(template);
-  Menu.setApplicationMenu(menu);
-}
-
 function getSavedWindowPosition(
   windowKey: string,
 ): ?{width: number, height: number, x?: number, y?: number} {

packages/debugger-shell/src/electron/utils.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+/** Equivalent of Swift's `if #available(macOS 26, *)`. */
+export function isMacOSAtLeast(major: number): boolean {
+  return (
+    process.platform === 'darwin' &&
+    // $FlowFixMe[prop-missing]
+    Number.parseInt(process.getSystemVersion().split('.')[0], 10) >= major
+  );
+}