Fenix: Support for notches / cutouts (fullscreen)

[abodea]

Why/User Benefit/User Problem

As a Fenix user, I want to be able to use the app in Full screen mode.

What/Requirements

Adding the support for Full Screen App in Fenix.

Acceptance Criteria (how do I know when I’m done?)

• [ ] Remove the system UI to allow full screen
• [ ] This does not include hiding the BrowserToolbar when browsing

Notes

Please note that almost every new phone comes out with a Notch, smaller or bigger depending on the device.
Many apps implemented the support for Full Screen App, buying space on the screen even if the Notch is displayed.
The notch is not even noticeable after using the phone for a while.
Examples from S10+:

[NotWoods]

Blocked by Bug 1503656

[lime124]

@abodea / @NotWoods can you clarify what you need from UX? (outside of a yes, let's do it) thanks!

[abodea]

Hi @lime124, I added the label asking for a confirmation from the UX team that this feature is a good addition for our app, and to make sure if any other information is needed, to investigate and provide it here.
I will summarize what ask is for from now on when adding the label.

[lime124]

@abodea no worries at all! :)

I don't see any reason to not do this. i don't know how much eng effort it would take but it does look like there is some sort of GV (i'm guessing) dependency.

@vesta0 for prioritization. removing ux label as i don't think there is anything more we need to provide. thanks!

[bogas04]

Duplicate of https://github.com/mozilla-mobile/fenix/issues/1984 ?

[NotWoods]

1984 is different because it talks about hiding the status bar.

This issue talks about adding support for display cutouts (notches) so content is displayed across the entire screen in landscape.

Both would probably require display cutout support in GeckoView.

[bogas04]

Ah makes sense.

[cpeterso]

snorp says this feature will important for fullscreen PWAs or for Fenix without a top toolbar.

GV bug 1503656 was closed as a duplicate of existing bug https://bugzilla.mozilla.org/show_bug.cgi?id=1503656

[sblatz]

To clarify: this ticket is referencing removing the system UI to cover the full screen. This does not include hiding the BrowserToolbar when browsing.

Should this to apply to the whole app? Or only when you're in full screen video.

Would this want a toggle in settings?

[vesta0]

@sblatz this does not require a toggle in settings, it should just be default behaviour.

Hiding the nav bar when browsing is already addressed in this ticket: #4383

[sblatz]

We need to make sure GV team prioritizes this work properly. My understanding is there is already a Bugzilla ticket around this as chris mentioned: https://bugzilla.mozilla.org/show_bug.cgi?id=1503656

@bifleming, @cpeterso.

[lime124]

discussed in planning meeting - there is no upfront ux work but will require some involvement during implementation. labeling a xs to capture that effort. @vesta0 - ticket should move to eng backlog

[cpeterso]

We need to make sure GV team prioritizes this work properly. My understanding is there is already a Bugzilla ticket around this as chris mentioned: https://bugzilla.mozilla.org/show_bug.cgi?id=1503656

I will tentatively pencil in the GV bug for October. Note that the implementation might depend on Android APIs only available in API 28+ (Pie).

[mandeep]

Just to be clear, this will be an option that will allow for the hiding of the URL bar as well as the tab bar, correct?

[sblatz]

@mandeep no this does not include hiding the URL bar.

[mandeep]

@sblatz so then it seems like proper full screen support (F11 in desktop) is not covered by this issue nor by #1984. Should I open a new issue for this?

[sblatz]

@mandeep https://github.com/mozilla-mobile/fenix/issues/4383 covers it

[mandeep]

4383 addresses the dynamic nav bar where the URL bar and tabs are hidden when one scrolls through a page. I'm asking for a setting that mimics F11 on the desktop browser so that the user can control when the browser is in full screen mode.

[sblatz]

@mandeep feel free to file an issue for always forcing the "hidden" url bar then, sorry for misunderstanding!

[cpeterso]

The GV bug has been added to GV's November sprint. GV is blocked on some Gecko layout fixes for cutout support.

https://bugzilla.mozilla.org/show_bug.cgi?id=1503656#c24

[vesta0]

@boek @bifleming I see that GV team were planning to work on this in Q4 and it's not on the GV board - did the fix land already?

[vesta0]

@fluffyemily do you know if this issue is being worked on?

[makotokato]

Fenix and a-c need viewport-fit value support.
https://github.com/mozilla-mobile/android-components/issues/5795

[liuche]

Looks like the GV work is finished, and the AC and Fenix work should be ready to start on.

[rocketsroger]

Unfortunately youtube site does not support cutouts.
Test pages used to verify the implementation:
viewport-fit=contain: https://makotokato.github.io/demo/cutout-contain.html
viewport-fit=cover: https://makotokato.github.io/demo/cutout-cover.html

[ekager]

This is ready to test. Current implementation is that if the website wants to have full screen including cutout it will work, but unfortunately YouTube doesn’t support it. See Roger's comment above for the test website.
https://github.com/mozilla-mobile/fenix/issues/4149#issuecomment-610432974

[abodea]

I was able to verify this issue with Samsung Galaxy S10+ (10) and Huawei P20 lite (9).

Note that with the links from here https://github.com/mozilla-mobile/fenix/issues/4149#issuecomment-610432974 everything looks alright.

I wasn't able to find a website that actually supports a full-screen video, I will keep searching.
Due to the situation, we are facing, I'm not able to access more devices with notches.

@ekager is my verification enough for now? As those 2 websites are working correctly?

[ghost]

@abodea I have a device with a notch, maybe I can help somehow.
This is how it looks on my Motorola One Power, Android 10, Firefox Beta 5.0.0-beta.1 (Build #2015737283), on: https://makotokato.github.io/demo/cutout-contain.html

And on: https://makotokato.github.io/demo/cutout-cover.html

And on: Nightly 200428 06:00 (Build #2015737139), and the video ( which is just a page) also pops out of Fenix when sent in background, https://makotokato.github.io/demo/cutout-cover.html

And on: https://makotokato.github.io/demo/cutout-contain.html, it looks the same in Nightly as on Firefox Beta 5.0.0-beta.1 (Build #2015737283).

[abodea]

Verified as fixed on Beta 5.0.0-beta.1 with Samsung Galaxy S10+ (10).
Thank you for the help @SS1113!