[Feature Request]: Support full frame transparency with Mica background material

[samuelmaddock]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Problem Description

The Mica backgroundMaterial effect does not appear below the WebContents.

Proposed Solution

The backgroundMaterial option should behave the same as when setting the vibrancy option.

macOS: vibrancy: 'medium-light'	Windows: backgroundMaterial: 'acrylic'	Windows: backgroundMaterial: 'acrylic' + transparent: true

When vibrancy is set, the WebContents is transparent by default. The same should apply to backgroundMaterial. Setting transparent: true doesn't seem to be a valid workaround, but ideally should still work.

The code below needs to be updated:

electron/shell/browser/api/electron_api_browser_window.cc

Lines 58 to 64 in 9ffffdb

	} else if (!vibrancy_type.empty() || transparent) {
	// If the BrowserWindow is transparent or a vibrancy type has been set,
	// also propagate transparency to the WebContents unless a separate
	// backgroundColor has been set.
	web_preferences.SetHidden(options::kBackgroundColor,
	ToRGBAHex(SK_ColorTRANSPARENT));
	}

Alternatives Considered

None.

Additional Information

Tested on:

Edition	Windows 11 Pro
Version	22H2
OS build	22621.1778

Fiddle gist: https://gist.github.com/34cf667b21a5075d1f6fbe093d7ad7f9

[michalzaq12]

backgroundMaterial works well with transparent: true, but window cannot be frameless

[ttnn5876]

backgroundMaterial works well with transparent: true, but window cannot be frameless

Do you know why it works like this?

[clavin]

I've been looking into this and I've discovered that something about the remove_standard_frame option in views is causing the background to be non-translucent. Still investigating...

[clavin]

This is what I have on my clavin/frameless-bg-mat branch with remove_standard_frame set to false:

Obviously, it has a frame, which is not great, but turning on the option causes the window to no longer be translucent, strangely. Still, it's progress 😄

[clavin]

I fiddled around more with this issue and I unfortunately am going to have to drop it for the time being.

Since I wasn't getting any traction modifying Electron & Chromium, I decided to try to see if making a window like this was even possible. In the end, I wasn't able to create a window that has no title bar (window title, controls, bg), but does have a frame (the rounded corners and resizable border around the window) while also applying the Mica or Acrylic window effects.

In my research I saw some possible WinRT solutions. I skipped these for the time being as I sensed they may require a bit of a refactor in Electron to get working.

Also, I didn't come across any code samples that demonstrate how to crate the type of window desired here. I did see some mentions that it is possible, but ultimately no proof or demonstration. 😕

Within Windows 11, I did notice that the Task Manager's performance charts have a detail mode that collapses the window (including the title bar!) to only show the chosen chart. This makes me think it is somehow possible, but unfortunately I don't quite know how to recreate the behavior.