Merge pull request #2616 from balena-io/electron-3.0

Bump electron to v3.1.3

.resinci.json

@@ -16,7 +16,11 @@
       "linux": [
         "libudev-dev",
         "libusb-1.0-0-dev",
-        "libyaml-dev"
+        "libyaml-dev",
+        "libgtk-3-0",
+        "libatk-bridge2.0-0",
+        "libdbus-1-3",
+        "libc6"
       ]
     },
     "builder": {

electron-builder.yml

@@ -66,7 +66,7 @@ deb:
     - libgconf-2-4
     - libgdk-pixbuf2.0-0
     - libglib2.0-0
-    - libgtk2.0-0
+    - libgtk-3-0
     - liblzma5
     - libnotify4
     - libnspr4

lib/gui/app/components/safe-webview/safe-webview.jsx

@@ -100,12 +100,11 @@ class SafeWebview extends react.PureComponent {
 
     this.eventTuples = [
       [ 'did-fail-load', this.didFailLoad ],
-      [ 'did-get-response-details', this.didGetResponseDetails ],
       [ 'new-window', this.constructor.newWindow ]
     ]
 
     // Make a persistent electron session for the webview
-    electron.remote.session.fromPartition(ELECTRON_SESSION, {
+    this.session = electron.remote.session.fromPartition(ELECTRON_SESSION, {
 
       // Disable the cache for the session such that new content shows up when refreshing
       cache: false
@@ -118,6 +117,7 @@ class SafeWebview extends react.PureComponent {
   render () {
     return react.createElement('webview', {
       ref: 'webview',
+      partition: ELECTRON_SESSION,
       style: {
         flex: this.state.shouldShow ? null : '0 1',
         width: this.state.shouldShow ? null : '0',
@@ -135,8 +135,7 @@ class SafeWebview extends react.PureComponent {
       this.refs.webview.addEventListener(...tuple)
     })
 
-    // Use the 'success-banner' session
-    this.refs.webview.partition = ELECTRON_SESSION
+    this.session.webRequest.onCompleted(this.didGetResponseDetails)
 
     // It's important that this comes after the partition setting, otherwise it will
     // use another session and we can't change it without destroying the element again
@@ -151,6 +150,7 @@ class SafeWebview extends react.PureComponent {
     _.map(this.eventTuples, (tuple) => {
       this.refs.webview.removeEventListener(...tuple)
     })
+    this.session.webRequest.onCompleted(null)
   }
 
   /**
@@ -200,10 +200,10 @@ class SafeWebview extends react.PureComponent {
       })
 
       this.setState({
-        shouldShow: event.httpResponseCode === HTTP_OK
+        shouldShow: event.statusCode === HTTP_OK
       })
       if (this.props.onWebviewShow) {
-        this.props.onWebviewShow(event.httpResponseCode === HTTP_OK)
+        this.props.onWebviewShow(event.statusCode === HTTP_OK)
       }
     }
   }

lib/gui/app/pages/main/templates/main.tpl.html

@@ -92,6 +92,7 @@
 
   <div>
     <featured-project
+      ng-if="main.state.isFlashing()"
       ng-class="{
         'fp-visible': main.state.isFlashing() && main.isWebviewShowing
       }"

lib/gui/etcher.js

@@ -25,7 +25,6 @@ const settings = require('./app/models/settings')
 /* eslint-disable lodash/prefer-lodash-method */
 
 const config = settings.getDefaults()
-let mainWindow = null
 
 /**
  * @summary Create Etcher's main window
@@ -33,7 +32,7 @@ let mainWindow = null
  * electron.app.on('ready', createMainWindow)
  */
 const createMainWindow = () => {
-  mainWindow = new electron.BrowserWindow({
+  const mainWindow = new electron.BrowserWindow({
     width: 800,
     height: 480,
     useContentSize: true,
@@ -44,7 +43,7 @@ const createMainWindow = () => {
     fullscreenable: Boolean(config.fullscreen),
     kiosk: Boolean(config.fullscreen),
     autoHideMenuBar: true,
-    titleBarStyle: 'hidden-inset',
+    titleBarStyle: 'hiddenInset',
     icon: path.join(__dirname, '..', '..', 'assets', 'icon.png'),
     darkTheme: true,
     webPreferences: {
@@ -60,10 +59,6 @@ const createMainWindow = () => {
     mainWindow.show()
   })
 
-  mainWindow.on('closed', () => {
-    mainWindow = null
-  })
-
   // Prevent the user from being allowed to zoom-in the application.
   //
   // This function should be called on the renderer process. We use
@@ -72,7 +67,7 @@ const createMainWindow = () => {
   // electron desktop experience fixes in this file.
   //
   // See https://github.com/electron/electron/issues/3609
-  mainWindow.webContents.executeJavaScript('require(\'electron\').webFrame.setZoomLevelLimits(1, 1);')
+  mainWindow.webContents.executeJavaScript('require(\'electron\').webFrame.setVisualZoomLevelLimits(1, 1);')
 
   // Prevent external resources from being loaded (like images)
   // when dropping them on the WebView.

package.json

@@ -47,6 +47,7 @@
     "chalk": "^1.1.3",
     "color": "^2.0.1",
     "command-join": "^2.0.0",
+    "d3": "^4.13.0",
     "debug": "^3.1.0",
     "drivelist": "^6.4.2",
     "electron-is-running-in-asar": "^1.0.0",
@@ -87,9 +88,9 @@
     "acorn": "^6.0.5",
     "angular-mocks": "1.7.6",
     "babel-loader": "^8.0.4",
-    "electron": "1.8.8",
-    "electron-builder": "^19.40.0",
-    "electron-mocha": "^6.0.1",
+    "electron": "3.1.3",
+    "electron-builder": "^20.38.5",
+    "electron-mocha": "^6.0.4",
     "eslint": "^4.17.0",
     "eslint-config-standard": "^10.2.1",
     "eslint-plugin-import": "^2.9.0",
@@ -104,12 +105,12 @@
     "mocha": "^5.0.1",
     "mochainon": "^2.0.0",
     "nock": "^9.2.3",
-    "node-gyp": "^3.5.0",
+    "node-gyp": "^3.8.0",
     "node-sass": "^4.7.2",
     "pkg": "^4.3.0",
     "sass-lint": "^1.12.1",
     "simple-progress-webpack-plugin": "^1.1.2",
-    "spectron": "^3.7.3",
+    "spectron": "^5.0.0",
     "versionist": "^4.0.1",
     "webpack": "^4.27.0",
     "webpack-cli": "^3.1.2",

patches/allow-electron-forks-of-modules-that-use-pre-gyp.patch

@@ -10,7 +10,7 @@
 +            // TODO PR something to electron to pass in the version number for forks
 +            // https://github.com/electron/electron/issues/9058
 +            try { electron_version = require('electron/package.json').version; }
-+            catch (_) { electron_version = '1.8.8'; }
++            catch (_) { electron_version = '3.1.3'; }
 +        }
 +        return get_electron_abi(runtime, electron_version);
      } else {