fix: move windows above notifications for screen capture

2026-02-19 03:14:51 -05:00 · 2025-01-23 11:41:07 -05:00
4 changed files with 48 additions and 40 deletions
--- a/spec/api-browser-view-spec.ts
+++ b/spec/api-browser-view-spec.ts
@@ -90,6 +90,7 @@ describe('BrowserView module', () => {
      w.show();
      w.setBounds(display.bounds);
      w.setBackgroundColor(WINDOW_BACKGROUND_COLOR);
+      ScreenCapture.setWindowOnTop(w);
      await w.loadURL('about:blank');

      view = new BrowserView();
@@ -109,6 +110,7 @@ describe('BrowserView module', () => {
      w.show();
      w.setBounds(display.bounds);
      w.setBackgroundColor(WINDOW_BACKGROUND_COLOR);
+      ScreenCapture.setWindowOnTop(w);
      await w.loadURL('about:blank');

      view = new BrowserView();
--- a/spec/api-browser-window-spec.ts
+++ b/spec/api-browser-window-spec.ts
@@ -6647,29 +6647,24 @@ describe('BrowserWindow module', () => {

    // FIXME(codebytere): figure out why these are failing on MAS arm64.
    ifit(hasCapturableScreen() && !(process.mas && process.arch === 'arm64'))('should not display a visible background', async () => {
-      const display = screen.getPrimaryDisplay();
-
      const backgroundWindow = new BrowserWindow({
-        ...display.bounds,
-        frame: false,
-        backgroundColor: HexColors.GREEN,
-        hasShadow: false
+        ...ScreenCapture.getWindowOptions(),
+        backgroundColor: HexColors.GREEN
      });
+      ScreenCapture.setWindowOnTop(backgroundWindow);

      await backgroundWindow.loadURL('about:blank');

      const foregroundWindow = new BrowserWindow({
-        ...display.bounds,
-        show: true,
-        transparent: true,
-        frame: false,
-        hasShadow: false
+        ...ScreenCapture.getWindowOptions(),
+        transparent: true
      });
+      ScreenCapture.setWindowOnTop(foregroundWindow);

      const colorFile = path.join(__dirname, 'fixtures', 'pages', 'half-background-color.html');
      await foregroundWindow.loadFile(colorFile);

-      const screenCapture = new ScreenCapture(display);
+      const screenCapture = new ScreenCapture();
      await screenCapture.expectColorAtPointOnDisplayMatches(
        HexColors.GREEN,
        (size) => ({
@@ -6688,48 +6683,43 @@ describe('BrowserWindow module', () => {

    // FIXME(codebytere): figure out why these are failing on MAS arm64.
    ifit(hasCapturableScreen() && !(process.mas && process.arch === 'arm64'))('Allows setting a transparent window via CSS', async () => {
-      const display = screen.getPrimaryDisplay();
-
      const backgroundWindow = new BrowserWindow({
-        ...display.bounds,
-        frame: false,
-        backgroundColor: HexColors.PURPLE,
-        hasShadow: false
+        ...ScreenCapture.getWindowOptions(),
+        backgroundColor: HexColors.PURPLE
      });
+      ScreenCapture.setWindowOnTop(backgroundWindow);

      await backgroundWindow.loadURL('about:blank');

      const foregroundWindow = new BrowserWindow({
-        ...display.bounds,
-        frame: false,
+        ...ScreenCapture.getWindowOptions(),
        transparent: true,
-        hasShadow: false,
        webPreferences: {
          contextIsolation: false,
          nodeIntegration: true
        }
      });
+      ScreenCapture.setWindowOnTop(foregroundWindow);

      foregroundWindow.loadFile(path.join(__dirname, 'fixtures', 'pages', 'css-transparent.html'));
      await once(ipcMain, 'set-transparent');

-      const screenCapture = new ScreenCapture(display);
+      const screenCapture = new ScreenCapture();
      await screenCapture.expectColorAtCenterMatches(HexColors.PURPLE);
    });

    ifit(hasCapturableScreen())('should not make background transparent if falsy', async () => {
-      const display = screen.getPrimaryDisplay();
-
      for (const transparent of [false, undefined]) {
        const window = new BrowserWindow({
-          ...display.bounds,
+          ...ScreenCapture.getWindowOptions(),
          transparent
        });
+        ScreenCapture.setWindowOnTop(window);

        await once(window, 'show');
        await window.webContents.loadURL('data:text/html,<head><meta name="color-scheme" content="dark"></head>');

-        const screenCapture = new ScreenCapture(display);
+        const screenCapture = new ScreenCapture();
        // color-scheme is set to dark so background should not be white
        await screenCapture.expectColorAtCenterDoesNotMatch(HexColors.WHITE);

@@ -6742,18 +6732,16 @@ describe('BrowserWindow module', () => {
    afterEach(closeAllWindows);

    ifit(hasCapturableScreen())('should display the set color', async () => {
-      const display = screen.getPrimaryDisplay();
-
      const w = new BrowserWindow({
-        ...display.bounds,
-        show: true,
+        ...ScreenCapture.getWindowOptions(),
        backgroundColor: HexColors.BLUE
      });
+      ScreenCapture.setWindowOnTop(w);

      w.loadURL('about:blank');
      await once(w, 'ready-to-show');

-      const screenCapture = new ScreenCapture(display);
+      const screenCapture = new ScreenCapture();
      await screenCapture.expectColorAtCenterMatches(HexColors.BLUE);
    });
  });
--- a/spec/api-web-contents-view-spec.ts
+++ b/spec/api-web-contents-view-spec.ts
@@ -287,13 +287,10 @@ describe('WebContentsView', () => {
        display = screen.getPrimaryDisplay();

        w = new BaseWindow({
-          ...display.workArea,
-          show: true,
-          frame: false,
-          hasShadow: false,
-          backgroundColor: HexColors.BLUE,
-          roundedCorners: false
+          ...ScreenCapture.getWindowOptions(),
+          backgroundColor: HexColors.BLUE
        });
+        ScreenCapture.setWindowOnTop(w);

        v = new WebContentsView();
        w.setContentView(v);
@@ -319,7 +316,7 @@ describe('WebContentsView', () => {
      });

      it('should render with cutout corners', async () => {
-        const screenCapture = new ScreenCapture(display);
+        const screenCapture = new ScreenCapture();

        for (const corner of corners) {
          await screenCapture.expectColorAtPointOnDisplayMatches(HexColors.BLUE, () => corner);
@@ -334,7 +331,7 @@ describe('WebContentsView', () => {
        v.setBorderRadius(0);

        await nextFrameTime();
-        const screenCapture = new ScreenCapture(display);
+        const screenCapture = new ScreenCapture();
        await screenCapture.expectColorAtPointOnDisplayMatches(HexColors.GREEN, () => corner);
        await screenCapture.expectColorAtCenterMatches(HexColors.GREEN);
      });
@@ -350,7 +347,7 @@ describe('WebContentsView', () => {
        await readyForCapture;

        const corner = corners[0];
-        const screenCapture = new ScreenCapture(display);
+        const screenCapture = new ScreenCapture();
        await screenCapture.expectColorAtPointOnDisplayMatches(HexColors.BLUE, () => corner);
        await screenCapture.expectColorAtCenterMatches(HexColors.GREEN);
      });
--- a/spec/lib/screen-helpers.ts
+++ b/spec/lib/screen-helpers.ts
@@ -103,6 +103,27 @@ export class ScreenCapture {
  /** Timeout to wait for expected color to match. */
  static TIMEOUT = 3000;

+  /**
+   * Get window options which make it ideal to capture.
+   */
+  static getWindowOptions () {
+    const display = screen.getPrimaryDisplay();
+    return {
+      ...display.workArea,
+      frame: false,
+      hasShadow: false,
+      roundedCorners: false
+    };
+  }
+
+  /**
+   * Set window to appear above notifications on macOS.
+   */
+  static setWindowOnTop (window: Electron.BaseWindow) {
+    const level = process.platform === 'darwin' ? 'screen-saver' : undefined;
+    window.setAlwaysOnTop(true, level);
+  }
+
  constructor (display?: Electron.Display) {
    this.display = display || screen.getPrimaryDisplay();
  }