Merge pull request #216 from chrisknepper/november_2019_rollup

November 2019 rollup

Author: chrisknepper

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [3.1.0] - 2019-11-26
+### Added
+- Setting to follow (sync) system dark mode setting, changing from dark to light and vice versa as the operating system does -- This overrides the Google-provided setting within the 3-dot menu
+- Setting and keyboard shortcut (Command or Control +/-) to zoom the application in or out a la a web browser allows a page
+
+### Changed
+- Under the hood: Notarize the macOS build of the app per Apple requirements
+- Under the hood: Update electron from 6.0.7 to 7.0.1
+
 ## [3.0.0] - 2019-09-04
 ### Changed
 - No longer prompt Linux users for sudo

config/packaging/macosEntitlements.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+  </dict>
+</plist>

config/packaging/notarize.js

@@ -0,0 +1,17 @@
+const { notarize } = require('electron-notarize');
+
+exports.default = async function notarizing(context) {
+  const { electronPlatformName, appOutDir } = context;
+  if (electronPlatformName !== 'darwin') {
+    return;
+  }
+
+  const appName = context.packager.appInfo.productFilename;
+
+  return await notarize({
+    appBundleId: 'com.knepper.android-messages-desktop',
+    appPath: `${appOutDir}/${appName}.app`,
+    appleId: process.env.ANDROID_MESSAGES_APPLE_ID_EMAIL,
+    appleIdPassword: process.env.ANDROID_MESSAGES_APPLE_ID_APP_PASSWORD,
+  });
+};

package-lock.json

@@ -28,12 +28,15 @@
     "extraResources": [
       "resources/dictionaries"
     ],
+    "afterSign": "config/packaging/notarize.js",
     "mac": {
       "category": "public.app-category.social-networking",
       "target": [
         "zip",
         "dmg"
-      ]
+      ],
+      "entitlements": "config/packaging/macosEntitlements.plist",
+      "entitlementsInherit": "config/packaging/macosEntitlements.plist"
     },
     "win": {
       "target": [
@@ -74,7 +77,7 @@
     "e2e": "mocha temp/e2e.js --require source-map-support/register",
     "test": "npm run unit && npm run e2e",
     "start": "node build/start.js",
-    "release": "npm test && webpack --config=build/webpack.app.config.js --env=production && electron-builder -mwl",
+    "release": "webpack --config=build/webpack.app.config.js --env=production && electron-builder -mwl",
     "build": "webpack --config=build/webpack.app.config.js --env=production && electron-builder --publish never",
     "build-all": "webpack --config=build/webpack.app.config.js --env=production && electron-builder -mwl --publish never",
     "generate-icons": "png2icons assets/android_messages_desktop_icon.png resources/icon -all -i"
@@ -83,7 +86,7 @@
     "about-window": "1.13.0",
     "electron-hunspell": "1.0.0-beta.12",
     "electron-settings": "3.2.0",
-    "electron-updater": "4.1.2",
+    "electron-updater": "4.2.0",
     "fs-jetpack": "^1.0.0"
   },
   "devDependencies": {
@@ -93,9 +96,10 @@
     "babel-plugin-transform-object-rest-spread": "^7.0.0-beta.3",
     "chai": "^4.1.0",
     "css-loader": "^0.28.7",
-    "electron": "6.0.7",
+    "electron": "7.0.1",
     "electron-builder": "21.2.0",
     "electron-mocha": "^6.0.4",
+    "electron-notarize": "^0.2.0",
     "file-loader": "^1.1.11",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "mocha": "^5.2.0",

package.json

@@ -106,8 +106,6 @@ androidMessagesWebview.addEventListener('dom-ready', () => {
 });
 
 // Forward event from main process to webview bridge
-ipcRenderer.on(EVENT_UPDATE_USER_SETTING, (event, { enterToSend }) => {
-  androidMessagesWebview.getWebContents().send(EVENT_UPDATE_USER_SETTING, {
-    enterToSend
-  });
+ipcRenderer.on(EVENT_UPDATE_USER_SETTING, (event, settingsList) => {
+  androidMessagesWebview.getWebContents().send(EVENT_UPDATE_USER_SETTING, settingsList);
 });

src/app.js

@@ -5,7 +5,7 @@
 
 import path from 'path';
 import url from 'url';
-import { app, Menu, ipcMain, Notification, shell } from 'electron';
+import { app, Menu, ipcMain, Notification, shell, nativeTheme } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import { baseMenuTemplate } from './menu/base_menu_template';
 import { devMenuTemplate } from './menu/dev_menu_template';
@@ -25,7 +25,8 @@ const state = {
   unreadNotificationCount: 0,
   notificationSoundEnabled: true,
   notificationContentHidden: false,
-  bridgeInitDone: false
+  bridgeInitDone: false,
+  useSystemDarkMode: true
 };
 
 let mainWindow = null;
@@ -81,6 +82,7 @@ if (!isFirstInstance) {
     const notificationSoundEnabled = settings.get('notificationSoundEnabledPref', true);
     const pressEnterToSendEnabled = settings.get('pressEnterToSendPref', true);
     const hideNotificationContent = settings.get('hideNotificationContentPref', false);
+    const useSystemDarkMode = settings.get('useSystemDarkModePref', true);
     settings.watch(SETTING_TRAY_ENABLED, trayManager.handleTrayEnabledToggle);
     settings.watch(SETTING_TRAY_CLICK_SHORTCUT, trayManager.handleTrayClickShortcutToggle);
     settings.watch('notificationSoundEnabledPref', (newValue) => {
@@ -94,6 +96,9 @@ if (!isFirstInstance) {
     settings.watch('hideNotificationContentPref', (newValue) => {
       state.notificationContentHidden = newValue;
     });
+    settings.watch('useSystemDarkModePref', (newValue) => {
+      state.useSystemDarkMode = newValue;
+    });
 
     setApplicationMenu();
     const menuInstance = Menu.getApplicationMenu();
@@ -104,11 +109,20 @@ if (!isFirstInstance) {
       });
     }
 
+    nativeTheme.on('updated', () => {
+      if (state.useSystemDarkMode) {
+        mainWindow.webContents.send(EVENT_UPDATE_USER_SETTING, {
+          useDarkMode: nativeTheme.shouldUseDarkColors
+        });
+      }
+    });
+
     const trayMenuItem = menuInstance.getMenuItemById('startInTrayMenuItem');
     const enableTrayIconMenuItem = menuInstance.getMenuItemById('enableTrayIconMenuItem');
     const notificationSoundEnabledMenuItem = menuInstance.getMenuItemById('notificationSoundEnabledMenuItem');
     const pressEnterToSendMenuItem = menuInstance.getMenuItemById('pressEnterToSendMenuItem');
     const hideNotificationContentMenuItem = menuInstance.getMenuItemById('hideNotificationContentMenuItem');
+    const useSystemDarkModeMenuItem = menuInstance.getMenuItemById('useSystemDarkModeMenuItem');
 
     if (!IS_MAC) {
       // Sets checked status based on user prefs
@@ -131,9 +145,11 @@ if (!isFirstInstance) {
     notificationSoundEnabledMenuItem.checked = notificationSoundEnabled;
     pressEnterToSendMenuItem.checked = pressEnterToSendEnabled;
     hideNotificationContentMenuItem.checked = hideNotificationContent;
+    useSystemDarkModeMenuItem.checked = useSystemDarkMode;
 
     state.notificationSoundEnabled = notificationSoundEnabled;
     state.notificationContentHidden = hideNotificationContent;
+    state.useSystemDarkMode = useSystemDarkMode;
 
     autoUpdater.checkForUpdatesAndNotify();
 
@@ -237,7 +253,8 @@ if (!isFirstInstance) {
       // via the renderer process. I'm not sure of a way to get a reference to the androidMessagesWebview inside the renderer from
       // here. There may be a legit way to do it, or we can do it a dirty way like how we pass this process to the renderer.
       mainWindow.webContents.send(EVENT_UPDATE_USER_SETTING, {
-        enterToSend: pressEnterToSendEnabled
+        enterToSend: pressEnterToSendEnabled,
+        useDarkMode: useSystemDarkMode ? nativeTheme.shouldUseDarkColors : null
       });
 
       let spellCheckFiles = null;

src/background.js

@@ -2,6 +2,7 @@
 
 import { popupContextMenu } from './context_menu';
 import { EVENT_WEBVIEW_NOTIFICATION, EVENT_NOTIFICATION_REFLECT_READY, EVENT_BRIDGE_INIT, EVENT_SPELLING_REFLECT_READY, EVENT_UPDATE_USER_SETTING } from '../../constants';
+import { isObject } from '../../helpers/utilities';
 import { ipcRenderer, remote } from 'electron';
 import InputManager from './input_manager';
 import fs from 'fs';
@@ -57,8 +58,21 @@ ipcRenderer.once(EVENT_SPELLING_REFLECT_READY, async (event, { dictionaryLocaleK
     }
 });
 
-ipcRenderer.on(EVENT_UPDATE_USER_SETTING, (event, { enterToSend }) => {
-    InputManager.handleEnterPrefToggle(enterToSend);
+ipcRenderer.on(EVENT_UPDATE_USER_SETTING, (event, settingsList) => {
+    if (isObject(settingsList)) {
+        if ('useDarkMode' in settingsList && settingsList.useDarkMode !== null) {
+            if (settingsList.useDarkMode) {
+                // Props to Google for making the web app use dark mode entirely based on this class
+                // and for making the class name semantic!
+                document.body.classList.add('dark-mode');
+            } else {
+                document.body.classList.remove('dark-mode');
+            }
+        }
+        if ('enterToSend' in settingsList) {
+          InputManager.handleEnterPrefToggle(settingsList.enterToSend);
+        }
+    }
 });
 
 const OriginalBrowserNotification = Notification;

src/helpers/webview/bridge.js

@@ -115,7 +115,14 @@ settingsMenu.submenu.push(
     click: (item) => {
       settings.set('hideNotificationContentPref', item.checked);
     }
+  },
+  separator,
+  {
+    id: 'useSystemDarkModeMenuItem',
+    label: 'Use System Dark Mode Setting',
+    type: 'checkbox',
+    click: (item) => {
+      settings.set('useSystemDarkModePref', item.checked);
+    }
   }
 );
-
-

src/menu/settings_menu_template.js

@@ -1,29 +1,32 @@
-export const viewMenuTemplate = {
-  label: "View",
-  submenu: [
-    {
-      role: "toggleFullScreen",
-    },
-    {
-      role: "reload"
-    },
-    { 
-      type: 'separator'
-    },
-    {
-      role: "resetZoom"
-    },
-    {
-      role: "zoomIn"
-    },
-    {
-      role: 'zoomin',
-      accelerator: 'CommandOrControl+=',
-      visible: false,
-      enabled: true,
-    },
-    {
-      role: "zoomOut"
-    },
-  ]
-};
+export const viewMenuTemplate = {
+  label: "View",
+  submenu: [
+    {
+      role: "toggleFullScreen",
+    },
+    {
+      role: "reload"
+    },
+    {
+      type: 'separator'
+    },
+    {
+      role: "resetZoom"
+    },
+    // Having two items to get the zoom-in functionality is necessary due to a bug in Electron
+    // Without doing this, either the keyboard shortcut is displayed wrong, or zooming in doesn't work
+    // See: https://github.com/electron/electron/issues/15496
+    {
+      role: "zoomIn"
+    },
+    {
+      role: 'zoomin',
+      accelerator: 'CommandOrControl+=',
+      visible: false,
+      enabled: true,
+    },
+    {
+      role: "zoomOut"
+    },
+  ]
+};