Bug 462117 - Reducing the number of visible controls when the video is too small. r=dolske

toolkit/content/widgets/videocontrols.css

@@ -53,3 +53,18 @@
 .statusOverlay[fadeout] {
   opacity: 0;
 }
+
+.controlBar[size="hidden"],
+.controlBar[size="small"] .durationBox,
+.controlBar[size="small"] .durationLabel,
+.controlBar[size="small"] .positionLabel {
+  visibility: collapse;
+}
+
+.controlBar[size="small"] .scrubberStack {
+  visibility: hidden;
+}
+
+.controlBar[size="small"] .scrubberStack > * {
+  visibility: hidden;
+}

toolkit/content/widgets/videocontrols.xml

@@ -343,6 +343,17 @@
                         this.statusIcon.setAttribute("type", "throbber");
                         this.setupStatusFader();
                     }
+
+                    // An event handler for |onresize| should be added when bug 227495 is fixed.
+                    let controlBarWasHidden = this.controlBar.getAttribute("hidden") == "true";
+                    this.controlBar.removeAttribute("hidden");
+                    this._playButtonWidth = this.playButton.clientWidth;
+                    this._durationLabelWidth = this.durationLabel.clientWidth;
+                    this._muteButtonWidth = this.muteButton.clientWidth;
+                    this._controlBarHeight = this.controlBar.clientHeight;
+                    if (controlBarWasHidden)
+                      this.controlBar.setAttribute("hidden", "true");
+                    this.adjustControlSize();
                 },
 
                 get dynamicControls() {
@@ -400,6 +411,7 @@
                             this.volumeControl.value = volume;
                             break;
                         case "loadedmetadata":
+                            this.adjustControlSize();
                             // If a <video> doesn't have any video data, treat it as <audio>
                             // and show the controls (they won't fade back out)
                             if (this.video instanceof HTMLVideoElement &&
@@ -654,6 +666,9 @@
                         !(this.video.autoplay && this.video.mozAutoplayEnabled))
                         return;
 
+                    if (!isMouseOver)
+                        this.adjustControlSize();
+
                     this.startFade(this.controlBar, isMouseOver);
                 },
 
@@ -861,6 +876,37 @@
                         dump("videoctl: " + msg + "\n");
                 },
 
+                _playButtonWidth : 0,
+                _durationLabelWidth : 0,
+                _muteButtonWidth : 0,
+                _controlBarHeight : 0,
+                adjustControlSize : function adjustControlSize() {
+                    if (this.isAudioOnly)
+                      return;
+
+                    let videoHeight = this.video.clientHeight;
+                    let videoWidth = this.video.clientWidth;
+
+                    // The scrubber has |flex=1|, therefore |minScrubberWidth|
+                    // was generated by empirical testing.
+                    let minScrubberWidth = 25;
+                    let minWidthAllControls = this._playButtonWidth +
+                                              minScrubberWidth +
+                                              this._durationLabelWidth +
+                                              this._muteButtonWidth;
+                    let minHeightForControlBar = this._controlBarHeight;
+                    let minWidthOnlyPlayPause = this._playButtonWidth + this._muteButtonWidth;
+
+                    let size = "normal";
+                    if (videoHeight < minHeightForControlBar)
+                        size = "hidden";
+                    else if (videoWidth < minWidthOnlyPlayPause)
+                        size = "hidden";
+                    else if (videoWidth < minWidthAllControls)
+                        size = "small";
+                    this.controlBar.setAttribute("size", size);
+                },
+
                 init : function (binding) {
                     this.video = binding.parentNode;
                     this.videocontrols = binding;
@@ -879,7 +925,7 @@
                     this.durationLabel = document.getAnonymousElementByAttribute(binding, "class", "durationLabel");
                     this.positionLabel = document.getAnonymousElementByAttribute(binding, "class", "positionLabel");
                     this.statusOverlay = document.getAnonymousElementByAttribute(binding, "class", "statusOverlay");
-                    this.controlsSpacer = document.getAnonymousElementByAttribute(binding, "class", "controlsSpacer")
+                    this.controlsSpacer = document.getAnonymousElementByAttribute(binding, "class", "controlsSpacer");
 
                     this.setupInitialState();