Bug 1210796 - Part 3: Isolated timeline. r=pbro

MozReview-Commit-ID: KOWHeKRIyLb

--HG--
extra : rebase_source : 96e641b47ece88020f676051d3aa1efd8f511497

devtools/client/animationinspector/components/animation-details.js

@@ -213,11 +213,6 @@ AnimationDetails.prototype = {
         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({

devtools/client/animationinspector/components/keyframes.js

@@ -49,11 +49,6 @@ Keyframes.prototype = {
     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,
@@ -93,12 +88,11 @@ Keyframes.prototype = {
     // 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

devtools/client/animationinspector/test/browser_animation_timeline_iterationStart.js

@@ -61,11 +61,10 @@ function checkProgressAtStartingTime(el, { iterationStart }) {
 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]);
 }

devtools/client/themes/animationinspector.css

@@ -590,7 +590,9 @@ body {
      duration */
   position: absolute;
   top: 0;
+  left: 0;
   height: 100%;
+  width: 100%;
   /* Using flexbox to vertically center the frames */
   display: flex;
   align-items: center;