[browser] No way to exit fullscreen mode from the chrome

[Olivier Tilloy]

Fullscreen support just landed in webbrowser-app (see bug #1308947).

The current implementation assumes websites are well-behaved and provide a button or any other user-friendly way of exiting fullscreen (video players usually provide a button for this, see e.g. youtube).
If the website doesn’t provide such a functionality, then the user can end up trapped in fullscreen mode with no way to get back to a windowed state and access the chrome. When that happens, the only "fix" is to close the browser app, thus closing all open tabs.

The issue can be observed by browsing to http://webcodehelpers.com/demo/html5api/html5-fullscreen-api.html and tapping the "728 Div Fullscreen" button.

We need designs for the fullscreen mode, with at the very least a button or gesture to exit it.

[Giorgio Venturi (giorgio-venturi-deactivatedaccount)]

Could we reproduce the controls we have for media-player?
https://docs.google.com/a/canonical.com/presentation/d/1CxZJrmqjVYpdaXG_O-I237UQshvkCqsNpGRwXAFiFto

[Olivier Tilloy (osomon)]

That’s a entirely separate issue.

Fullscreen doesn’t apply only to videos, it allows any element on a page to be made fullscreen (including images, div blocks, …). For those fullscreen cases that don’t involve a video, we need to provide the user an explicit way to exit fullscreen mode. See for example what firefox mobile does: http://www.html5rocks.com/en/mobile/fullscreen/#toc-letuserchoose.

[Bill Filler (bfiller)]

Customers are reporting this problem with vimeo. There is no way to exit fullscreen mode once you play a video.
See related bug:
https://bugs.launchpad.net/barajas/+bug/1438821

[Bill Filler (bfiller)]

Can we display an overlay with an "x" button that is hidden/shown when the chrome is hidden/shown and toggles when tapping on the window?

Seems the only gesture that could work would be a bottom edge swipe as the other edges already perform actions.

As a fallback, we should exit fullscreen mode when browser moves to the background, such that when it's brought back to foreground the window is no longer fullscreen.

[Olivier Tilloy (osomon)]

Updated visual spec with an overlay for fullscreen mode: https://docs.google.com/a/canonical.com/presentation/d/1woHjO8K4iqyVZZlfQ4BXL0DhYbwkEmZ7wvcUhYzHDRk/edit#slide=id.g981691c49_0_0.

[Bill Filler (bfiller)]

I think the tricky part here will be syncronizing showing the overlay with the site's chrome as we don't want it visible if the chrome is not visible.

To clarify, I mean that initially when fullscreen mode launched, the overlay and the chrome (if present) should be visible. Then tapping on the video should hide the chrome and the overlay. But what if it's a game or something and tapping the screen is not an option, then how do you hide/show the overlay?

[John McAleely (john.mcaleely)]

@pat, please triage this for c-d-s-i, it's been directly requested by an OEM

[Bill Filler (bfiller)]

The overlay approach, as designed, is not going to work for a few reasons:

1) we need a way to hide/show overlay as it cannot always be visible (will interfere with video playback, game, etc). We don't have a mechanism to do this. Tapping the screen to toggle the visibility was considered but could be problematic for games or other sites that need to handle the tap.
2) many sites have their own chrome (i.e. you tube) and we don't have a programmatic way to synchronize our overlay with their chrome (i.e. hide our chrome when their chrome is hidden and show our chrome when their chrome is showing)

Lets look at how iOS and Android handle the problem

iOS:
- for sites that display video in fullscreen mode, iOS does not display the site's native chrome (try youtube.com for example) but instead displays it's own header/footer with it's own media controls and fullscreen toggle button
- for other type of html sites that request a fullscreen window, iOS simply ignores the request :) It does not make the window fullscreen so does not have the problem of how to exit. Try this site: http://davidwalsh.name/demo/fullscreen.php

Chrome for Android:
- for any sites that display fullscreen window (video or not, they handle both unlike iOS), Android displays a brief notification saying "Swipe down from the top to exit fullscreen mode". Performing the swipe down gesture in fact exits fullscreen mode.

Proposal:
We should support all fullscreen window requests, like Android. We need a generic way that will exit the fullscreen window without interfering with the view. Therefore, we recommed doing the following:
1) display a notification when fullscreen window shown (like Android) and use the Bottom Edge gesture to exit the fullscreen window, as this is the only unused gesture currently that we could hijack in fullscreen mode
2) in addition, when browser is moved to the background (right edge swipe), also exit fullscreen mode

[Benjamin Keyser (bjkeyser)]

Bill... The only case where we need a way out is gaming, because games use taps for their own purposes. For viewing media, you can tap the media and bring onscreen controls (this is being accomplished using the media services designs / spec) and always exit gracefully (like youtube, iOS native media play, etc.)

So for web games only, we recommend the solution we proposed because A) discovery of that particular behavior in the bottom edge will be unlikely B) this is only for casual gaming on the web... actual full screen games will have their own controls. I can't think of another use case, can you? C) the bottom edge is already occupied with tabs... we don't want that behavior to change.

[Olivier Tilloy (osomon)]

> The only case where we need a way out is gaming, because games use
> taps for their own purposes. For viewing media, you can tap the media
> and bring onscreen controls (this is being accomplished using the
> media services designs / spec) and always exit gracefully (like
> youtube, iOS native media play, etc.)

True, but for this to work we need media-hub integration in oxide. Experimental opt-in support for audio playback has landed (for webapps), but video playback still requires significant work. Which means that for the time being, we’re stuck with whatever controls the HTML5 player provides. And this can be an issue, see e.g. bug #1438821.
So, again, for the time being we need a browser way to exit fullscreen mode, even for media playback.

> So for web games only, we recommend the solution we proposed because
> A) discovery of that particular behavior in the bottom edge will be
> unlikely

Of course we’d need some sort of hint. Chrome on Android displays a tooltip when entering fullscreen that explains the user how to exit (by swiping from the top edge in their case), and this tooltip fades out after 3 seconds, so it’s not very intrusive. Other options include displaying a banner, much like chromium on desktop does (and I believe Firefox on android too), with 'Allow' and 'Cancel' buttons, and of course a way to exit (using a gesture) once fullscreen has been allowed. This is a bit more intrusive, but also gives more control to the user.

> B) this is only for casual gaming on the web... actual full screen
> games will have their own controls. I can't think of another use case,
> can you?

If they are HTML5 games, they’re not required to provide controls to exit fullscreen. Nothing in the HTML5 fullscreen specification mandates the presence of controls.

> C) the bottom edge is already occupied with tabs...
> we don't want that behavior to change.

In the current implementation, not when in fullscreen mode. IIRC I discussed this with Giorgio and the guidance was that the swipe from bottom edge gesture was unnecessary/unwanted while in fullscreen mode.

Note that this gives us an opportunity to kill two birds with one stone by enabling the bottom edge swipe gesture to reveal open tabs in fullscreen, and exiting fullscreen mode for the current tab when this is done.
Does that sounds acceptable? (we would still need some sort of notification to teach the user how to exit fullscreen when entering it)