Feature Request: customize titlebar style

[dengkunli]

We are in need of a way to set the style of the window title, it would be great if you can support this ( electron has already did it for Mac. )

Since the NW.js team works more closely and has more control with the operating system and the chromium, could you support this API on both Windows and Mac ?

Thanks

[rogerwang]

Could this be done with frameless window? https://github.com/nwjs/nw.js/wiki/Frameless-window

[dengkunli]

Unfortunately no, we want to use the OS title bar and let each OS manage it, while having the abilities to modify its style.

For example, the style we want to achieve under mac is have "traffic lights" on the top left and the title bar color the same as the body background color.

[TheJaredWilcurt]

This could definitely be handled manually in a frameless window. By styling HTML elements to visually resemble the "traffic lights", positioning them however you like, and binding click events to them to effect min/max/restore/close. You could even have them injected into the DOM via JS and only do so if the process.platform === 'darwin'.

You could also use a build tool to override the default window object in the package.json so that only OSX gets the frameless window (if you wanted a regular title bar for Win/Lin).

This would take some manual work, but the result would be indistinguishable.

The DOM injecting and traffic light styling/positioning could be created as a reusable library to save others time.

• Example

[ackzell]

I agree that one could mimic the title bar and have it behave similar to a native one (I've done this in the past).

But I also think it turns interesting when you want to also use the OS features like hovering over the fullscreen (green) button on a Mac app.

Both Slack and VSCode (Electron based AFAIK) managed to give this native support and I was wondering how they did it. It lead me to this issue. I think it ultimately depends on NW.js to give support for this "hidden" title bar while preserving the window controls? (referring to this answer: https://stackoverflow.com/a/38914911/1691580)

I'm genuinely curious, don't think this should be a deal breaker but interesting nonetheless.

[suziwen]

I think Browser's new feature Window Controls Overlay API can perfectly resolve this problem. But this setting doesn't work at recently nw.js(0.65.0), even I enable enable-desktop-pwas-window-controls-overlay option in chrome://flags page, it still doesn't work . I don't know how to integrate this feature at nw.js .

[sysrage]

I think Browser's new feature Window Controls Overlay API can perfectly resolve this problem. But this setting doesn't work at recently nw.js(0.65.0)

Based on the following, I assume this will be coming with Chrome 105. I agree this would be incredibly useful to have integrated into NW.js. @rogerwang, will this be possible?

https://blog.chromium.org/2022/08/chrome-105-beta-custom-highlighting.html

https://web.dev/window-controls-overlay/

[rogerwang]

Thanks. It makes perfect sense. Will find some time to integrate it.

[tiagorangel2011]

Any update?