[cssom-view] Bring the segments property into visual viewport

[darktears]

The segments property allows developers to target dual screens and foldable devices by giving information about the segments (or zones) when the browser window is spanned across the screen(s). There is a good set of pictures to demonstrate what we are trying to achieve here.

Work was started by Microsoft in WICG to bring a JavaScript API, link here. The proposed specification adds a segments property to the visualViewport object. segments are only defined when the browser window is maximized. They are also defined in CSS pixels. When the browser window state changes (maximized/resized) one needs to listen for the resize events to query the updated segments.

Please note that the segments property is intended mostly to mirror in JavaScript what’s being available in CSS (see MQs).

Both APIs, CSS and JavaScript went through TAG reviews here and here.

In terms of implementation status, Android and Windows are supported in Chromium based browser (with some caveats). Microsoft Edge does ship the CSS and the JavaScript APIs enabled by default on all platforms. Samsung Internet also is shipping both APIs by default on Android (the only OS they target).

[tabatkins]

This seems like a pretty reasonable addition to me. As far as I can tell it's just exposing directly in JS what is already exposed to CSS via the env() viewport segment variables, so I can't see any possible concern with this.

[tabatkins]

Is this issue asking for review of the segments property? Or of the VisualViewport class more generally (defined in https://wicg.github.io/visual-viewport/#dom-visualviewport-segments). Or is it asking for that spec to be folded into CSSOM? Just unclear what the request for this WG is here.

[darktears]

This seems like a pretty reasonable addition to me. As far as I can tell it's just exposing directly in JS what is already exposed to CSS via the env() viewport segment variables, so I can't see any possible concern with this.

You're right, that's exactly this.

[darktears]

Is this issue asking for review of the segments property? Or of the VisualViewport class more generally (defined in https://wicg.github.io/visual-viewport/#dom-visualviewport-segments). Or is it asking for that spec to be folded into CSSOM? Just unclear what the request for this WG is here.

VisualViewport is already in the CSSOM spec draft (see here). I'm asking to add the segments property in VisualViewport which isn't there yet.

[tabatkins]

Ahhh, I was looking in CSSOM, not CSSOM View (that's a separate spec). Okay, let me just fix the title/labels, I understand now.

[darktears]

Ahhh, I was looking in CSSOM, not CSSOM View (that's a separate spec). Okay, let me just fix the title/labels, I understand now.

My bad, I didn't read carefully the name of the spec.

I'll wait more folks to comment before I put a PR together, especially the editors of the spec.

[bokand]

FYI: I moved the visual viewport spec into CSSOM-View but didn't include segments since I wasn't sure how widely accepted that was and it was still marked as "experimental". I'm guessing you'd want some support from another engine?

[darktears]

FYI: I moved the visual viewport spec into CSSOM-View but didn't include segments since I wasn't sure how widely accepted that was and it was still marked as "experimental". I'm guessing you'd want some support from another engine?

Yes ultimately we want to move this property further along in the standardization process.

[darktears]

@fantasai said

Adding new features (or substantially changing existing ones) requires CSSWG approval, not just editor approval... it doesn't seem like #9237 has that?

How do I request CSSWG approval on the added property?

[darktears]

Summary of the discussions on the PR (for discussions in the conf call):

• Fingerprinting: what does this adds more than what currently can be accessed/deduced.
• Exposure to iframes: The CSS MQs are not restricted now, and they expose the same values. So far, I couldn't find an example where MQs are restricted to iframes. Why this one should be? Developers can still use JavaScript to access the CSS MQ and env() values.
• Should this be part of the VisualViewport API? I think it should, otherwise where?
• Explain more in detail what exactly the FrozenArray of DOMRects returns especially regarding zooming and panning.