Bug 1074744 - Apply the margin-end to the volume controls when fullscreen is unavailable. r=gijs r=dolske
authorJared Wein <jwein@mozilla.com>
Fri, 09 Jan 2015 14:29:36 -0500
changeset 249025 55758d00de0249fe0debe3e661627d77fc79b999
parent 249024 28624e12ad87b0145e0247e0b1af0974cff7816c
child 249026 175e66ebdb0559429b257074384282161a41d457
push id4489
push userraliiev@mozilla.com
push dateMon, 23 Feb 2015 15:17:55 +0000
treeherdermozilla-beta@fd7c3dc24146 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgijs, dolske
bugs1074744
milestone37.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 1074744 - Apply the margin-end to the volume controls when fullscreen is unavailable. r=gijs r=dolske The adjusted margin-end needs to be applied to the volume controls when the fullscreen button is hidden due to fullscreen being unavailable, such as within an iframe that is lacking the allowfullscreen attribute. Previously the margin-end was only applied when the video was determined to be audio-only.
b2g/chrome/content/touchcontrols.css
browser/metro/theme/touchcontrols.css
mobile/android/themes/core/touchcontrols.css
toolkit/content/tests/widgets/test_videocontrols_audio.html
toolkit/content/widgets/videocontrols.css
toolkit/content/widgets/videocontrols.xml
toolkit/themes/osx/global/media/videocontrols.css
toolkit/themes/windows/global/media/videocontrols.css
--- a/b2g/chrome/content/touchcontrols.css
+++ b/b2g/chrome/content/touchcontrols.css
@@ -46,27 +46,31 @@
 .fullscreenButton {
   background: url("chrome://b2g/content/images/fullscreen-hdpi.png") no-repeat center;
 }
 
 .fullscreenButton[fullscreened="true"] {
   background: url("chrome://b2g/content/images/exitfullscreen-hdpi.png") no-repeat center;
 }
 
+.controlBar[fullscreen-unavailable] .fullscreenButton {
+  display: none;
+}
+
 .playButton {
   background: url("chrome://b2g/content/images/pause-hdpi.png") no-repeat center;
 }
 
 /*
  * Normally the button bar has fullscreen spacer play spacer mute, but if
  * this is an audio control rather than a video control, the fullscreen button
  * is hidden by videocontrols.xml, and that alters the position of the
  * play button.  This workaround moves it back to center.
  */
-.controlBar.audio-only .playButton {
+.controlBar[fullscreen-unavailable] .playButton {
   transform: translateX(28px);
 }
 
 .playButton[paused="true"] {
   background: url("chrome://b2g/content/images/play-hdpi.png") no-repeat center;
 }
 
 .castingButton {
--- a/browser/metro/theme/touchcontrols.css
+++ b/browser/metro/theme/touchcontrols.css
@@ -40,27 +40,31 @@
 .fullscreenButton {
   background: url("chrome://browser/skin/images/fullscreen-hdpi.png") no-repeat center;
 }
 
 .fullscreenButton[fullscreened="true"] {
   background: url("chrome://browser/skin/images/exitfullscreen-hdpi.png") no-repeat center;
 }
 
+.controlBar[fullscreen-unavailable] .fullscreenButton {
+  display: none;
+}
+
 .playButton {
   background: url("chrome://browser/skin/images/pause-hdpi.png") no-repeat center;
 }
 
 /*
  * Normally the button bar has fullscreen spacer play spacer mute, but if
  * this is an audio control rather than a video control, the fullscreen button
  * is hidden by videocontrols.xml, and that alters the position of the
  * play button.  This workaround moves it back to center.
  */
-.controlBar.audio-only .playButton {
+.controlBar[fullscreen-unavailable] .playButton {
   transform: translateX(28px);
 }
 
 .playButton[paused="true"] {
   background: url("chrome://browser/skin/images/play-hdpi.png") no-repeat center;
 }
 
 .castingButton {
--- a/mobile/android/themes/core/touchcontrols.css
+++ b/mobile/android/themes/core/touchcontrols.css
@@ -75,16 +75,20 @@
   background-color: transparent;
   background: url("chrome://browser/skin/images/fullscreen-hdpi.png") no-repeat center;
 }
 
 .fullscreenButton[fullscreened] {
   background: url("chrome://browser/skin/images/exitfullscreen-hdpi.png") no-repeat center;
 }
 
+.controlBar[fullscreen-unavailable] .fullscreenButton {
+  display: none;
+}
+
 /* bars */
 .scrubberStack {
   width: 100%;
   min-height: 32px;
   max-height: 32px;
   padding: 0px 8px;
   margin: 0px;
 }
--- a/toolkit/content/tests/widgets/test_videocontrols_audio.html
+++ b/toolkit/content/tests/widgets/test_videocontrols_audio.html
@@ -32,18 +32,18 @@
       if (result) {
         return result;
       }
     }
     return false;
   }
 
   function loadedmetadata(event) {
-    var fullscreenButton = findElementByAttribute(video, 'class', 'fullscreenButton');
-    is(fullscreenButton.hidden, true, 'Fullscreen button is hidden');
+    var controlBar = findElementByAttribute(video, "class", "controlBar");
+    is(controlBar.getAttribute("fullscreen-unavailable"), "true", "Fullscreen button is hidden");
     SimpleTest.finish();
   }
 
   var video = document.getElementById("video");
 
   SpecialPowers.pushPrefEnv({"set": [["media.cache_size", 40000]]}, startTest);
   function startTest() {
     // Kick off test once audio has loaded.
--- a/toolkit/content/widgets/videocontrols.css
+++ b/toolkit/content/widgets/videocontrols.css
@@ -16,16 +16,20 @@
 
 .playButton,
 .muteButton,
 .scrubber .scale-slider,
 .volumeControl .scale-slider {
   -moz-user-focus: none;
 }
 
+.controlBar[fullscreen-unavailable] > .fullscreenButton {
+  display: none;
+}
+
 .mediaControlsFrame {
   direction: ltr;
   /* Prevent unwanted style inheritance. See bug 554717. */
   text-align: left;
   list-style-image: none !important;
   font: normal normal normal 100%/normal sans-serif !important;
   text-decoration: none !important;
 }
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -338,22 +338,17 @@
 
                 firstFrameShown : false,
                 timeUpdateCount : 0,
                 maxCurrentTimeSeen : 0,
                 _isAudioOnly : false,
                 get isAudioOnly() { return this._isAudioOnly; },
                 set isAudioOnly(val) {
                     this._isAudioOnly = val;
-                    if (this._isAudioOnly) {
-                        this.controlBar.setAttribute("audio-only", true);
-                    } else {
-                        this.controlBar.removeAttribute("audio-only");
-                    }
-                    this.adjustControlSize();
+                    this.setFullscreenButtonState();
 
                     if (!this.isTopLevelSyntheticDocument)
                         return;
                     if (this._isAudioOnly) {
                         this.video.style.height = this._controlBarHeight + "px";
                         this.video.style.width = "66%";
                     } else {
                         this.video.style.removeProperty("height");
@@ -1060,19 +1055,22 @@
                 toggleFullscreen : function () {
                     this.isVideoInFullScreen() ?
                         document.mozCancelFullScreen() :
                         this.video.mozRequestFullScreen();
                 },
 
                 setFullscreenButtonState : function () {
                     if (this.isAudioOnly || !document.mozFullScreenEnabled) {
-                        this.fullscreenButton.hidden = true;
+                        this.controlBar.setAttribute("fullscreen-unavailable", true);
+                        this.adjustControlSize();
                         return;
                     }
+                    this.controlBar.removeAttribute("fullscreen-unavailable");
+                    this.adjustControlSize();
 
                     var attrName = this.isVideoInFullScreen() ? "exitfullscreenlabel" : "enterfullscreenlabel";
                     var value = this.fullscreenButton.getAttribute(attrName);
                     this.fullscreenButton.setAttribute("aria-label", value);
 
                     if (this.isVideoInFullScreen())
                         this.fullscreenButton.setAttribute("fullscreened", "true");
                     else
@@ -1387,25 +1385,26 @@
                     let minScrubberWidth = 25;
                     let minWidthAllControls = this._playButtonWidth +
                                               minScrubberWidth +
                                               this._durationLabelWidth +
                                               this._muteButtonWidth +
                                               this._volumeControlWidth +
                                               this._fullscreenButtonWidth;
 
-                    let isAudioOnly = this.isAudioOnly;
-                    if (isAudioOnly) {
+                    let isFullscreenUnavailable = this.controlBar.hasAttribute("fullscreen-unavailable");
+                    if (isFullscreenUnavailable) {
                         // When the fullscreen button is hidden we add margin-end to the volume stack.
                         minWidthAllControls -= this._fullscreenButtonWidth - this._volumeStackMarginEnd;
                     }
 
                     let minHeightForControlBar = this._controlBarHeight;
                     let minWidthOnlyPlayPause = this._playButtonWidth + this._muteButtonWidth;
 
+                    let isAudioOnly = this.isAudioOnly;
                     let videoHeight = isAudioOnly ? minHeightForControlBar : this.video.clientHeight;
                     let videoWidth = isAudioOnly ? minWidthAllControls : this.video.clientWidth;
 
                     // Adapt the size of the controls to the size of the video
                     if (this.video.readyState >= this.video.HAVE_METADATA) {
                       if (!this.isAudioOnly && this.video.videoWidth && this.video.videoHeight) {
                         var rect = this.video.getBoundingClientRect();
                         var widthRatio = rect.width / this.video.videoWidth;
--- a/toolkit/themes/osx/global/media/videocontrols.css
+++ b/toolkit/themes/osx/global/media/videocontrols.css
@@ -87,17 +87,17 @@
   background-image: url(chrome://global/skin/media/volume-empty.png);
 }
 
 .volumeForeground {
   background-image: url(chrome://global/skin/media/volume-full.png);
   background-clip: content-box;
 }
 
-.controlBar[audio-only] > .volumeStack {
+.controlBar[fullscreen-unavailable] > .volumeStack {
   /* This value is duplicated in the videocontrols.xml adjustControlSize function. */
   -moz-margin-end: 8px;
 }
 
 .volumeControl .scale-thumb {
   min-width: 0;
   opacity: 0;
 }
--- a/toolkit/themes/windows/global/media/videocontrols.css
+++ b/toolkit/themes/windows/global/media/videocontrols.css
@@ -87,17 +87,17 @@
   background-image: url(chrome://global/skin/media/volume-empty.png);
 }
 
 .volumeForeground {
   background-image: url(chrome://global/skin/media/volume-full.png);
   background-clip: content-box;
 }
 
-.controlBar[audio-only] > .volumeStack {
+.controlBar[fullscreen-unavailable] > .volumeStack {
   /* This value is duplicated in the videocontrols.xml adjustControlSize function. */
   -moz-margin-end: 8px;
 }
 
 .volumeControl .scale-thumb {
   min-width: 0;
   opacity: 0;
 }