Bug 1210795 - Part 4: Changes composite sign color and animation name. r=pbro
authorDaisuke Akatsuka <daisuke@mozilla-japan.org>
Wed, 26 Oct 2016 16:37:12 +0900
changeset 319807 a1811cc95604375b097adf14ec2addb860fc768d
parent 319806 4f2a78576e79352669810610f2fde5ff4bec856f
child 319808 2cc8a31b03a8d07b6d022af7eccf8008c440a0f8
push id20748
push userphilringnalda@gmail.com
push dateFri, 28 Oct 2016 03:39:55 +0000
treeherderfx-team@715360440695 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1210795
milestone52.0a1
Bug 1210795 - Part 4: Changes composite sign color and animation name. r=pbro MozReview-Commit-ID: HW53P5nd5q0
devtools/client/animationinspector/components/animation-time-block.js
devtools/client/animationinspector/test/browser_animation_timeline_shows_delay.js
devtools/client/themes/animationinspector.css
--- a/devtools/client/animationinspector/components/animation-time-block.js
+++ b/devtools/client/animationinspector/components/animation-time-block.js
@@ -205,29 +205,23 @@ AnimationTimeBlock.prototype = {
         segmentHelper.asOriginalBehavior = false;
       }
       renderNegativeEndDelayHiddenProgress(summaryEl, state,
                                            minSegmentDuration,
                                            minProgressThreshold,
                                            segmentHelper);
     }
 
-    // The animation name is displayed over the iterations.
-    // Note that in case of negative delay, it is pushed towards the right so
-    // the delay element does not overlap.
+    // The animation name is displayed over the animation.
     createNode({
       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}%;`
+          "title": this.getTooltipText(state)
         },
       }),
       textContent: state.name
     });
 
     // Delay.
     if (state.delay) {
       // Negative delays need to start at 0.
--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_delay.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_delay.js
@@ -41,30 +41,23 @@ add_task(function* () {
 function checkDelayAndName(timelineEl, hasDelay) {
   let delay = timelineEl.querySelector(".delay");
 
   is(!!delay, hasDelay, "The timeline " +
                         (hasDelay ? "contains" : "does not contain") +
                         " a delay element, as expected");
 
   if (hasDelay) {
-    let name = timelineEl.querySelector(".name");
     let targetNode = timelineEl.querySelector(".target");
 
     // Check that the delay element does not cause the timeline to overflow.
     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 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");
   }
 }
 
 function checkPath(animationEl, state) {
   // Check existance of delay path.
   const delayPathEl = animationEl.querySelector(".delay-path");
   if (!state.iterationCount && state.delay < 0) {
     // Infinity
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -370,31 +370,36 @@ body {
 .animation-timeline .animation .summary path.enddelay-path.negative {
   fill: none;
   stroke: var(--enddelay-hidden-progress-color);
   stroke-dasharray: 2, 2;
 }
 
 .animation-timeline .animation .name {
   position: absolute;
-  color: var(--theme-selection-color);
+  color: var(--theme-selection-color3);
+  top: 0px;
+  left: 0px;
   height: 100%;
+  width: 100%;
   display: flex;
   align-items: center;
   padding: 0 2px;
   box-sizing: border-box;
   --fast-track-icon-width: 15px;
   z-index: 1;
 }
 
 .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;
+  background-color: rgba(255, 255, 255, 0.7);
+  max-width: 50%;
 }
 
 .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*/
@@ -404,17 +409,17 @@ body {
   top: 1px;
   right: 0;
   height: 100%;
   width: var(--fast-track-icon-width);
   z-index: 1;
 }
 
 .animation-timeline .all-properties .name::after {
-  background-color: white;
+  background-color: var(--theme-content-color3);
   clip-path: url(images/animation-fast-track.svg#thunderbolt);
   background-repeat: no-repeat;
   background-position: center;
 }
 
 .animation-timeline .some-properties .name::after {
   background-color: var(--theme-content-color3);
   clip-path: url(images/animation-fast-track.svg#thunderbolt);