Feature/non mac about (#77)

Add about window for windows & linux

app/about/about-window-renderer.js

@@ -0,0 +1,79 @@
+const { ipcRenderer, remote, shell } = require('electron');
+
+ipcRenderer.on('about-window:info', function (_, info) {
+    const app_name = info.product_name || remote.app.getName();
+    const open_home = () => shell.openExternal(info.homepage);
+    const content = info.use_inner_html ? 'innerHTML' : 'innerText';
+    document.title = `About ${app_name}`;
+
+    const title_elem = document.querySelector('.title');
+    title_elem.innerText = `${app_name} ${info.version || remote.app.getVersion()}`;
+
+    if (info.homepage) {
+        title_elem.addEventListener('click', open_home);
+        title_elem.classList.add('clickable');
+        const logo_elem = document.querySelector('.logo');
+        logo_elem.addEventListener('click', open_home);
+        logo_elem.classList.add('clickable');
+    }
+
+    const copyright_elem = document.querySelector('.copyright');
+    if (info.copyright) {
+        copyright_elem[content] = info.copyright;
+    } else if (info.license) {
+        copyright_elem[content] = `Distributed under ${info.license} license.`;
+    }
+
+    const icon_elem = document.getElementById('app-icon');
+    icon_elem.src = info.icon_path;
+
+    if (info.description) {
+        const desc_elem = document.querySelector('.description');
+        desc_elem[content] = info.description;
+    }
+
+    if (info.bug_report_url) {
+        const bug_report = document.querySelector('.bug-report-link');
+        bug_report.innerText = info.bug_link_text || 'Report an issue';
+        bug_report.addEventListener('click', e => {
+            e.preventDefault();
+            shell.openExternal(info.bug_report_url);
+        });
+    }
+
+    if (info.css_path) {
+        const css_paths = !Array.isArray(info.css_path) ? [info.css_path] : info.css_path;
+        for (const css_path of css_paths) {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = css_path;
+            document.head.appendChild(link);
+        }
+    }
+
+    if (info.adjust_window_size) {
+        const height = document.body.scrollHeight;
+        const width = document.body.scrollWidth;
+        const win = remote.getCurrentWindow();
+        if (height > 0 && width > 0) {
+            // Note:
+            // Add 30px(= about 2em) to add padding in window
+            win.setContentSize(width, height + 40);
+        }
+    }
+
+    if (info.use_version_info) {
+        const versions = document.querySelector('.versions');
+        const vs = process.versions;
+        for (const name of ['electron', 'chrome', 'node', 'v8']) {
+            const tr = document.createElement('tr');
+            const name_td = document.createElement('td');
+            name_td.innerText = name;
+            tr.appendChild(name_td);
+            const version_td = document.createElement('td');
+            version_td.innerText = ' : ' + vs[name];
+            tr.appendChild(version_td);
+            versions.appendChild(tr);
+        }
+    }
+})

app/about/about.css

@@ -0,0 +1,64 @@
+body,
+html {
+  width: 100%;
+  height: 100%;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-app-region: drag;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #333;
+  background-color: #eee;
+  font-size: 12px;
+  font-family: 'Helvetica', 'Arial', sans-serif;
+}
+
+.logo {
+  width: 200px;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.title,
+.copyright,
+.description {
+  margin: 0.2em;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.description {
+  margin-bottom: 1em;
+  text-align: center;
+}
+
+.versions {
+  border-collapse: collapse;
+  margin-top: 1em;
+}
+
+.copyright,
+.versions {
+  color: #999;
+}
+
+.link {
+  cursor: pointer;
+  color: #80a0c2;
+}
+
+.bug-report-link {
+  -webkit-app-region: no-drag;
+  position: absolute;
+  right: 0.5em;
+  bottom: 0.5em;
+}
+

app/about/about.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <title>About This App</title>
+    <script>
+      (function() {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        if (!process.env.HOT) {
+          link.href = '../dist/about.css';
+          // HACK: Writing the script path should be done with webpack
+        } else {
+          link.href = './about.css'
+        }
+        document.getElementsByTagName('head')[0].appendChild(link);
+      }());
+    </script>
+  </head>
+  <body>
+    <div class="logo">
+      <img id="app-icon" alt="App icon" height="200">
+    </div>
+    <h2 class="title"></h2>
+    <h3 class="description"></h3>
+    <div class="copyright"></div>
+    <table class="versions"></table>
+    <footer class="footer">
+      <div class="link bug-report-link"></div>
+    </footer>
+    <script>
+      {
+        const scripts = [];
+
+        scripts.push(
+          (process.env.HOT)
+            ? './about-window-renderer.js'
+            : '../dist/about.renderer.prod.js'
+        );
+
+        document.write(
+          scripts
+            .map(script => `<script defer src="${script}"><\/script>`)
+            .join('')
+        );
+      }
+    </script>
+  </body>
+</html>

app/about/open-about-window.js

@@ -0,0 +1,84 @@
+const { BrowserWindow, remote, shell } = require('electron');
+const path = require('path');
+const icon = process.env.HOT
+    ? path.join(__dirname, '../../resources/icon.ico')
+    : path.join(process.resourcesPath, 'icon.ico')
+
+let aboutWin = null;
+
+module.exports = function openAboutWindow(parentWindow) {
+    if (aboutWin !== null) {
+        aboutWin.focus();
+        return aboutWin;
+    }
+
+    const options = {
+        width: 400,
+        height: 400,
+        useContentSize: true,
+        titleBarStyle: 'hidden-inset',
+        icon: icon,
+        parent: parentWindow,
+    }
+
+    aboutWin = new (BrowserWindow || remote.BrowserWindow)(options);
+
+    aboutWin.once('closed', () => {
+        aboutWin = null;
+    });
+
+    const aboutHTML = process.env.NODE_ENV !== 'production'
+        ? `file://${__dirname}/about.html`
+        : `file://${__dirname}/about/about.html`
+    aboutWin.loadURL(aboutHTML);
+
+    aboutWin.webContents.on('will-navigate', (e, url) => {
+        e.preventDefault();
+        shell.openExternal(url);
+    });
+    aboutWin.webContents.on('new-window', (e, url) => {
+        e.preventDefault();
+        shell.openExternal(url);
+    });
+
+    aboutWin.webContents.once('dom-ready', () => {
+        let info;
+        if (process.env.NODE_ENV !== 'production') {
+            const pkgDep = require('../../package.json')
+            info = {
+                icon_path: icon,
+                product_name: pkgDep.productName,
+                copyright: pkgDep.license,
+                homepage: pkgDep.homepage,
+                description: pkgDep.description,
+                license: pkgDep.license,
+                bug_report_url: pkgDep.bugs.url,
+                version: pkgDep.version,
+                use_version_info: true
+            }
+        } else {
+            info = {
+                icon_path: icon,
+                product_name: PRODUCT_NAME,
+                copyright: COPYRIGHT,
+                homepage: HOMEPAGE,
+                description: DESCRIPTION,
+                license: LICENSE,
+                bug_report_url: BUG_REPORT_URL,
+                version: VERSION,
+                use_version_info: true,
+            }
+        }
+        aboutWin.webContents.send('about-window:info', info);
+    });
+
+    aboutWin.once('ready-to-show', () => {
+        aboutWin.show();
+    });
+
+    aboutWin.setMenu(null);
+    aboutWin.setMenuBarVisibility(false)
+
+    return aboutWin;
+}
+

app/app.html

@@ -26,7 +26,7 @@
         scripts.push(
           (process.env.HOT)
             ? 'http://localhost:' + port + '/dist/renderer.dev.js'
-            : './dist/renderer.prod.js'
+            : './dist/app.renderer.prod.js'
         );
 
         document.write(

app/menu.js

@@ -1,4 +1,5 @@
 const { app, Menu, shell } = require('electron');
+const openAboutWindow = require('./about/open-about-window');
 
 module.exports = class MenuBuilder {
 
@@ -200,6 +201,11 @@ module.exports = class MenuBuilder {
             click: () => {
               this.mainWindow.close();
             }
+          },
+          {
+            label: '&Quit',
+            accelerator: 'Ctrl+Q',
+            click: app.quit,
           }
         ]
       },
@@ -272,6 +278,12 @@ module.exports = class MenuBuilder {
             click() {
               shell.openExternal('https://github.com/uw-labs/bloomrpc/issues');
             }
+          },
+          {
+            label: 'About BloomRPC',
+            click: () => {
+              openAboutWindow(this.mainWindow);
+            }
           }
         ]
       }

package.json

@@ -17,7 +17,7 @@
     "postinstall": "node internals/scripts/CheckNativeDep.js && electron-builder install-app-deps package.json",
     "prestart": "yarn build",
     "start": "cross-env NODE_ENV=production electron ./app/",
-    "start-server-dev": "cross-env NODE_ENV=development node --trace-warnings ./node_modules/webpack-dev-server/bin/webpack-dev-server --config webpack.config.renderer.dev.js",
+    "start-server-dev": "cross-env NODE_ENV=development node --experimental-worker --trace-warnings ./node_modules/webpack-dev-server/bin/webpack-dev-server --config webpack.config.renderer.dev.js",
     "start-main-dev": "cross-env HOT=1 NODE_ENV=development electron ./app/main.dev.js",
     "test": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 node --trace-warnings ./internals/scripts/RunTests.js",
     "test-all": "yarn lint && yarn flow && yarn build && yarn test && yarn test-e2e",
@@ -43,10 +43,17 @@
         "to": "static"
       }
     ],
+    "extraFiles": [
+      {
+        "from": "resources/icon.ico",
+        "to": "resources/icon.ico"
+      }
+    ],
     "files": [
       "dist/",
       "node_modules/",
       "app.html",
+      "about/about.html",
       "main.prod.js",
       "main.prod.js.map",
       "package.json"
@@ -150,6 +157,7 @@
     "asar": "^1.0.0",
     "chalk": "^2.4.2",
     "concurrently": "^4.1.0",
+    "copy-webpack-plugin": "^5.0.3",
     "cross-env": "^5.2.0",
     "cross-spawn": "^6.0.5",
     "css-loader": "^2.1.1",

webpack.config.base.js

@@ -62,6 +62,15 @@ module.exports = {
     new webpack.EnvironmentPlugin({
       NODE_ENV: 'production'
     }),
-    new webpack.NamedModulesPlugin()
+    new webpack.NamedModulesPlugin(),
+    new webpack.DefinePlugin({
+      PRODUCT_NAME: JSON.stringify(pkgDep.productName),
+      COPYRIGHT: JSON.stringify(pkgDep.license),
+      HOMEPAGE: JSON.stringify(pkgDep.homepage),
+      DESCRIPTION: JSON.stringify(pkgDep.description),
+      LICENSE: JSON.stringify(pkgDep.license),
+      BUG_REPORT_URL: JSON.stringify(pkgDep.bugs.url),
+      VERSION: JSON.stringify(pkgDep.version)
+    })
   ]
 };