1764822 - Implement (or mock) Windows 11 Mica (acrylic backdrop) for the title bar

Status: RESOLVED FIXED

(Core :: Widget: Win32, enhancement, P2)

Description

[Kagami Rosylight [:saschanaz] (they/them)]

Windows 11 is getting acrylic context menu in several places including File Explorer, the taskbar, Photos, and Microsoft Edge. I guess we'll want to follow as we already have done same in macOS (at least per what I see in bug 1764683).

Comment 1

[Emilio Cobos Álvarez [:emilio]]

This looks similar to the already-existing macOS vibrancy support, perhaps?

Comment 2

[Kagami Rosylight [:saschanaz] (they/them)]

I agree for the context menu, but does it also apply to the browser chrome on macOS?

Comment 3

[trickypr]

It only applies to context menus and the places sidebar by default.

Comment 4

[Adolfo Jayme]

Context menus don’t use Mica, but Acrylic. Just thought I’d point it out, given the bug’s current title.

Comment 5

[Kagami Rosylight [:saschanaz] (they/them)]

Seems DWMWA_SYSTEMBACKDROP_TYPE does the work? https://learn.microsoft.com/en-us/windows/win32/api/dwmapi/ne-dwmapi-dwmwindowattribute

Comment 6

[emvaized]

It would be great to support for acrylic backdrop not only in context menus, but arrow panels as well. Similar to how vibrancy backdrop is applied on MacOS when "-moz-mac-source-list" appearance is set on the :root element.

Comment 7

[Emilio Cobos Álvarez [:emilio]]

bug 1850979 has a very rough hack that does some / most of it.

Comment 8

[Emilio Cobos Álvarez [:emilio]]

(But I'd appreciate someone more familiar with Windows bits and compositing to carry it over the finish line)

Comment 9

[ribshark]

Win32Acrylic seems to be a reasonable implementation of the Acrylic/Mica brush in a Win32 environment without any Win2D cruft. Something like that could potentially be a better solution than setting the backdrop material with DwmSetWindowAttribute.

It's worth noting that both (Edge)[https://winaero.com/edge-restores-mica-for-titlebar-and-toolbar-heres-how-to-enable-it/] and (Chrome)[https://winaero.com/chrome-now-supports-mica-effect-on-its-title-bar/] are currently testing Mica in their titlebars; Firefox risks looking outdated by comparison once the other browsers have enabled this by default.

Comment 10

[Valentine]

When are you planning to add this effect? Is there any schedule or at least an approximate deadline? Many would like to be able to use this effect, at least through an experimental key.

Comment 11

[Kirwan Smith]

Thanks for working on this! I need to use Firefox as my main browser app at work for its extension support, so I'd love to see this feature. Just wanted to voice my support for this enhancement.

I developed a WinUI 3 app at work, which takes advantage of Mica material. According to Microsoft, Mica Alt is designed "to provide a deeper visual hierarchy than Mica, especially when creating an app with a tabbed title bar", and I can see that this has already been considered inside 1850979 (Mica hack), which is great. In addition, Microsoft also states that for "apps with context menus, flyouts, non-modal popups, or light-dismiss panes, we recommend that you use background acrylic, especially if these surfaces draw outside the frame of the main app window". Accordingly, Edge uses background acrylic for these items.

Comment 12

[Mauro B]

Any progress on this?

Comment 13

[Ray Kraesig [:rkraesig]]

(In reply to mbg from comment #12)

Any progress on this?

There has been, though it's all been in the background so far — our long-neglected handling of transparent windows on Windows (on which translucency depends) has been getting a rework and bugfixes.

Comment 14

[Mauro B]

That's great to hear! Can't wait for it to come out

Comment 15

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1764822 - Implement mica titlebar behind a (default off) pref. r=#theme!

This is somewhat straight-forward now that all the dependencies are
landed.

I think we do need to find a solution to make the app titlebar buttons
taller, by hiding the caption buttons
(https://phabricator.services.mozilla.com/D207303 tried to do this, but
ran into other issues), or making the titlebar taller, which is doable
in UWP at least, but I don't see any way of doing it in win32 apps:

• https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.windowing.appwindowtitlebar.preferredheightoption?view=windows-app-sdk-1.6

But still this is usable and would be worth getting in, since it's
needed for the translucent sidebar work too.

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/67cca07bbf52
Implement mica titlebar behind a (default off) pref. r=desktop-theme-reviewers,win-reviewers,dao,rkraesig

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0ce6969791a6
Move MicaEnabled() definition outside #ifdefs.

Comment 18

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/67cca07bbf52
https://hg.mozilla.org/mozilla-central/rev/0ce6969791a6

Comment 19

[Kagami Rosylight [:saschanaz] (they/them)]

Let's split context menu thing.