Bug 1210796 - Part 3: Isolated timeline. r=pbro
authorDaisuke Akatsuka <daisuke@mozilla-japan.org>
Tue, 18 Apr 2017 12:15:54 +0900
changeset 353579 926ea1a72380671368a1b747df6b49c5bdb7b0a6
parent 353578 844922324bc08cca2fee3fb676f62b38947e2fd8
child 353580 f0d775da0c7d1451ec6de63965e72567cd3314ea
push id31673
push userkwierso@gmail.com
push dateTue, 18 Apr 2017 21:23:54 +0000
treeherdermozilla-central@1a81aadc2510 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1210796
milestone55.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 1210796 - Part 3: Isolated timeline. r=pbro MozReview-Commit-ID: KOWHeKRIyLb
devtools/client/animationinspector/components/animation-details.js
devtools/client/animationinspector/components/keyframes.js
devtools/client/animationinspector/test/browser_animation_timeline_iterationStart.js
devtools/client/themes/animationinspector.css
--- a/devtools/client/animationinspector/components/animation-details.js
+++ b/devtools/client/animationinspector/components/animation-details.js
@@ -208,21 +208,16 @@ AnimationDetails.prototype = {
         attributes: {"class": "track-container"}
       });
 
       let framesEl = createNode({
         parent: framesWrapperEl,
         attributes: {"class": "frames"}
       });
 
-      // Scale the list of keyframes according to the current time scale.
-      let {x, w} = TimeScale.getAnimationDimensions(animation);
-      framesEl.style.left = `${x}%`;
-      framesEl.style.width = `${w}%`;
-
       let keyframesComponent = new Keyframes();
       keyframesComponent.init(framesEl);
       keyframesComponent.render({
         keyframes: this.tracks[propertyName],
         propertyName: propertyName,
         animation: animation,
         animationType: animationTypes[propertyName]
       });
--- a/devtools/client/animationinspector/components/keyframes.js
+++ b/devtools/client/animationinspector/components/keyframes.js
@@ -44,21 +44,16 @@ Keyframes.prototype = {
     this.containerEl = this.keyframesEl = this.animation = null;
   },
 
   render: function ({keyframes, propertyName, animation, animationType}) {
     this.keyframes = keyframes;
     this.propertyName = propertyName;
     this.animation = animation;
 
-    let iterationStartOffset =
-      animation.state.iterationStart % 1 == 0
-      ? 0
-      : 1 - animation.state.iterationStart % 1;
-
     // Create graph element.
     const graphEl = createSVGNode({
       parent: this.keyframesEl,
       nodeType: "svg",
       attributes: {
         "preserveAspectRatio": "none"
       }
     });
@@ -88,22 +83,21 @@ Keyframes.prototype = {
                         DEFAULT_MIN_PROGRESS_THRESHOLD, graphHelper);
 
     // Destroy ProgressGraphHelper resources.
     graphHelper.destroy();
 
     // Append elements to display keyframe values.
     this.keyframesEl.classList.add(animation.state.type);
     for (let frame of this.keyframes) {
-      let offset = frame.offset + iterationStartOffset;
       createNode({
         parent: this.keyframesEl,
         attributes: {
           "class": "frame",
-          "style": `left:${offset * 100}%;`,
+          "style": `left:${frame.offset * 100}%;`,
           "data-offset": frame.offset,
           "data-property": propertyName,
           "title": frame.value
         }
       });
     }
   },
 
--- a/devtools/client/animationinspector/test/browser_animation_timeline_iterationStart.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_iterationStart.js
@@ -56,16 +56,15 @@ function checkProgressAtStartingTime(el,
   const progress = pathSeg.y;
   is(progress, iterationStart % 1,
      `The progress at starting point should be ${ iterationStart % 1 }`);
 }
 
 function checkKeyframeOffset(timeBlockEl, frameEl, {iterationStart}) {
   info("Check that the first keyframe is offset correctly");
 
-  let start = getIterationStartFromLeft(frameEl);
-  is(start, iterationStart % 1, "The frame offset for iteration start");
+  let start = getKeyframeOffset(frameEl);
+  is(start, 0, "The frame offset for iteration start");
 }
 
-function getIterationStartFromLeft(el) {
-  let left = 100 - parseFloat(/(\d+)%/.exec(el.style.left)[1]);
-  return left / 100;
+function getKeyframeOffset(el) {
+  return parseFloat(/(\d+)%/.exec(el.style.left)[1]);
 }
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -585,17 +585,19 @@ body {
 }
 
 .animation-timeline .animated-properties .frames {
   /* The frames list is absolutely positioned and the left and width properties
      are dynamically set from javascript to match the animation's startTime and
      duration */
   position: absolute;
   top: 0;
+  left: 0;
   height: 100%;
+  width: 100%;
   /* Using flexbox to vertically center the frames */
   display: flex;
   align-items: center;
 }
 
 /* Keyframes diagram, displayed below the timeline, inside the animation-details
    element. */