Intent to Experiment: Window Controls Overlay for Installed Desktop Web Apps

[Diego Gonzalez]

Explainer

https://github.com/WICG/window-controls-overlay/blob/main/explainer.md

 

Specification

In pre-spec discussion at the CSSWG-drafts:

• [VARIABLES: (new env variables)] https://github.com/w3c/csswg-drafts/issues/6367
• [DRAGGABLE (-webkit-app-region)] https://github.com/w3c/csswg-drafts/issues/6368
• [SPEC TEXT] https://github.com/diekus/window-controls-overlay/blob/diekus/spec-work/index.html
• Early spec draft, waiting for WICG membership approva to submit PR and continue the work there.
• Looking to work with a mentor to flesh out the text of the spec.

 

Design docs

https://docs.google.com/document/d/1k0YL_-VMLIfjYCgJ2v6cMvuUv2qMKg4BgLI2tJ4qtyo/edit

 

Summary

When the window controls overlay is enabled for installed desktop web apps, the app's client area is extended to cover the entire standalone window--including the title bar area--and the window control buttons (close, maximize/restore, minimize) and other vital UI elements are overlaid on top of the client area. The web app developer is responsible for drawing and input-handling for the entire window except for the window controls overlay.

 

 

Blink component

UI>Browser>WebAppInstalls>WindowControlsOverlay

 

Search tags

PWA, web app, title bar, titlebar, customization, window controls, standalone, display mode

 

TAG review

https://github.com/w3ctag/design-reviews/issues/481

 

TAG review status

Resolution: satisfied (12/05/21)

 

Risks

Interoperability and Compatibility

Given that Edge has interest in the feature, there would be at least one other browser that implements it. The feature involves additive changes (new web app manifest entry, new JS API, new CSS env variables) and modifications (changes to frame, new use of env(safe-area-inset-*), but no removals, so the compatibility risk is minimal.

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/529)

WebKit: No signal (https://lists.webkit.org/pipermail/webkit-dev/2021-May/031865.html)

Web developers: Positive signals

·        https://twitter.com/AnaestheticsApp/status/1408727421034057729?s=20

·        https://twitter.com/WalterStephanie/status/1391634202303635456?s=20

·        https://twitter.com/Justinwillis96/status/1389261485063368707?s=20

·        https://twitter.com/bashik7/status/1385821988208275457?s=20

·        https://twitter.com/firt/status/1385238446046859268?s=20

·        https://twitter.com/PWAPilipinas/status/1385231716252409856?s=20 

·        Overall list: (https://twitter.com/search?q=url%3Ahttps%3A%2F%2Fweb.dev%2Fwindow-controls-overlay%2F&src=typed_query&f=live )

 

Ergonomics

The changes associated with this feature will only be enabled for PWAs that opt-in to it, so there are minimal risks posed to the browser as a whole. A PWA that opts-in to the feature should also have minimal ergonomics risk since the manifest already needs to be parsed on startup to determine the correct display mode in which the app should be launched, so adding one extra manifest check on startup should have minimal impact.

 

Activation

The activation risk is low since this feature includes all the tools needed to create an app that uses the full extent of the window: new UA-provided window controls overlay, JS APIs to query the size of the overlay, and CSS environment variables to layout content around the overlay.

 

Security

The major risk is that giving sites partial control over the top of the app window allows developers to spoof content in what was previously a trusted, UA-controlled region. To minimize the risk of spoofing, the app will open by default in “standalone” mode with a full width title bar, and the user can toggle window controls overlay on and off via a button in the title bar/overlay.

 

Goals for experimentation

Make sure that the API works as expected and that web app developers can successfully create customizable title bars on their apps. We intend to test the UX for toggling the feature on or off.

 

Experiment Timeline

OT desktop start: m93

OT desktop end: m96

 

Ongoing technical constraints

None

 

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

No

Window Controls Overlay will be supported in Windows, MacOS, and Linux. 

Android and iOS already support “fullscreen” display mode and don't use window controls, negating the need for an overlay.

ChromeOS won’t be part of this OT.

 

Is this feature fully tested by web-platform-tests?

N`o

 

Flag name

#enable-desktop-pwas-window-controls-overlay

 

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=937121

 

Launch bug

https://crbug.com/1108107

 

Link to entry on the Chrome Platform Status

https://www.chromestatus.com/feature/5741247866077184

 

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/cper6nNLFRQ/hU91kfCWBQAJ

 

 

This intent message was generated by Chrome Platform Status.

 

 

Regards,

 

Diego González-Zúñiga

PM, Microsoft Edge

 

 

[Mike West]

On Mon, Jul 12, 2021 at 9:55 PM 'Diego Gonzalez' via blink-dev <blin...@chromium.org> wrote:

Explainer

https://github.com/WICG/window-controls-overlay/blob/main/explainer.md

 

Specification

In pre-spec discussion at the CSSWG-drafts:

• [VARIABLES: (new env variables)] https://github.com/w3c/csswg-drafts/issues/6367
• [DRAGGABLE (-webkit-app-region)] https://github.com/w3c/csswg-drafts/issues/6368

Would it be reasonable to standardize a non-prefixed version of this, rather than the `-webkit-` naming?

I know there have been ongoing conversations about the UX of this mechanism, and I'd like to check with our permissions/UX folks internally to validate their approval of this approach.

Has Edge done any experimentation with this mechanism that could help inform the conversation around the security properties of its UX?

-mike

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/AM7PR83MB04335173D311250C68EAADD5CC159%40AM7PR83MB0433.EURPRD83.prod.outlook.com.

[Ajay Rahatekar]

Hi Mike,

The UX team reviewed this proposal and provided approval via the launch bug (sorry, this is internal only). 

-Ajay Rahatekar

[Illia Klimov]

Hi everyone!

The security section of this thread says "To minimize the risk of spoofing, the app will open by default in “standalone” mode with a full width title bar, and the user can toggle window controls overlay on and off via a button in the title bar/overlay." But I wasn't able to find anything similar in the explainer and design doc. 

After enabling #enable-desktop-pwas-window-controls-overlay experiment flag I was able to test WCO mode toggle button, it seems like the spoofing mitigation was implemented but the docs were not updated.   

Could someone clarify if my assumption is correct?

Thanks,

Illia

[Amanda Baker]

Hi Illia,

Your assumption is correct: on first launch the app will open in standalone mode by default, and the user must toggle the feature on using the button in the title bar. The state of the title bar will persist across app sessions, so once the user toggles Window Controls Overlay on, they will not need to turn it on in future sessions. We'll get the design doc updated to include info about the toggle button. 

Cheers!

Amanda

---

From: Illia Klimov <el...@google.com>
Sent: Thursday, July 15, 2021 1:09 PM
To: blink-dev <blin...@chromium.org>
Cc: Ajay Rahatekar <ajayra...@google.com>; Diego Gonzalez <luig...@microsoft.com>; blin...@chromium.org <blin...@chromium.org>; Amanda Baker <Amanda...@microsoft.com>; Hassan Talat <Hassan...@microsoft.com>; Mike Jackson (EDGE) <mjac...@microsoft.com>; Chase Phillips <c...@chromium.org>; mk...@chromium.org <mk...@chromium.org>
Subject: [EXTERNAL] Re: [blink-dev] Intent to Experiment: Window Controls Overlay for Installed Desktop Web Apps

 

[Mike West]

Thanks for confirming that the UX treatment is ok with reviewers internally, Illia!

I'm still curious about the prefixed `--webkit-app-region`. Why do you plan to experiment with that name, rather than an unprefixed version?

-mike

[Mike Taylor]

On 7/19/21 8:49 AM, Mike West wrote:
> I'm still curious about the prefixed `--webkit-app-region`. Why do
> you plan to experiment with that name, rather than an unprefixed version?

I'm also curious - historically webkit prefixes have only been
standardized when they've been widely deployed on the web and other
engines were forced to implement for compat reasons. Do we have evidence
that's the case here?

(Note: I see that Firefox added a similar `-moz-window-dragging`[1] that
was eventually made (browser) chrome-only [2].)

Firefox added use counters for a ton of non-standard WebKit prefixed
properties, including -webkit-app-region. Usage seem pretty low (0.07%
of documents, if I'm doing this right), at least for Firefox beta users:

<https://telemetry.mozilla.org/new-pipeline/dist.html#!cumulative=0&end_date=2021-07-05&include_spill=0&keys=__none__!__none__!__none__&max_channel_version=beta%252F90&measure=USE_COUNTER2_CSS_PROPERTY_WebkitAppRegion_DOCUMENT&min_channel_version=beta%252F90&processType=*&product=Firefox&sanitize=1&sort_by_value=0&sort_keys=submissions&start_date=2021-06-01&table=0&trim=1&use_submission_date=0>

[1] <https://bugzilla.mozilla.org/show_bug.cgi?id=944836#c66>
[2] <https://bugzilla.mozilla.org/show_bug.cgi?id=1211040>

[Chris Harrelson]

Hi, everything is looking good except the answer to Mike West's question about prefixed properties. LGTM, but intent owners: could you respond to it?

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/368b97e4-21a2-9687-94d5-fb745769f2b9%40chromium.org.

[Diego Gonzalez]

Hola everyone.

The idea is indeed to drop the `-webkit` prefix. For now we're working with the prefix for compatibility reasons since it is already the way electron apps define draggable regions, but in the standardization efforts we are going to push for dropping the prefix. 

-Diego

[Daniel Bratell]

I understand that you do not want to change more than necessary, but I think it would need very strong arguments for introducing anything new with a -webkit prefix on the web. Being compatible with Electron apps is not a strong argument so I expect it to be prefixless when/if it's ready for shipping.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/0c69f0e3-03e0-4051-afa8-bf8cc5f3c466n%40chromium.org.

[Diego Gonzalez]

Hola,

We'd like to extend the OT for WCO due to the new shorter release cycles for Edge and Chrome. The idea is to extend it 2 more versions until version 96. This would allow for us to get more feedback from the trial. Is this ok with everyone?

[Chris Harrelson]

Hi,

The original email says M93-M96. Did you want to extend to M98?

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/12c840e5-0262-466c-85ba-4755df33d2a7n%40chromium.org.

[Chris Harrelson]

LGTM to extend to M96.

On Mon, Aug 16, 2021 at 4:55 PM Ajay Rahatekar <ajayra...@google.com> wrote:

Sorry for the confusion. The team is requesting extending one milestone to M96. Current OT is 93-95.

[Ajay Rahatekar]

Sorry for the confusion. The team is requesting extending one milestone to M96. Current OT is 93-95.

On Mon, Aug 16, 2021 at 4:48 PM Chris Harrelson <chri...@chromium.org> wrote:

[Ivan Šandrk]

Hey folks,

Has there been any progress on standardizing the CSS property "-webkit-app-region/app-region"?

Thanks,

Ivan

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Diego Gonzalez]

Hola Ivan,

I am working on this. Will post once I have an update (soon).

Regards

Diego

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/12c840e5-0262-466c-85ba-4755df33d2a7n%40chromium.org.

[Diego Gonzalez]

Just a quick update, I have created an issue on the CSSWG to started gathering feedback about the `app-region` property. 

[Diego Gonzalez]

and of course I forgot the link:

Standardizing `app-region` for draggable app windows · Issue #7017 · w3c/csswg-drafts (github.com)