Electron v9.1.2

app/.npmrc

@@ -1,4 +1,4 @@
 runtime = electron
 disturl = https://atom.io/download/electron
-target = 8.4.0
+target = 9.1.2
 arch = x64

app/package.json

@@ -33,10 +33,10 @@
     "file-metadata": "^1.0.0",
     "file-uri-to-path": "0.0.2",
     "file-url": "^2.0.2",
-    "fs-admin": "^0.12.0",
+    "fs-admin": "^0.15.0",
     "fs-extra": "^7.0.1",
     "fuzzaldrin-plus": "^0.6.0",
-    "keytar": "^5.6.0",
+    "keytar": "^6.0.1",
     "mem": "^4.3.0",
     "memoize-one": "^4.0.3",
     "moment": "^2.24.0",
@@ -66,8 +66,8 @@
   },
   "devDependencies": {
     "devtron": "^1.4.0",
-    "electron-debug": "^3.0.1",
-    "electron-devtools-installer": "^2.2.4",
+    "electron-debug": "^3.1.0",
+    "electron-devtools-installer": "^3.1.1",
     "temp": "^0.8.3",
     "webpack-hot-middleware": "^2.10.0"
   }

app/src/lib/app-shell.ts

@@ -15,7 +15,7 @@ export interface IAppShell {
    * @param path - The path of the file to open
    */
 
-  readonly openItem: (path: string) => boolean
+  readonly openPath: (path: string) => Promise<string>
   /**
    * Reveals the specified file on the operating system
    * default file explorer. If a folder is passed, it will
@@ -55,7 +55,7 @@ export const shell: IAppShell = {
   showFolderContents: path => {
     ipcRenderer.send('show-folder-contents', { path })
   },
-  openItem: electronShell.openItem,
+  openPath: electronShell.openPath,
 }
 
 /**

app/src/lib/fix-emoji-spacing.ts

@@ -0,0 +1,37 @@
+// This module renders an element with an emoji using
+// a non system-default font to workaround an Chrome
+// issue that causes unexpected spacing on emojis.
+// More info:
+// https://bugs.chromium.org/p/chromium/issues/detail?id=1113293
+
+const container = document.createElement('div')
+container.style.setProperty('visibility', 'hidden')
+container.style.setProperty('position', 'absolute')
+
+// Keep this array synced with the font size variables
+// in _variables.scss
+const fontSizes = [
+  '--font-size',
+  '--font-size-sm',
+  '--font-size-md',
+  '--font-size-lg',
+  '--font-size-xl',
+  '--font-size-xxl',
+  '--font-size-xs',
+]
+
+for (const fontSize of fontSizes) {
+  const span = document.createElement('span')
+  span.style.setProperty('font-size', `var(${fontSize}`)
+  span.style.setProperty('font-family', 'Arial', 'important')
+  span.textContent = '🤦🏿‍♀️'
+  container.appendChild(span)
+}
+
+document.body.appendChild(container)
+
+// Read the dimensions of the element to force the browser to do a layout.
+container.offsetHeight.toString()
+
+// Browser has rendered the emojis, now we can remove them.
+document.body.removeChild(container)

app/src/main-process/app-window.ts

@@ -41,9 +41,8 @@ export class AppWindow {
         // Disable auxclick event
         // See https://developers.google.com/web/updates/2016/10/auxclick
         disableBlinkFeatures: 'Auxclick',
-        // Enable, among other things, the ResizeObserver
-        experimentalFeatures: true,
         nodeIntegration: true,
+        enableRemoteModule: true,
       },
       acceptFirstMouse: true,
     }

app/src/main-process/crash-window.ts

@@ -36,13 +36,6 @@ export class CrashWindow {
         // Disable auxclick event
         // See https://developers.google.com/web/updates/2016/10/auxclick
         disableBlinkFeatures: 'Auxclick',
-        // Explicitly disable experimental features for the crash process
-        // since, theoretically it might be these features that caused the
-        // the crash in the first place. As of writing we don't use any
-        // components that relies on experimental features in the crash
-        // process but our components which relies on ResizeObserver should
-        // be able to degrade gracefully.
-        experimentalFeatures: false,
         nodeIntegration: true,
       },
     }

app/src/main-process/main.ts

@@ -31,6 +31,19 @@ import { stat } from 'fs-extra'
 import { isApplicationBundle } from '../lib/is-application-bundle'
 
 app.setAppLogsPath()
+
+/**
+ * While testing Electron 9 on Windows we were seeing fairly
+ * consistent hangs that seem similar to the following issues
+ *
+ * https://github.com/electron/electron/issues/24173
+ * https://github.com/electron/electron/issues/23910
+ * https://github.com/electron/electron/issues/24338
+ *
+ * TODO: Try removing when upgrading to Electron vNext
+ */
+app.allowRendererProcessReuse = false
+
 enableSourceMaps()
 
 let mainWindow: AppWindow | null = null

app/src/main-process/shell.ts

@@ -36,6 +36,10 @@ export function UNSAFE_openDirectory(path: string) {
     // We can avoid this by adding a final backslash at the end of the path.
     const pathname = __WIN32__ && !path.endsWith('\\') ? `${path}\\` : path
 
-    shell.openItem(pathname)
+    shell.openPath(pathname).then(err => {
+      if (err !== '') {
+        log.error(`Failed to open directory (${path}): ${err}`)
+      }
+    })
   }
 }

app/src/ui/index.tsx

@@ -101,6 +101,13 @@ if (!process.env.TEST_ENV) {
   require('../../styles/desktop.scss')
 }
 
+// TODO (electron): Remove this once
+// https://bugs.chromium.org/p/chromium/issues/detail?id=1113293
+// gets fixed and propagated to electron.
+if (__DARWIN__) {
+  require('../lib/fix-emoji-spacing')
+}
+
 let currentState: IAppState | null = null
 let lastUnhandledRejection: string | null = null
 let lastUnhandledRejectionTime: Date | null = null

app/src/ui/lfs/attribute-mismatch.tsx

@@ -51,7 +51,7 @@ export class AttributeMismatch extends React.Component<
   private showGlobalGitConfig = () => {
     const path = this.state.globalGitConfigPath
     if (path) {
-      shell.openItem(path)
+      shell.openPath(path)
     }
   }
 

app/styles/_variables.scss

@@ -48,8 +48,9 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
   // Typography
   //
   // Font, line-height, and color for body text, headings, and more.
-  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
-  --font-family-monospace: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  $emoji_fallback_fonts: 'Apple Color Emoji', 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --font-family-sans-serif: system-ui, sans-serif, #{$emoji_fallback_fonts};
+  --font-family-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace, #{$emoji_fallback_fonts};
 
   /**
    * Font weight to use for semibold text
@@ -62,6 +63,7 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
   --font-weight-light: 300;
 
   // Pixel value used to responsively scale all typography. Applied to the `<html>` element.
+  // When adding a new font-size variable, please update the fix-emoji-spacing.ts file.
   --font-size: 12px;
   --font-size-sm: 11px;
   --font-size-md: 14px;

app/styles/ui/changes/_changes-list.scss

@@ -9,12 +9,14 @@
   flex-grow: 1;
   display: flex;
   flex-direction: column;
+  min-height: 0;
 
   .stashed-changes-button {
     @include ellipsis;
     min-height: 29px;
 
     display: flex;
+    align-items: center;
     flex-grow: 1;
     padding: 0 var(--spacing);
     width: 100%;

app/test/helpers/test-app-shell.ts

@@ -15,5 +15,5 @@ export const shell: IAppShell = {
   openExternal: (path: string) => {
     return Promise.resolve(true)
   },
-  openItem: (path: string) => true,
+  openPath: (path: string) => Promise.resolve(''),
 }

app/test/integration/launch-test.ts

@@ -39,10 +39,17 @@ describe('App', function (this: any) {
   })
 
   it('opens a window on launch', async () => {
-    await app.client.waitUntil(() => app.browserWindow.isVisible(), 5000)
+    await app.client.waitUntil(
+      () => Promise.resolve(app.browserWindow.isVisible()),
+      { timeout: 5000 }
+    )
 
     const count = await app.client.getWindowCount()
-    expect(count).toBe(1)
+    // When running tests against development versions of Desktop
+    // (which usually happens locally when developing), the number
+    // of windows will be greater than 1, since the devtools are
+    // considered a window.
+    expect(count).toBeGreaterThan(0)
 
     const window = app.browserWindow
     expect(window.isVisible()).resolves.toBe(true)