feat: Relates to #312. Taskbar app

README.md

@@ -113,7 +113,59 @@ yarn package
 yarn start
 ```
 
-> Troubleshooting: If it hangs on a white screen in Electron even though it has compiled and has been syncing for a long time, then simply choose 'View > Reload' (CMD + R on macOS) from the Electron menu
+> Troubleshooting: If it hangs on a white screen in Electron even though it has compiled and has been syncing for a long time, then simply choose 'View > Reload' (CMD + R on macOS) from the Fether/Electron menu. If the Fether menu is not shown in the tray, then by clicking the Fether window and then holding down the ALT key to reveal it.
+
+> Developer Tools: Open developer tools automatically by running `DEBUG=true yarn start` when not in the production environment
+
+# Run without taskbar mode (no tray icon)
+
+```bash
+TASKBAR=false yarn start
+```
+
+# Usage of taskbar mode
+
+### macOS
+
+Taskbar mode is `true` by default.
+
+* Enabled `true`
+  * Fether window may be toggled open/closed by clicking the Fether tray icon, but not the Fether dock icon
+  * Fether window does not have a frame (i.e. no close/minimise icons)
+* Disabled `false`
+  * Fether window may be toggled open by clicking the Fether dock icon
+  * Fether window has a frame (with close/minimise icons)
+* Always
+  * Fether menu shown in the tray by default
+  * Fether window position is saved upon move, minimising, and close so it is restored in the same position.
+
+### Linux
+
+Taskbar mode is `true` by default.
+
+* Enabled `true`
+  * Fether window may be toggled minimise/restore by clicking the Fether tray icon to reveal a tooltip that says "Click to toggle Fether window" and then clicking the tooltip.
+  * Fether window may not have a frame (i.e. no close/minimise icons) if `frame: false` in packages/fether-electron/src/main/app/options/config/index.js
+* Disabled `false`
+  * Fether window may be toggled open by clicking the Fether dock icon
+  * Fether window has a frame (with close/minimise icons)
+* Always
+  * Fether menu may not be not shown in the tray by default depending on whether `setMenuBarVisibility` has been set. Show the Fether menu in the tray by clicking the Fether window and then holding down the ALT key to reveal it.
+  * Fether menu may be configured to automatically hide by setting `setAutoHideMenuBar`
+  * Fether window position is saved upon move, minimising, and close so it is restored in the same position.
+
+### Windows
+
+Taskbar mode is always `false` since the Fether menu does not appear without a frame on the Fether window.
+
+* Disabled `false`
+  * Fether window may be toggled open/minimise by clicking the Fether dock icon
+  * Fether window has a frame (with close/minimise icons).
+* Always
+  * Fether menu is shown in the Fether window by clicking the Fether window and then holding down the ALT key to reveal it.
+  * Fether menu may be configured to automatically hide by setting `setAutoHideMenuBar`
+  * Fether tray icon does nothing
+  * Fether window position is saved upon move, minimising, and close so it is restored in the same position.
 
 ## Join the chat!
 

packages/fether-electron/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  plugins: [['@babel/plugin-proposal-class-properties', { loose: false }]],
+  presets: ['@babel/preset-env']
+};

packages/fether-electron/electron-builder.json

@@ -1,5 +1,6 @@
 {
   "appId": "io.parity.fether",
+  "copyright": "Copyright 2015-2018 Parity Technologies (UK) Ltd.",
   "linux": {
     "category": "Utility",
     "target": ["AppImage", "snap", "deb", "tar.xz"]
@@ -10,6 +11,7 @@
   "productName": "Parity Fether",
   "publish": "github",
   "win": {
+    "icon": "icons/icon.ico",
     "publisherName": "Parity Technologies (UK) Ltd.",
     "target": "nsis"
   }

packages/fether-electron/package.json

@@ -36,24 +36,26 @@
     "prerelease": "./scripts/revertElectronBug.sh",
     "release": "electron-builder",
     "start": "cross-env ELECTRON_START_URL=http://localhost:3000 electron-webpack dev --ws-origins all",
-    "test": "echo Skipped."
+    "test": "jest --all --color --coverage"
   },
   "dependencies": {
     "@parity/electron": "^4.0.0",
     "ansi-styles": "^3.2.1",
     "commander": "^2.15.1",
     "commander-remaining-args": "^1.2.0",
+    "electron-positioner": "^4.1.0",
+    "electron-settings": "^3.2.0",
     "fether-react": "^0.3.0",
     "pino": "^4.16.1",
     "pino-multi-stream": "^3.1.2",
-    "source-map-support": "^0.5.6"
+    "source-map-support": "^0.5.10"
   },
   "devDependencies": {
-    "copyfiles": "^2.0.0",
+    "copyfiles": "^2.1.0",
     "cross-env": "^5.2.0",
     "electron": "^4.0.1",
-    "electron-builder": "^20.29.0",
-    "electron-webpack": "^2.1.2",
-    "webpack": "^4.7.0"
+    "electron-builder": "^20.38.5",
+    "electron-webpack": "^2.6.1",
+    "webpack": "^4.29.1"
   }
 }

packages/fether-electron/src/main/cli/index.js → packages/fether-electron/src/main/app/cli/index.js

@@ -5,8 +5,8 @@
 
 import cli from 'commander';
 
-const { productName } = require('../../../electron-builder.json');
-const { version } = require('../../../package.json');
+const { productName } = require('../../../../electron-builder.json');
+const { version } = require('../../../../package.json');
 
 /**
  * Process.argv arguments length is different in electron mode and in packaged

packages/fether-electron/src/main/app/index.js

@@ -0,0 +1,114 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import EventEmitter from 'events';
+
+import {
+  calculateWinPosition,
+  createPositioner,
+  createTray,
+  createWindow,
+  fixWinPosition,
+  getScreenResolution,
+  hideWindow,
+  loadTray,
+  moveWindowUp,
+  onTrayClick,
+  onWindowClose,
+  processSaveWinPosition,
+  setupAppListeners,
+  setupDebug,
+  setupGlobals,
+  setupLogger,
+  setupMenu,
+  setupParityEthereum,
+  setupRequestListeners,
+  setupSecurity,
+  setupWinListeners,
+  setupWin32Listeners,
+  showTrayBalloon,
+  showWindow,
+  updateProgress,
+  windowClear
+} from './methods';
+
+let hasCalledInitFetherApp = false;
+
+class FetherApp extends EventEmitter {
+  constructor (electronApp, options) {
+    super();
+
+    if (hasCalledInitFetherApp) {
+      this.emit(
+        'error',
+        new Error('Unable to initialise Fether app more than once')
+      );
+    }
+
+    /**
+     * After the Fether instance and fetherApp.win has been created.
+     * If the user then chooses from the Fether Menu "Window > Close"
+     * it runs windowClear, which deletes fetherApp.win and associated
+     * listeners since the 'close' event also occurs when the user exits.
+     * If the user then clicks the tray icon to re-open the Fether window,
+     * it will run the onTrayClick method, which calls fetherApp.showWindow
+     * and if fetherApp.win does not exist, it runs showWindow and createWindow
+     * to restore create fetherApp.win again and associated listeners. However we
+     * do not need to run all the fetherApp methods again like we did on the
+     * when fetherApp.win was first created (i.e. createTray, loadTray,
+     * setupDebug, setupSecurity, setupLogger, setupParityEthereum, setupGlobals)
+     */
+    this.app = electronApp;
+    this.options = options;
+
+    this.createWindow();
+    this.updateProgress(0.4, undefined);
+
+    // These methods are called only once when Fether instance is created
+    // (i.e. not called again when the Fether window closed and re-opened)
+    this.createTray();
+    this.loadTray();
+    this.setupDebug();
+    this.setupSecurity();
+    this.setupLogger();
+    this.setupParityEthereum();
+    this.setupGlobals();
+
+    this.updateProgress(0.8, undefined);
+    this.showWindow(undefined);
+    this.updateProgress(1.0, undefined);
+    this.updateProgress(-1, 'after-create-app');
+  }
+
+  calculateWinPosition = () => calculateWinPosition(this);
+  createPositioner = () => createPositioner(this);
+  createTray = () => createTray(this);
+  createWindow = () => createWindow(this);
+  fixWinPosition = positionStruct => fixWinPosition(this, positionStruct);
+  getScreenResolution = () => getScreenResolution();
+  hideWindow = () => hideWindow(this);
+  loadTray = () => loadTray(this);
+  moveWindowUp = () => moveWindowUp(this);
+  onTrayClick = (e, bounds) => onTrayClick(this, e, bounds);
+  onWindowClose = () => onWindowClose(this);
+  processSaveWinPosition = () => processSaveWinPosition(this);
+  setupAppListeners = () => setupAppListeners(this);
+  setupDebug = () => setupDebug(this);
+  setupGlobals = () => setupGlobals();
+  setupLogger = () => setupLogger();
+  setupMenu = () => setupMenu(this);
+  setupParityEthereum = () => setupParityEthereum(this);
+  setupRequestListeners = () => setupRequestListeners(this);
+  setupSecurity = () => setupSecurity(this);
+  setupWinListeners = () => setupWinListeners(this);
+  setupWin32Listeners = () => setupWin32Listeners(this);
+  showTrayBalloon = () => showTrayBalloon(this);
+  showWindow = trayPos => showWindow(this, trayPos);
+  updateProgress = (percentage, eventListenerName) =>
+    updateProgress(this, percentage, eventListenerName);
+  windowClear = () => windowClear(this);
+}
+
+export default FetherApp;

packages/fether-electron/src/main/app/menu/index.js

@@ -0,0 +1,21 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import electron from 'electron';
+import { template } from './template';
+
+const { Menu } = electron;
+
+const menu = Menu.buildFromTemplate(template);
+
+const getMenu = () => {
+  return Menu.getApplicationMenu();
+};
+
+const addMenu = () => {
+  Menu.setApplicationMenu(menu);
+};
+
+export { addMenu, getMenu };

packages/fether-electron/src/main/app/menu/template/index.js

@@ -0,0 +1,87 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import electron from 'electron';
+
+const { app, shell } = electron;
+
+// Create the Application's main menu
+// https://github.com/electron/electron/blob/master/docs/api/menu.md#examples
+export const template = [
+  {
+    label: 'Edit',
+    submenu: [
+      { role: 'cut' },
+      { role: 'copy' },
+      { role: 'paste' },
+      { role: 'delete' },
+      { role: 'selectall' }
+    ]
+  },
+  {
+    label: 'View',
+    submenu: [
+      { role: 'reload' },
+      { role: 'forcereload' },
+      { role: 'toggledevtools' },
+      { type: 'separator' },
+      { role: 'resetzoom' },
+      { role: 'zoomin' },
+      { role: 'zoomout' },
+      { type: 'separator' },
+      { role: 'togglefullscreen' }
+    ]
+  },
+  {
+    role: 'window',
+    submenu: [{ role: 'minimize' }, { role: 'close' }]
+  },
+  {
+    role: 'help',
+    submenu: [
+      {
+        label: 'Learn More',
+        click () {
+          shell.openExternal('https://parity.io');
+        }
+      }
+    ]
+  }
+];
+
+if (process.platform === 'darwin') {
+  template.unshift({
+    label: app.getName(),
+    submenu: [
+      { role: 'about' },
+      { type: 'separator' },
+      { role: 'services', submenu: [] },
+      { type: 'separator' },
+      { role: 'hide' },
+      { role: 'hideothers' },
+      { role: 'unhide' },
+      { type: 'separator' },
+      { role: 'quit' }
+    ]
+  });
+
+  // Edit menu
+  template[1].submenu.push(
+    { type: 'separator' },
+    {
+      label: 'Speech',
+      submenu: [{ role: 'startspeaking' }, { role: 'stopspeaking' }]
+    }
+  );
+
+  // Window menu
+  template[3].submenu = [
+    { role: 'close' },
+    { role: 'minimize' },
+    { role: 'zoom' },
+    { type: 'separator' },
+    { role: 'front' }
+  ];
+}

packages/fether-electron/src/main/messages/index.js → packages/fether-electron/src/main/app/messages/index.js

@@ -12,16 +12,23 @@ const pino = Pino();
 /**
  * Handle all asynchronous messages from renderer to main.
  */
-export default async (mainWindow, event, action, ...args) => {
+export default async (fetherAppWindow, event, action, ...args) => {
   try {
     if (!action) {
       return;
     }
     switch (action) {
       case 'app-resize': {
-        const [width] = mainWindow.getContentSize();
+        const [width] = fetherAppWindow.getContentSize();
         const newHeight = args[0];
-        mainWindow.setContentSize(width, Math.round(newHeight) + 2);
+        const feedbackButtonHeight = 20;
+        const resizeHeight = newHeight + 2;
+        const height =
+          process.platform === 'win32' && fetherAppWindow.isMenuBarVisible()
+            ? resizeHeight + feedbackButtonHeight
+            : resizeHeight;
+
+        fetherAppWindow.setContentSize(width, height);
         break;
       }
       case 'check-clock-sync': {