Upgrade Electron to v30

e2e/extensions.e2e.spec.ts

@@ -19,7 +19,7 @@ import { ContainerEngine, Settings } from '@pkg/config/settings';
 import { spawnFile } from '@pkg/utils/childProcess';
 import { Log } from '@pkg/utils/logging';
 
-import type { BrowserView, BrowserWindow } from 'electron';
+import type { BrowserWindow, WebContentsView } from 'electron';
 
 /** The top level source directory, assuming we're always running from the tree */
 const srcDir = path.dirname(path.dirname(__filename));
@@ -139,7 +139,7 @@ test.describe.serial('Extensions', () => {
   });
 
   test.describe('extension API', () => {
-    let view: JSHandle<BrowserView>;
+    let view: JSHandle<WebContentsView>;
 
     test('extension UI can be loaded', async() => {
       const window: JSHandle<BrowserWindow> = await app.browserWindow(page);
@@ -151,19 +151,24 @@ test.describe.serial('Extensions', () => {
       view = await retry(async() => {
         // Evaluate script remotely to look for the appropriate BrowserView
         const result = await window.evaluateHandle((window: BrowserWindow) => {
-          for (const view of window.getBrowserViews()) {
-            if (view.webContents.mainFrame.url.startsWith('x-rd-extension://')) {
-              return view;
+          for (const view of window.contentView.children) {
+            // Because this runs in the remote window, we don't have access to
+            // imports, and therefore types; hence we can't do an `instanceof`
+            // check here.
+            if ('webContents' in view) {
+              if ((view as any).webContents.mainFrame.url.startsWith('x-rd-extension://')) {
+                return view;
+              }
             }
           }
-        }) as JSHandle<BrowserView|undefined>;
+        }) as JSHandle<WebContentsView|undefined>;
 
         // Check that the result evaluated to the view, and not undefined.
         if (await (result).evaluate(v => typeof v) === 'undefined') {
           throw new Error('Could not find extension view');
         }
 
-        return result as JSHandle<BrowserView>;
+        return result as JSHandle<WebContentsView>;
       });
 
       await view.evaluate((v, { window }) => {

package.json

@@ -143,7 +143,7 @@
     "cross-env": "7.0.3",
     "css-loader": "7.1.1",
     "ejs": "3.1.10",
-    "electron": "26.6.10",
+    "electron": "30.0.9",
     "electron-builder": "24.13.3",
     "eslint": "8.57.0",
     "eslint-plugin-deprecation": "3.0.0",

pkg/rancher-desktop/layouts/default.vue

@@ -16,6 +16,8 @@
     <main ref="body" class="body">
       <Nuxt />
     </main>
+    <!-- The extension area is used for sizing the extension view. -->
+    <div id="extension-spacer" class="extension" />
     <status-bar class="status-bar"></status-bar>
     <!-- The ActionMenu is used by SortableTable for per-row actions. -->
     <ActionMenu />
@@ -209,6 +211,10 @@ export default {
     border-right: var(--nav-border-size) solid var(--nav-border);
   }
 
+  .title {
+    grid-area: title;
+  }
+
   .body {
     display: grid;
     grid-area: body;
@@ -217,6 +223,11 @@ export default {
     overflow: auto;
   }
 
+  .extension {
+    grid-area: title / title / body / body;
+    z-index: -1000;
+  }
+
   .status-bar {
     grid-area: status-bar;
     border-top: var(--nav-border-size) solid var(--nav-border);

pkg/rancher-desktop/main/mainmenu.ts

@@ -49,6 +49,43 @@ function getEditMenu(isMac: boolean): MenuItem {
   });
 }
 
+function getViewMenu(): MenuItem {
+  return new MenuItem({
+    label:   '&View',
+    submenu: [
+      ...(Electron.app.isPackaged ? [] : [
+        { role: 'reload', label: '&Reload' },
+        { role: 'forceReload', label: '&Force Reload' },
+        { role: 'toggleDevTools', label: 'Toggle &Developer Tools' },
+        { type: 'separator' },
+      ] as const),
+      {
+        label:       '&Actual Size',
+        accelerator: 'CmdOrCtrl+0',
+        click(_item, focusedWindow) {
+          adjustZoomLevel(focusedWindow, 0);
+        },
+      },
+      {
+        label:       'Zoom &In',
+        accelerator: 'CmdOrCtrl+Plus',
+        click(_item, focusedWindow) {
+          adjustZoomLevel(focusedWindow, 0.5);
+        },
+      },
+      {
+        label:       'Zoom &Out',
+        accelerator: 'CmdOrCtrl+-',
+        click(_item, focusedWindow) {
+          adjustZoomLevel(focusedWindow, -0.5);
+        },
+      },
+      { type: 'separator' },
+      { role: 'togglefullscreen', label: 'Toggle Full &Screen' },
+    ],
+  });
+}
+
 function getHelpMenu(isMac: boolean): MenuItem {
   const helpMenuItems: Array<MenuItemConstructorOptions> = [
     ...(!isMac ? [
@@ -116,37 +153,7 @@ function getMacApplicationMenu(): Array<MenuItem> {
       role:  'fileMenu',
     }),
     getEditMenu(true),
-    Electron.app.isPackaged ? new MenuItem({
-      label:   'View',
-      submenu: [
-        {
-          label:       'Actual Size',
-          accelerator: 'CmdOrCtrl+0',
-          click(_item, focusedWindow) {
-            setZoomLevel(focusedWindow, 0, '0');
-          },
-        },
-        {
-          label:       'Zoom In',
-          accelerator: 'CmdOrCtrl+Plus',
-          click(_item, focusedWindow) {
-            setZoomLevel(focusedWindow, 0.5, 'Plus');
-          },
-        },
-        {
-          label:       'Zoom Out',
-          accelerator: 'CmdOrCtrl+-',
-          click(_item, focusedWindow) {
-            setZoomLevel(focusedWindow, -0.5, '-');
-          },
-        },
-        { type: 'separator' },
-        { role: 'togglefullscreen' },
-      ],
-    }) : new MenuItem({
-      label: 'View',
-      role:  'viewMenu',
-    }),
+    getViewMenu(),
     new MenuItem({
       label: '&Window',
       role:  'windowMenu',
@@ -169,41 +176,7 @@ function getWindowsApplicationMenu(): Array<MenuItem> {
       ],
     }),
     getEditMenu(false),
-    new MenuItem({
-      label:   '&View',
-      role:    'viewMenu',
-      submenu: [
-        ...(Electron.app.isPackaged ? [] : [
-          { role: 'reload', label: '&Reload' },
-          { role: 'forceReload', label: '&Force Reload' },
-          { role: 'toggleDevTools', label: 'Toggle &Developer Tools' },
-          { type: 'separator' },
-        ] as MenuItemConstructorOptions[]),
-        {
-          label:       '&Actual Size',
-          accelerator: 'CmdOrCtrl+0',
-          click(_item, focusedWindow) {
-            setZoomLevel(focusedWindow, 0, '0');
-          },
-        },
-        {
-          label:       'Zoom &In',
-          accelerator: 'CmdOrCtrl+Plus',
-          click(_item, focusedWindow) {
-            setZoomLevel(focusedWindow, 0.5, 'Plus');
-          },
-        },
-        {
-          accelerator: 'CmdOrCtrl+-',
-          label:       'Zoom &Out',
-          click(_item, focusedWindow) {
-            setZoomLevel(focusedWindow, -0.5, '-');
-          },
-        },
-        { type: 'separator' },
-        { role: 'togglefullscreen', label: 'Toggle Full &Screen' },
-      ],
-    }),
+    getViewMenu(),
     getHelpMenu(false),
   ];
 }
@@ -226,34 +199,30 @@ function getPreferencesMenuItem(): MenuItemConstructorOptions[] {
 }
 
 /**
- * Adjusts the zoom level for the focused window by the desired increment. Also
- * adjusts the zoom level for an attached browser view if one exists.
+ * Adjusts the zoom level for the focused window by the desired increment.
+ * Also emits an IPC request to the webContents to trigger a resize of the
+ * extensions view.
  * @param focusedWindow The window that has focus
  * @param zoomLevelAdjustment The desired increment to adjust the zoom level by
- * @param keyEventKeyCode The key code associated with the zoom level adjustment
  */
-function setZoomLevel(focusedWindow: Electron.BrowserWindow | undefined, zoomLevelAdjustment: number, keyEventKeyCode: string) {
+function adjustZoomLevel(focusedWindow: Electron.BrowserWindow | undefined, zoomLevelAdjustment: number) {
   if (!focusedWindow) {
     return;
   }
 
   const { webContents } = focusedWindow;
   const currentZoomLevel = webContents.getZoomLevel();
-  const view = focusedWindow.getBrowserView();
-
-  if (!view) {
-    const desiredZoomLevel = zoomLevelAdjustment === 0 ? zoomLevelAdjustment : currentZoomLevel + zoomLevelAdjustment;
+  const desiredZoomLevel = zoomLevelAdjustment === 0 ? zoomLevelAdjustment : currentZoomLevel + zoomLevelAdjustment;
 
-    webContents.setZoomLevel(desiredZoomLevel);
+  webContents.setZoomLevel(desiredZoomLevel);
 
-    return;
+  // Also sync the zoom level of any child views (e.g. the extensions view in
+  // the main window).
+  for (const child of focusedWindow.contentView.children) {
+    if (child instanceof Electron.WebContentsView) {
+      child.webContents.setZoomLevel(desiredZoomLevel);
+    }
   }
-
-  const event: Electron.KeyboardInputEvent = {
-    type:      'keyDown',
-    keyCode:   keyEventKeyCode,
-    modifiers: ['ctrl', 'control'],
-  };
-
-  webContents.sendInputEvent(event);
+  // For the main window, this triggers resizing the extensions view.
+  setImmediate(() => webContents.send('extensions/getContentArea'));
 }

pkg/rancher-desktop/typings/electron-ipc.d.ts

@@ -230,6 +230,7 @@ export interface IpcRendererEvents {
   // #region extensions
   // The list of installed extensions may have changed.
   'extensions/changed': () => void;
+  'extensions/getContentArea': () => void;
   'extensions/open': (id: string, path: string) => void;
   'err:extensions/open': () => void;
   'extensions/close': () => void;

pkg/rancher-desktop/window/index.ts

@@ -2,7 +2,7 @@ import os from 'os';
 import path from 'path';
 
 import Electron, {
-  BrowserWindow, app, shell, BrowserView, ipcMain, nativeTheme, screen,
+  BrowserWindow, app, shell, ipcMain, nativeTheme, screen, WebContentsView,
 } from 'electron';
 
 import * as K8s from '@pkg/backend/k8s';
@@ -182,20 +182,25 @@ export function openMain() {
   app.dock?.show();
 }
 
-let view: Electron.BrowserView | undefined;
+let view: WebContentsView | undefined;
 let extId = '';
 let extPath = '';
 
 /**
  * Attaches a browser view to the main window
  */
 const createView = () => {
+  const mainWindow = getWindow('main');
   const hostInfo = {
     arch:     process.arch,
     hostname: os.hostname(),
   };
 
-  view = new BrowserView({
+  if (!mainWindow) {
+    throw new Error('Failed to get main window, cannot create view');
+  }
+
+  view = new WebContentsView({
     webPreferences: {
       nodeIntegration:     false,
       contextIsolation:    true,
@@ -204,7 +209,10 @@ const createView = () => {
       additionalArguments: [JSON.stringify(hostInfo)],
     },
   });
-  getWindow('main')?.setBrowserView(view);
+  mainWindow.contentView.addChildView(view);
+  mainWindow.contentView.addListener('bounds-changed', () => {
+    setImmediate(() => mainWindow.webContents.send('extensions/getContentArea'));
+  });
 
   const backgroundColor = nativeTheme.shouldUseDarkColors ? '#202c33' : '#f4f4f6';
 
@@ -229,8 +237,6 @@ const updateView = (window: Electron.BrowserWindow, payload: { top: number, righ
     width:  Math.round((payload.right - payload.left) * zoomFactor),
     height: Math.round((payload.bottom - payload.top) * zoomFactor),
   });
-
-  view.setAutoResize({ width: true, height: true });
 };
 
 /**
@@ -379,7 +385,7 @@ export function closeExtension() {
 
   const window = getWindow('main');
 
-  window?.removeBrowserView(view);
+  window?.contentView.removeChildView(view);
   window?.webContents.removeListener('before-input-event', extensionZoomListener);
   ipcMain.removeListener('ok:extensions/getContentArea', extensionGetContentAreaListener);
   view = undefined;

scripts/package.ts

@@ -58,6 +58,7 @@ class Builder {
     const exeName = `${ context.packager.appInfo.productFilename }${ extension }`;
     const exePath = path.join(context.appOutDir, exeName);
     const resetAdHocDarwinSignature = context.arch === Arch.arm64;
+    const integrityEnabled = context.electronPlatformName === 'darwin';
 
     await flipFuses(
       exePath,
@@ -68,7 +69,7 @@ class Builder {
         [FuseV1Options.EnableCookieEncryption]:                false,
         [FuseV1Options.EnableNodeOptionsEnvironmentVariable]:  false,
         [FuseV1Options.EnableNodeCliInspectArguments]:         false,
-        [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
+        [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: integrityEnabled,
         [FuseV1Options.OnlyLoadAppFromAsar]:                   true,
       },
     );

yarn.lock

@@ -2899,7 +2899,7 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.3.3.tgz#329842940042d2b280897150e023e604d11657d6"
   integrity sha512-wheIYdr4NYML61AjC8MKj/2jrR/kDQri/CIpVoZwldwhnIrD/j9jIU5bJ8yBKuB2VhpFV7Ab6G2XkBjv9r9Zzw==
 
-"@types/[email protected]", "@types/node@^18.11.17", "@types/node@^18.11.18":
+"@types/[email protected]", "@types/node@^18.11.17":
   version "18.18.9"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.9.tgz#5527ea1832db3bba8eb8023ce8497b7d3f299592"
   integrity sha512-0f5klcuImLnG4Qreu9hPj/rEfFq6YRc5n2mAjSsH+ec/mJL+3voBH0+8T7o8RpFjH7ovc+TRsL/c7OYIQsPTfQ==
@@ -2911,6 +2911,13 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.65.tgz#b07eb49a14a808777b82879288a7e6f5a296ccfa"
   integrity sha512-5E9WgTy95B7i90oISjui9U5Zu7iExUPfU4ygtv4yXEy6zJFE3oQYHCnh5H1jZRPkjphJt2Ml3oQW6M0qtK534A==
 
+"@types/node@^20.9.0":
+  version "20.14.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.0.tgz#49ceec7b34f8621470cff44677fa9d461a477f17"
+  integrity sha512-5cHBxFGJx6L4s56Bubp4fglrEpmyJypsqI6RgzMfBHWUJQGWAAi8cWcgetEbZXHYXo9C2Fa4EEds/uSyS4cxmA==
+  dependencies:
+    undici-types "~5.26.4"
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
@@ -5998,13 +6005,13 @@ [email protected]:
     semver "^7.3.8"
     tiny-typed-emitter "^2.1.0"
 
-electron@26.6.10:
-  version "26.6.10"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-26.6.10.tgz#01ca7610bd662033ed3ceb70804cbf940c7e6756"
-  integrity sha512-pV2SD0RXzAiNRb/2yZrsVmVkBOMrf+DVsPulIgRjlL0+My9BL5spFuhHVMQO9yHl9tFpWtuRpQv0ofM/i9P8xg==
+electron@30.0.9:
+  version "30.0.9"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-30.0.9.tgz#b11400e4642a4b635e79244ba365f1d401ee60b5"
+  integrity sha512-ArxgdGHVu3o5uaP+Tqj8cJDvU03R6vrGrOqiMs7JXLnvQHMqXJIIxmFKQAIdJW8VoT3ac3hD21tA7cPO10RLow==
   dependencies:
     "@electron/get" "^2.0.0"
-    "@types/node" "^18.11.18"
+    "@types/node" "^20.9.0"
     extract-zip "^2.0.1"
 
 element-matches@^0.1.2: