On Sat, Jan 30, 2010 at 5:49 AM, Simon Fraser <span dir="ltr"><<a href="mailto:smfr@me.com">smfr@me.com</a>></span> wrote:<br><div class="gmail_quote"><blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt 0.8ex; border-left: 1px solid rgb(204, 204, 204); padding-left: 1ex;">
<div style="word-wrap: break-word;"><div><div class="im"><div>On Jan 28, 2010, at 6:42 PM, Robert O'Callahan wrote:</div><br><blockquote type="cite">1) Should be convenient for authors to make any element in a page display fullscreen<br>


2) Should support in-page activation UI for discoverability<br></blockquote><div><br></div></div>I agree with Boris that we should leave this up to the page author.</div></div></blockquote><div><br>Leaving it up to the page author was what I meant by in-page UI, I just didn't phrase it well.<br>
<br></div><blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt 0.8ex; border-left: 1px solid rgb(204, 204, 204); padding-left: 1ex;"><div style="word-wrap: break-word;"><br><blockquote type="cite">While an element is fullscreen, the UA imposes CSS style "position:fixed; left:0; top:0; right:0; bottom:0" on the element and aligns the viewport of its DOM window with the screen. Only the element and its children are rendered, as a single CSS stacking context.<br>
</blockquote><div class="im"><br></div><div>So this makes it a very element-focused API (as does the enterFullscreen() method on Element that you propose above).</div><div><br></div><div>Another approach would be to leave it entirely up to the page author to style their page differently when in fullscreen, and not have the API force them to focus on one element. Then the API would probably be on the Window object, and the UA would simply transition the view to a fullscreen presentation. There could be a pseudo-class to the body, or a way to use media queries to allow the author can apply different styles for fullscreen.</div>
<div><br></div><div>In this scenario the author is not forced to nest all their fullscreen content under one element, and can continue to show the rest of the page content (maybe dimmed out by a semi-transparent overlay div) in the background.</div>
</div></blockquote><div><br>The latter is easy to do with my proposed API too: just give the fullscreen element a non-opaque background.<br><br></div><blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt 0.8ex; border-left: 1px solid rgb(204, 204, 204); padding-left: 1ex;">
<div style="word-wrap: break-word;"><div>The disadvantage of this approach is that it makes it much harder for the UA to do any kind of automatic transitions between the two presentations (though it's not clear to me that nice automatic transitions will be possible with the element-based API either).</div>
</div></blockquote></div><br>I suggested an approach for transitions above: apply style changes, render the element at the size of the screen, 
and then zoom that image out from the element's old position to the 
screen size. Because <video> self-letterboxes, you can make this always look good for <video> even if the screen has a different aspect ratio to the original size of the video element.<br><br>There is an additional issue I just thought of: with either approach, you'll normally want to hide the viewport scrollbar. You could just say that the UA hides the viewport scrollbar while the viewport is in fullscreen mode. Or you could use a pseudoclass to set overflow:hidden on the root element, which would let the author override it, or make the user do that manually.<br>
<br>So how about a Window API with an optional element component:<br>void enterFullscreen(optional DOMElement element, optional boolean enableKeys);<br>void 
exitFullscreen();<br>boolean attribute supportsFullscreen;<br>boolean 
attribute displayingFullscreen;<br>"beginfullscreen" and "endfullscreen"
 events<br><br>Where "beginfullscreen" and "endfullscreen" are targeted at the element if one was provided, or else at the window, and bubble. While a window is fullscreen, the root element and the designated fullscreen element, if any, are given a pseudoclass "fullscreen". Then you can have some default rules in the UA style sheet:<br>
*:root:fullscreen { overflow:hidden; }<br>*:not(:root):fullscreen { position:fixed; left:0; top:0; bottom:0; right:0; }<br><br>Rob<br>-- <br>"He was pierced for our transgressions, he was crushed for our iniquities; the punishment that brought us peace was upon him, and by his wounds we are healed. We all, like sheep, have gone astray, each of us has turned to his own way; and the LORD has laid on him the iniquity of us all." [Isaiah 53:5-6]<br>