Update to Electron 4

README.md

@@ -59,11 +59,12 @@ Backers support this project by contributing $2 to $99 a month. [Become a backer
 
 Requires node 6 or higher. On Windows, you may need to use npm version 4, due to a bug in npm 5.
 
-In Linux (and in some cases macOS) you need libtool, m4, and automake:
+In Linux (and in some cases macOS) you need libtool, m4, autoconf, and automake:
 
 ```bash
-sudo apt-get install libtool m4 make g++  # debian/ubuntu
+sudo apt-get install libtool m4 make g++ autoconf # debian/ubuntu
 sudo dnf install libtool m4 make gcc-c++ libXScrnSaver  # fedora
+brew install libtool autoconf automake # macos
 ```
 
 In Windows, you'll need to install [Python 2.7](https://www.python.org/downloads/release/python-2711/), Visual Studio 2015 or 2017, and [Git](https://git-scm.com/download/win). (You might try [windows-build-tools](https://www.npmjs.com/package/windows-build-tools).) Then run:

app/background-process/browser.js

@@ -102,6 +102,14 @@ export function setup () {
     }
   })
 
+  // quick sync getters
+  ipcMain.on('get-markdown-renderer-script', e => {
+    e.returnValue = fs.readFileSync(path.join(app.getAppPath(), 'markdown-renderer.build.js'), 'utf8')
+  })
+  ipcMain.on('get-json-renderer-script', e => {
+    e.returnValue = fs.readFileSync(path.join(app.getAppPath(), 'json-renderer.build.js'), 'utf8')
+  })
+
   // HACK
   // Electron doesn't give us a convenient way to check the content-types of responses
   // so we track the last 100 responses' headers to accomplish this
@@ -570,6 +578,14 @@ function onUpdateError (e) {
 
 function onWebContentsCreated (e, webContents) {
   webContents.on('will-prevent-unload', onWillPreventUnload)
+  webContents.on('remote-require', e => {
+    // do not allow
+    e.preventDefault()
+  })
+  webContents.on('remote-get-global', e => {
+    // do not allow
+    e.preventDefault()
+  })
 }
 
 function onWillPreventUnload (e) {
@@ -591,6 +607,7 @@ function onCompleted (details) {
   function set (v) {
     resourceContentTypes.set(details.url, Array.isArray(v) ? v[0] : v)
   }
+  if (!details.responseHeaders) return
   if ('Content-Type' in details.responseHeaders) {
     set(details.responseHeaders['Content-Type'])
   } else if ('content-type' in details.responseHeaders) {

app/background-process/hidden-windows.js

@@ -10,7 +10,13 @@ var hiddenWindows = {}
 
 export async function spawn (id, modulePath) {
   var fullModulePath = require.resolve(modulePath)
-  var win = new BrowserWindow({show: false})
+  var win = new BrowserWindow({
+    show: false,
+    webPreferences: {
+      nodeIntegration: true,
+      enableRemoteModule: false
+    }
+  })
   // win.webContents.toggleDevTools()
   console.log('[', id, '] Starting...')
   win.loadURL(`beaker-hidden-window://loader/?module=${encodeURIComponent(fullModulePath)}&userDataPath=${encodeURIComponent(app.getPath('userData'))}`)

app/background-process/ui/windows.js

@@ -135,9 +135,13 @@ export function createShellWindow (windowState) {
     backgroundColor: '#ddd',
     defaultEncoding: 'UTF-8',
     webPreferences: {
-      sandbox: true,
       preload: PRELOAD_PATH,
+      nodeIntegration: false,
+      contextIsolation: false,
+      webviewTag: true,
+      sandbox: true,
       webSecurity: false, // disable same-origin-policy in the shell window, webviews have it restored
+      // enableRemoteModule: false, TODO would prefer this were true, but shell window needs this to get the webviews' webContents IDs -prf
       allowRunningInsecureContent: false,
       nativeWindowOpen: true
     },

app/package.json

@@ -8,7 +8,7 @@
   "copyright": "© 2018, Blue Link Labs",
   "main": "background-process.build.js",
   "dependencies": {
-    "@beaker/core": "3.0.2",
+    "@beaker/core": "beakerbrowser/beaker-core#master",
     "@beaker/dat-archive-file-diff": "^1.0.0",
     "@beaker/electron-localshortcut": "^1.0.0",
     "anymatch": "^1.3.2",
@@ -91,8 +91,5 @@
     "utp-native": "^2.0.0",
     "yo-yo": "^1.4.0",
     "zerr": "^1.0.4"
-  },
-  "devDependencies": {
-    "devtron": "^1.4.0"
   }
 }

app/shell-window/pages.js

@@ -3,7 +3,6 @@
 import { ipcRenderer, remote } from 'electron'
 import EventEmitter from 'events'
 import path from 'path'
-import fs from 'fs'
 import throttle from 'lodash.throttle'
 import parseDatURL from 'parse-dat-url'
 import errorPage from '@beaker/core/lib/error-page'
@@ -135,6 +134,8 @@ export function create (opts) {
     isReceivingAssets: false, // has the webview started receiving assets, in the current load-cycle?
     isActive: false, // is the active page?
     isInpageFinding: false, // showing the inpage find ctrl?
+    isCurrentlyAudible: false, // is the page currently playing music?
+    isAudioMuted: false, // is the page muted?
     inpageFindInfo: null, // any info available on the inpage find {activeMatchOrdinal, matches}
     liveReloadEvents: false, // live-reload event stream
     zoom: 0, // what's the current zoom level?
@@ -173,9 +174,6 @@ export function create (opts) {
     executeJavascriptCalls: {},
     executeJavascriptCallCounter: 0,
 
-    // hackfix reload failsafe
-    reloadHackfixCounter: 0,
-
     // get the current URL
     getURL () {
       return this.url
@@ -393,6 +391,8 @@ export function create (opts) {
   page.webviewEl.addEventListener('found-in-page', onFoundInPage)
   page.webviewEl.addEventListener('enter-html-full-screen', onEnterHtmlFullScreen)
   page.webviewEl.addEventListener('leave-html-full-screen', onLeaveHtmlFullScreen)
+  page.webviewEl.addEventListener('media-started-playing', onMediaChange)
+  page.webviewEl.addEventListener('media-paused', onMediaChange)
   page.webviewEl.addEventListener('close', onClose)
   page.webviewEl.addEventListener('crashed', onCrashed)
   page.webviewEl.addEventListener('gpu-crashed', onCrashed)
@@ -614,6 +614,14 @@ function onDomReady (e) {
     }
     if (!navbar.isLocationFocused(page) && page.isActive) {
       page.webviewEl.shadowRoot.querySelector('iframe').focus()
+
+      // HACKFIX
+      // make sure the page retains focus and the cursor doesnt go invisibl
+      // PR: https://github.com/beakerbrowser/beaker/pull/1285
+      // See: https://github.com/electron/electron/issues/14474
+      // -prf
+      page.webviewEl.blur()
+      page.webviewEl.focus()
     }
   }
 }
@@ -782,21 +790,6 @@ function onDidStopLoading (e) {
       statusBar.setIsLoading(false)
     }
 
-    // HACK
-    // there is a race condition with Electron where the CSPs will sometimes prevent the preload from executing
-    // this can be detected by attempting to call executeJavaScript; if it takes longer than a second, that's too long
-    // reloading the page usually gets it to execute correctly
-    // -prf
-    let webviewCheckTO = setTimeout(() => {
-      if (page.reloadHackfixCounter > 5) return // stop, we're endlessly redirecting
-      page.reloadAsync()
-      page.reloadHackfixCounter++
-    }, 1000)
-    page.executeJavaScript('true').then(res => {
-      page.reloadHackfixCounter = 0
-      clearTimeout(webviewCheckTO)
-    })
-
     // determine content type
     let contentType = beaker.browser.getResourceContentType(page.getURL()) || ''
     let isMD = contentType.startsWith('text/markdown') || contentType.startsWith('text/x-markdown')
@@ -843,7 +836,7 @@ function onDidStopLoading (e) {
         .markdown pre > code { display: block; }
       `)
       if (!cachedMarkdownRendererScript) {
-        cachedMarkdownRendererScript = fs.readFileSync(path.join(APP_PATH, 'markdown-renderer.build.js'), 'utf8')
+        cachedMarkdownRendererScript = ipcRenderer.sendSync('get-markdown-renderer-script')
       }
 
       // NOTE uses webviewEl.executeJavaScript because we dont want to run the markdown renderer in an isolated world
@@ -881,7 +874,7 @@ function onDidStopLoading (e) {
       `)
 
       if (!cachedJSONRendererScript) {
-        cachedJSONRendererScript = fs.readFileSync(path.join(APP_PATH, 'json-renderer.build.js'), 'utf8')
+        cachedJSONRendererScript = ipcRenderer.sendSync('get-json-renderer-script')
       }
 
       page.executeJavaScript(cachedJSONRendererScript)
@@ -1012,6 +1005,13 @@ function onLeaveHtmlFullScreen (e) {
   document.body.classList.remove('page-fullscreen')
 }
 
+async function onMediaChange (e) {
+  var page = getByWebview(e.target)
+  await new Promise(r => setTimeout(r, 1e3)) // the event consistently precedes the audible check by at most 1s
+  page.isCurrentlyAudible = await page.isCurrentlyAudibleAsync()
+  events.emit('media-change', page)
+}
+
 function onClose (e) {
   var page = getByWebview(e.target)
   if (page) {
@@ -1098,6 +1098,7 @@ export function createWebviewEl (id, url) {
   var el = document.createElement('webview')
   el.dataset.id = id
   el.setAttribute('preload', 'file://' + path.join(APP_PATH, 'webview-preload.build.js'))
+  el.setAttribute('enableremotemodule', 'false')
   el.setAttribute('webpreferences', 'allowDisplayingInsecureContent,defaultEncoding=utf-8,scrollBounce,nativeWindowOpen=yes')
   // TODO re-enable nativeWindowOpen when https://github.com/electron/electron/issues/9558 lands
   el.setAttribute('src', url || DEFAULT_URL)

app/shell-window/ui/tabs.js

@@ -48,6 +48,7 @@ export function setup () {
   pages.on('did-stop-loading', onUpdateTab)
   pages.on('page-title-updated', onUpdateTab)
   pages.on('page-favicon-updated', onUpdateTab)
+  pages.on('media-change', onUpdateTab)
   window.addEventListener('resize', debounce(onWindowResize, 500))
 }
 
@@ -57,6 +58,8 @@ export function setup () {
 function drawTab (page) {
   const isActive = page.isActive
   const isTabDragging = page.isTabDragging && (page.tabDragOffset !== 0)
+  const isAudioMuted = page.isAudioMuted
+  const isCurrentlyAudible = page.isCurrentlyAudible
 
   // pick a favicon
   var favicon
@@ -102,7 +105,11 @@ function drawTab (page) {
   }
 
   // normal rendering:
-
+  const audioIcon = isAudioMuted
+    ? yo`<span class="fas fa-volume-mute"></span>`
+    : isCurrentlyAudible
+      ? yo`<span class="fas fa-volume-up"></span>`
+      : ''
   return yo`
   <div class=${'chrome-tab' + cls}
       data-id=${page.id}
@@ -113,7 +120,7 @@ function drawTab (page) {
       title=${getNiceTitle(page)}>
     <div class="chrome-tab-bg"></div>
     <div class="chrome-tab-favicon">${favicon}</div>
-    <div class="chrome-tab-title">${getNiceTitle(page) || 'New Tab'}</div>
+    <div class="chrome-tab-title">${audioIcon}${getNiceTitle(page) || 'New Tab'}</div>
     <div class="chrome-tab-close" title="Close tab" onclick=${onClickTabClose(page)}></div>
   </div>`
 }
@@ -219,8 +226,9 @@ function onToggleMuted (page) {
   return () => {
     if (page.webviewEl) {
       const wc = page.webviewEl.getWebContents()
-      const isMuted = wc.isAudioMuted()
-      wc.setAudioMuted(!isMuted)
+      page.isAudioMuted = !wc.isAudioMuted()
+      wc.setAudioMuted(page.isAudioMuted)
+      onUpdateTab(page)
     }
   }
 }
@@ -272,16 +280,12 @@ function onClickReopenClosedTab () {
 function onContextMenuTab (page) {
   return e => {
     const { Menu } = remote
-    var isMuted = false
-    if (page.webviewEl) {
-      isMuted = page.webviewEl.getWebContents().isAudioMuted()
-    }
     var menu = Menu.buildFromTemplate([
       { label: 'New Tab', click: onClickNew },
       { type: 'separator' },
       { label: 'Duplicate', click: onClickDuplicate(page) },
       { label: (page.isPinned) ? 'Unpin Tab' : 'Pin Tab', click: onClickPin(page) },
-      { label: (isMuted) ? 'Unmute Tab' : 'Mute Tab', click: onToggleMuted(page) },
+      { label: (page.isAudioMuted) ? 'Unmute Tab' : 'Mute Tab', click: onToggleMuted(page) },
       { type: 'separator' },
       { label: 'Close Tab', click: onClickTabClose(page) },
       { label: 'Close Other Tabs', click: onClickCloseOtherTabs(page) },

app/shell-window/webview-async.js

@@ -38,6 +38,7 @@ const methods = [
   'inspectElement',
   'setAudioMuted',
   'isAudioMuted',
+  'isCurrentlyAudible',
   'undo',
   'redo',
   'cut',

app/stylesheets/shell-window/chrome-tabs.less

@@ -88,6 +88,11 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+
+      .fa-volume-up,
+      .fa-volume-mute {
+        margin-right: 4px;
+      }
     }
 
     &.chrome-tab-nofavicon .chrome-tab-title {

package.json

@@ -3,7 +3,7 @@
   "name": "beakerbrowser",
   "devDependencies": {
     "browserify": "^13.0.1",
-    "electron": "3.0.9",
+    "electron": "4.0.3",
     "electron-builder": "~20.8.0",
     "eslint": "^4.5.0",
     "eslint-plugin-import": "^2.7.0",

tasks/rebuild.js

@@ -2,14 +2,22 @@ var gulp = require('gulp')
 var path = require('path')
 var run = require('./util-run')
 
-//(cd app && npm rebuild --runtime=electron --target=3.0.9 --disturl=https://atom.io/download/atom-shell --build-from-source); gulp build
+//(cd app && npm rebuild --runtime=electron --target=4.0.3 --disturl=https://atom.io/download/atom-shell --build-from-source); gulp build
 
 gulp.task('rebuild', gulp.series(function () {
   // TODO read electron version
   var cwd = path.join(process.cwd(), 'app')
   console.log(cwd)
   return new Promise(resolve => {
-    run(`npm rebuild --runtime=electron --target=3.0.9 --disturl=https://atom.io/download/atom-shell --build-from-source`, {cwd, shell: true}, function () {
+    var env = {}
+    if (process.platform === 'darwin') {
+      env = {
+        // required to make spellchecker compile
+        CXXFLAGS: '-mmacosx-version-min=10.10',
+        LDFLAGS: '-mmacosx-version-min=10.10'
+      }
+    }
+    run(`npm rebuild --runtime=electron --target=4.0.3 --disturl=https://atom.io/download/atom-shell --build-from-source`, {cwd, env, shell: true}, function () {
       run(`npm run build`, {shell: true}, function () {
         resolve()
       })

tasks/util-run.js

@@ -5,7 +5,7 @@ module.exports = function (cmd, opts, cb) {
   console.log(cmd)
   cmd = cmd.split(' ')
   opts.stdio = 'inherit'
-  opts.env = process.env
+  opts.env = Object.assign({}, process.env, opts.env || {})
   childProcess.spawn(cmd[0], cmd.slice(1), opts)
     .on('error', console.log)
     .on('close', cb)