feat: replace BrowserView with WebContentsView (#35658)
This commit is contained in:
parent
a94fb2cb5d
commit
15c6014324
76 changed files with 2987 additions and 1531 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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') }
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue