feat: support Mica/Acrylic on Windows by codebytere · Pull Request #38163 · electron/electron

codebytere · 2023-05-03T10:49:28Z

Description of Change

Supersedes #30298.

Closes #16391.
Closes #29937.

Adds support for background material effects on Windows with win.setBackgroundMaterial(material).

Checklist

PR description included and stakeholders cc'd
npm test passes
relevant documentation, tutorials, templates and examples are 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: Add support for Mica and Acrylic background effects on Windows.

felixrieseberg · 2023-05-04T00:01:45Z

I can't believe you did this in like 30 LoC, this is so much simpler than I thought it would have been.

shell/browser/native_window.cc

deepak1556

How does this feature work together with our custom titlebar implementation where we basically extend into the non-client area ?

deepak1556 · 2023-05-04T08:24:27Z

shell/browser/native_window_views.cc

+#if BUILDFLAG(IS_WIN)
+  // DWMWA_USE_HOSTBACKDROPBRUSH is only supported on Windows 11 22H2 and up.
+  if (base::win::GetVersion() < base::win::Version::WIN11_22H2)
+    return;


Should this surface an error to the user rather than silent termination ?

We don't for comparable version-gated features like this - historically it's just been clearly noted in docs.

I think silently failing is fine here

deepak1556 · 2023-05-04T08:35:00Z

shell/browser/native_window_views.cc

+      DwmSetWindowAttribute(GetAcceleratedWidget(), DWMWA_SYSTEMBACKDROP_TYPE,
+                            &backdrop_type, sizeof(backdrop_type));
+  if (FAILED(result))
+    LOG(WARNING) << "Failed to set background material to " << material;


User facing error instead of LOG ?

I'm also open to that, but we don't have a clear convention there either really 🤔 for dark mode for example we don't surface a user facing error:

electron/shell/browser/win/dark_mode.cc

Line 57 in 5d12035

TrySetWindowTheme(hWnd, dark);

Beyond that - we don't really get a good error message from the call sadly, so all we'd really be able to say is "it failed"

Because we set this in the constructor we can't safely have a user facing error afaik anyway. I think the LOG is fine here. We shouldn't fail to construct a window just because the DWM call got lost

shell/browser/api/electron_api_base_window.cc

zcbenz

API LGTM

shell/browser/api/electron_api_base_window.h

docs/api/browser-window.md

samuelmaddock

API LGTM

release-clerk · 2023-05-15T20:32:01Z

Release Notes Persisted

Add support for Mica and Acrylic background effects on Windows.

trop · 2023-05-15T20:32:29Z

I was unable to backport this PR to "24-x-y" cleanly;
you will need to perform this backport manually.

trop · 2023-05-15T20:32:32Z

I was unable to backport this PR to "25-x-y" cleanly;
you will need to perform this backport manually.

trop · 2023-05-17T18:52:19Z

@codebytere has manually backported this PR to "25-x-y", please check out #38357

trop · 2023-05-17T18:56:16Z

@codebytere has manually backported this PR to "24-x-y", please check out #38361

See electron/electron#38163

michalzaq12 · 2023-05-28T17:08:42Z

@codebytere Is this the intended behavior? The effect only applies to the title bar?

ghost · 2023-05-28T23:51:31Z

Interesting, with Glasstron this was a bug, not sure if that is suppose to happen.

kochie · 2023-05-28T23:58:14Z

~~For vibrancy on macos you need to have no background color in the div. Maybe double check that your div is transparent?~~ Nope, I get the above as well.

ghost · 2023-05-30T19:36:14Z

So sorry for all you that are suscribed but this is SO cool! I'm surprised how little lines it takes to do something like this

blueset · 2023-06-06T21:16:00Z

@codebytere Is this the intended behavior? The effect only applies to the title bar?

Having the same issue. Is this expected? Is it possible to apply also Mica to the web content background?

ghost · 2023-06-06T21:35:07Z

Have you tried with background: none;, background-color: none;, background: transparent;, background-color: transparent; (to <body>)?

blueset · 2023-06-06T22:48:50Z

@aitor-gomila:
Have you tried with background: none;, background-color: none;, background: transparent;, background-color: transparent; (to <body>)?

Yes, I’ve tried all 4 combinations on both <body> and <html>, and it still produces the same result.

Here’s my Electron Fiddle code to repro this: https://gist.github.com/blueset/b406e2d1bd9218a16b599e72a3ee82c7

oliverschwendener · 2023-06-08T20:25:27Z

@blueset @michalzaq12 I had the same issue, but it worked when I added transparent: true to the BrowserWindow constructor options. Using electron 25.1.0

blueset · 2023-06-09T15:10:22Z

@oliverschwendener
I had the same issue, but it worked when I added transparent: true to the BrowserWindow constructor options. Using electron 25.1.0

Setting transparent: true partially solves the problem, but the window would become unresizable. See #38454.

gaetandezeiraud · 2023-06-19T18:22:13Z

I confirm, same problem.

JerryI · 2023-10-24T21:00:32Z

I confirm, same problem.

just bump into the same issue.
Confirmed on Win11

tiagozip · 2024-01-27T09:41:39Z

bump, also happening to me

YeesterPlus · 2024-07-04T06:43:22Z

The window becomes clear

codebytere added semver/minor backwards-compatible functionality target/24-x-y PR should also be added to the "24-x-y" branch. target/25-x-y PR should also be added to the "25-x-y" branch. labels May 3, 2023

codebytere requested review from a team, deepak1556 and mlaurencin May 3, 2023 10:49

electron-cation bot added new-pr 🌱 PR opened recently api-review/requested 🗳 labels May 3, 2023

codebytere mentioned this pull request May 3, 2023

feat: support vibrancy on Windows #30298

Closed

4 tasks

samuelmaddock reviewed May 4, 2023

View reviewed changes

shell/browser/native_window.cc Show resolved Hide resolved

deepak1556 reviewed May 4, 2023

View reviewed changes

codebytere requested a review from deepak1556 May 8, 2023 07:47

zcbenz approved these changes May 8, 2023

View reviewed changes

shell/browser/api/electron_api_base_window.h Outdated Show resolved Hide resolved

docs/api/browser-window.md Show resolved Hide resolved

codebytere added 2 commits May 8, 2023 12:44

feat: support Mica/Acrylic on Windows

a3c5c56

chore: feedback from review

d5c4d44

codebytere force-pushed the windows-backdrop branch from ada14f1 to d5c4d44 Compare May 8, 2023 10:49

samuelmaddock approved these changes May 8, 2023

View reviewed changes

VerteDinde approved these changes May 9, 2023

View reviewed changes

electron-cation bot added api-review/approved ✅ and removed new-pr 🌱 PR opened recently api-review/requested 🗳 labels May 10, 2023

jkleinsc approved these changes May 15, 2023

View reviewed changes

jkleinsc merged commit e19500f into main May 15, 2023

jkleinsc deleted the windows-backdrop branch May 15, 2023 20:31

trop bot removed the target/24-x-y PR should also be added to the "24-x-y" branch. label May 15, 2023

trop bot added the needs-manual-bp/24-x-y label May 15, 2023

codebytere mentioned this pull request May 17, 2023

feat: support Mica/Acrylic on Windows #38357

Merged

trop bot added in-flight/25-x-y and removed needs-manual-bp/25-x-y labels May 17, 2023

codebytere mentioned this pull request May 17, 2023

feat: support Mica/Acrylic on Windows #38361

Merged

trop bot added in-flight/24-x-y merged/24-x-y PR was merged to the "24-x-y" branch merged/25-x-y PR was merged to the "25-x-y" branch. and removed needs-manual-bp/24-x-y in-flight/24-x-y labels May 17, 2023

Diegorro98 mentioned this pull request May 22, 2023

Design exploration for improving experience for new users microsoft/vscode#115641

Open

theolivenbaum added a commit to theolivenbaum/electron-sharp that referenced this pull request May 25, 2023

Add support for setting BackgroundMaterial on a window

8a4f8e9

See electron/electron#38163

samuelmaddock mentioned this pull request May 31, 2023

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

Closed

3 tasks

Vendicated mentioned this pull request Jul 3, 2023

[Feature Request] Acrylic Support Vencord/Vesktop#16

Closed

commit-lint bot mentioned this pull request Aug 1, 2023

[pull] main from electron:main Blaquez-home/electron#3

Open

Conversation

codebytere commented May 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description of Change

Checklist

Release Notes

Uh oh!

felixrieseberg commented May 4, 2023

Uh oh!

Uh oh!

deepak1556 left a comment

Choose a reason for hiding this comment

Uh oh!

deepak1556 May 4, 2023

Choose a reason for hiding this comment

Uh oh!

codebytere May 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MarshallOfSound May 4, 2023

Choose a reason for hiding this comment

Uh oh!

deepak1556 May 4, 2023

Choose a reason for hiding this comment

Uh oh!

codebytere May 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MarshallOfSound May 4, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

zcbenz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

samuelmaddock left a comment

Choose a reason for hiding this comment

Uh oh!

release-clerk bot commented May 15, 2023

Uh oh!

trop bot commented May 15, 2023

Uh oh!

trop bot commented May 15, 2023

Uh oh!

trop bot commented May 17, 2023

Uh oh!

trop bot commented May 17, 2023

Uh oh!

michalzaq12 commented May 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ghost commented May 28, 2023

Uh oh!

kochie commented May 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ghost commented May 30, 2023

Uh oh!

blueset commented Jun 6, 2023

Uh oh!

ghost commented Jun 6, 2023

Uh oh!

blueset commented Jun 6, 2023

Uh oh!

oliverschwendener commented Jun 8, 2023

Uh oh!

blueset commented Jun 9, 2023

Uh oh!

gaetandezeiraud commented Jun 19, 2023

Uh oh!

JerryI commented Oct 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tiagozip commented Jan 27, 2024

Uh oh!

YeesterPlus commented Jul 4, 2024

codebytere commented May 3, 2023 •

edited

Loading

codebytere May 4, 2023 •

edited

Loading

codebytere May 4, 2023 •

edited

Loading

michalzaq12 commented May 28, 2023 •

edited

Loading

kochie commented May 28, 2023 •

edited

Loading

JerryI commented Oct 24, 2023 •

edited

Loading