Bug 713608 - HTML5 Video controls are missing in Fullscreen. f=fryn r=jaws,dbaron
authorDiogo Golovanevsky Monteiro <diogo.gmt@gmail.com>
Wed, 30 May 2012 17:04:43 -0700
changeset 95306 feec545f5f9831ba50a27748afa0b9705517a8aa
parent 95305 60ac5e1aba1592e5a7adb11929826fa68bc0a700
child 95307 0e06add7578ad4df9a81b3626a25fa74a22bdaba
push id10057
push userjwein@mozilla.com
push dateThu, 31 May 2012 00:07:08 +0000
treeherdermozilla-inbound@feec545f5f98 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, dbaron
bugs713608
milestone15.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 713608 - HTML5 Video controls are missing in Fullscreen. f=fryn r=jaws,dbaron
layout/style/html.css
toolkit/content/widgets/videocontrols.xml
--- a/layout/style/html.css
+++ b/layout/style/html.css
@@ -703,18 +703,17 @@ iframe:-moz-full-screen {
 
 /* media elements */
 video > xul|videocontrols, audio > xul|videocontrols {
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#videoControls");
 }
 
-video:not([controls]) > xul|videocontrols,
-audio:not([controls]) > xul|videocontrols {
+:-moz-any(video,audio):not([controls]) > xul|videocontrols:not(.forceControls) {
   visibility: hidden;
 }
 
 audio:not([controls]) {
   display: none;
 }
 
 *|*::-moz-html-canvas-content {
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -810,16 +810,23 @@
                     // Ignore events caused by transitions between mute button and volumeStack,
                     // or between nodes inside these two elements.
                     if (this.isEventWithin(event, this.muteButton, this.volumeStack))
                         return;
                     var isMouseOver = (event.type == "mouseover");
                     this.startFade(this.volumeStack, isMouseOver);
                 },
 
+                forceControls: function () {
+                  if (document.mozFullScreenElement == this.video)
+                    this.videocontrols.classList.add("forceControls");
+                  else
+                    this.videocontrols.classList.remove("forceControls");
+                },
+
                 _controlsHiddenByTimeout : false,
                 _showControlsTimeout : 0,
                 SHOW_CONTROLS_TIMEOUT_MS: 500,
                 _showControlsFn : function () {
                     if (Utils.video.mozMatchesSelector("video:hover")) {
                         Utils.startFadeIn(Utils.controlBar, false);
                         Utils._showControlsTimeout = 0;
                         Utils._controlsHiddenByTimeout = false;
@@ -1392,16 +1399,17 @@
                       addListener(this.muteButton, "mouseover", this.onVolumeMouseInOut);
                       addListener(this.muteButton, "mouseout", this.onVolumeMouseInOut);
                       addListener(this.volumeStack, "mouseover", this.onVolumeMouseInOut);
                       addListener(this.volumeStack, "mouseout", this.onVolumeMouseInOut);
                     }
 
                     addListener(this.videocontrols, "transitionend", this.onTransitionEnd);
                     addListener(this.video.ownerDocument, "mozfullscreenchange", this.setFullscreenButtonState);
+                    addListener(this.video.ownerDocument, "mozfullscreenchange", this.forceControls);
 
                     // Make the <video> element keyboard accessible.
                     this.video.setAttribute("tabindex", 0);
 
                     addListener(this.video, "keypress", this.keyHandler);
 
                     this.log("--- videocontrols initialized ---");
                 }