feat: replace BrowserView with WebContentsView (#35658)

This commit is contained in:
Jeremy Rose 2023-12-13 13:01:03 -08:00 committed by GitHub
parent a94fb2cb5d
commit 15c6014324
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
76 changed files with 2987 additions and 1531 deletions

View file

@ -4,7 +4,7 @@ const { BaseWindow } = process._linkedBinding('electron_browser_base_window') as
Object.setPrototypeOf(BaseWindow.prototype, EventEmitter.prototype);
BaseWindow.prototype._init = function () {
BaseWindow.prototype._init = function (this: TLWT) {
// Avoid recursive require.
const { app } = require('electron');
@ -103,7 +103,7 @@ Object.defineProperty(BaseWindow.prototype, 'movable', {
});
BaseWindow.getFocusedWindow = () => {
return BaseWindow.getAllWindows().find((win) => win.isFocused());
return BaseWindow.getAllWindows().find((win) => win.isFocused()) ?? null;
};
module.exports = BaseWindow;

View file

@ -1,3 +1,120 @@
const { BrowserView } = process._linkedBinding('electron_browser_browser_view');
import { BrowserWindow, AutoResizeOptions, Rectangle, WebContentsView, WebPreferences, WebContents } from 'electron/main';
export default BrowserView;
const v8Util = process._linkedBinding('electron_common_v8_util');
export default class BrowserView {
#webContentsView: WebContentsView;
// AutoResize state
#resizeListener: ((...args: any[]) => void) | null = null;
#lastWindowSize: {width: number, height: number} = { width: 0, height: 0 };
#autoResizeFlags: AutoResizeOptions = {};
constructor (options: {webPreferences: WebPreferences, webContents?: WebContents} = { webPreferences: {} }) {
const { webPreferences = {}, webContents } = options;
if (webContents) {
v8Util.setHiddenValue(webPreferences, 'webContents', webContents);
}
webPreferences.type = 'browserView';
this.#webContentsView = new WebContentsView({ webPreferences });
}
get webContents () {
return this.#webContentsView.webContents;
}
setBounds (bounds: Rectangle) {
this.#webContentsView.setBounds(bounds);
this.#autoHorizontalProportion = null;
this.#autoVerticalProportion = null;
}
getBounds () {
return this.#webContentsView.getBounds();
}
setAutoResize (options: AutoResizeOptions) {
if (options == null || typeof options !== 'object') { throw new Error('Invalid auto resize options'); }
this.#autoResizeFlags = {
width: !!options.width,
height: !!options.height,
horizontal: !!options.horizontal,
vertical: !!options.vertical
};
this.#autoHorizontalProportion = null;
this.#autoVerticalProportion = null;
}
setBackgroundColor (color: string) {
this.#webContentsView.setBackgroundColor(color);
}
// Internal methods
get ownerWindow (): BrowserWindow | null {
return !this.webContents.isDestroyed() ? this.webContents.getOwnerBrowserWindow() : null;
}
set ownerWindow (w: BrowserWindow | null) {
if (this.webContents.isDestroyed()) return;
const oldWindow = this.webContents.getOwnerBrowserWindow();
if (oldWindow && this.#resizeListener) {
oldWindow.off('resize', this.#resizeListener);
this.#resizeListener = null;
}
this.webContents._setOwnerWindow(w);
if (w) {
this.#lastWindowSize = w.getBounds();
w.on('resize', this.#resizeListener = this.#autoResize.bind(this));
}
}
#autoHorizontalProportion: {width: number, left: number} | null = null;
#autoVerticalProportion: {height: number, top: number} | null = null;
#autoResize () {
if (!this.ownerWindow) throw new Error('Electron bug: #autoResize called without owner window');
if (this.#autoResizeFlags.horizontal && this.#autoHorizontalProportion == null) {
const viewBounds = this.#webContentsView.getBounds();
this.#autoHorizontalProportion = {
width: this.#lastWindowSize.width / viewBounds.width,
left: this.#lastWindowSize.width / viewBounds.x
};
}
if (this.#autoResizeFlags.vertical && this.#autoVerticalProportion == null) {
const viewBounds = this.#webContentsView.getBounds();
this.#autoVerticalProportion = {
height: this.#lastWindowSize.height / viewBounds.height,
top: this.#lastWindowSize.height / viewBounds.y
};
}
const newBounds = this.ownerWindow.getBounds();
let widthDelta = newBounds.width - this.#lastWindowSize.width;
let heightDelta = newBounds.height - this.#lastWindowSize.height;
if (!this.#autoResizeFlags.width) widthDelta = 0;
if (!this.#autoResizeFlags.height) heightDelta = 0;
const newViewBounds = this.#webContentsView.getBounds();
if (widthDelta || heightDelta) {
this.#webContentsView.setBounds({
...newViewBounds,
width: newViewBounds.width + widthDelta,
height: newViewBounds.height + heightDelta
});
}
if (this.#autoHorizontalProportion) {
newViewBounds.width = newBounds.width / this.#autoHorizontalProportion.width;
newViewBounds.x = newBounds.width / this.#autoHorizontalProportion.left;
}
if (this.#autoVerticalProportion) {
newViewBounds.height = newBounds.height / this.#autoVerticalProportion.height;
newViewBounds.y = newBounds.y / this.#autoVerticalProportion.top;
}
if (this.#autoHorizontalProportion || this.#autoVerticalProportion) {
this.#webContentsView.setBounds(newViewBounds);
}
}
get webContentsView () {
return this.#webContentsView;
}
}

View file

@ -1,4 +1,4 @@
import { BaseWindow, WebContents, BrowserView, TouchBar } from 'electron/main';
import { BaseWindow, WebContents, TouchBar, BrowserView } from 'electron/main';
import type { BrowserWindow as BWT } from 'electron/main';
const { BrowserWindow } = process._linkedBinding('electron_browser_window') as { BrowserWindow: typeof BWT };
@ -6,7 +6,7 @@ Object.setPrototypeOf(BrowserWindow.prototype, BaseWindow.prototype);
BrowserWindow.prototype._init = function (this: BWT) {
// Call parent class's _init.
BaseWindow.prototype._init.call(this);
(BaseWindow.prototype as any)._init.call(this);
// Avoid recursive require.
const { app } = require('electron');
@ -52,6 +52,12 @@ BrowserWindow.prototype._init = function (this: BWT) {
this.on(event as any, visibilityChanged);
}
this._browserViews = [];
this.on('close', () => {
this._browserViews.forEach(b => b.webContents?.close({ waitForBeforeUnload: true }));
});
// Notify the creation of the window.
app.emit('browser-window-created', { preventDefault () {} }, this);
@ -168,4 +174,42 @@ BrowserWindow.prototype.setBackgroundThrottling = function (allowed: boolean) {
return this.webContents.setBackgroundThrottling(allowed);
};
BrowserWindow.prototype.addBrowserView = function (browserView: BrowserView) {
if (browserView.ownerWindow) { browserView.ownerWindow.removeBrowserView(browserView); }
this.contentView.addChildView(browserView.webContentsView);
browserView.ownerWindow = this;
browserView.webContents._setOwnerWindow(this);
this._browserViews.push(browserView);
};
BrowserWindow.prototype.setBrowserView = function (browserView: BrowserView) {
this._browserViews.forEach(bv => {
this.removeBrowserView(bv);
});
if (browserView) { this.addBrowserView(browserView); }
};
BrowserWindow.prototype.removeBrowserView = function (browserView: BrowserView) {
const idx = this._browserViews.indexOf(browserView);
if (idx >= 0) {
this.contentView.removeChildView(browserView.webContentsView);
browserView.ownerWindow = null;
this._browserViews.splice(idx, 1);
}
};
BrowserWindow.prototype.getBrowserView = function () {
if (this._browserViews.length > 1) { throw new Error('This BrowserWindow has multiple BrowserViews, use getBrowserViews() instead'); }
return this._browserViews[0] ?? null;
};
BrowserWindow.prototype.getBrowserViews = function () {
return [...this._browserViews];
};
BrowserWindow.prototype.setTopBrowserView = function (browserView: BrowserView) {
if (browserView.ownerWindow !== this) { throw new Error('Given BrowserView is not attached to the window'); }
this.addBrowserView(browserView);
};
module.exports = BrowserWindow;

View file

@ -14,6 +14,7 @@ export const browserModuleList: ElectronInternal.ModuleEntry[] = [
{ name: 'dialog', loader: () => require('./dialog') },
{ name: 'globalShortcut', loader: () => require('./global-shortcut') },
{ name: 'ipcMain', loader: () => require('./ipc-main') },
{ name: 'ImageView', loader: () => require('./views/image-view') },
{ name: 'inAppPurchase', loader: () => require('./in-app-purchase') },
{ name: 'Menu', loader: () => require('./menu') },
{ name: 'MenuItem', loader: () => require('./menu-item') },
@ -39,9 +40,3 @@ export const browserModuleList: ElectronInternal.ModuleEntry[] = [
{ name: 'WebContentsView', loader: () => require('./web-contents-view') },
{ name: 'webFrameMain', loader: () => require('./web-frame-main') }
];
if (BUILDFLAG(ENABLE_VIEWS_API)) {
browserModuleList.push(
{ name: 'ImageView', loader: () => require('./views/image-view') }
);
}

View file

@ -1,3 +1,6 @@
import { EventEmitter } from 'events';
const { View } = process._linkedBinding('electron_browser_view');
Object.setPrototypeOf((View as any).prototype, EventEmitter.prototype);
export default View;

View file

@ -592,6 +592,16 @@ WebContents.prototype._init = function () {
}
});
this.on('-before-unload-fired' as any, function (this: Electron.WebContents, event: Electron.Event, proceed: boolean) {
const type = this.getType();
// These are the "interactive" types, i.e. ones a user might be looking at.
// All other types should ignore the "proceed" signal and unload
// regardless.
if (type === 'window' || type === 'offscreen' || type === 'browserView') {
if (!proceed) { return event.preventDefault(); }
}
});
// The devtools requests the webContents to reload.
this.on('devtools-reload-page', function (this: Electron.WebContents) {
this.reload();
@ -776,7 +786,7 @@ WebContents.prototype._init = function () {
const promise = parent && !prefs.offscreen ? dialog.showMessageBox(parent, options) : dialog.showMessageBox(options);
try {
const result = await promise;
if (abortController.signal.aborted) return;
if (abortController.signal.aborted || this.isDestroyed()) return;
if (result.checkboxChecked) originCounts.set(origin, -1);
return callback(result.response === 0, '');
} finally {