Merge pull request #1346 from beakerbrowser/browser-view-refactor

Browser view refactor (WIP)

app/background-process.js

@@ -17,12 +17,11 @@ import * as analytics from './background-process/analytics'
 import * as portForwarder from './background-process/nat-port-forwarder'
 
 import * as windows from './background-process/ui/windows'
-import * as modals from './background-process/ui/modals'
+import * as modals from './background-process/ui/subwindows/modals'
 import * as windowMenu from './background-process/ui/window-menu'
 import registerContextMenu from './background-process/ui/context-menu'
 import * as downloads from './background-process/ui/downloads'
 import * as permissions from './background-process/ui/permissions'
-import * as basicAuth from './background-process/ui/basic-auth'
 import * as childProcesses from './background-process/child-processes'
 
 import * as beakerProtocol from './background-process/protocols/beaker'
@@ -93,7 +92,7 @@ app.on('ready', async function () {
     // APIs
     permsAPI: permissions,
     uiAPI: {
-      showModal: modals.showShellModal,
+      showModal: modals.create,
       capturePage: beakerBrowser.capturePage
     },
     rpcAPI: rpc,
@@ -111,10 +110,8 @@ app.on('ready', async function () {
   windowMenu.setup()
   registerContextMenu()
   windows.setup()
-  modals.setup()
   downloads.setup()
   permissions.setup()
-  basicAuth.setup()
 
   // protocols
   beakerProtocol.setup()

app/background-process/browser.js

@@ -15,8 +15,7 @@ const exec = require('util').promisify(require('child_process').exec)
 const debug = beakerCore.debugLogger('beaker')
 const settingsDb = beakerCore.dbs.settings
 import {open as openUrl} from './open-url'
-import {showModal, showShellModal, closeModal} from './ui/modals'
-import {getActiveWindow} from './ui/windows'
+import * as modals from './ui/subwindows/modals'
 import {INVALID_SAVE_FOLDER_CHAR_REGEX} from '@beaker/core/lib/const'
 
 // constants
@@ -93,23 +92,14 @@ export function setup () {
   //  - we have use ipc directly instead of using rpc, because we need custom
   //    response-lifecycle management in the main thread
   ipcMain.on('page-prompt-dialog', async (e, message, def) => {
-    var win = BrowserWindow.fromWebContents(e.sender.hostWebContents)
     try {
-      var res = await showModal(win, 'prompt', {message, default: def})
+      var res = await modals.create(e.sender, 'prompt', {message, default: def})
       e.returnValue = res && res.value ? res.value : false
     } catch (e) {
       e.returnValue = false
     }
   })
 
-  // 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
@@ -151,7 +141,7 @@ export const WEBAPI = {
   openFolder,
   doWebcontentsCmd,
   doTest,
-  closeModal
+  closeModal: () => {} // DEPRECATED, probably safe to remove soon
 }
 
 export function fetchBody (url) {
@@ -516,9 +506,6 @@ async function doWebcontentsCmd (method, wcId, ...args) {
 }
 
 async function doTest (test) {
-  if (test === 'modal') {
-    return showShellModal(this.sender, 'example', {i: 5})
-  }
 }
 
 // internal methods

app/background-process/open-url.js

@@ -1,6 +1,7 @@
 // handle OSX open-url event
-import {ipcMain} from 'electron'
+import {BrowserWindow, ipcMain} from 'electron'
 import * as windows from './ui/windows'
+import * as viewManager from './ui/view-manager'
 var queue = []
 var isLoaded = false
 var isSetup = false
@@ -9,7 +10,8 @@ export function setup () {
   if (isSetup) return
   isSetup = true
   ipcMain.on('shell-window:ready', function (e) {
-    queue.forEach(url => e.sender.send('command', 'file:new-tab', url))
+    var win = BrowserWindow.fromWebContents(e.sender)
+    queue.forEach(url => viewManager.create(win, url))
     queue.length = 0
     isLoaded = true
   })
@@ -20,7 +22,7 @@ export function open (url) {
   var win = windows.getActiveWindow()
   if (isLoaded && win) {
     // send command now
-    win.webContents.send('command', 'file:new-tab', url)
+    viewManager.create(win, url)
     win.show()
   } else {
     // queue for later

app/background-process/protocols/beaker.js

@@ -96,6 +96,15 @@ async function beakerProtocol (request, respond) {
   if (requestUrl === 'beaker://shell-window/main.css') {
     return cb(200, 'OK', 'text/css; charset=utf-8', path.join(__dirname, 'stylesheets/shell-window.css'))
   }
+  if (requestUrl === 'beaker://shell-menus/') {
+    return cb(200, 'OK', 'text/html; charset=utf-8', path.join(__dirname, 'shell-menus.html'))
+  }
+  if (requestUrl === 'beaker://perm-prompt/') {
+    return cb(200, 'OK', 'text/html; charset=utf-8', path.join(__dirname, 'perm-prompt.html'))
+  }
+  if (requestUrl === 'beaker://modals/') {
+    return cb(200, 'OK', 'text/html; charset=utf-8', path.join(__dirname, 'modals.html'))
+  }
   if (requestUrl === 'beaker://assets/syntax-highlight.js') {
     return cb(200, 'OK', 'application/javascript; charset=utf-8', path.join(__dirname, 'assets/js/syntax-highlight.js'))
   }
@@ -316,26 +325,6 @@ async function beakerProtocol (request, respond) {
     return cb(200, 'OK', 'text/html; charset=utf-8', path.join(__dirname, 'builtin-pages/watchlist.html'))
   }
 
-  // modals
-  if (requestUrl === 'beaker://basic-auth-modal/') {
-    return cb(200, 'OK', 'text/html; charset=utf-8', path.join(__dirname, 'builtin-pages/basic-auth-modal.html'))
-  }
-  if (requestUrl === 'beaker://basic-auth-modal/main.css') {
-    return cb(200, 'OK', 'text/css; charset=utf-8', path.join(__dirname, 'stylesheets/builtin-pages/basic-auth-modal.css'))
-  }
-  if (requestUrl === 'beaker://basic-auth-modal/main.js') {
-    return cb(200, 'OK', 'application/javascript; charset=utf-8', path.join(__dirname, 'builtin-pages/build/basic-auth-modal.build.js'))
-  }
-  if (requestUrl === 'beaker://prompt-modal/') {
-    return cb(200, 'OK', 'text/html; charset=utf-8', path.join(__dirname, 'builtin-pages/prompt-modal.html'))
-  }
-  if (requestUrl === 'beaker://prompt-modal/main.css') {
-    return cb(200, 'OK', 'text/css; charset=utf-8', path.join(__dirname, 'stylesheets/builtin-pages/prompt-modal.css'))
-  }
-  if (requestUrl === 'beaker://prompt-modal/main.js') {
-    return cb(200, 'OK', 'application/javascript; charset=utf-8', path.join(__dirname, 'builtin-pages/build/prompt-modal.build.js'))
-  }
-
   // debugging
   if (requestUrl === 'beaker://internal-archives/') {
     return cb(200, 'OK', 'text/html; charset=utf-8', archivesDebugPage)

app/background-process/rpc-manifests/modals.js

@@ -0,0 +1,4 @@
+export default {
+  createTab: 'promise',
+  resizeSelf: 'promise'
+}

app/background-process/rpc-manifests/perm-prompt.js

@@ -0,0 +1,4 @@
+export default {
+  createTab: 'promise',
+  resizeSelf: 'promise'
+}

app/background-process/rpc-manifests/shell-menus.js

@@ -0,0 +1,8 @@
+export default {
+  close: 'promise',
+  createWindow: 'promise',
+  createTab: 'promise',
+  loadURL: 'promise',
+  resizeSelf: 'promise',
+  showInpageFind: 'promise'
+}

app/background-process/rpc-manifests/views.js

@@ -0,0 +1,26 @@
+export default {
+  createEventStream: 'readable',
+  refreshState: 'promise',
+  getState: 'promise',
+  getTabState: 'promise',
+  createTab: 'promise',
+  loadURL: 'promise',
+  closeTab: 'promise',
+  setActiveTab: 'promise',
+  reorderTab: 'promise',
+  showTabContextMenu: 'promise',
+  showLocationBarContextMenu: 'promise',
+  goBack: 'promise',
+  goForward: 'promise',
+  stop: 'promise',
+  reload: 'promise',
+  resetZoom: 'promise',
+  toggleLiveReloading: 'promise',
+  showInpageFind: 'promise',
+  hideInpageFind: 'promise',
+  setInpageFindString: 'promise',
+  moveInpageFind: 'promise',
+  showMenu: 'promise',
+  toggleMenu: 'promise',
+  focusShellWindow: 'promise'
+}

app/background-process/test-driver.js

@@ -2,6 +2,9 @@ import dgram from 'dgram'
 import {ipcMain} from 'electron'
 import * as beakerCore from '@beaker/core'
 import * as windows from './ui/windows'
+import * as viewManager from './ui/view-manager'
+import * as permPrompt from './ui/subwindows/perm-prompt'
+import * as modals from './ui/subwindows/modals'
 
 const LOG_MESSAGES = false
 
@@ -68,59 +71,66 @@ async function onMessage (message) {
 
 const METHODS = {
   newTab () {
-    return execute(`
-      var index = pages.getAll().length
-      page = pages.create()
-      pages.setActive(page)
-      index
-    `)
+    var win = getActiveWindow()
+    var view = viewManager.create(win, undefined, {setActive: true})
+    return viewManager.getIndexOfView(win, view)
   },
 
   navigateTo (page, url) {
-    return execute(`
-      var page = pages.get(${page})
-      page.navbarEl.querySelector('.nav-location-input').value = "${url}"
-      page.navbarEl.querySelector('.nav-location-input').blur()
-
-      var loadPromise = new Promise(resolve => {
-        function onDomReady () {
-          page.webviewEl.removeEventListener('dom-ready', onDomReady)
-          resolve()
-        }
-        page.webviewEl.addEventListener('dom-ready', onDomReady)
-      })
-      page.loadURL("${url}")
-      loadPromise
-    `)
+    var view = viewManager.getByIndex(getActiveWindow(), page)
+    var loadPromise = new Promise(resolve => view.webContents.once('dom-ready', () => resolve()))
+    view.loadURL(url)
+    return loadPromise
   },
 
   getUrl (page) {
-    return execute(`
-      var page = pages.get(${page})
-      page.getURL()
-    `)
+    var view = viewManager.getByIndex(getActiveWindow(), page)
+    return view.url
   },
 
   async executeJavascriptInShell (js) {
-    var res = await execute(js)
+    var win = getActiveWindow()
+    var res = await win.webContents.executeJavaScript(js)
     return res
   },
 
   async executeJavascriptOnPage (page, js) {
-    try {
-      var res = await execute(`
-        var page = pages.get(${page})
-        page.webviewEl.getWebContents().executeJavaScript(\`` + js + `\`)
-      `)
-      return res
-    } catch (e) {
-      console.error('Failed to execute javascript on page', js, e)
-      throw e
-    }
+    var view = viewManager.getByIndex(getActiveWindow(), page)
+    var res = await view.webContents.executeJavaScript(js)
+    return res
+  },
+
+  async executeJavascriptInPermPrompt (page, js) {
+    var view = viewManager.getByIndex(getActiveWindow(), page).browserView
+    var prompt = await waitFor(() => permPrompt.get(view))
+    var res = await prompt.webContents.executeJavaScript(js)
+    return res
+  },
+
+  async executeJavascriptInModal (page, js) {
+    var view = viewManager.getByIndex(getActiveWindow(), page).browserView
+    var modal = await waitFor(() => modals.get(view))
+    var res = await modal.webContents.executeJavaScript(js)
+    return res
   }
 }
 
-function execute (js) {
+function getActiveWindow () {
   var win = windows.getActiveWindow()
-  return win.webContents.executeJavaScript(js)
+  while (win.getParentWindow()) {
+    win = win.getParentWindow()
+  }
+  return win
 }
+
+function waitFor (condFn) {
+  return new Promise(resolve => {
+    var i = setInterval(async () => {
+      var res = condFn()
+      if (!!res) {
+        clearInterval(i)
+        return resolve(res)
+      }
+    }, 100)
+  })
+}