Proposing new env() variables to enable title bar customization on installed Web Apps

[diekus]

Hola everyone! Diego here from the Edge team. I've been working with my colleagues on a feature that allows to customize the title bar for installed Web applications. The feature we are working on is called Window Controls Overlay and it proposes a set of new env() variables that define the area of the mentioned title bar.

These variables are:

• titlebar-area-x
• titlebar-area-y
• titlebar-area-width
• titlebar-area-height

We want to add these env() variables since they provide a responsive CSS solution that the JS counterpart can't easily replicate. This is necessary when a window is resized or when the overlay area dynamically accommodates an extension icon for example.

We'd love to get this into the CSS spec, and I'd love to read your thoughts and feedback, so please feel free to use this GitHub thread as a discussion forum.

You can see the sample code to get an idea of how this works.

[fantasai]

@diekus What use cases are you trying to handle that aren't covered by the safe-area insets?

[diekus]

@fantasai titlebar-area-* would be a case of defining the content that goes inside the title bar area of an installed Web app on a desktop platform. The safe-area-inset-* is mostly used to avoid notches or other navigation UI on mobile phones. It is a different region altogether and apart from the semantics of where this rectangle is used and what is it is used for, they could both be set for an app that progressively enhances from a mobile device with a notch to a windowed application on a desktop.

[tabatkins]

Ah, okay, so it's a new display mode that frees up the title-bar area to be used by general web content (with some parts reserved for an overlay with controls), and these variables tell the author where that title-bar region is, so they can put content there (abspos using left/top/width/height set to the variables) and/or avoid the region (margin-top of y+height on an appropriate container).

Makes sense to me.