Handling web pages in a freeform environment

[carlosjeurissen]

Introduction

Browser extensions leverage existing web features for their functionality. This can sometimes be challenging when it is used for something which was not initially designed for this. Take serviceworkers for example, which had to adapt a bit to accommodate browser extensions as well.

The same issue we are having with webpage sizing. In browser extensions, the size of certain pages is mostly defined by the extension page itself. This happens namely in the extension popup and option pages. Since there is no clear way of how this should be handled, browsers handle it differently.

List of inconsistencies

After exploring some situations in which browsers handle them differently, I have created a few demo extensions showcasing the differences in different browsers. Examples are different handling to a lot of content, to overflow:hidden; with scrollbars, and to how body and html tags work together. See: https://github.com/carlosjeurissen/webext-tech-demo-extensions/tree/main/issues/crossbrowser-freeform

This is only a very small collection. There is much more which is different. Think about min-width, max-width and lets not talk about media queries.

There are also situations in which a page has to handle multiple situations. For example, the options page could in some browsers be opened in a normal tab. Meaning the extension needs to handle both freeform and classic page situations.

Main goal of extension developers

Since it is good to know why this is even an issue. Currently it is very hard for extension developers to create something which works and is handles consistently in different situations (browsers, options dialog, full option page). Not going into detail about how this should be approached, ideally an extension developer would be able to figure out if it is in a freeform situation (either horizontally or vertically or both), and sets its preferred size.

We could potentially also collaborate with other w3c communities on this one. Also a potential issue to talk about during TPAC.

[carlosjeurissen]

This repository: https://github.com/carlosjeurissen/webext-tech-demo-extensions/tree/main/issues/crossbrowser-freeform contains many examples of inconsistencies. However, to make it a bit easier, here is a 1:1 comparison of some of the inconsistencies in Firefox, Chrome and Safari Desktop. Additional screenshots are available in the specific repositories.

1. Inconsistency with much content

2. Inconsistency with min-width-media-query

3. Inconsistency with same size for body and html

[carlosjeurissen]

@dotproto Last meeting #442 you mentioned this is more something for the CSSWG. Should I proceed and open an issue there?

[dotproto]

@carlosjeurissen, yes, that would be great.