Did you know? DZone has great portals for Python, Cloud, NoSQL, and HTML5!
HTML5 Zone is brought to you in partnership with:

John Esposito curates content at DZone, while writing a dissertation on ancient Greek philosophy and raising two cats. In a previous life he was a database developer and network administrator. John is a DZone Zone Leader and has posted 268 posts at DZone. You can read more from them at their website. View Full User Profile

HTML5 Full Screen: Now in Firefox

11.15.2011
Email
Views: 4614
  • submit to reddit
The HTML5 Microzone is presented by DZone and Microsoft to bring you the most interesting and relevant content on emerging web standards.  Experience all that the HTML5 Microzone has to offer on our homepage and check out the cutting edge web development tutorials on Script Junkie, Build My Pinned Site, and the HTML5 DevCenter.

Nothing looks good surrounded by junk. Or even if the junk looks nice, it can easily distract from what it surrounds.

Painters know this; many won't let anyone else else frame their paintings.

App designers know this too -- but web designers are a little out of luck, because the stupid browser shows its stupid controls and you can't control them and why can't I just make my beautiful site go full-screen?

Besides web design, web gaming also suffers from inability to force a fullscreen. (Orcs and scrollbars don't mix.)

Users can choose to fullscreen a site manually, of course -- but, especially for designers, that's not enough. (Users can choose to put great paintings in nice frames too, but no gallery designer would be happy with anything less than complete control.)

So, from the designer/gamer's point of view, app-controlled browser fullscreen would be great.

But from security's point of view, app-controlled browser fullscreen can be a real problem.

As Robert O'Callahan says:

Our biggest issue right now is how to make [fullscreening] secure. The perceived threat is a malicious page going full-screen and then displaying something that looks like the content of another site, say the user's bank, complete with false URL bar --- or the content of a native application or the operating system, for that matter.


Robert's full discussion (from this past August) is worth reading, along with the comments.

The larger discussion began in January 2010, and a complete Gecko FullScreenAPI proposal was on the table for some time -- complete with extensive notes on security.

Meanwhile, WebKit (used in Chrome) figured out its own fullscreen API last January -- mostly following Mozilla's proposal, though with a few exceptions.

But last week Firefox's own fullscreen browser API went live.

This is the culmination of long debate, and includes many security features designed to respond to common concerns. In particular, according to Mozilla's security documentation, Firefox won't grant fullscreen requests at all except when:

  1. Running in a user-generated event handler (same code path as pop-up blocking).
  2. Within the first second of running in a user-generated event handler.
  3. When all ancestor iframes have the mozallowfullscreen attribute.
  4. When there are no windowed plugins present (on non-MacOSX platforms).

Then, the user will be warned as much as possible-and-not-annoying:

  1. [Firefox] dim[s] the <browser> element for the first 2s.
  2. [Firefox] show[s] a warning message for the first 4s after entering full-screen.

And Firefox will exit fullscreen on a hair-trigger, whenever:

  1. Keys not listed in https://wiki.mozilla.org/Gecko:FullScreenAPI#Proposed_Specification (e.g. alpha-numeric keys) are pressed (simulated events don't break us out of full-screen).
  2. A windowed plugin is added to the document.
  3. Navigation occurs.
  4. Focus changes to another tab. (e.g. Ctrl+Tab / command+tab)
  5. User hits Esc
  6. User hits F11

Sounds good enough to me. (But then I really like fullscreen browser content.)

For implementation details, check out Chris Pearce's full announcement, which includes a Firefox-specific example (after you've downloaded the current Firefox nightly build), or a cross-browser demo (which works in newer Chrome stable releases too).

Published at DZone with permission of its author, John Esposito.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

HTML5 is the most dramatic step in the evolution of web standards. It incorporates features such as geolocation, video playback and drag-and-drop. HTML5 allows developers to create rich internet applications without the need for third party APIs and browser plug-ins.  Under the banner of HTML5, modern web standards such as CSS3, SVG, XHR2, WebSockets, IndexedDB, and AppCache are pushing the boundaries for what a browser can achieve using web standards.  This Microzone is supported by Microsoft, and it will delve into the intricacies of using these new web technologies and teach you how to make your websites compatible with all of the modern browsers.