Bug 1210795 - Part 4: Changes composite sign color and animation name. r=pbro
☠☠ backed out by 3aa1bb56e8c5 ☠ ☠
authorDaisuke Akatsuka <daisuke@mozilla-japan.org>
Mon, 17 Oct 2016 16:23:53 +0900
changeset 319331 3a3e1ebb42c1979802666312e33cf9722809ef53
parent 319330 2227adce7ea6b45baf2b9a486bcfaac6b619a90c
child 319332 ccc0b092cbd808280eabcfba636254e6931a1412
push id30870
push userphilringnalda@gmail.com
push dateWed, 26 Oct 2016 05:04:25 +0000
treeherdermozilla-central@f9f3cc95d728 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1210795
milestone52.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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);