feat: add panel support for BrowserWindow

[isailaandrei]

Description of Change

Created a new ElectronNSPanel window which inherits from ElectronNSWindow. This window mimics the behavior of NSPanel - visible on top of full screened apps, joins all spaces. To achieve this it adds the "NSWindowStyleMaskNonactivatingPanel" style mask, normally reserved for NSPanel, at runtime.

This is a workaround to avoid patching chromium and duplicating lots of window code.

Checklist

• PR description included and stakeholders cc'd
• npm test passes
• tests are changed or added
• relevant documentation is changed or added
• PR release notes describe the change in a way relevant to app developers, and are capitalized, punctuated, and past tense.

Release Notes

notes: Added support for panel-like behavior. Window can float over full-screened apps.

[welcome]

💖 Thanks for opening this pull request! 💖

We use semantic commit messages to streamline the release process. Before your pull request can be merged, you should update your pull request title to start with a semantic prefix.

Examples of commit messages with semantic prefixes:

• fix: don't overwrite prevent_default if default wasn't prevented
• feat: add app.isPackaged() method
• docs: app.isDefaultProtocolClient is now available on Linux

Things that will help get your PR across the finish line:

• Follow the JavaScript, C++, and Python coding style.
• Run npm run lint locally to catch formatting errors earlier.
• Document any user-facing changes you've made following the documentation styleguide.
• Include tests when adding/changing behavior.
• Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

[codebytere]

Hi! Thanks for opening this PR - however, all new PRs, especially semver-minor or major PRs, must target main. Only then, when it's reviewed and merged, can it be backported to version branches.

Could you also talk a bit more in your PR body about the impetus for this PR? What use cases are you trying to address?

[mitchchn]

Resolves #31538, #4939.

I really like this implementation of panels overall, as it's similar to third-party solutions but safer and cleaner.

Pros

• Eliminates the need for a third-party native module
• Avoids runtime swizzling
• Does not require patching Chromium + duplicating a ton of window code
• API would be forward compatible if the implementation ever changed to use a true NSPanel

Cons

• This approach to emulating NSPanel may not work in future versions of macOS

Non-activating panels are such a useful and desirable part of modern apps (floating palettes are everywhere!) and I think the risk is manageable.

Still, it would be great to work toward replacing this implementation with a real NSPanel in the long term. If done right it would be a transparent change to users who adopt this API in its current form.

[isailaandrei]

Hey @codebytere

I changed the target branch to "main" as suggested and changed the wording in browser-window to make it more clear what this new type achieves i.e makes the window float on top of full-screened apps.

As per @mitchchn's comment, this pull request addresses a feature which has been previously requested. This is still obviously not the ideal solution, but a workaround.

[zcbenz]

API LGTM

[isailaandrei]

Hey all,

We started using this patch internally and found a weird bug. If we toggle the "resizable" property on BrowserWindow with type = "panel" the height of the window increases by 28 points (which is height of titlebar on Mac).

I confirmed in Xcode that this is not a bug on the native implementation, so something is going wrong when SetCanResize and then Widget->OnSizeConstraintChanged() is called in chromium. I'm still looking into this, but wanted to share here in case anyone has experience with this and can pinpoint the issue more easily.

Screen recording showing the issue - google drive link

Fiddle code to repro:

const mainWindow = new BrowserWindow({
width: 200,
height: 200,
frame: false,
type: "panel"
});

let resizable = true;
setInterval(() => {
resizable = !resizable;
mainWindow.setResizable(resizable);
console.log(mainWindow.getBounds());
}, 2000);

[zcbenz]

@isailaandrei Can you try placing ScopedDisableResize disable_resize; in the beginning of NativeWindowMac::SetResizable?

[codebytere]

API LGTM

[welcome]

Congrats on merging your first pull request! 🎉🎉🎉

[release-clerk]

Release Notes Persisted

Added support for panel-like behavior. Window can float over full-screened apps.

[miniak]

/trop run backport-to 20-x-y

[trop]

The backport process for this PR has been manually initiated - sending your PR to 20-x-y!

[trop]

I have automatically backported this PR to "20-x-y", please check out #34665

[Hupka]

Hey folks!

A question: this implementation indeed makes the window/panel appear without taking focus. But it now also can't react to hover events anymore... 🤔 Would you know which additional properties would do this?

Best,
Adrian

[mp-jarvie]

NSWindow does not support nonactivating panel styleMask 0x80