feat: support vibrancy on Windows #30298

codebytere · 2021-07-27T23:11:49Z

Description of Change

Closes #16391.
Closes #29937.

Adds vibrancy support for BrowserWindows on Windows.

Screenshot (vibrancy: 'blur'):

Screenshot (vibrancy: '#1F1F0BE5'):

Checklist

PR description included and stakeholders cc'd
npm test passes
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: Adds vibrancy support for BrowserWindows on Windows.

riverar · 2021-07-28T17:32:45Z

I wrote those Acrylic hacks originally [1][2]; they are not supported by Microsoft and introduce a number of problems [3]. DO NOT merge this. This is a very bad idea.

[1] https://withinrafael.com/2015/07/08/adding-the-aero-glass-blur-to-your-windows-10-apps/
[2] https://withinrafael.com/2018/02/02/adding-acrylic-blur-to-your-windows-10-apps-redstone-4-desktop-apps/
[3] File-New-Project/EarTrumpet#349

codebytere · 2021-07-28T17:34:21Z

@riverar is there a better supported API surface I should instead look towards?

riverar · 2021-07-28T17:37:03Z

There is no documented (or undocumented) path to get Acrylic into a desktop app without introducing problems, sadly. (The undocumented path used in this PR is (finally) fixed in Windows 11 builds but that's not helpful downstream and Microsoft refuses to service this in Windows 10. Incredibly annoying, I know.)

I think your best option is to adopt Mica (when those APIs come out) and we all just keep pressuring Microsoft for an official Acrylic path.

marcelwgn · 2021-07-28T18:27:50Z

@codebytere How does this PR address #29937? Mica and Acrylic are different things and work differently so adding acrylic does not cover Mica. Or does this close the feature request as in "there is an alternative"?

MarshallOfSound · 2021-07-28T19:22:51Z

In agreement with @riverar we should avoid using undocumented / unsupported windows APIs here

miniak · 2021-07-29T01:27:31Z

shell/browser/native_window_views.cc

+    typedef BOOL(WINAPI * pSetWindowCompositionAttribute)(HWND,
+                                                          WINCOMPATTRDATA*);
+    const pSetWindowCompositionAttribute SetWindowCompositionAttribute =
+        (pSetWindowCompositionAttribute)GetProcAddress(


use reinterpret_cast instead of C-style cast

nornagon

marking request-changes to reflect conversation

miniak · 2021-08-10T23:13:18Z

Is this going to be supported using public API on Windows 11 using DWMWA_USE_HOSTBACKDROPBRUSH?

sylveon · 2021-10-02T14:49:13Z

In Windows 11, there are documented paths for both Mica and Acrylic in Win32. I heavily suggest using those and not supporting Windows 10 for vibrancy, as SetWindowCompositionAttribute is full of pitfalls, bugs, and weird issues.

Also "vibrancy" is a macOS term, Windows doesn't use it to describe its transparency effects. Suggest using another name, maybe something like backgroundBrush, or hostBackdropBrush (also that would allow devs to so something like pass both vibrancy and backgroundBrush in the window create options, and the right one for the current OS is picked).

riverar · 2021-10-02T17:25:50Z

In Windows 11, there are documented paths for both Mica and Acrylic in Win32.

I'm not aware of any official guidance/documentation for these paths. Got a link? (Availability in the preview SDKs is not documentation and Islands is of no use here.)

sylveon · 2021-10-02T18:27:32Z

https://docs.microsoft.com/en-us/windows/win32/api/dwmapi/ne-dwmapi-dwmwindowattribute

DWMWA_USE_HOSTBACKDROPBRUSH

Use with DwmSetWindowAttribute. Enables a non-UWP window to use host backdrop brushes. If this flag is set, then a Win32 app that calls Windows::UI::Composition APIs can build transparency effects using the host backdrop brush (see Compositor.CreateHostBackdropBrush). The retrieved value is of type BOOL. TRUE to enable host backdrop brushes for the window; otherwise, FALSE.

For Mica, I believe you can just directly use the Windows::UI::Composition APIs, and this window attribute isn't required.

riverar · 2021-10-02T18:59:23Z

I had a chat with @sylveon offline as well and while this is a preview API in a preview SDK, we agree this will be the way forward (for Windows 11 only). 👍

So @codebytere could perhaps swap out their method for this one, add Win11 guard rails, and complete this PR.

codebytere · 2021-10-03T11:42:13Z

@riverar awesome, thanks! i'll get on that this week 🙇🏻‍♀️

zcbenz · 2021-12-08T08:06:35Z

Why isnt anyone reviewing the pr

According to the discussion above, the best way to implement the feature is to use a new API in Windows 11, instead of the unreliable private API used in current approach.

ghost · 2021-12-28T18:14:45Z

Hey! Someone has found a better Api for both acrylic and mica!
New DWMWA_SYSTEMBACKDROP_TYPE in 22523 SDK, public Win32 API for Mica. Also for Acrylic.
@codebytere
Seems like this API is working correctly and is recommended for use

sylveon · 2021-12-28T18:17:59Z

It's not available in a stable release of Windows yet, and won't be backported to the existing ones.

ckerr · 2022-03-03T18:20:59Z

docs/api/browser-window.md

+* `appearance-based`
+* `light`
+* `dark`


(nit) should annotate these three as deprecated here

ckerr · 2022-03-03T18:21:29Z

docs/api/browser-window.md

+* `medium-light`
+* `ultra-dark`


should annotate these two as deprecated here

nornagon · 2022-03-03T18:32:12Z

docs/api/browser-window.md

@@ -1742,18 +1742,48 @@ there is only one tab in the current window.

 Adds a window as a tab on this window, after the tab for the window instance.

-#### `win.setVibrancy(type)` _macOS_
+#### `win.setVibrancy(type)` _macOS_ _Windows_


Let's put this under a separate name for Windows

ckerr · 2022-03-03T18:34:14Z

shell/browser/native_window_views.cc

@@ -1318,6 +1342,51 @@ bool NativeWindowViews::IsVisibleOnAllWorkspaces() {
  return false;
 }

+void NativeWindowViews::SetVibrancy(const std::string& type) {


Suggested change

void NativeWindowViews::SetVibrancy(const std::string& type) {

void NativeWindowViews::SetVibrancy(base::StringPiece type) {

The API code we call below allows a StringPiece, so we should use that more flexible type here too

ckerr · 2022-03-03T18:35:12Z

shell/browser/native_window_views.cc

+      std::string color_string = type.substr(1);
+      if (!base::HexStringToBytes(color_string, &bytes))


Suggested change

std::string color_string = type.substr(1);

if (!base::HexStringToBytes(color_string, &bytes))

type.remove_prefix(1);

if (!base::HexStringToBytes(type, &bytes))

ckerr

@XFaonAE had a comment here that points to a newer API that might be officially supported upstream? If so, that sounds worth looking into?

Marking as request-changes

ghost · 2022-05-18T12:41:46Z

@XFaonAE had a comment here that points to a newer API that might be officially supported upstream? If so, that sounds worth looking into?

Marking as request-changes

Just to be safe, I did test it out again on the latest dev build, and it still seem to be functioning as expected.
One thing to note is that mica was not meant to be used with system native titlebars, which is why some weird behaviour may occure, instead I recommend setting the window style to WS_CAPTION and then moving the client area as needed to hide the titlebar, then design your own titlebar. Its quite the hassle which is why i stopped usin g NodeJS entirly xD Instead I do java now

Levminer · 2022-06-02T10:51:57Z

Offical docs: https://docs.microsoft.com/en-us/windows/win32/api/dwmapi/ne-dwmapi-dwm_systembackdrop_type?WT.mc_id=WD-MVP-5002756

ghost · 2022-06-02T14:52:01Z

Offical docs: https://docs.microsoft.com/en-us/windows/win32/api/dwmapi/ne-dwmapi-dwm_systembackdrop_type?WT.mc_id=WD-MVP-5002756

Great work! But unfortunatly these docs are old, and dont say anything about Mica,
These documentation references MAY or MAY NOT be helpfull, but they are relavant to Mica and backdrop brushes. UWP components can infact be used with Win32 which is well... that electron is based on

https://docs.microsoft.com/en-us/uwp/api/windows.ui.composition.compositor.createhostbackdropbrush?view=winrt-22621
https://github.com/microsoft/Windows.UI.Composition-Win32-Samples

sylveon · 2022-06-02T14:57:25Z

What do you mean old? These where published just a few days ago.

They don't refer to Mica by name but it's what you get when using DWMSBT_MAINWINDOW. You get acrylic with DWMSBT_TRANSIENTWINDOW.

Diegorro98 · 2022-06-02T14:59:08Z

Maybe @Levminer has read this article from Windows Lastest: Windows 11 22H2 is bringing Mica/Acrylic design to more Win32 desktop apps.
On this article the mentioned docs are refereed, and the article affirms that mica/acrylic would be selectable on Win32 apps.

Levminer · 2022-06-02T17:15:27Z

Offical docs: https://docs.microsoft.com/en-us/windows/win32/api/dwmapi/ne-dwmapi-dwm_systembackdrop_type?WT.mc_id=WD-MVP-5002756

Great work! But unfortunatly these docs are old, and dont say anything about Mica, These documentation references MAY or MAY NOT be helpfull, but they are relavant to Mica and backdrop brushes. UWP components can infact be used with Win32 which is well... that electron is based on

https://docs.microsoft.com/en-us/uwp/api/windows.ui.composition.compositor.createhostbackdropbrush?view=winrt-22621 https://github.com/microsoft/Windows.UI.Composition-Win32-Samples

As @sylveon mentiond this was posted on 05/24/2022. This is coming in build 22621 (which is the 22H2 update) coming in september or october. So this is confirmed.

EDIT: source (https://twitter.com/WithinRafael/status/1532127929810886656)

Niclas1337 · 2022-09-21T13:17:16Z

Offical docs: https://docs.microsoft.com/en-us/windows/win32/api/dwmapi/ne-dwmapi-dwm_systembackdrop_type?WT.mc_id=WD-MVP-5002756

Great work! But unfortunatly these docs are old, and dont say anything about Mica, These documentation references MAY or MAY NOT be helpfull, but they are relavant to Mica and backdrop brushes. UWP components can infact be used with Win32 which is well... that electron is based on
https://docs.microsoft.com/en-us/uwp/api/windows.ui.composition.compositor.createhostbackdropbrush?view=winrt-22621 https://github.com/microsoft/Windows.UI.Composition-Win32-Samples

As @sylveon mentiond this was posted on 05/24/2022. This is coming in build 22621 (which is the 22H2 update) coming in september or october. So this is confirmed.

EDIT: source (https://twitter.com/WithinRafael/status/1532127929810886656)

any updates on this? 22H2 has been released :D

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

Closed in favor of #38163

electron-cation bot added the new-pr 🌱 PR opened recently label Jul 27, 2021

codebytere force-pushed the vibrancy-support-windows branch from 53c1270 to cffe342 Compare July 28, 2021 06:44

codebytere added the semver/minor backwards-compatible functionality label Jul 28, 2021

electron-cation bot added the api-review/requested 🗳 label Jul 28, 2021

codebytere force-pushed the vibrancy-support-windows branch from cffe342 to 7481254 Compare July 28, 2021 07:29

feat: support vibrancy on Windows

6995bcc

codebytere requested review from zcbenz, nornagon and mlaurencin July 28, 2021 07:58

codebytere force-pushed the vibrancy-support-windows branch from 7481254 to 6995bcc Compare July 28, 2021 07:58

codebytere requested a review from deepak1556 July 28, 2021 07:58

codebytere added the target/15-x-y label Jul 28, 2021

codebytere marked this pull request as ready for review July 28, 2021 07:59

codebytere added the target/14-x-y label Jul 28, 2021

miniak reviewed Jul 29, 2021

View reviewed changes

nornagon suggested changes Jul 29, 2021

View reviewed changes

zcbenz added the wip ⚒ label Aug 2, 2021

electron-cation bot removed the new-pr 🌱 PR opened recently label Aug 3, 2021

mlaurencin mentioned this pull request Aug 4, 2021

feat: enable windows control overlay on Windows #29600

Merged

5 tasks

jkleinsc added the target/16-x-y label Sep 22, 2021

electron deleted a comment from alfodei22 Oct 3, 2021

jkleinsc added the target/17-x-y label Nov 17, 2021

This comment was marked as off-topic.

Sign in to view

ckerr reviewed Mar 3, 2022

View reviewed changes

nornagon reviewed Mar 3, 2022

View reviewed changes

nornagon removed target/14-x-y labels Mar 3, 2022

codebytere self-assigned this Mar 3, 2022

ckerr reviewed Mar 3, 2022

View reviewed changes

ckerr requested changes May 17, 2022

View reviewed changes

Shomnipotence mentioned this pull request Sep 1, 2022

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

Open

codebytere removed the target/17-x-y label Apr 11, 2023

codebytere removed their assignment Apr 27, 2023

codebytere mentioned this pull request May 3, 2023

feat: support Mica/Acrylic on Windows #38163

Merged

4 tasks

codebytere closed this May 3, 2023

zcbenz deleted the vibrancy-support-windows branch October 26, 2023 06:39

	void NativeWindowViews::SetVibrancy(const std::string& type) {
	void NativeWindowViews::SetVibrancy(base::StringPiece type) {

		std::string color_string = type.substr(1);
		if (!base::HexStringToBytes(color_string, &bytes))

feat: support vibrancy on Windows #30298

feat: support vibrancy on Windows #30298

Uh oh!

Conversation

codebytere commented Jul 27, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description of Change

Checklist

Release Notes

Uh oh!

riverar commented Jul 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codebytere commented Jul 28, 2021

Uh oh!

riverar commented Jul 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

marcelwgn commented Jul 28, 2021

Uh oh!

MarshallOfSound commented Jul 28, 2021

Uh oh!

miniak Jul 29, 2021 • 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!

nornagon left a comment

Choose a reason for hiding this comment

Uh oh!

miniak commented Aug 10, 2021

Uh oh!

sylveon commented Oct 2, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

riverar commented Oct 2, 2021

Uh oh!

sylveon commented Oct 2, 2021

Uh oh!

riverar commented Oct 2, 2021

Uh oh!

codebytere commented Oct 3, 2021

Uh oh!

This comment was marked as off-topic.

zcbenz commented Dec 8, 2021

Uh oh!

This comment was marked as off-topic.

ghost commented Dec 28, 2021 • edited by ghost Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sylveon commented Dec 28, 2021

Uh oh!

ckerr Mar 3, 2022

Choose a reason for hiding this comment

Uh oh!

ckerr Mar 3, 2022

Choose a reason for hiding this comment

Uh oh!

nornagon Mar 3, 2022

Choose a reason for hiding this comment

Uh oh!

ckerr Mar 3, 2022

Choose a reason for hiding this comment

Uh oh!

ckerr Mar 3, 2022

Choose a reason for hiding this comment

Uh oh!

ckerr left a comment

Choose a reason for hiding this comment

Uh oh!

ghost commented May 18, 2022

Uh oh!

Levminer commented Jun 2, 2022

Uh oh!

ghost commented Jun 2, 2022

Uh oh!

sylveon commented Jun 2, 2022

Uh oh!

Diegorro98 commented Jun 2, 2022

Uh oh!

Levminer commented Jun 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

codebytere commented Jul 27, 2021 •

edited

Loading

riverar commented Jul 28, 2021 •

edited

Loading

riverar commented Jul 28, 2021 •

edited

Loading

miniak Jul 29, 2021 •

edited

Loading

sylveon commented Oct 2, 2021 •

edited

Loading

ghost commented Dec 28, 2021 •

edited by ghost

Loading

Levminer commented Jun 2, 2022 •

edited

Loading