Bug 1239298 - Make sure percentage width of iterations and delays in the timeline are relative to the same parent

--HG--
extra : commitid : LGSmpfPoAR6
extra : rebase_source : 3d6eacf405099a1dfd9e8b46d2c98c945e7ae930

devtools/client/animationinspector/components/animation-time-block.js

@@ -55,8 +55,7 @@ AnimationTimeBlock.prototype = {
     let iterations = createNode({
       parent: this.containerEl,
       attributes: {
-        "class": state.type + " iterations" +
-                 (state.iterationCount ? "" : " infinite"),
+        "class": "iterations" + (state.iterationCount ? "" : " infinite"),
         // Individual iterations are represented by setting the size of the
         // repeating linear-gradient.
         "style": `left:${x}%;
@@ -66,16 +65,20 @@ AnimationTimeBlock.prototype = {
     });
 
     // The animation name is displayed over the iterations.
-    // Note that in case of negative delay, we push the name towards the right
-    // so the delay can be shown.
+    // Note that in case of negative delay, it is pushed towards the right so
+    // the delay element does not overlap.
     createNode({
-      parent: iterations,
-      attributes: {
-        "class": "name",
-        "title": this.getTooltipText(state),
-        // Make space for the negative delay with a margin-left.
-        "style": `margin-left:${negativeDelayW}%`
-      },
+      parent: createNode({
+        parent: this.containerEl,
+        attributes: {
+          "class": "name",
+          "title": this.getTooltipText(state),
+          // Place the name at the same position as the iterations, but make
+          // space for the negative delay if any.
+          "style": `left:${x + negativeDelayW}%;
+                    width:${iterationW - negativeDelayW}%;`
+        },
+      }),
       textContent: state.name
     });
 
@@ -83,10 +86,10 @@ AnimationTimeBlock.prototype = {
     if (state.delay) {
       // Negative delays need to start at 0.
       createNode({
-        parent: iterations,
+        parent: this.containerEl,
         attributes: {
           "class": "delay" + (state.delay < 0 ? " negative" : ""),
-          "style": `left:-${delayX}%;
+          "style": `left:${delayX}%;
                     width:${delayW}%;`
         }
       });

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

@@ -277,9 +277,9 @@ AnimationsTimeline.prototype = {
         parent: this.animationsEl,
         nodeType: "li",
         attributes: {
-          "class": "animation" + (animation.state.isRunningOnCompositor
-                                  ? " fast-track"
-                                  : "")
+          "class": "animation " +
+                   animation.state.type +
+                   (animation.state.isRunningOnCompositor ? " fast-track" : "")
         }
       });
 

devtools/client/animationinspector/test/browser_animation_timeline_shows_delay.js

@@ -41,14 +41,15 @@ function checkDelayAndName(timelineEl, hasDelay) {
     let targetNode = timelineEl.querySelector(".target");
 
     // Check that the delay element does not cause the timeline to overflow.
-    let delayRect = delay.getBoundingClientRect();
-    let sidebarWidth = targetNode.getBoundingClientRect().width;
-    ok(delayRect.x >= sidebarWidth,
+    let delayLeft = Math.round(delay.getBoundingClientRect().x);
+    let sidebarWidth = Math.round(targetNode.getBoundingClientRect().width);
+    ok(delayLeft >= sidebarWidth,
        "The delay element isn't displayed over the sidebar");
 
     // Check that the delay is not displayed on top of the name.
-    let nameLeft = name.getBoundingClientRect().left;
-    ok(delayRect.right <= nameLeft,
+    let delayRight = Math.round(delay.getBoundingClientRect().right);
+    let nameLeft = Math.round(name.getBoundingClientRect().left);
+    ok(delayRight <= nameLeft,
        "The delay element does not span over the name element");
   }
 }

devtools/client/animationinspector/utils.js

@@ -338,10 +338,10 @@ var TimeScale = {
     // The width for all iterations.
     let iterationW = w * (count || 1);
     // The start position of the delay.
-    let delayX = this.durationToDistance((delay < 0 ? 0 : delay) / rate);
+    let delayX = delay < 0 ? x : this.startTimeToDistance(start);
     // The width of the delay.
     let delayW = this.durationToDistance(Math.abs(delay) / rate);
-    // The width of the delay if it is positive, 0 otherwise.
+    // The width of the delay if it is negative, 0 otherwise.
     let negativeDelayW = delay < 0 ? delayW : 0;
 
     return {x, w, iterationW, delayX, delayW, negativeDelayW};

devtools/client/themes/animationinspector.css

@@ -27,6 +27,21 @@
   --time-graduation-border-color: rgba(128, 136, 144, .5);
 }
 
+.animation {
+  --timeline-border-color: var(--theme-body-color);
+  --timeline-background-color: var(--theme-splitter-color);
+}
+
+.animation.cssanimation {
+  --timeline-border-color: var(--theme-highlight-lightorange);
+  --timeline-background-color: var(--theme-contrast-background);
+}
+
+.animation.csstransition {
+  --timeline-border-color: var(--theme-highlight-bluegrey);
+  --timeline-background-color: var(--theme-highlight-blue);
+}
+
 html {
   height: 100%;
 }
@@ -285,13 +300,10 @@ body {
 /* Animation iterations */
 
 .animation-timeline .animation .iterations {
-  position: relative;
+  position: absolute;
   height: 100%;
   box-sizing: border-box;
 
-  --timeline-border-color: var(--theme-body-color);
-  --timeline-background-color: var(--theme-splitter-color);
-
   /* Iterations of the animation are displayed with a repeating linear-gradient
      which size is dynamically changed from JS. The gradient only draws 1px
      borders between each iteration. These borders must have the same color as
@@ -305,21 +317,13 @@ body {
   background-repeat: repeat-x;
   background-position: -1px 0;
   border: 1px solid var(--timeline-border-color);
+  /* Border-right is already handled by the gradient */
+  border-width: 1px 0 1px 1px;
 
   /* The background color is set independently */
   background-color: var(--timeline-background-color);
 }
 
-.animation-timeline .animation .cssanimation {
-  --timeline-border-color: var(--theme-highlight-lightorange);
-  --timeline-background-color: var(--theme-contrast-background);
-}
-
-.animation-timeline .animation .csstransition {
-  --timeline-border-color: var(--theme-highlight-bluegrey);
-  --timeline-background-color: var(--theme-highlight-blue);
-}
-
 .animation-timeline .animation .iterations.infinite {
   border-right-width: 0;
 }
@@ -343,33 +347,50 @@ body {
 }
 
 .animation-timeline .animation .name {
+  position: absolute;
   color: var(--theme-selection-color);
   height: 100%;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 150%;
+  display: flex;
+  align-items: center;
   padding: 0 2px;
+  box-sizing: border-box;
+  --fast-track-icon-width: 12px;
 }
 
-.animation-timeline .fast-track .name {
+.animation-timeline .animation .name div {
+  /* Flex items don't support text-overflow, so a child div is used */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.animation-timeline .fast-track .name div {
+  width: calc(100% - var(--fast-track-icon-width));
+}
+
+.animation-timeline .fast-track .name::after {
   /* Animations running on the compositor have the fast-track background image*/
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: var(--fast-track-icon-width);
+
   background-image: url("images/animation-fast-track.svg");
   background-repeat: no-repeat;
-  background-position: calc(100% - 5px) center;
+  background-position: center;
 }
 
 .animation-timeline .animation .delay {
   position: absolute;
-  top: 0;
-  /* Make sure the delay covers up the animation border */
-  transform: translate(-1px, -1px);
-  box-sizing: border-box;
-  height: calc(100% + 2px);
+  height: 100%;
 
   border: 1px solid var(--timeline-border-color);
+  box-sizing: border-box;
   border-width: 1px 0 1px 1px;
+
   background-image: repeating-linear-gradient(45deg,
                                               transparent,
                                               transparent 1px,