Bug 1449532 - Part I, Backed out changeset 99fc41ec7ce9 (Bug 1444489 Part VIII) r=Gijs

MozReview-Commit-ID: LQhZq0RlOvi

--HG--
extra : rebase_source : 7d8083da7205cdd5abfd2669871b405b9e52718f

toolkit/content/tests/widgets/test_videocontrols_error.html

@@ -32,7 +32,9 @@
       video.addEventListener("loadedmetadata", () => SimpleTest.executeSoon(resolve));
     });
 
-    await SimpleTest.promiseWaitForCondition(() => statusOverlay.hasAttribute("fadeout") || statusOverlay.hidden,
+    // Wait for the fade out transition to complete in case the throbber
+    // shows up on slower platforms.
+    await SimpleTest.promiseWaitForCondition(() => statusOverlay.hidden,
       "statusOverlay should not present without error");
 
     ok(!statusOverlay.hasAttribute("error"), "statusOverlay should not in error state");
@@ -47,7 +49,7 @@
       video.addEventListener("error", () => SimpleTest.executeSoon(resolve));
     });
 
-    ok(!statusOverlay.hidden && !statusOverlay.hasAttribute("fadeout"), `statusOverlay should show when ${errorType}`);
+    ok(!statusOverlay.hidden, `statusOverlay should show when ${errorType}`);
     is(statusOverlay.getAttribute("error"), errorType, `statusOverlay should have correct error state: ${errorType}`);
     is(statusIcon.getAttribute("type"), "error", `should show error icon when ${errorType}`);
   });

toolkit/content/widgets/videocontrols.xml

@@ -1020,6 +1020,22 @@
         }
       },
 
+      onTransitionEnd(event) {
+        // Ignore events for things other than opacity changes.
+        if (event.propertyName != "opacity") {
+          return;
+        }
+
+        var element = event.originalTarget;
+
+        // Nothing to do when a fade *in* finishes.
+        if (!element.hasAttribute("fadeout")) {
+          return;
+        }
+
+        element.hidden = true;
+      },
+
       _triggeredByControls: false,
 
       startPlay() {
@@ -1763,6 +1779,7 @@
         }
 
         addListener(this.videocontrols, "resizevideocontrols", this.adjustControlSize);
+        addListener(this.videocontrols, "transitionend", this.onTransitionEnd);
         addListener(this.controlBar, "transitionend", this.onControlBarTransitioned);
         // See comment at onFullscreenChange on bug 718107.
         // addListener(this.video.ownerDocument, "fullscreenchange", this.onFullscreenChange);

toolkit/themes/shared/media/videocontrols.css

@@ -443,7 +443,6 @@ audio > xul|videocontrols {
 
 .controlsSpacerStack:hover > .clickToPlay[fadeout] {
   opacity: 0;
-  visibility: hidden;
 }
 
 .controlBar[fullscreen-unavailable] .fullscreenButton {
@@ -451,37 +450,43 @@ audio > xul|videocontrols {
 }
 
 /* CSS Transitions */
-.clickToPlay:not([immediate]) {
+.clickToPlay {
-  transition-property: transform, opacity, visibility;
+  transition-property: transform, opacity;
-  transition-duration: 400ms, 400ms, 400ms;
+  transition-duration: 400ms, 400ms;
+}
+
+.controlsSpacer[fadeout] {
+  opacity: 0;
 }
 
 .clickToPlay[fadeout] {
   transform: scale(3);
   opacity: 0;
-  visibility: hidden;
 }
 
+.clickToPlay[fadeout][immediate] {
+  transition-property: opacity, background-size;
+  transition-duration: 0s, 0s;
+}
 .controlBar:not([immediate]) {
-  transition-property: opacity, visibility;
+  transition-property: opacity;
-  transition-duration: 200ms, 200ms;
+  transition-duration: 200ms;
 }
-
 .controlBar[fadeout] {
   opacity: 0;
-  visibility: hidden;
 }
-
+.volumeStack:not([immediate]) {
+  transition-property: opacity, margin-top;
+  transition-duration: 200ms, 200ms;
+}
 .statusOverlay:not([immediate]) {
-  transition-property: opacity, visibility;
+  transition-property: opacity;
-  transition-duration: 300ms, 300ms;
+  transition-duration: 300ms;
-  transition-delay: 750ms, 750ms;
+  transition-delay: 750ms;
 }
-
 .statusOverlay[fadeout],
 .statusOverlay[error] + .controlsOverlay > .controlsSpacerStack {
   opacity: 0;
-  visibility: hidden;
 }
 
 /* Error description formatting */