Invalid `display-mode` media feature

[PRR24]

Description

PWA always reports back @media (display-mode: browser).

Steps to Reproduce

1. Install a PWA with "display": "standalone" in the manifest
2. Launch PWA
3. @media (display-mode: standalone) is false and @media (display-mode: browser) is true even if there are no browser controls visible.

Environment

Ubuntu 20.04 FF 120 PWAsForFirefox 2.9.0

[filips123]

Unfortunately, I think it's not possible to implement this, as there currently doesn't seem to be a way to change the display mode with internal Firefox JS APIs.

[atjn]

I think this should be solved by patching the Firefox runtime that is used to run the app. Maybe you can borrow some patches from the old SSB feature.

Maybe it is even possible to get this patched upstream in Firefox? If the browser displays minimal UI, it might as well report display-mode: standalone.

There is also a horrendous no-good solution. You could scan through all the website's loaded CSS and find all media queries that test for display-mode: standalone, then replace them with display-mode: browser and vice-versa. This is possible via the CSSOM.

[filips123]

I think this should be solved by patching the Firefox runtime that is used to run the app. Maybe you can borrow some patches from the old SSB feature. Maybe it is even possible to get this patched upstream in Firefox?

Well, it seems the old SSB didn't even support display-mode: standalone.

The problem is that I think it's not possible to control the display mode with internal Firefox JS APIs, so the only option seems to be actual C++ changes. And in this case, they would need to be upstreamed because otherwise, I would have to fork Firefox, and configure all build, update and other infrastructure, which I don't want to do (and because this would also prevent users from using other Firefox forks).

One problem with upstreaming such C++ changes is that Mozilla needs to accept them. So, they probably need to be more generic and not really specific to PWAsForFirefox. They accepted my previous patches for changing the window class/name on Linux with an attribute (for #80), so it seems it's doable.

For this case, an internal JS API to set (all/most) media queries could probably be added in the form of XPCOM interface. And in case support for changing all media queries isn't easily doable, I hope support specifically for display-mode would still be fine (they seem to have a similar API on Android, although it makes more sense there as Firefox for Android supports PWAs). I don't know if this should be added as a new XPCOM interface or to an existing one, or if there are already existing APIs that can change some other media queries and could be used as a basis.

So, these things still need to be researched, and this may also require some help from Firefox developers. I may also try to do this at some point in the future.

There is also a horrendous no-good solution.

Yeah, this isn't really good, and probably also won't work for websites that check media queries with JS.

[asjl]

I'm seeing this problem with display: minimal-ui as well (which isn't surprising).

Really all I want is a "back" button (and maybe a "reload" button) in the header a la Chrome!

A fix would be nice

[filips123]

This issue is about setting the correct display-mode media feature value to the website. Even when it is fixed, it won't affect how the titlebar is displayed, as that can already be customized by the user.

If you want to have back, forward and reload buttons in the titlebar, you can just go to the customize page (Menu -> More tools -> Customize toolbar), and drag these buttons to the titlebar. You can also disable other existing widgets if you want more minimal taskbar.

[asjl]

I get that. I wanted to have CSS like this:

.isnz-backbutton { display: flex; align-items: center; }

@media all and (display-mode: browser) { .isnz-backbutton { display: none; } }

to let me choose to display things based on the display: setting. As you noted Firefox isn't being supportive of this which is a shame. Let's hope they see the light.

Thanks for the plugin

On Sun, 31 Mar 2024 at 00:53, Filip Š @.***> wrote:

This issue is about setting the correct display-mode media feature value to the website. Even when it is fixed, it won't affect how the titlebar is displayed, as that can already be customized by the user.

If you want to have back, forward and reload buttons in the titlebar, you can just go to the customize page (Menu -> More tools -> Customize toolbar), and drag these buttons to the titlebar. You can also disable other existing widgets if you want more minimal taskbar.

— Reply to this email directly, view it on GitHub https://github.com/filips123/PWAsForFirefox/issues/431#issuecomment-2028026141, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABL6VKMH57RNYX43DJTVSUTY22KSFAVCNFSM6AAAAABAGC53IWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMRYGAZDMMJUGE . You are receiving this because you commented.Message ID: @.***>

[filips123]

Oh, so you want the back button to be displayed by the website when it is installed as PWA? Yeah, that's currently not possible.