Bug 462117 - Reducing the number of visible controls when the video is too small. r=dolske
☠☠ backed out by 5e6855e3f92d ☠ ☠
authorJared Wein <jwein@mozilla.com>
Wed, 24 Aug 2011 18:34:00 -0700
changeset 77194 6fd779fb622ddce22fdec79b1129866804c127c6
parent 77193 aa126a9aebbd04db8d02229b1a294d28f2a1e05c
child 77195 5e6855e3f92ddcab4b25bbb572d50414b39eb92f
push id78
push userclegnitto@mozilla.com
push dateFri, 16 Dec 2011 17:32:24 +0000
treeherdermozilla-release@79d24e644fdd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdolske
bugs462117
milestone9.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 462117 - Reducing the number of visible controls when the video is too small. r=dolske
toolkit/content/widgets/videocontrols.css
toolkit/content/widgets/videocontrols.xml
--- a/toolkit/content/widgets/videocontrols.css
+++ b/toolkit/content/widgets/videocontrols.css
@@ -48,8 +48,28 @@
 .statusOverlay:not([immediate]) {
   -moz-transition-property: opacity;
   -moz-transition-duration: 1ms;
   -moz-transition-delay: 750ms;
 }
 .statusOverlay[fadeout] {
   opacity: 0;
 }
+
+.controlBar[sizemode="hidden"],
+.controlBar[sizemode="small"] .durationBox,
+.controlBar[sizemode="small"] .durationLabel,
+.controlBar[sizemode="small"] .positionLabel {
+  visibility: collapse;
+}
+
+.controlBar[sizemode="small"] .scrubberStack {
+  visibility: hidden;
+}
+
+.controlBar[sizemode="small"] .scrubberStack > * {
+  min-width: 0;
+  width: 0;
+  padding-left: 0;
+  padding-right: 0;
+  margin-left: 0;
+  margin-right: 0;
+}
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -855,16 +855,42 @@
                     }
                     return isDescendant(event.target) && isDescendant(event.relatedTarget);
                 },
 
                 log : function (msg) {
                     if (this.debug)
                         dump("videoctl: " + msg + "\n");
                 },
+                
+                adjustControlSize : function adjustControlSize() {
+                    let videoHeight = this.video.clientHeight;
+                    let videoWidth = this.video.clientWidth;
+
+                    // The scrubber has |flex=1|, therefore |minimumScrubberWidth|
+                    // was generated by empirical testing.
+                    let minimumScrubberWidth = 25;
+                    let minWidthAllControls = this.playButton.clientWidth +
+                                              minimumScrubberWidth +
+                                              this.durationLabel.clientWidth +
+                                              this.muteButton.clientWidth;
+                    let minimumHeightForControlBar = this.controlBar.clientHeight;
+
+                    let sizeMode = "normal";
+                    if (videoHeight < minimumHeightForControlBar) {
+                        sizeMode = "hidden";
+                    } else {
+                        var minWidthOnlyPlayPause = this.playButton.clientWidth + this.muteButton.clientWidth;
+                        if (videoWidth < minWidthOnlyPlayPause)
+                          sizeMode = "hidden";
+                        else if (videoWidth < minWidthAllControls)
+                          sizeMode = "small";
+                    }
+                    this.controlBar.setAttribute("sizemode", sizeMode);
+                },
 
                 init : function (binding) {
                     this.video = binding.parentNode;
                     this.videocontrols = binding;
                     this.isAudioOnly = (this.video instanceof HTMLAudioElement);
 
                     this.statusIcon    = document.getAnonymousElementByAttribute(binding, "class", "statusIcon");
                     this.controlBar    = document.getAnonymousElementByAttribute(binding, "class", "controlBar");
@@ -914,16 +940,19 @@
                     }
 
                     this.videocontrols.addEventListener("transitionend", function(e) { self.onTransitionEnd(e); }, false);
 
                     // Make the <video> element keyboard accessible.
                     this.video.setAttribute("tabindex", 0);
                     this.video.addEventListener("keypress", function (e) { self.keyHandler(e) }, false);
 
+                    // An event handler for |onresize| should be added when bug 227495 is fixed.
+                    self.adjustControlSize();
+
                     this.log("--- videocontrols initialized ---");
                 }
             }) ]]>
         </field>
 
         <field readonly="true" name="isTouchControl">false</field>
 
     </implementation>