Use dialog.showMessageBox instead of orderFrontStandardAboutPanel

.gitignore

@@ -4,5 +4,6 @@ npm-debug.log
 dist/**
 !dist/package.json
 !dist/app.html
+!dist/logo.png
 release/
 *.bundle.js

electron/main.js

@@ -1,7 +1,9 @@
+import { resolve } from 'path';
 import { app, BrowserWindow, Menu } from 'electron';
 import { startListeningHandleURL } from './url-handle';
 import { createContextMenu, createMenuTemplate } from './menu';
 
+const iconPath = resolve(__dirname, 'logo.png');
 let mainWindow = null;
 
 startListeningHandleURL(() => mainWindow);
@@ -11,7 +13,7 @@ app.on('ready', () => {
   createContextMenu(mainWindow);
 
   mainWindow = new BrowserWindow({ width: 1024, height: 750, show: false });
-  mainWindow.loadURL(`file://${__dirname}/app.html`);
+  mainWindow.loadURL(`file://${resolve(__dirname)}/app.html`);
   mainWindow.openDevTools();
 
   mainWindow.webContents.on('did-finish-load', () => {
@@ -22,7 +24,7 @@ app.on('ready', () => {
     mainWindow = null;
   });
 
-  const menuTemplate = createMenuTemplate(mainWindow);
+  const menuTemplate = createMenuTemplate(mainWindow, iconPath);
   const menu = Menu.buildFromTemplate(menuTemplate);
   Menu.setApplicationMenu(menu);
 });

electron/menu/darwin.js

@@ -1,11 +1,14 @@
 import { app, shell } from 'electron';
+import { showAboutDialog } from '.';
 
-export default win =>
+export default (win, iconPath) =>
   [{
     label: 'React Native Debugger',
     submenu: [{
-      label: 'About React Native Debugger',
-      selector: 'orderFrontStandardAboutPanel:',
+      label: 'About',
+      click() {
+        showAboutDialog(iconPath);
+      },
     }, {
       type: 'separator',
     }, {

electron/menu/index.js

@@ -1,4 +1,26 @@
 /* eslint global-require: 0 */
+import { app, dialog } from 'electron';
+
+const appName = app.getName();
+const detail = `
+  Created by Jhen-Jie Hong
+  (https://github.com/jhen0409)
+
+  This software is included following project:
+
+  https://github.com/facebook/react-devtools
+  https://github.com/zalmoxisus/remotedev-app
+`;
+
+export const showAboutDialog = iconPath =>
+  dialog.showMessageBox({
+    title: 'About',
+    message: `${appName} ${app.getVersion()}`,
+    detail,
+    icon: iconPath,
+    buttons: [],
+  });
+
 export createContextMenu from './contextMenu';
 
 if (process.platform === 'darwin') {

electron/menu/linux+win.js

@@ -1,11 +1,14 @@
 import { shell } from 'electron';
+import { showAboutDialog } from '.';
 
-export default win =>
+export default (win, iconPath) =>
   [{
     label: 'RND',
     submenu: [{
-      label: 'About React Native Debugger',
-      selector: 'orderFrontStandardAboutPanel:',
+      label: 'About',
+      click() {
+        showAboutDialog(iconPath);
+      },
     }, {
       label: 'Close',
       accelerator: 'Ctrl+W',

package.json

@@ -10,7 +10,7 @@
     "pack-linux": "npm run prepack && ./scripts/package-linux.sh",
     "pack-windows": "npm run prepack && ./scripts/package-windows.sh",
     "pack": "./scripts/package-macos.sh && ./scripts/package-linux.sh && ./scripts/package-windows.sh",
-    "start": "electron dist/",
+    "start": "cd dist && electron ./",
     "build:devtools": "webpack --config webpack/devtools.backend.babel.js --progress --profile --colors",
     "build:main": "webpack --config webpack/main.prod.babel.js --progress --profile --colors",
     "build:renderer": "webpack --config webpack/renderer.prod.babel.js --progress --profile --colors",

scripts/package-linux.sh

@@ -9,9 +9,7 @@ electron-packager dist/ \
   --asar \
   --prune \
   --out release \
-  --app-version $npm_package_version \
-  --app-copyright "This software is included following project: https://github.com/facebook/react-devtools, https://github.com/zalmoxisus/remotedev-app" \
-  --icon electron/logo.png
+  --app-version $npm_package_version
 
 cd release/React\ Native\ Debugger-linux-x64
 zip -ryq9 ../rn-debugger-linux-x64.zip *

scripts/package-macos.sh

@@ -12,7 +12,6 @@ electron-packager dist/ \
   --protocol-name "React Native Debugger" \
   --protocol "rndebugger" \
   --app-version $npm_package_version \
-  --app-copyright "This software is included following project: https://github.com/facebook/react-devtools, https://github.com/zalmoxisus/remotedev-app" \
   --icon electron/logo.icns
 
 rm release/rn-debugger-darwin-x64.dmg

scripts/package-windows.sh

@@ -10,7 +10,6 @@ electron-packager dist/ \
   --prune \
   --out release \
   --app-version $npm_package_version \
-  --app-copyright "This software is included following project: https://github.com/facebook/react-devtools, https://github.com/zalmoxisus/remotedev-app" \
   --icon electron/logo.ico
 
 cd release/React\ Native\ Debugger-win32-ia32