Bug 1324593 - fixed transition-timing-function preview linear issue; r=pbro

MozReview-Commit-ID: 4raZfCbI2P8

devtools/client/shared/test/browser.ini

@@ -31,6 +31,7 @@ support-files =
 [browser_cubic-bezier-04.js]
 [browser_cubic-bezier-05.js]
 [browser_cubic-bezier-06.js]
+[browser_cubic-bezier-07.js]
 [browser_filter-editor-01.js]
 [browser_filter-editor-02.js]
 [browser_filter-editor-03.js]

devtools/client/shared/test/browser_cubic-bezier-07.js

@@ -0,0 +1,53 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that changing the cubic-bezier curve in the widget does change the dot animation
+// preview too.
+
+const {CubicBezierWidget} = require("devtools/client/shared/widgets/CubicBezierWidget");
+const {PREDEFINED} = require("devtools/client/shared/widgets/CubicBezierPresets");
+
+const TEST_URI = `data:text/html,<div id="cubic-bezier-container" />`;
+
+add_task(function* () {
+  let [host,, doc] = yield createHost("bottom", TEST_URI);
+
+  let container = doc.querySelector("#cubic-bezier-container");
+  let w = new CubicBezierWidget(container, PREDEFINED.linear);
+
+  yield previewDotReactsToChanges(w, [0.6, -0.28, 0.74, 0.05]);
+  yield previewDotReactsToChanges(w, [0.9, 0.03, 0.69, 0.22]);
+  yield previewDotReactsToChanges(w, [0.68, -0.55, 0.27, 1.55]);
+  yield previewDotReactsToChanges(w, PREDEFINED.ease, "ease");
+  yield previewDotReactsToChanges(w, PREDEFINED["ease-in-out"], "ease-in-out");
+
+  w.destroy();
+  host.destroy();
+});
+
+function* previewDotReactsToChanges(widget, coords, expectedEasing) {
+  let onUpdated = widget.once("updated");
+  widget.coordinates = coords;
+  yield onUpdated;
+
+  let animatedDot = widget.timingPreview.dot;
+  let animations = animatedDot.getAnimations();
+
+  if (!expectedEasing) {
+    expectedEasing =
+      `cubic-bezier(${coords[0]}, ${coords[1]}, ${coords[2]}, ${coords[3]})`;
+  }
+
+  is(animations.length, 1, "The dot is animated");
+
+  let goingToRight = animations[0].effect.getKeyframes()[2];
+  is(goingToRight.easing, expectedEasing,
+     `The easing when going to the right was set correctly to ${coords}`);
+
+  let goingToLeft = animations[0].effect.getKeyframes()[6];
+  is(goingToLeft.easing, expectedEasing,
+     `The easing when going to the left was set correctly to ${coords}`);
+}

devtools/client/shared/widgets/CubicBezierWidget.js

@@ -418,7 +418,7 @@ CubicBezierWidget.prototype = {
     this.bezierCanvas.plot();
     this.emit("updated", this.bezierCanvas.bezier);
 
-    this.timingPreview.preview(this.bezierCanvas.bezier + "");
+    this.timingPreview.preview(this.bezierCanvas.bezier.toString());
   },
 
   /**
@@ -721,7 +721,6 @@ CubicBezierPresetWidget.prototype = {
  */
 function TimingFunctionPreviewWidget(parent) {
   this.previousValue = null;
-  this.autoRestartAnimation = null;
 
   this.parent = parent;
   this._initMarkup();
@@ -748,7 +747,7 @@ TimingFunctionPreviewWidget.prototype = {
   },
 
   destroy: function () {
-    clearTimeout(this.autoRestartAnimation);
+    this.dot.getAnimations().forEach(anim => anim.cancel());
     this.parent.querySelector(".timing-function-preview").remove();
     this.parent = this.dot = null;
   },
@@ -765,35 +764,42 @@ TimingFunctionPreviewWidget.prototype = {
       return;
     }
 
-    clearTimeout(this.autoRestartAnimation);
-
     if (parseTimingFunction(value)) {
-      this.dot.style.animationTimingFunction = value;
-      this.restartAnimation();
+      this.restartAnimation(value);
     }
 
     this.previousValue = value;
   },
 
   /**
-   * Re-start the preview animation from the beginning
+   * Re-start the preview animation from the beginning.
+   * @param {String} timingFunction The value for the timing-function.
    */
-  restartAnimation: function () {
-    // Just toggling the class won't do it unless there's a sync reflow
-    this.dot.animate([
-      { left: "-7px", offset: 0 },
-      { left: "143px", offset: 0.25 },
-      { left: "143px", offset: 0.5 },
-      { left: "-7px", offset: 0.75 },
-      { left: "-7px", offset: 1 }
-    ], {
-      duration: (this.PREVIEW_DURATION * 2),
-      fill: "forwards"
-    });
+  restartAnimation: function (timingFunction) {
+    // Cancel the previous animation if there was any.
+    this.dot.getAnimations().forEach(anim => anim.cancel());
 
-    // Restart it again after a while
-    this.autoRestartAnimation = setTimeout(this.restartAnimation.bind(this),
-      this.PREVIEW_DURATION * 2);
+    // And start the new one.
+    // The animation consists of a few keyframes that move the dot to the right of the
+    // container, and then move it back to the left.
+    // It also contains some pause where the dot is semi transparent, before it moves to
+    // the right, and once again, before it comes back to the left.
+    // The timing function passed to this function is applied to the keyframes that
+    // actually move the dot. This way it can be previewed in both direction, instead of
+    // being spread over the whole animation.
+    this.dot.animate([
+      { left: "-7px", opacity: .5, offset: 0 },
+      { left: "-7px", opacity: .5, offset: .19 },
+      { left: "-7px", opacity: 1, offset: .2, easing: timingFunction },
+      { left: "143px", opacity: 1, offset: .5 },
+      { left: "143px", opacity: .5, offset: .51 },
+      { left: "143px", opacity: .5, offset: .7 },
+      { left: "143px", opacity: 1, offset: .71, easing: timingFunction },
+      { left: "-7px", opacity: 1, offset: 1 }
+    ], {
+      duration: this.PREVIEW_DURATION * 2,
+      iterations: Infinity
+    });
   }
 };