Backout bug 461680 and bustage fixes due to still failing on Linux and possible leaks.

toolkit/content/tests/widgets/test_videocontrols.html

@@ -31,16 +31,14 @@ function runTest(event) {
       is(video.muted, false, "checking video mute state");
 
       // Let the fadein happen
-      video.addEventListener("mouseover", runTest, false);
       synthesizeMouse(video, 12, 228, { type : "mouseover" });
+      setTimeout(runTest, 0, { type: "setTimeout" });
       break;
 
     case 2:
-      is(event.type, "mouseover", "checking event type");
+      is(event.type, "setTimeout", "checking event type");
-      video.removeEventListener("mouseover", runTest, false);
+      // Click the play button
-      // Click the play button. Do this from a timeout, lest the test's
+      synthesizeMouse(video, 12, 228, { });
-      // mouseover handler fire before the video control's handler.
-      setTimeout("synthesizeMouse(video, 12, 228, { });", 0);
       break;
 
     case 3:
@@ -81,7 +79,7 @@ function runTest(event) {
       break;
 
     default:
-      throw "unexpected test #" + testnum + " w/ event " + event.type;
+      throw "unexpected test #" + testnum + " w/ event " + event.name;
   }
 
   testnum++;

toolkit/content/widgets/videocontrols.xml

@@ -14,7 +14,7 @@
 
     <xbl:content xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
         <spacer flex="1"/>
-        <hbox id="controlBar">
+        <hbox id="controlsBackground">
             <image id="playButton"
                    onclick="if (event.button == 0) this.parentNode.parentNode.Utils.togglePause();"/>
             <box id="controlsMiddle" flex="1"/>
@@ -77,17 +77,14 @@
             <![CDATA[ ({
                 debug : false,
                 video : null,
-                controlBar : null,
+                controls : null,
                 playButton : null,
                 muteButton : null,
 
-                FADE_TIME_MAX  : 200, // ms
+                animationSteps : 8,
-                FADE_TIME_STEP : 30,  // ms
+                animationStep : 0,
-
+                animationDirection : 1,
-                fadeTime : 0,         // duration of active fade animation
+                animationTimer : null,
-                fadingIn: true,       // are we fading in, or fading out?
-                fadeTimer : null,
-                controlsVisible : false,
 
                 handleEvent : function (aEvent) {
                     this.log("Got " + aEvent.type + " media event");
@@ -107,68 +104,22 @@
                     }
                 },
 
-                onMouseInOut : function (event) {
+                fadeControls : function (self) {
-                    var isMouseOver = (event.type == "mouseover");
+                    self.log("fadeControls @" + self.animationStep);
+                    self.animationStep += self.animationDirection;
 
-                    // Ignore events caused by transitions between child nodes.
+                    if (self.animationStep <= 0) {
-                    if (this.isChildNode(event.target) &&
+                        self.animationStep = 0;
-                        this.isChildNode(event.relatedTarget))
+                        clearInterval(self.animationTimer);
-                        return;
+                        self.animationTimer = null;
-
+                    } else if (self.animationStep >= self.animationSteps) {
-                    // Don't show controls when they're disabled, but do allow a
+                        self.animationStep = self.animationSteps;
-                    // mouseout to hide controls that were disabled after being shown.
+                        clearInterval(self.animationTimer);
-                    if (!this.video.controls && (isMouseOver || !this.controlsVisible))
+                        self.animationTimer = null;
-                        return;
-
-                    this.log("Fading controls " + (isMouseOver ? "in" : "out"));
-
-                    var directionChange = (isMouseOver != this.fadingIn);
-                    this.fadingIn = isMouseOver;
-
-                    // When switching direction mid-fade, adjust fade time for current fade state.
-                    if (directionChange && this.fadeTime)
-                        this.fadeTime = this.FADE_TIME_MAX - this.fadeTime;
-
-                    if (!this.fadeTimer)
-                        this.fadeTimer = setInterval(this.fadeControls, this.FADE_TIME_STEP, this);
-
-                    // If we're fading in, immediately made the controls clickable.
-                    // Otherwise they might not activate until the first fadeTimer
-                    // fires, which is hard to test reliably.
-                    if (this.fadingIn)
-                        this.controlBar.style.visibility = "visible";
-                },
-
-                fadeControls : function (self, lateness) {
-                    // Update elapsed time, and compute position as a percent
-                    // of total. Last frame could run over, so clamp to 1.
-                    self.fadeTime += self.FADE_TIME_STEP + lateness;
-                    var pos = self.fadeTime / self.FADE_TIME_MAX;
-                    if (pos > 1)
-                        pos = 1;
-                    
-                    // Calculate the opacity for our position in the animation.
-                    var opacity;
-                    if (self.fadingIn)
-                        opacity = Math.pow(pos, 0.5);
-                    else
-                        opacity = Math.pow(1 - pos, 0.5);
-                    self.controlsVisible = (opacity ? true : false);
-
-                    self.controlBar.style.opacity = opacity;
-
-                    // Use .visibility to ignore mouse clicks when hidden.
-                    if (self.controlsVisible)
-                        self.controlBar.style.visibility = "visible";
-                    else
-                        self.controlBar.style.visibility = "hidden";
-
-                    // Is the animation done?
-                    if (pos == 1) {
-                        clearInterval(self.fadeTimer);
-                        self.fadeTimer = null;
-                        self.fadeTime = 0;
                     }
+
+                    // XXX might be good to do logarithmic steps, maybe use timer error too (for smoothness)?
+                    self.controls.style.opacity = self.animationStep / self.animationSteps;
                 },
 
                 togglePause : function () {
@@ -192,11 +143,11 @@
 
                 isChildNode : function (node) {
                     while (node) {
-                        if (node == this.video)
+                        if (node == this.controls)
                             break;
                         node = node.parentNode;
                     }
-                    return (node == this.video);
+                    return (node == this);
                 },
 
                 log : function (msg) {
@@ -211,16 +162,15 @@
             <![CDATA[
             var video = this.parentNode;
             this.Utils.video = video;
+            this.Utils.controls = this;
 
-            this.Utils.controlBar = document.getAnonymousElementByAttribute(this, "id", "controlBar");
             this.Utils.playButton = document.getAnonymousElementByAttribute(this, "id", "playButton");
             this.Utils.muteButton = document.getAnonymousElementByAttribute(this, "id", "muteButton");
 
             // Set initial state of play/pause button.
             this.Utils.playButton.setAttribute("paused", video.paused);
-            // Controls are initially faded out and hidden (to ignore mouse clicks)
+
-            this.Utils.controlBar.style.opacity = 0;
+            this.style.opacity = 0;
-            this.Utils.controlBar.style.visibility = "hidden";
 
             // Use Utils.handleEvent() callback for all media events.
             video.addEventListener("play",         this.Utils, false);
@@ -237,10 +187,33 @@
 
     <handlers>
         <handler event="mouseover">
-            this.Utils.onMouseInOut(event);
+            <![CDATA[
+            // Ignore events caused by transitions between child nodes.
+            if (this.Utils.isChildNode(event.relatedTarget))
+                return;
+
+            // Don't show controls unless they're enabled
+            // XXX sucks that spec defaults to controls=false. :-(
+            // XXX add support for dynamically hiding controls w/o waiting for mouseout?
+            if (!this.Utils.video.controls)
+                return;
+
+            this.Utils.animationDirection = 1;
+            if (!this.Utils.animationTimer)
+                this.Utils.animationTimer = setInterval(this.Utils.fadeControls, 50, this.Utils);
+            ]]>
         </handler>
+
         <handler event="mouseout">
-            this.Utils.onMouseInOut(event);
+            <![CDATA[
+            // Ignore events caused by transitions between child nodes.
+            if (this.Utils.isChildNode(event.relatedTarget))
+                return;
+
+            this.Utils.animationDirection = -1;
+            if (!this.Utils.animationTimer)
+                this.Utils.animationTimer = setInterval(this.Utils.fadeControls, 50, this.Utils);
+            ]]>
         </handler>
     </handlers>
   </binding>

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

@@ -1,6 +1,6 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-#controlBar {
+#controlsBackground {
     height: 24px;
     background-color: #656363;
 }

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

@@ -1,6 +1,6 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-#controlBar {
+#controlsBackground {
     height: 24px;
     background-color: #656363;
 }