feat: replace BrowserView with WebContentsView (#35658)

lib/browser/api/base-window.ts

@@ -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;

lib/browser/api/browser-view.ts

@@ -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;
+  }
+}

lib/browser/api/browser-window.ts

@@ -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;

lib/browser/api/module-list.ts

@@ -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') }
-  );
-}

lib/browser/api/view.ts

@@ -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;

lib/browser/api/web-contents.ts

@@ -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 {