| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455 |
- 'use strict'
- const {ipcRenderer, remote, webFrame} = require('electron')
- const v8Util = process.atomBinding('v8_util')
- const guestViewInternal = require('./guest-view-internal')
- const webViewConstants = require('./web-view-constants')
- const hasProp = {}.hasOwnProperty
- // ID generator.
- let nextId = 0
- const getNextId = function () {
- return ++nextId
- }
- // Represents the internal state of the WebView node.
- class WebViewImpl {
- constructor (webviewNode) {
- this.webviewNode = webviewNode
- v8Util.setHiddenValue(this.webviewNode, 'internal', this)
- this.attached = false
- this.elementAttached = false
- this.beforeFirstNavigation = true
- // on* Event handlers.
- this.on = {}
- this.browserPluginNode = this.createBrowserPluginNode()
- const shadowRoot = this.webviewNode.attachShadow({mode: 'open'})
- shadowRoot.innerHTML = '<!DOCTYPE html><style type="text/css">:host { display: flex; }</style>'
- this.setupWebViewAttributes()
- this.setupFocusPropagation()
- this.viewInstanceId = getNextId()
- shadowRoot.appendChild(this.browserPluginNode)
- }
- createBrowserPluginNode () {
- // We create BrowserPlugin as a custom element in order to observe changes
- // to attributes synchronously.
- const browserPluginNode = new WebViewImpl.BrowserPlugin()
- v8Util.setHiddenValue(browserPluginNode, 'internal', this)
- return browserPluginNode
- }
- // Resets some state upon reattaching <webview> element to the DOM.
- reset () {
- // If guestInstanceId is defined then the <webview> has navigated and has
- // already picked up a partition ID. Thus, we need to reset the initialization
- // state. However, it may be the case that beforeFirstNavigation is false BUT
- // guestInstanceId has yet to be initialized. This means that we have not
- // heard back from createGuest yet. We will not reset the flag in this case so
- // that we don't end up allocating a second guest.
- if (this.guestInstanceId) {
- guestViewInternal.destroyGuest(this.guestInstanceId)
- this.guestInstanceId = void 0
- }
- this.webContents = null
- this.beforeFirstNavigation = true
- this.attributes[webViewConstants.ATTRIBUTE_PARTITION].validPartitionId = true
- // Set guestinstance last since this can trigger the attachedCallback to fire
- // when moving the webview using element.replaceChild
- this.attributes[webViewConstants.ATTRIBUTE_GUESTINSTANCE].setValueIgnoreMutation(undefined)
- }
- // Sets the <webview>.request property.
- setRequestPropertyOnWebViewNode (request) {
- Object.defineProperty(this.webviewNode, 'request', {
- value: request,
- enumerable: true
- })
- }
- setupFocusPropagation () {
- if (!this.webviewNode.hasAttribute('tabIndex')) {
- // <webview> needs a tabIndex in order to be focusable.
- // TODO(fsamuel): It would be nice to avoid exposing a tabIndex attribute
- // to allow <webview> to be focusable.
- // See http://crbug.com/231664.
- this.webviewNode.setAttribute('tabIndex', -1)
- }
- // Focus the BrowserPlugin when the <webview> takes focus.
- this.webviewNode.addEventListener('focus', () => {
- this.browserPluginNode.focus()
- })
- // Blur the BrowserPlugin when the <webview> loses focus.
- this.webviewNode.addEventListener('blur', () => {
- this.browserPluginNode.blur()
- })
- }
- // This observer monitors mutations to attributes of the <webview> and
- // updates the BrowserPlugin properties accordingly. In turn, updating
- // a BrowserPlugin property will update the corresponding BrowserPlugin
- // attribute, if necessary. See BrowserPlugin::UpdateDOMAttribute for more
- // details.
- handleWebviewAttributeMutation (attributeName, oldValue, newValue) {
- if (!this.attributes[attributeName] || this.attributes[attributeName].ignoreMutation) {
- return
- }
- // Let the changed attribute handle its own mutation
- this.attributes[attributeName].handleMutation(oldValue, newValue)
- }
- handleBrowserPluginAttributeMutation (attributeName, oldValue, newValue) {
- if (attributeName === webViewConstants.ATTRIBUTE_INTERNALINSTANCEID && !oldValue && !!newValue) {
- this.browserPluginNode.removeAttribute(webViewConstants.ATTRIBUTE_INTERNALINSTANCEID)
- this.internalInstanceId = parseInt(newValue)
- // Track when the element resizes using the element resize callback.
- webFrame.registerElementResizeCallback(this.internalInstanceId, this.onElementResize.bind(this))
- if (this.guestInstanceId) {
- guestViewInternal.attachGuest(this.internalInstanceId, this.guestInstanceId, this.buildParams())
- }
- }
- }
- onSizeChanged (webViewEvent) {
- const {newHeight, newWidth} = webViewEvent
- const node = this.webviewNode
- const width = node.offsetWidth
- // Check the current bounds to make sure we do not resize <webview>
- // outside of current constraints.
- const maxWidth = this.attributes[webViewConstants.ATTRIBUTE_MAXWIDTH].getValue() | width
- const maxHeight = this.attributes[webViewConstants.ATTRIBUTE_MAXHEIGHT].getValue() | width
- let minWidth = this.attributes[webViewConstants.ATTRIBUTE_MINWIDTH].getValue() | width
- let minHeight = this.attributes[webViewConstants.ATTRIBUTE_MINHEIGHT].getValue() | width
- minWidth = Math.min(minWidth, maxWidth)
- minHeight = Math.min(minHeight, maxHeight)
- if (!this.attributes[webViewConstants.ATTRIBUTE_AUTOSIZE].getValue() || (newWidth >= minWidth && newWidth <= maxWidth && newHeight >= minHeight && newHeight <= maxHeight)) {
- node.style.width = `${newWidth}px`
- node.style.height = `${newHeight}px`
- // Only fire the DOM event if the size of the <webview> has actually
- // changed.
- this.dispatchEvent(webViewEvent)
- }
- }
- onElementResize (newSize) {
- // Dispatch the 'resize' event.
- const resizeEvent = new Event('resize')
- // Using client size values, because when a webview is transformed `newSize`
- // is incorrect
- newSize.width = this.webviewNode.clientWidth
- newSize.height = this.webviewNode.clientHeight
- resizeEvent.newWidth = newSize.width
- resizeEvent.newHeight = newSize.height
- this.dispatchEvent(resizeEvent)
- if (this.guestInstanceId &&
- !this.attributes[webViewConstants.ATTRIBUTE_DISABLEGUESTRESIZE].getValue()) {
- guestViewInternal.setSize(this.guestInstanceId, {
- normal: newSize
- })
- }
- }
- createGuest () {
- return guestViewInternal.createGuest(this.buildParams(), (event, guestInstanceId) => {
- this.attachGuestInstance(guestInstanceId)
- })
- }
- createGuestSync () {
- this.attachGuestInstance(guestViewInternal.createGuestSync(this.buildParams()))
- }
- dispatchEvent (webViewEvent) {
- this.webviewNode.dispatchEvent(webViewEvent)
- }
- // Adds an 'on<event>' property on the webview, which can be used to set/unset
- // an event handler.
- setupEventProperty (eventName) {
- const propertyName = `on${eventName.toLowerCase()}`
- return Object.defineProperty(this.webviewNode, propertyName, {
- get: () => {
- return this.on[propertyName]
- },
- set: (value) => {
- if (this.on[propertyName]) {
- this.webviewNode.removeEventListener(eventName, this.on[propertyName])
- }
- this.on[propertyName] = value
- if (value) {
- return this.webviewNode.addEventListener(eventName, value)
- }
- },
- enumerable: true
- })
- }
- // Updates state upon loadcommit.
- onLoadCommit (webViewEvent) {
- const oldValue = this.webviewNode.getAttribute(webViewConstants.ATTRIBUTE_SRC)
- const newValue = webViewEvent.url
- if (webViewEvent.isMainFrame && (oldValue !== newValue)) {
- // Touching the src attribute triggers a navigation. To avoid
- // triggering a page reload on every guest-initiated navigation,
- // we do not handle this mutation.
- this.attributes[webViewConstants.ATTRIBUTE_SRC].setValueIgnoreMutation(newValue)
- }
- }
- onAttach (storagePartitionId) {
- return this.attributes[webViewConstants.ATTRIBUTE_PARTITION].setValue(storagePartitionId)
- }
- buildParams () {
- const params = {
- instanceId: this.viewInstanceId,
- userAgentOverride: this.userAgentOverride
- }
- for (const attributeName in this.attributes) {
- if (hasProp.call(this.attributes, attributeName)) {
- params[attributeName] = this.attributes[attributeName].getValue()
- }
- }
- // When the WebView is not participating in layout (display:none)
- // then getBoundingClientRect() would report a width and height of 0.
- // However, in the case where the WebView has a fixed size we can
- // use that value to initially size the guest so as to avoid a relayout of
- // the on display:block.
- const css = window.getComputedStyle(this.webviewNode, null)
- const elementRect = this.webviewNode.getBoundingClientRect()
- params.elementWidth = parseInt(elementRect.width) || parseInt(css.getPropertyValue('width'))
- params.elementHeight = parseInt(elementRect.height) || parseInt(css.getPropertyValue('height'))
- return params
- }
- attachGuestInstance (guestInstanceId) {
- this.guestInstanceId = guestInstanceId
- this.attributes[webViewConstants.ATTRIBUTE_GUESTINSTANCE].setValueIgnoreMutation(guestInstanceId)
- this.webContents = remote.getGuestWebContents(this.guestInstanceId)
- if (!this.internalInstanceId) {
- return true
- }
- return guestViewInternal.attachGuest(this.internalInstanceId, this.guestInstanceId, this.buildParams())
- }
- }
- // Registers browser plugin <object> custom element.
- const registerBrowserPluginElement = function () {
- const proto = Object.create(HTMLObjectElement.prototype)
- proto.createdCallback = function () {
- this.setAttribute('type', 'application/browser-plugin')
- this.setAttribute('id', `browser-plugin-${getNextId()}`)
- // The <object> node fills in the <webview> container.
- this.style.flex = '1 1 auto'
- }
- proto.attributeChangedCallback = function (name, oldValue, newValue) {
- const internal = v8Util.getHiddenValue(this, 'internal')
- if (internal) {
- internal.handleBrowserPluginAttributeMutation(name, oldValue, newValue)
- }
- }
- proto.attachedCallback = function () {
- // Load the plugin immediately.
- return this.nonExistentAttribute
- }
- WebViewImpl.BrowserPlugin = webFrame.registerEmbedderCustomElement('browserplugin', {
- 'extends': 'object',
- prototype: proto
- })
- delete proto.createdCallback
- delete proto.attachedCallback
- delete proto.detachedCallback
- delete proto.attributeChangedCallback
- }
- // Registers <webview> custom element.
- const registerWebViewElement = function () {
- const proto = Object.create(HTMLObjectElement.prototype)
- proto.createdCallback = function () {
- return new WebViewImpl(this)
- }
- proto.attributeChangedCallback = function (name, oldValue, newValue) {
- const internal = v8Util.getHiddenValue(this, 'internal')
- if (internal) {
- internal.handleWebviewAttributeMutation(name, oldValue, newValue)
- }
- }
- proto.detachedCallback = function () {
- const internal = v8Util.getHiddenValue(this, 'internal')
- if (!internal) {
- return
- }
- guestViewInternal.deregisterEvents(internal.viewInstanceId)
- internal.elementAttached = false
- this.internalInstanceId = 0
- internal.reset()
- }
- proto.attachedCallback = function () {
- const internal = v8Util.getHiddenValue(this, 'internal')
- if (!internal) {
- return
- }
- if (!internal.elementAttached) {
- guestViewInternal.registerEvents(internal, internal.viewInstanceId)
- internal.elementAttached = true
- const instance = internal.attributes[webViewConstants.ATTRIBUTE_GUESTINSTANCE].getValue()
- if (instance) {
- internal.attachGuestInstance(instance)
- } else {
- internal.attributes[webViewConstants.ATTRIBUTE_SRC].parse()
- }
- }
- }
- // Public-facing API methods.
- const methods = [
- 'getURL',
- 'loadURL',
- 'getTitle',
- 'isLoading',
- 'isLoadingMainFrame',
- 'isWaitingForResponse',
- 'stop',
- 'reload',
- 'reloadIgnoringCache',
- 'canGoBack',
- 'canGoForward',
- 'canGoToOffset',
- 'clearHistory',
- 'goBack',
- 'goForward',
- 'goToIndex',
- 'goToOffset',
- 'isCrashed',
- 'setUserAgent',
- 'getUserAgent',
- 'openDevTools',
- 'closeDevTools',
- 'isDevToolsOpened',
- 'isDevToolsFocused',
- 'inspectElement',
- 'setAudioMuted',
- 'isAudioMuted',
- 'undo',
- 'redo',
- 'cut',
- 'copy',
- 'paste',
- 'pasteAndMatchStyle',
- 'delete',
- 'selectAll',
- 'unselect',
- 'replace',
- 'replaceMisspelling',
- 'findInPage',
- 'stopFindInPage',
- 'getId',
- 'downloadURL',
- 'inspectServiceWorker',
- 'print',
- 'printToPDF',
- 'showDefinitionForSelection',
- 'capturePage',
- 'setZoomFactor',
- 'setZoomLevel',
- 'getZoomLevel',
- 'getZoomFactor'
- ]
- const nonblockMethods = [
- 'insertCSS',
- 'insertText',
- 'send',
- 'sendInputEvent',
- 'setLayoutZoomLevelLimits',
- 'setVisualZoomLevelLimits'
- ]
- // Forward proto.foo* method calls to WebViewImpl.foo*.
- const createBlockHandler = function (m) {
- return function (...args) {
- const internal = v8Util.getHiddenValue(this, 'internal')
- if (internal.webContents) {
- return internal.webContents[m](...args)
- } else {
- throw new Error(`Cannot call ${m} because the webContents is unavailable. The WebView must be attached to the DOM and the dom-ready event emitted before this method can be called.`)
- }
- }
- }
- for (const method of methods) {
- proto[method] = createBlockHandler(method)
- }
- const createNonBlockHandler = function (m) {
- return function (...args) {
- const internal = v8Util.getHiddenValue(this, 'internal')
- ipcRenderer.send('ELECTRON_BROWSER_ASYNC_CALL_TO_GUEST_VIEW', null, internal.guestInstanceId, m, ...args)
- }
- }
- for (const method of nonblockMethods) {
- proto[method] = createNonBlockHandler(method)
- }
- proto.executeJavaScript = function (code, hasUserGesture, callback) {
- const internal = v8Util.getHiddenValue(this, 'internal')
- if (typeof hasUserGesture === 'function') {
- callback = hasUserGesture
- hasUserGesture = false
- }
- const requestId = getNextId()
- ipcRenderer.send('ELECTRON_BROWSER_ASYNC_CALL_TO_GUEST_VIEW', requestId, internal.guestInstanceId, 'executeJavaScript', code, hasUserGesture)
- ipcRenderer.once(`ELECTRON_RENDERER_ASYNC_CALL_TO_GUEST_VIEW_RESPONSE_${requestId}`, function (event, result) {
- if (callback) callback(result)
- })
- }
- // WebContents associated with this webview.
- proto.getWebContents = function () {
- const internal = v8Util.getHiddenValue(this, 'internal')
- if (!internal.webContents) {
- internal.createGuestSync()
- }
- return internal.webContents
- }
- window.WebView = webFrame.registerEmbedderCustomElement('webview', {
- prototype: proto
- })
- // Delete the callbacks so developers cannot call them and produce unexpected
- // behavior.
- delete proto.createdCallback
- delete proto.attachedCallback
- delete proto.detachedCallback
- delete proto.attributeChangedCallback
- }
- const useCapture = true
- const listener = function (event) {
- if (document.readyState === 'loading') {
- return
- }
- registerBrowserPluginElement()
- registerWebViewElement()
- window.removeEventListener(event.type, listener, useCapture)
- }
- window.addEventListener('readystatechange', listener, true)
- module.exports = WebViewImpl
|
