search

nwjs / nw.js

Call all Node.js modules directly from DOM/WebWorker and enable a new way of writing applications with all Web technologies.
https://nwjs.io
MIT License
40.35k stars 3.88k forks source link

Support for Mica effect in Windows 11 #8127

Open UtterDonkey opened 1 year ago

UtterDonkey commented 1 year ago

Issue Type

Before opening an issue, please search and see if it has already been raised.

Current/Missing Behavior

The windows 11 Mica effect.

Expected/Proposed Behavior

Windows 11 introduced the Mica effect which is widely used across most built-in windows apps. From Microsoft (https://learn.microsoft.com/en-us/windows/apps/design/style/mica):

Mica is an opaque, dynamic material that incorporates theme and desktop wallpaper to paint the background of long-lived windows such as apps and settings. You can apply Mica to your application backdrop to delight users and create visual hierarchy, aiding productivity, by increasing clarity about which window is in focus. Mica is specifically designed for app performance as it only samples the desktop wallpaper once to create its visualization.

Mica in NW.js could work similar to win.setShadow but instead using something like win.setMica([boolean]).

This feature is already possible in electron with the mica-electron package (https://github.com/electron/electron/issues/29937) but this package is not practical for use in NW.js.

In Google Chrome, Mica is also supported, however, hidden behind a flag (https://reddit.com/r/chrome/s/t4elTQGFkL) and it is also coming to Microsoft Edge (https://youtu.be/0CAe_DOzpoM).

Introducing the Mica effect to NW.js would help to make NW.js apps feel more native in windows.

Additional Info

ayushmanchhabra commented 12 months ago

https://bugs.chromium.org/p/chromium/issues/detail?id=1430505#c26 Currently Mica effect seems to be disabled by default behind a flag. I tried enabling it but it does not work for me:

{
  "name": "nwapp",
  "main": "index.html",
  "chromium-args": "--enable-windows11-mica-titlebar"
}

Also looked into how mica-electron works. At the very least, I think we will need to implement https://github.com/nwjs/nw.js/issues/7468 first if we want to do something similar. In the meantime, I will try to port mica-electron to NW.js