Merge backout of changeset dddef115ddd2 (bug 475317)

toolkit/content/widgets/videocontrols.css

@@ -1,6 +1,6 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-.scrubber, .volumeControl {
+.scrubber {
     -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#suppressChangeEvent");
 }
 

toolkit/content/widgets/videocontrols.xml

@@ -76,13 +76,9 @@
       <implementation>
 
       <field name="thumb">null</field>
-      <field name="type">null</field>
-      <field name="Utils">null</field>
       <constructor>
           <![CDATA[
           this.thumb = document.getAnonymousElementByAttribute(this, "class", "scale-thumb");
-          this.type = this.getAttribute("class");
-          this.Utils = document.getBindingParent(this.parentNode).Utils;
           ]]>
       </constructor>
 
@@ -98,8 +94,7 @@
             switch (which) {
               case "curpos":
                 // Update the time shown in the thumb.
-                if (this.type == "scrubber")
-                    this.thumb.setTime(newValue);
+                this.thumb.setTime(newValue);
 
                 // The value of userChanged is true when changing the position with the mouse,
                 // but not when pressing an arrow key. However, the base binding sets
@@ -107,11 +102,7 @@
                 if (!userChanged && !this._userChanged)
                   return;
                 this.setAttribute("value", newValue);
-
-                if (this.type == "scrubber")
-                    this.Utils.seekToPosition(newValue);
-                else if (this.type == "volumeControl")
-                    this.Utils.setVolume(newValue / 100);
+                document.getBindingParent(this.parentNode).Utils.seekToPosition();
                 break;
   
               case "minpos":
@@ -155,10 +146,6 @@
                         <label class="durationLabel"/>
                     </vbox>
                     <button class="muteButton" oncommand="document.getBindingParent(this).Utils.toggleMute();"/>
-                    <stack class="volumeStack" hidden="true">
-                        <box class="volumeBackgroundBar"/>
-                        <scale class="volumeControl" orient="vertical" dir="reverse" movetoclick="true"/>
-                    </stack>
                 </hbox>
             </vbox>
         </stack>
@@ -223,8 +210,6 @@
                 videocontrols : null,
                 playButton : null,
                 muteButton : null,
-                volumeStack    : null,
-                volumeControl  : null,
                 durationLabel  : null,
                 scrubberThumb  : null,
                 scrubber       : null,
@@ -265,21 +250,6 @@
                                     RUNTIME_STEP : 20
                                 },
 
-                // volumeFader holds the fade state for the volume <scale>.
-                volumeFader : {
-                                    name : "volume",
-                                    element : null,
-                                    maxSlide : null, // height when extended, set in init()
-                                    runtime : 0,
-                                    fadingIn : false,
-                                    isVisible : false,
-                                    timer : null,
-                                    delayTimer : null,
-                                    START_DELAY : 0,
-                                    RUNTIME_MAX : 200,
-                                    RUNTIME_STEP : 15
-                                },
-
                 firstFrameShown : false,
                 lastTimeUpdate : 0,
                 maxCurrentTimeSeen : 0,
@@ -298,9 +268,6 @@
                     this.playButton.setAttribute("paused", this.video.paused);
                     this.muteButton.setAttribute("muted", this.video.muted);
 
-                    var volume = this.video.muted ? 0 : Math.round(this.video.volume * 100);
-                    this.volumeControl.value = volume;
-
                     var duration = Math.round(this.video.duration * 1000); // in ms
                     var currentTime = Math.round(this.video.currentTime * 1000); // in ms
                     this.log("Initial playback position is at " + currentTime + " of " + duration);
@@ -375,9 +342,7 @@
                             this.playButton.setAttribute("paused", true);
                             break;
                         case "volumechange":
-                            var volume = this.video.muted ? 0 : Math.round(this.video.volume * 100);
                             this.muteButton.setAttribute("muted", this.video.muted);
-                            this.volumeControl.value = volume;
                             break;
                         case "loadedmetadata":
                             // If a <video> doesn't have any video data, treat it as <audio>
@@ -500,18 +465,13 @@
                     this.scrubber.pageIncrement = Math.round(duration / 10);
                 },
 
-                seekToPosition : function(newPosition) {
+                seekToPosition : function() {
+                    var newPosition = this.scrubber.getAttribute("value");
                     newPosition /= 1000; // convert from ms
                     this.log("+++ seeking to " + newPosition);
                     this.video.currentTime = newPosition;
                 },
 
-                setVolume : function(newVolume) {
-                    this.log("*** setting volume to " + newVolume);
-                    this.video.volume = newVolume;
-                    this.video.muted = false;
-                },
-
                 showPosition : function(currentTime, duration) {
                     // If the duration is unknown (because the server didn't provide
                     // it, or the video is a stream), then we want to fudge the duration
@@ -532,15 +492,6 @@
                     this.progressBar.value = Math.round(percent * 10000);
                 },
 
-                onVolumeMouseInOut : function (event) {
-                    // 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.volumeFader, isMouseOver);
-                },
-
                 onMouseInOut : function (event) {
                     // If the controls are static, don't change anything.
                     if (!this.dynamicControls)
@@ -551,7 +502,8 @@
                     // size as the *content area* of the video element,
                     // but this is not the same as the video element's
                     // border area if the video has border or padding.
-                    if (this.isEventWithin(event, this.videocontrols))
+                    if (this.isControlsOrDescendant(event.target) &&
+                        this.isControlsOrDescendant(event.relatedTarget))
                         return;
 
                     var isMouseOver = (event.type == "mouseover");
@@ -644,21 +596,12 @@
                     else
                         opacity = Math.pow(1 - pos, 0.5);
                     fader.isVisible = (opacity ? true : false);
+                    //self.log("Fading " + fader.name + " to opacity " + opacity);
+
                     fader.element.style.opacity = opacity;
                     // Hide the element to ignore mouse clicks and reduce throbber CPU usage.
                     fader.element.setAttribute("hidden", !fader.isVisible);
 
-                    // If this fader also has a slide effect, change the CSS margin-top too.
-                    if (fader.maxSlide) {
-                        var marginTop;
-                        if (fader.fadingIn)
-                            marginTop = Math.round(fader.maxSlide * Math.pow(pos, 0.5));
-                        else
-                            marginTop = Math.round(fader.maxSlide * Math.pow(1 - pos, 0.5));
-
-                        fader.element.style.marginTop = marginTop;
-                    }
-
                     // Is the animation done?
                     if (pos == 1) {
                         clearInterval(fader.timer);
@@ -686,16 +629,13 @@
                     // controlling volume.
                 },
 
-                isEventWithin : function (event, parent1, parent2) {
-                    function isDescendant (node) {
-                        while (node) {
-                            if (node == parent1 || node == parent2)
-                                return true;
-                            node = node.parentNode;
-                        }
-                        return false;
+                isControlsOrDescendant : function (node) {
+                    while (node) {
+                        if (node == this.videocontrols)
+                            return true;
+                        node = node.parentNode;
                     }
-                    return isDescendant(event.target) && isDescendant(event.relatedTarget);
+                    return false;
                 },
 
                 log : function (msg) {
@@ -713,15 +653,11 @@
             this.Utils.videocontrols = this;
             this.Utils.isAudioOnly = (video instanceof HTMLAudioElement);
 
-            this.Utils.controlFader.element = document.getAnonymousElementByAttribute(this, "class", "controlBar");
-            this.Utils.statusFader.element  = document.getAnonymousElementByAttribute(this, "class", "statusOverlay");
-            this.Utils.volumeFader.element  = document.getAnonymousElementByAttribute(this, "class", "volumeStack");
-
+            this.Utils.controlFader.element  = document.getAnonymousElementByAttribute(this, "class", "controlBar");
+            this.Utils.statusFader.element = document.getAnonymousElementByAttribute(this, "class", "statusOverlay");
             this.Utils.statusIcon     = document.getAnonymousElementByAttribute(this, "class", "statusIcon");
             this.Utils.playButton     = document.getAnonymousElementByAttribute(this, "class", "playButton");
             this.Utils.muteButton     = document.getAnonymousElementByAttribute(this, "class", "muteButton");
-            this.Utils.volumeControl  = document.getAnonymousElementByAttribute(this, "class", "volumeControl");
-            this.Utils.volumeStack    = document.getAnonymousElementByAttribute(this, "class", "volumeStack");
             this.Utils.progressBar    = document.getAnonymousElementByAttribute(this, "class", "progressBar");
             this.Utils.bufferBar      = document.getAnonymousElementByAttribute(this, "class", "bufferBar");
             this.Utils.scrubber       = document.getAnonymousElementByAttribute(this, "class", "scrubber");
@@ -751,17 +687,6 @@
             for each (var event in this.Utils.videoEvents)
                 video.addEventListener(event, this.Utils, false);
 
-            // Determine the height of the volumeFader when extended (which is controlled by CSS).
-            // Its .clientHeight seems to be 0 here, so use the theme's initial value. (eg "-70px")
-            this.Utils.volumeFader.maxSlide = parseInt(window.getComputedStyle(this.Utils.volumeStack, null)
-                                                             .getPropertyValue("margin-top"));
-            var self = this;
-            function volumeBouncer(event) { self.Utils.onVolumeMouseInOut(event); }
-            this.Utils.muteButton.addEventListener("mouseover", volumeBouncer, false);
-            this.Utils.muteButton.addEventListener("mouseout", volumeBouncer, false);
-            this.Utils.volumeStack.addEventListener("mouseover", volumeBouncer, false);
-            this.Utils.volumeStack.addEventListener("mouseout", volumeBouncer, false);
-
             this.Utils.log("--- videocontrols initialized ---");
             ]]>
             </body>

toolkit/themes/pinstripe/global/jar.mn

@@ -182,7 +182,6 @@ classic.jar:
 +  skin/classic/global/media/scrubberThumbWide.png                    (media/scrubberThumbWide.png)
 +  skin/classic/global/media/error.png                                (media/error.png)
 +  skin/classic/global/media/throbber.png                             (media/throbber.png)
-+  skin/classic/global/media/volumeThumb.png                          (media/volumeThumb.png)
 +  skin/classic/global/menu/menu-arrow-dis.gif                        (menu/menu-arrow-dis.gif)
 +  skin/classic/global/menu/menu-arrow-hov.gif                        (menu/menu-arrow-hov.gif)
 +  skin/classic/global/menu/menu-arrow.gif                            (menu/menu-arrow.gif)

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

@@ -33,38 +33,6 @@
     background: url(chrome://global/skin/media/unmuteButton.png) no-repeat center;
 }
 
-.volumeStack {
-    width: 28px;
-    height: 70px;
-    background-color: rgba(35,31,32,0.74);
-    /* use negative margin to place stack over the mute button to its left. */
-    margin: -70px 3px 28px -31px;
-    overflow: hidden; /* crop it when sliding down, don't grow the control bar */
-    position: relative; /* Trick to work around negative margin interfering with dragging the thumb. */
-    padding-top: 6px;
-}
-
-.volumeControl {
-    min-height: 64px;
-}
-
-/* .scale-thumb is an element inside the <scale> implementation. */
-.volumeControl .scale-thumb {
-    /* Override the default thumb appearance with a custom image. */
-    -moz-appearance: none;
-    background: url(chrome://global/skin/media/volumeThumb.png) no-repeat center;
-    border: none;
-    min-width: 16px;
-    min-height: 11px;
-}
-
-.volumeBackgroundBar {
-    /* margin left/right: make bar 8px wide (control width = 28, minus 2 * 10 margin) */
-    margin: 0px 10px 0px 10px;
-    background-color: rgba(255,255,255,0.5);
-    -moz-border-radius: 4px 4px;
-}
-
 .durationBox {
     -moz-box-pack: center;
 }
@@ -110,7 +78,7 @@
 }
 
 /* .scale-slider is an element inside the <scale> implementation. */
-.scrubber .scale-slider, .volumeControl .scale-slider {
+.scale-slider {
     /* Hide the default horizontal bar. */
     -moz-appearance: none;
     background: none;
@@ -118,7 +86,7 @@
 }
 
 /* .scale-thumb is an element inside the <scale> implementation. */
-.scrubber .scale-thumb {
+.scale-thumb {
     /* Override the default thumb appearance with a custom image. */
     -moz-appearance: none;
     background: transparent;

toolkit/themes/winstripe/global/jar.mn

@@ -153,7 +153,6 @@ classic.jar:
         skin/classic/global/media/scrubberThumb.png              (media/scrubberThumb.png)
         skin/classic/global/media/scrubberThumbWide.png          (media/scrubberThumbWide.png)
         skin/classic/global/media/throbber.png                   (media/throbber.png)
-        skin/classic/global/media/volumeThumb.png                (media/volumeThumb.png)
         skin/classic/global/media/error.png                      (media/error.png)
         skin/classic/global/radio/radio-check.gif                (radio/radio-check.gif)
         skin/classic/global/radio/radio-check-dis.gif            (radio/radio-check-dis.gif)
@@ -328,7 +327,6 @@ classic.jar:
         skin/classic/aero/global/media/scrubberThumb.png                 (media/scrubberThumb.png)
         skin/classic/aero/global/media/scrubberThumbWide.png             (media/scrubberThumbWide.png)
         skin/classic/aero/global/media/throbber.png                      (media/throbber.png)
-        skin/classic/aero/global/media/volumeThumb.png                   (media/volumeThumb.png)
         skin/classic/aero/global/media/error.png                         (media/error.png)
         skin/classic/aero/global/radio/radio-check.gif                   (radio/radio-check.gif)
         skin/classic/aero/global/radio/radio-check-dis.gif               (radio/radio-check-dis.gif)

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

@@ -35,39 +35,6 @@
     background: url(chrome://global/skin/media/unmuteButton.png) no-repeat center;
 }
 
-.volumeStack {
-    width: 28px;
-    height: 70px;
-    background-color: rgba(35,31,32,0.74);
-    /* use negative margin to place stack over the mute button to its left. */
-    margin: -70px 3px 28px -31px;
-    overflow: hidden; /* crop it when sliding down, don't grow the control bar */
-    position: relative; /* Trick to work around negative margin interfering with dragging the thumb. */
-    padding-top: 6px;
-}
-
-.volumeControl {
-    min-height: 64px;
-}
-
-/* .scale-thumb is an element inside the <scale> implementation. */
-.volumeControl .scale-thumb {
-    /* Override the default thumb appearance with a custom image. */
-    -moz-appearance: none;
-    background: url(chrome://global/skin/media/volumeThumb.png) no-repeat center;
-    border: none;
-    min-width: 16px;
-    min-height: 11px;
-}
-
-.volumeBackgroundBar {
-    /* margin left/right: make bar 8px wide (control width = 28, minus 2 * 10 margin) */
-    margin: 0px 10px 0px 10px;
-    background-color: rgba(255,255,255,0.5);
-    -moz-border-radius: 4px 4px;
-}
-
-
 .durationBox {
     -moz-box-pack: center;
 }
@@ -118,7 +85,7 @@
 }
 
 /* .scale-slider is an element inside the <scale> implementation. */
-.scrubber .scale-slider, .volumeControl .scale-slider {
+.scale-slider {
     /* Hide the default horizontal bar. */
     -moz-appearance: none;
     background: none;
@@ -126,7 +93,7 @@
 }
 
 /* .scale-thumb is an element inside the <scale> implementation. */
-.scrubber .scale-thumb {
+.scale-thumb {
     /* Override the default thumb appearance with a custom image. */
     -moz-appearance: none;
     background: transparent;