[PWA] Make use of the Window Controls Overlay feature to display menus in the title bar area

[captainbrosset]

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).

[captainbrosset]

Pinging @digitarald who, I think, is looking at the PWA features right now.

[bpasero]

Fyi @sbatten

[digitarald]

Very much aligned with @sbatten's work of adding UI to the titlebar; and eventually optimizing that work for PWA.

[Offroaders123]

Any new information about this? WCO support would be amazing!

[bpasero]

Related: https://github.com/microsoft/vscode/issues/127449

[yume-chan]

I did a quick test. With only a little code change it already looks and works great. It really gives the feeling of native applications, if ignoring the two extra buttons at top-right added by the browser.

One remaining issue is that the title bar height is hardcoded now, it needs to be retrieved at runtime but I don't know how.

EDIT: also need to add support for old browsers without WCO.

[bpasero]

Wow nice 👏

[captainbrosset]

One remaining issue is that the title bar height is hardcoded now, it needs to be retrieved at runtime but I don't know how.

You can use the new CSS environment variables for this. In particular env(titlebar-area-height). I wrote some docs about this here: https://developer.mozilla.org/en-US/docs/Web/API/Window_Controls_Overlay_API#css_environment_variables

In fact, if you use these variables, you'll be able to position your menubar and other elements correctly across operating systems (including on Mac where the close/min/max buttons are on the left side).

It really gives the feeling of native applications, if ignoring the two extra buttons at top-right added by the browser.

Yeah, these buttons are annoying when you want to achieve a "native" look. There's work going on right now about this. @diekus will surely be interested in this feedback as I know he's thinking about ways to get rid of the "chevron" icon.

[yume-chan]

I know how to use WCO in general. The issue is integrating it with vscode.

Code has its own layout system in JavaScript, so the title bar height must be known in code. I can get it from navigator.windowControlsOverlay on initialize, but changing it (listen to the geometrychange event) really complicates the whole thing: I can't find a good way to notify the layout system to recalculate all the sizes.

On contrast, Code already has support for self-rendered window controls and Electron's WCO integration. In both modes the window controls region size won't change (except by using built-in commands like zoom in/zoom out), so it's one less thing to consider.

My current changes are here: https://github.com/microsoft/vscode/compare/main...yume-chan:pwa-wco?expand=1, the solution I'm thinking is adding all the windowControlsOverlay handling to layout directly, so at least not scattered in multiple parts.

[sbatten]

WCO also needs to be enabled in the browser. At least in edge, they are disabled by default.

[diekus]

It's coming very soon. Hope to have some news to share in some days! Once we have a timeframe, I am more than happy to help in any way to bring WCO to the the code PWA.

[bpasero]

@yume-chan curious, what was the change you did in https://github.com/microsoft/vscode/issues/140694#issuecomment-1144427460 to make it work?

[yume-chan]

My branch is at https://github.com/yume-chan/vscode/tree/pwa-wco (it's now conflicting with main).

[joaomoreno]

This is now enabled on https://insiders.vscode.dev. In Edge, make sure you enable the Desktop PWA Window Controls Overlay flag by visiting edge://flags/#enable-desktop-pwas-window-controls-overlay.

@sbatten Should this look a little bit better?

[diekus]

That's incredible news! Window Controls Overlay is now on by default in Chromium 105, so no flag needed! Congratulations @joaomoreno and team!

[sbatten]

@joaomoreno, yep, I thought I resolved this but I will force the title bar on and move the compact menu when in PWA mode as mentioned here

[joaomoreno]

Looking good:

[captainbrosset]

This is great to see! Amazing progress.

Just one detail: I unfortunately forgot to grab a screenshot before dismissing it, but there's a notification banner that appears at the top of the window when you first install the app (it contains link to download VSCode, read the terms, etc.). This banner can't be closed after opting-in to WCO. Its close button is likely hidden behind the control buttons overlay. You might want to position it using the env(titlebar-area-*) variables.

[eifr]

Beautiful! small issue in mac (native title bar is like 3 pixels taller) but x100 better

[sbatten]

@captainbrosset i have a fix going in today that should move the banner below the titlebar (like it is in desktop) when the WCO are shown.

[sbatten]

While this is generally done, macos web still has issues, so moving to December to resolve

[fogoplayer]

Loving the work on this feature. I'm running into some issues on the latest Insider Preview

Running on Chrome/ChromeOS 107.0.5304.110 Screen recording 2022-12-01 12.21.24.webm

[leifwalsh]

What happened to this issue? It looked close to shipping but never did?

[fogoplayer]

It's live for me! On Chrome, look for an "up" Chevron near the window controls

[leifwalsh]

I don't see anything:

This is on Windows 10 with Chrome 122.0.6261.95. Is it possible I've got something configured incorrectly?

[leifwalsh]

Oh, I do see it in Edge on Windows 11. Must be a local configuration difference!

[leifwalsh]

Ok, I see the difference. I'm using code serve-web and the server it's downloading doesn't have the right manifest.json.

Mine (%USERPROFILE%\.vscode-insiders\cli\serve-web\57028e3d274ebde851c7cc02123def372ca619a6\resources\server\manifest.json):

{
    "name": "Visual Studio Code - Insiders",
    "short_name": "Code - Insiders",
    "start_url": "/",
    "lang": "en-US",
    "display": "standalone",
    "icons": [
        {
            "src": "code-192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "code-512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ]
}

What I'd expect: https://github.com/microsoft/vscode/blob/10b819f5a173c956871113dc57b9abe35145fd2c/resources/server/manifest.json#L6-L8

Do we know why the build it downloads has the older manifest.json?

[inLnx]

you have to zoom in to make it look even

[bpasero]

@leifwalsh this is a very good catch, looks like we are missing to set "display_override": ["window-controls-overlay"] in that case. A fix will be pushed today and should be available in insiders tomorrow.

[leifwalsh]

Awesome, thank you! Looking forward to the extra couple lines of editor space! :)

[bpasero]

@leifwalsh with todays insider, this landed. Can you maybe verify?

[leifwalsh]

yep, we see it, thank you!