Bug 1396538 - Part 1: Use computed value as the value scale. r=pbro
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Mon, 04 Sep 2017 20:47:41 +0900
changeset 428240 2ad724d3f769ab752af5c3159745a8817da51e92
parent 428239 0360b6884f35868a4e413cfc51020f72e2c8c414
child 428241 f21fdf4e07a91641ee96946f79608b7a24134775
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1396538
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1396538 - Part 1: Use computed value as the value scale. r=pbro MozReview-Commit-ID: 9ng9hUTga9A
devtools/client/animationinspector/graph-helper.js
--- a/devtools/client/animationinspector/graph-helper.js
+++ b/devtools/client/animationinspector/graph-helper.js
@@ -57,19 +57,19 @@ function ProgressGraphHelper(win, proper
   // Create effect timing object to make dummy animation.
   const effectTiming = {
     duration: duration,
     fill: "forwards"
   };
 
   this.keyframes = keyframesObject;
   this.devtoolsKeyframes = keyframes;
+  this.valueHelperFunction = this.getValueHelperFunction();
   this.animation = this.targetEl.animate(this.keyframes, effectTiming);
   this.animation.pause();
-  this.valueHelperFunction = this.getValueHelperFunction();
 }
 
 ProgressGraphHelper.prototype = {
   /**
    * Destory this object.
    */
   destroy: function () {
     this.targetEl.remove();
@@ -211,20 +211,25 @@ ProgressGraphHelper.prototype = {
   /**
    * Return value helper function of animation type 'discrete'.
    * @return {function} ValueHelperFunction returns float value of Y axis
    *                    from given style (e.g. center)
    */
   getDiscreteValueHelperFunction: function () {
     const discreteValues = [];
     this.keyframes.forEach(keyframe => {
-      if (!discreteValues.includes(keyframe.value)) {
-        discreteValues.push(keyframe.value);
+      // Set style once since the computed value may differ from specified keyframe value.
+      this.targetEl.style[this.propertyJSName] = keyframe.value;
+      const style = this.win.getComputedStyle(this.targetEl)[this.propertyJSName];
+      if (!discreteValues.includes(style)) {
+        discreteValues.push(style);
       }
     });
+    this.targetEl.style[this.propertyJSName] = "unset";
+
     return value => {
       return discreteValues.indexOf(value) / (discreteValues.length - 1);
     };
   },
 
   /**
    * Create the path segments from given parameters.
    * @param {Number} startTime - Starting time of animation.