Bug 1169563 - 5 - Resize animations in the timeline UI to show their rates; r=miker

--HG--
extra : commitid : CAa0VtnoTk7

browser/devtools/animationinspector/components.js

@@ -871,22 +871,26 @@ AnimationsTimeline.prototype = {
   drawTimeBlock: function({state}, el) {
     let width = el.offsetWidth;
 
-    // Container for all iterations and delay. Positioned at the right start
-    // time.
-    let x = TimeScale.startTimeToDistance(state.startTime + (state.delay || 0),
-                                          width);
-    // With the right width (duration*duration).
-    let count = state.iterationCount || 1;
-    let w = TimeScale.durationToDistance(state.duration, width);
+    // Create a container element to hold the delay and iterations.
+    // It is positioned according to its delay (divided by the playbackrate),
+    // and its width is according to its duration (divided by the playbackrate).
+    let start = state.startTime;
+    let duration = state.duration;
+    let rate = state.playbackRate;
+    let count = state.iterationCount;
+    let delay = state.delay || 0;
+
+    let x = TimeScale.startTimeToDistance(start + (delay / rate), width);
+    let w = TimeScale.durationToDistance(duration / rate, width);
 
     let iterations = createNode({
       parent: el,
       attributes: {
-        "class": "iterations" + (state.iterationCount ? "" : " infinite"),
+        "class": "iterations" + (count ? "" : " infinite"),
         // Individual iterations are represented by setting the size of the
         // repeating linear-gradient.
         "style": `left:${x}px;
-                  width:${w * count}px;
+                  width:${w * (count || 1)}px;
                   background-size:${Math.max(w, 2)}px 100%;`
       }
     });
@@ -901,14 +905,14 @@ AnimationsTimeline.prototype = {
     });
 
     // Delay.
-    if (state.delay) {
-      let delay = TimeScale.durationToDistance(state.delay, width);
+    if (delay) {
+      let w = TimeScale.durationToDistance(delay / rate, width);
       createNode({
         parent: iterations,
         attributes: {
           "class": "delay",
-          "style": `left:-${delay}px;
-                    width:${delay}px;`
+          "style": `left:-${w}px;
+                    width:${w}px;`
         }
       });
     }

browser/devtools/animationinspector/test/browser.ini

@@ -4,6 +4,7 @@ subsuite = devtools
 support-files =
   doc_body_animation.html
   doc_frame_script.js
+  doc_modify_playbackRate.html
   doc_simple_animation.html
   head.js
 
@@ -40,6 +41,7 @@ support-files =
 [browser_animation_timeline_scrubber_movable.js]
 [browser_animation_timeline_shows_delay.js]
 [browser_animation_timeline_shows_iterations.js]
+[browser_animation_timeline_takes_rate_into_account.js]
 [browser_animation_timeline_ui.js]
 [browser_animation_toggle_button_resets_on_navigate.js]
 [browser_animation_toggle_button_toggles_animations.js]

browser/devtools/animationinspector/test/browser_animation_timeline_takes_rate_into_account.js

@@ -0,0 +1,39 @@
+/* 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";
+
+// Check that if an animation has had its playbackRate changed via the DOM, then
+// the timeline UI shows the right delay and duration.
+// Indeed, the header in the timeline UI always shows the unaltered time,
+// because there might be multiple animations displayed at the same time, some
+// of which may have a different rate than others. Those that have had their
+// rate changed have a delay = delay/rate and a duration = duration/rate.
+
+add_task(function*() {
+  yield addTab(TEST_URL_ROOT + "doc_modify_playbackRate.html");
+
+  let {panel} = yield openAnimationInspectorNewUI();
+  yield waitForAllAnimationTargets(panel);
+
+  let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
+
+  let timeBlocks = timelineEl.querySelectorAll(".time-block");
+  is(timeBlocks.length, 2, "2 animations are displayed");
+
+  info("The first animation has its rate to 1, let's measure it");
+
+  let el = timeBlocks[0];
+  let duration = el.querySelector(".iterations").getBoundingClientRect().width;
+  let delay = el.querySelector(".delay").getBoundingClientRect().width;
+
+  info("The second animation has its rate set to 2, so should be shorter");
+
+  let el2 = timeBlocks[1];
+  let duration2 = el2.querySelector(".iterations").getBoundingClientRect().width;
+  let delay2 = el2.querySelector(".delay").getBoundingClientRect().width;
+
+  is(duration, 2 * duration2, "The duration width is correct");
+  is(delay, 2 * delay2, "The delay width is correct");
+});

browser/devtools/animationinspector/test/doc_modify_playbackRate.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <style>
+  div {
+    width: 50px;
+    height: 50px;
+    background: blue;
+    animation: move 20s 20s linear;
+    animation-fill-mode: forwards;
+  }
+
+  @keyframes move {
+    to {
+      margin-left: 200px;
+    }
+  }
+  </style>
+</head>
+<body>
+  <div></div>
+  <div class="rate"></div>
+  <script>
+    var el = document.querySelector(".rate");
+    var ani = el.getAnimations()[0];
+    ani.playbackRate = 2;
+  </script>
+</body>
+</html>