Window Controls Overlay for Installed Desktop Web Apps

[bkardell]

WebKittens

@marcoscaceres @annevk

Title of the proposal

Window Controls Overlay for Installed Desktop Web Apps

URL to the spec

https://wicg.github.io/window-controls-overlay/

URL to the spec's repository

https://github.com/WICG/window-controls-overlay/

Issue Tracker URL

No response

Explainer URL

No response

TAG Design Review URL

w3ctag/design-reviews#481

Mozilla standards-positions issue URL

mozilla/standards-positions#529

WebKit Bugzilla URL

No response

Radar URL

No response

Description

There was a request for position made via webkit-dev in May 2021 but I wasn't able to find replies to.

It was in origin trials for 3 releases and then several months later, there was an intent in chromium in Oct 2021. Mozilla deferred to a standards position as they weren't focused on PWAs a the time... It's been shipping in chromium since 105, however, it also never "graduated" to a different venue . This is potentially interesting, so I'm curious if there's appetite for it or anything adjacent...

[annevk]

I might be missing something, but this API seems incredibly specific to the Windows UI it is solving for? E.g., it would not work for the MacBook notch or Dynamic Island on iPhones.

This also seems to aim to solve a similar problem to https://drafts.csswg.org/css-env-1/ but is instead done through a JS API. Why?

[diekus]

I don't think the scope is "Windows UI", Linux and macOS also have OS default title bars. I'd say the scope of the API is desktop applications, as I don't think mobile apps have traditional windows with title bars and windowing controls that you move around the screen?

For desktop, in the case of the notch, as far as I understand when you maximise an app the menu is on the sides of it, and if you're talking about fullscreen on a webpage I get there are no window controls there, and do correct me if I am wrong.

The feature is not a JS API, instead it has a CSS way of being enabled and a JS way of being enabled. Most of the work I do with WCO is only CSS for my web apps, but if you were to do lets say, a WebGL game and need to position content and don't want it to be obscured by the stoplights, you can then use the JS version.

[tomayac]

@annevk See the animation in this article section about Window Controls Overlay for how this behaves on macOS.