Bug 1485133 - Remove Web Animation polyfill in video controls r=birtles
authorTimothy Guan-tin Chien <timdream@gmail.com>
Tue, 21 Aug 2018 22:43:55 +0000
changeset 481080 c0c4120ab7c710906236caaf6322b9a37e203332
parent 481053 bdf392eff10efe64f35c8b7c524f07b91950777f
child 481081 1ddc33b770571cc057246bcfabe0fb5d3d732145
push id232
push userfmarier@mozilla.com
push dateWed, 05 Sep 2018 20:45:54 +0000
reviewersbirtles
bugs1485133
milestone63.0a1
Bug 1485133 - Remove Web Animation polyfill in video controls r=birtles Differential Revision: https://phabricator.services.mozilla.com/D3918
toolkit/content/widgets/videocontrols.js
toolkit/content/widgets/videocontrols.xml
toolkit/themes/shared/media/videocontrols.css
--- a/toolkit/content/widgets/videocontrols.js
+++ b/toolkit/content/widgets/videocontrols.js
@@ -1102,61 +1102,28 @@ this.VideoControlsImplPageWidget = class
             { opacity: 1 }
           ],
           options: {
             duration: 1050
           }
         }
       },
 
-      // Polyfill animation.finished promise, also invalidate
-      // the previous promise.
-      // Remove when the platform implementation ships.
-      // (currently behind dom.animations-api.core.enabled)
-      installFinishedPromisePolyfill(animation) {
-        let handler = {
-          handleEvent(evt) {
-            animation.removeEventListener("finish", this);
-            animation.removeEventListener("cancel", this);
-            if (evt.type == "finish" &&
-                this === animation.finished) {
-              this.fn();
-            }
-          },
-          then(fn) {
-            this.fn = fn;
-          }
-        };
-        // Note that handler is not a real Promise.
-        // All it offered is a then() method to register a callback
-        // to be triggered at the right time.
-        Object.defineProperty(animation, "finished", { value: handler, configurable: true });
-        animation.addEventListener("finish", handler);
-        animation.addEventListener("cancel", handler);
-      },
-
       startFade(element, fadeIn, immediate = false) {
         let animationProp =
           this.animationProps[element.id];
         if (!animationProp) {
           throw new Error("Element " + element.id +
             " has no transition. Toggle the hidden property directly.");
         }
 
         let animation = this.animationMap.get(element);
         if (!animation) {
-          // Create the animation object but don't start it.
-          // To be replaced with the following when the constructors ship
-          // (currently behind dom.animations-api.core.enabled)
-          /*
           animation = new this.window.Animation(new this.window.KeyframeEffect(
             element, animationProp.keyframes, animationProp.options));
-          */
-          animation = element.animate(animationProp.keyframes, animationProp.options);
-          animation.cancel();
 
           this.animationMap.set(element, animation);
         }
 
         if (fadeIn) {
           if (element == this.controlBar) {
             this.controlsSpacer.removeAttribute("hideCursor");
           }
@@ -1188,17 +1155,16 @@ this.VideoControlsImplPageWidget = class
         }
 
         element.classList.toggle("fadeout", !fadeIn);
         element.classList.toggle("fadein", fadeIn);
         let finishedPromise;
         if (!immediate) {
           animation.playbackRate = fadeIn ? 1 : -1;
           animation.play();
-          this.installFinishedPromisePolyfill(animation);
           finishedPromise = animation.finished;
         } else {
           animation.cancel();
           finishedPromise = Promise.resolve();
         }
         finishedPromise.then(() => {
           if (element == this.controlBar) {
             this.onControlBarAnimationFinished();
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -1123,42 +1123,16 @@
             { opacity: 1 }
           ],
           options: {
             duration: 1050
           }
         }
       },
 
-      // Polyfill animation.finished promise, also invalidate
-      // the previous promise.
-      // Remove when the platform implementation ships.
-      // (currently behind dom.animations-api.core.enabled)
-      installFinishedPromisePolyfill(animation) {
-        let handler = {
-          handleEvent(evt) {
-            animation.removeEventListener("finish", this);
-            animation.removeEventListener("cancel", this);
-            if (evt.type == "finish" &&
-                this === animation.finished) {
-              this.fn();
-            }
-          },
-          then(fn) {
-            this.fn = fn;
-          }
-        };
-        // Note that handler is not a real Promise.
-        // All it offered is a then() method to register a callback
-        // to be triggered at the right time.
-        animation.finished = handler;
-        animation.addEventListener("finish", handler);
-        animation.addEventListener("cancel", handler);
-      },
-
       startFade(element, fadeIn, immediate = false) {
         // Bug 493523, the scrubber doesn't call valueChanged while hidden,
         // so our dependent state (eg, timestamp in the thumb) will be stale.
         // As a workaround, update it manually when it first becomes unhidden.
         if (element == this.controlBar && fadeIn && element.hidden) {
           this.scrubber.value = this.video.currentTime * 1000;
         }
 
@@ -1166,25 +1140,18 @@
           this.animationProps[element.getAttribute("anonid")];
         if (!animationProp) {
           throw new Error("Element " + element.getAttribute("anonid") +
             " has no transition. Toggle the hidden property directly.");
         }
 
         let animation = this.animationMap.get(element);
         if (!animation) {
-          // Create the animation object but don't start it.
-          // To be replaced with the following when the constructors ship
-          // (currently behind dom.animations-api.core.enabled)
-          /*
           animation = new Animation(new KeyframeEffect(
             element, animationProp.keyframes, animationProp.options));
-          */
-          animation = element.animate(animationProp.keyframes, animationProp.options);
-          animation.cancel();
 
           this.animationMap.set(element, animation);
         }
 
         if (fadeIn) {
           // hidden state should be controlled by adjustControlSize
           if (element.isAdjustableControl && element.hiddenByAdjustment) {
             return;
@@ -1214,17 +1181,16 @@
         }
 
         element.classList.toggle("fadeout", !fadeIn);
         element.classList.toggle("fadein", fadeIn);
         let finishedPromise;
         if (!immediate) {
           animation.playbackRate = fadeIn ? 1 : -1;
           animation.play();
-          this.installFinishedPromisePolyfill(animation);
           finishedPromise = animation.finished;
         } else {
           animation.cancel();
           finishedPromise = Promise.resolve();
         }
         finishedPromise.then(() => {
           if (element == this.controlBar) {
             this.onControlBarAnimationFinished();
--- a/toolkit/themes/shared/media/videocontrols.css
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -61,26 +61,16 @@ audio > xul|videocontrols,
 
 .touch .controlBar {
   /* Do not delete: these variables are accessed by JavaScript directly.
      see videocontrols.xml and search for |-width|. */
   --scrubberStack-width: 84px;
   --volumeStack-width: 64px;
 }
 
-/*
-  XXX this is needed because of bug 1354501.
-  Can be removed when the bug is fixed, or when we move away from
-  the finish event to the finished promise.
-  (currently behind dom.animations-api.core.enabled)
-*/
-.fadeout {
-  opacity: 0;
-}
-
 .controlsContainer [hidden],
 .controlBar[hidden] {
   display: none;
 }
 
 .controlBar[size="hidden"] {
   display: none;
 }