Merge pull request #75 from hyperspacedev/catalina-vibrancy

Fix theming issues on macOS Catalina

README.md

@@ -81,6 +81,10 @@ You can run any of the following commands to build a release for the desktop:
 >
 > While the command will run without needing the signature, it is recommended that you make a signed copy to protect users.
 
+> ⚠️ **Notarization**: If you are building the macOS version of Hyperspace, you will also need to set up notarization processes. Hyperspace will _not_ run on devices running macOS Catalina or later without this notarization; please ensure you have the correct certificates and updated notarization scripts in `desktop/notarize.js`.
+> 
+> When building, the script will aotumatically notarize the app for you after signing it.
+
 The built files will be available under `dist` that can be uploaded to your app distributor or website.
 
 ## Contribute

azure-pipelines.yml

@@ -22,6 +22,9 @@ jobs:
     pool:
       vmImage: 'macOS-latest'
     steps:
+    - task: CmdLine@2
+      inputs:
+        script: 'security add-generic-password -a "appleseed@marquiskurt.net" -w "$(ascPassword)" -s "AC_PASSWORD"'
     - task: InstallAppleCertificate@2
       inputs:
         certSecureFile: 'Certificates.p12'
@@ -32,7 +35,7 @@ jobs:
     - template: .azure/build-web.yml
     - template: .azure/mac-files.yml
     - script: |
-        npm run build-desktop-darwin
+        npm run build-desktop-darwin-nosign
       displayName: 'Build desktop client'
     displayName: 'Build macOS client'
 

desktop/donothing.js

@@ -0,0 +1,3 @@
+exports.default = async function doNothing() {
+    return await 0;
+}

desktop/notarize.js

@@ -0,0 +1,29 @@
+// notarize.js
+// Script to notarize Hyperspace for macOS
+// © 2019 Hyperspace developers. Licensed under Apache 2.0.
+
+const { notarize } = require('electron-notarize');
+
+// This is pulled from the Apple Keychain. To set this up,
+// follow the instructions provided here: 
+// https://github.com/electron/electron-notarize#safety-when-using-appleidpassword
+const password = `@keychain:AC_PASSWORD`;
+
+exports.default = async function notarizing(context) {
+  const { electronPlatformName, appOutDir } = context;  
+  if (electronPlatformName !== 'darwin') {
+    return;
+  }
+
+  console.log("Notarizing Hyperspace...");
+
+  const appName = context.packager.appInfo.productFilename;
+
+  return await notarize({
+    appBundleId: 'net.marquiskurt.hyperspace',
+    appPath: `${appOutDir}/${appName}.app`,
+    appleId: "appleseed@marquiskurt.net",
+    appleIdPassword: password,
+    ascProvider: "FQQXSP79X3"
+  });
+};

package.json

@@ -8,37 +8,38 @@
   "private": true,
   "homepage": "./",
   "devDependencies": {
-    "@date-io/moment": "^1.3.5",
+    "@date-io/moment": "^1.3.8",
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.2",
     "@types/emoji-mart": "^2.8.2",
-    "@types/jest": "^24.0.11",
+    "@types/jest": "^24.0.15",
     "@types/node": "11.11.6",
     "@types/react": "16.8.8",
     "@types/react-dom": "16.8.3",
-    "@types/react-router-dom": "^4.3.2",
+    "@types/react-router-dom": "^4.3.4",
     "@types/react-swipeable-views": "latest",
-    "axios": "^0.18.0",
+    "axios": "^0.19.0",
-    "emoji-mart": "^2.8.2",
+    "electron": "^5.0.8",
+    "electron-builder": "^21.1.5",
+    "emoji-mart": "^2.11.1",
     "file-dialog": "^0.0.7",
     "material-ui-pickers": "^2.2.4",
-    "mdi-material-ui": "^5.11.0",
+    "mdi-material-ui": "^5.13.0",
-    "megalodon": "^0.6.3",
+    "megalodon": "^0.6.4",
     "moment": "^2.24.0",
     "notistack": "^0.5.1",
-    "query-string": "^6.4.2",
+    "query-string": "^6.8.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-router-dom": "^5.0.0",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "^2.1.8",
-    "react-swipeable-views": "^0.13.1",
+    "react-swipeable-views": "^0.13.3",
     "react-web-share-api": "^0.0.2",
-    "typescript": "3.4.1",
+    "typescript": "3.4.1"
-    "electron": "^5.0.0",
-    "electron-builder": "^20.39.0"
   },
   "dependencies": {
-    "electron-updater": "^4.0.6",
+    "electron-notarize": "^0.1.1",
+    "electron-updater": "^4.1.2",
     "electron-window-state": "^5.0.3"
   },
   "main": "public/electron.js",
@@ -48,11 +49,12 @@
     "electrify-nobuild": "electron .",
     "build": "react-scripts build",
     "create-mac-icon": "cd desktop; iconutil -c icns app.iconset; cd ..",
-    "build-desktop": "npm run build; npm run create-mac-icon; build -mwl deb AppImage snap",
+    "build-desktop": "npm run build; npm run create-mac-icon; electron-builder -p 'never' -mwl deb AppImage snap",
-    "build-desktop-win": "build -w",
+    "build-desktop-win": "electron-builder -p 'never' -w",
-    "build-desktop-darwin": "npm run create-mac-icon; build -m",
+    "build-desktop-darwin": "npm run create-mac-icon; electron-builder -p 'never' -m",
-    "build-desktop-linux": "build -l deb AppImage snap",
+    "build-desktop-darwin-nosign": "npm run create-mac-icon; electron-builder -p 'never' -m dmg -c.mac.identity=null -c.afterSign=\"desktop/donothing.js\"",
-    "build-desktop-linux-select": "build -l ",
+    "build-desktop-linux": "electron-builder -p 'never' -l deb AppImage snap",
+    "build-desktop-linux-select": "electron-builder -p 'never' -l ",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -67,6 +69,7 @@
   ],
   "build": {
     "appId": "net.marquiskurt.hyperspace",
+  	"afterSign": "desktop/notarize.js",
     "directories": {
       "buildResources": "desktop"
     },
@@ -77,12 +80,16 @@
         "dmg",
         "mas"
       ],
-      "darkModeSupport": true
+      "darkModeSupport": true,
+      "hardenedRuntime": true
     },
     "mas": {
       "entitlements": "desktop/entitlements.mas.plist",
       "provisioningProfile": "desktop/embedded.provisionprofile"
     },
+    "dmg": {
+      "sign": false
+    },
     "win": {
       "target": [
         "nsis"

public/electron.js

@@ -6,6 +6,7 @@ const { app, Menu, protocol, BrowserWindow, shell, systemPreferences } = require
 const windowStateKeeper = require('electron-window-state');
 const { autoUpdater } = require('electron-updater');
 const path = require('path');
+const os = require('os');
 
 // Check for any updates to the app
 autoUpdater.checkForUpdatesAndNotify();
@@ -28,6 +29,10 @@ function darwin() {
     return process.platform === "darwin";
 }
 
+function catalina() {
+    return os.release() >= "19.0.0";
+}
+
 /**
  * Register the protocol for Hyperspace
  */
@@ -133,7 +138,7 @@ function createWindow() {
 
             // Set some preferences that are specific to macOS.
             titleBarStyle: 'hidden',
-            vibrancy: systemPreferences.isDarkMode()? "ultra-dark": "light",
+            vibrancy: catalina()? "sidebar": systemPreferences.isDarkMode()? "ultra-dark": "light",
             transparent: darwin(),
             backgroundColor: darwin()? "#80FFFFFF": "#FFF"
         }
@@ -148,7 +153,10 @@ function createWindow() {
     // Watch for a change in macOS's dark mode and reload the window to apply changes
     systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', () => {
         if (mainWindow != null) {
-            mainWindow.setVibrancy(systemPreferences.isDarkMode()? "ultra-dark": "light");
+            console.log(`Dark mode: ${systemPreferences.isDarkMode()}`)
+            if (!catalina()) {
+                mainWindow.setVibrancy(systemPreferences.isDarkMode()? "ultra-dark": "light");
+            }
             mainWindow.webContents.reload();
         }
     })

tsconfig.json

@@ -22,4 +22,4 @@
   "include": [
     "src"
   ]
-}
+}