Bug 1169563 - 7 - Make the animation inspector UI look better; r=miker

--HG--
extra : commitid : 2ltmxRlgegx

browser/devtools/animationinspector/components.js

@@ -32,7 +32,7 @@ const {
 const STRINGS_URI = "chrome://browser/locale/devtools/animationinspector.properties";
 const L10N = new ViewHelpers.L10N(STRINGS_URI);
 const MILLIS_TIME_FORMAT_MAX_DURATION = 4000;
-// The minimum spacing between 2 time graduation headers in the timeline (ms).
+// The minimum spacing between 2 time graduation headers in the timeline (px).
 const TIME_GRADUATION_MIN_SPACING = 40;
 
 /**
@@ -939,7 +939,8 @@ AnimationsTimeline.prototype = {
     createNode({
       parent: iterations,
       attributes: {
-        "class": "name"
+        "class": "name",
+        "title": state.name
       },
       textContent: state.name
     });

browser/devtools/animationinspector/test/unit/test_findOptimalTimeInterval.js

@@ -23,22 +23,22 @@ const {findOptimalTimeInterval} = require("devtools/animationinspector/utils");
 //   interval, this string will be eval'd and tested to be truthy.
 const TEST_DATA = [{
   desc: "With 1px being 1ms and no minSpacing, expect the interval to be the " +
-        "default min spacing",
+        "interval multiple",
   timeScale: 1,
   minSpacing: undefined,
-  expectedInterval: 10
+  expectedInterval: 25
 }, {
-  desc: "With 1px being 1ms and a custom minSpacing being a multiple of 10 " +
+  desc: "With 1px being 1ms and a custom minSpacing being a multiple of 25 " +
         "expect the interval to be the custom min spacing",
   timeScale: 1,
-  minSpacing: 40,
-  expectedInterval: 40
+  minSpacing: 50,
+  expectedInterval: 50
 }, {
-  desc: "With 1px being 1ms and a custom minSpacing not being multiple of 10 " +
+  desc: "With 1px being 1ms and a custom minSpacing not being multiple of 25 " +
         "expect the interval to be the next multiple of 10",
   timeScale: 1,
-  minSpacing: 13,
-  expectedInterval: 20
+  minSpacing: 26,
+  expectedInterval: 50
 }, {
   desc: "If 1ms corresponds to a distance that is greater than the min " +
         "spacing then, expect the interval to be this distance",
@@ -48,17 +48,17 @@ const TEST_DATA = [{
 }, {
   desc: "If 1ms corresponds to a distance that is greater than the min " +
         "spacing then, expect the interval to be this distance, even if it " +
-        "isn't a multiple of 10",
+        "isn't a multiple of 25",
   timeScale: 33,
   minSpacing: undefined,
   expectedInterval: 33
 }, {
   desc: "If 1ms is a very small distance, then expect this distance to be " +
-        "multiplied by 10, 20, 40, 80, etc... until it goes over the min " +
+        "multiplied by 25, 50, 100, 200, etc... until it goes over the min " +
         "spacing",
   timeScale: 0.001,
   minSpacing: undefined,
-  expectedInterval: 10.24
+  expectedInterval: 12.8
 }, {
   desc: "If the time scale is such that we need to iterate more than the " +
         "maximum allowed number of iterations, then expect an interval lower " +

browser/devtools/animationinspector/utils.js

@@ -10,7 +10,7 @@
 // interval in the timeline graph.
 const OPTIMAL_TIME_INTERVAL_MAX_ITERS = 100;
 // Background time graduations should be multiple of this number of millis.
-const TIME_INTERVAL_MULTIPLE = 10;
+const TIME_INTERVAL_MULTIPLE = 25;
 const TIME_INTERVAL_SCALES = 3;
 // The default minimum spacing between time graduations in px.
 const TIME_GRADUATION_MIN_SPACING = 10;

browser/themes/shared/devtools/animationinspector.css

@@ -253,11 +253,14 @@ body {
   top: unset;
 }
 
-.animation-timeline .animation .animation-title {
-  height: 1.5em;
+.animation-timeline .animation .name {
+  height: 100%;
   width: 100%;
-  box-sizing: border-box;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 150%;
+  padding: 0 2px;
 }
 
 .animation-timeline .animation .delay {
@@ -284,13 +287,6 @@ body {
   background: var(--theme-highlight-lightorange);
 }
 
-.animation-timeline .animation .name {
-  position: absolute;
-  z-index: 1;
-  padding: 2px;
-  white-space: nowrap;
-}
-
 /* Animation target node gutter, contains a preview of the dom node */
 
 .animation-target {