[PWA] Make use of the Window Controls Overlay feature to display menus in the title bar area #140694
Description
The Window Controls Overlay PWA feature is coming out of origin trial and is shipping with Chrome/Edge 98.
To learn more about it, here are a few resources:
- https://alistapart.com/article/breaking-out-of-the-box/
- https://developer.mozilla.org/en-US/docs/Web/API/Window_Controls_Overlay_API
- https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay
- https://web.dev/window-controls-overlay/
In short, it allows PWAs installed on desktop OSes to regain control of the area normally reserved for the standard title bar. With it, the maximize/minimize/close/pwa buttons appear as overlays on top of the web content, and the rest of the title bar is gone.
It comes with a JS API and some CSS variables that help PWA make efficient use of the regained space.
Using this, the VS Code PWA could display its title bar at the top of the window, just like in its native version.
The hamburger menu version of it could still be used when the title bar area is too narrow (which is easy to detect with the ongeometrychange event).