Bug 1319989 - Don't show direction in tooltip when it is 'normal'; r=pbro
authorYann Gravrand <y.gravrand@gmail.com>
Mon, 28 Nov 2016 12:56:47 +0100
changeset 324604 ea5eda08e2ccef5747fb9e87027a0d3f63e54b04
parent 324603 a4250c28aabc8cf5bf23cd6c7f825b3b2d181aa1
child 324605 940a214b71f0b61c48309f70f90b675e34f33860
push id24
push usermaklebus@msu.edu
push dateTue, 20 Dec 2016 03:11:33 +0000
reviewerspbro
bugs1319989
milestone53.0a1
Bug 1319989 - Don't show direction in tooltip when it is 'normal'; r=pbro MozReview-Commit-ID: EYLKQFcq69n
devtools/client/animationinspector/components/animation-time-block.js
devtools/client/animationinspector/test/browser_animation_timeline_shows_time_info.js
devtools/client/animationinspector/test/doc_simple_animation.html
--- a/devtools/client/animationinspector/components/animation-time-block.js
+++ b/devtools/client/animationinspector/components/animation-time-block.js
@@ -305,18 +305,18 @@ AnimationTimeBlock.prototype = {
 
     // Adding the fill mode.
     if (state.fill) {
       text += L10N.getStr("player.animationFillLabel") + " ";
       text += state.fill;
       text += "\n";
     }
 
-    // Adding the direction mode.
-    if (state.direction) {
+    // Adding the direction mode if it is not "normal".
+    if (state.direction && state.direction !== "normal") {
       text += L10N.getStr("player.animationDirectionLabel") + " ";
       text += state.direction;
       text += "\n";
     }
 
     // Adding the playback rate if it's different than 1.
     if (state.playbackRate !== 1) {
       text += L10N.getStr("player.animationRateLabel") + " ";
--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_time_info.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_time_info.js
@@ -18,33 +18,40 @@ add_task(function* () {
   let timeBlockNameEls = timelineEl.querySelectorAll(".time-block .name");
 
   // Verify that each time-block's name element has a tooltip that looks sort of
   // ok. We don't need to test the actual content.
   [...timeBlockNameEls].forEach((el, i) => {
     ok(el.hasAttribute("title"), "The tooltip is defined for animation " + i);
 
     let title = el.getAttribute("title");
-    if (controller.animationPlayers[i].state.delay) {
+    let state = controller.animationPlayers[i].state;
+
+    if (state.delay) {
       ok(title.match(/Delay: [\d.-]+s/), "The tooltip shows the delay");
     }
     ok(title.match(/Duration: [\d.]+s/), "The tooltip shows the duration");
-    if (controller.animationPlayers[i].state.endDelay) {
+    if (state.endDelay) {
       ok(title.match(/End delay: [\d.-]+s/), "The tooltip shows the endDelay");
     }
-    if (controller.animationPlayers[i].state.iterationCount !== 1) {
+    if (state.iterationCount !== 1) {
       ok(title.match(/Repeats: /), "The tooltip shows the iterations");
     } else {
       ok(!title.match(/Repeats: /), "The tooltip doesn't show the iterations");
     }
-    if (controller.animationPlayers[i].state.easing) {
+    if (state.easing) {
       ok(title.match(/Easing: /), "The tooltip shows the easing");
     }
-    if (controller.animationPlayers[i].state.fill) {
+    if (state.fill) {
       ok(title.match(/Fill: /), "The tooltip shows the fill");
     }
-    if (controller.animationPlayers[i].state.direction) {
-      ok(title.match(/Direction: /), "The tooltip shows the direction");
+    if (state.direction) {
+      if (state.direction === "normal") {
+        ok(!title.match(/Direction: /),
+          "The tooltip doesn't show the direction if it is 'normal'");
+      } else {
+        ok(title.match(/Direction: /), "The tooltip shows the direction");
+      }
     }
     ok(!title.match(/Iteration start:/),
       "The tooltip doesn't show the iteration start");
   });
 });
--- a/devtools/client/animationinspector/test/doc_simple_animation.html
+++ b/devtools/client/animationinspector/test/doc_simple_animation.html
@@ -49,17 +49,17 @@
                  other-animation 4s;
     }
 
     .short {
       top: 500px;
       left: 10px;
       background: red;
 
-      animation: simple-animation 2s;
+      animation: simple-animation 2s normal;
     }
 
     .long {
       top: 600px;
       left: 10px;
       background: blue;
 
       animation: simple-animation 120s;