Bug 1074744 - Apply the margin-end to the volume controls when fullscreen is unavailable. r=gijs, r=dolske, a=sledru

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

@@ -51,6 +51,10 @@
   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;
 }
@@ -61,7 +65,7 @@
  * 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);
 }
 

browser/metro/theme/touchcontrols.css

@@ -45,6 +45,10 @@
   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;
 }
@@ -55,7 +59,7 @@
  * 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);
 }
 

mobile/android/themes/core/touchcontrols.css

@@ -80,6 +80,10 @@
   background: url("chrome://browser/skin/images/exitfullscreen-hdpi.png") no-repeat center;
 }
 
+.controlBar[fullscreen-unavailable] .fullscreenButton {
+  display: none;
+}
+
 /* bars */
 .scrubberStack {
   width: 100%;

toolkit/content/tests/widgets/test_videocontrols_audio.html

@@ -37,8 +37,8 @@
   }
 
   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();
   }
 

toolkit/content/widgets/videocontrols.css

@@ -21,6 +21,10 @@
   -moz-user-focus: none;
 }
 
+.controlBar[fullscreen-unavailable] > .fullscreenButton {
+  display: none;
+}
+
 .mediaControlsFrame {
   direction: ltr;
   /* Prevent unwanted style inheritance. See bug 554717. */

toolkit/content/widgets/videocontrols.xml

@@ -343,12 +343,7 @@
                 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;
@@ -1065,9 +1060,12 @@
 
                 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);
@@ -1392,8 +1390,8 @@
                                               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;
                     }
@@ -1401,6 +1399,7 @@
                     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;
 

toolkit/themes/osx/global/media/videocontrols.css

@@ -92,7 +92,7 @@
   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;
 }

toolkit/themes/windows/global/media/videocontrols.css

@@ -92,7 +92,7 @@
   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;
 }