Bug 1453239: Change the expression of easing hint of properties which animate as color. r=gl
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Wed, 11 Apr 2018 23:48:58 +0900
changeset 414027 ed4a62159f8a8518df3c364b56018248e2f362a8
parent 414026 767f9e9dd5824fbdf5b03b4e6f8d3a3f697f29e5
child 414028 b00ed74f557bd873025e9047cb46a0c7511af1ca
push id33857
push userncsoregi@mozilla.com
push dateTue, 17 Apr 2018 21:54:38 +0000
treeherdermozilla-central@1a1223d74b7b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1453239
milestone61.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 1453239: Change the expression of easing hint of properties which animate as color. r=gl MozReview-Commit-ID: 6X3QeZIZg0u
devtools/client/inspector/animation/components/keyframes-graph/ColorPath.js
devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js
devtools/client/themes/animation.css
--- a/devtools/client/inspector/animation/components/keyframes-graph/ColorPath.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/ColorPath.js
@@ -89,16 +89,24 @@ class ColorPath extends ComputedStylePat
         },
         dom.title({}, startKeyframe.easing),
         dom.rect(
           {
             x: startTime,
             y: -graphHeight,
             height: graphHeight,
             width: endTime - startTime,
+          }
+        ),
+        dom.line(
+          {
+            x1: startTime,
+            y1: -graphHeight,
+            x2: endTime,
+            y2: -graphHeight,
             style: {
               "stroke-width": easingHintStrokeWidth,
             },
           }
         )
       );
       hints.push(g);
     }
--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js
@@ -218,54 +218,57 @@ add_task(async function() {
         info(`Checking <title> in ${ hintTarget }`);
         const titleEl = hintEl.querySelector("title");
         ok(titleEl,
           `<title> element in ${ hintTarget } should be existence`);
         is(titleEl.textContent, expectedHint.hint,
           `Content of <title> in ${ hintTarget } should be ${ expectedHint.hint }`);
 
         let interactionEl = null;
+        let displayedEl = null;
         if (expectedHint.path) {
           info(`Checking <path> in ${ hintTarget }`);
           interactionEl = hintEl.querySelector("path");
+          displayedEl = interactionEl;
           ok(interactionEl, `The <path> element  in ${ hintTarget } should be existence`);
           assertPathSegments(interactionEl, false, expectedHint.path);
         } else {
           info(`Checking <rect> in ${ hintTarget }`);
           interactionEl = hintEl.querySelector("rect");
+          displayedEl = hintEl.querySelector("line");
           ok(interactionEl, `The <rect> element  in ${ hintTarget } should be existence`);
           is(interactionEl.getAttribute("x"), expectedHint.rect.x,
             `x of <rect> in ${ hintTarget } should be ${ expectedHint.rect.x }`);
           is(interactionEl.getAttribute("width"), expectedHint.rect.width,
             `width of <rect> in ${ hintTarget } should be ${ expectedHint.rect.width }`);
         }
 
         info(`Checking interaction for ${ hintTarget }`);
         interactionEl.scrollIntoView(false);
         const win = hintEl.ownerGlobal;
         // Mouse out once from pathEl.
         EventUtils.synthesizeMouse(interactionEl, -1, -1, { type: "mouseout" }, win);
-        is(win.getComputedStyle(interactionEl).strokeOpacity, 0,
+        is(win.getComputedStyle(displayedEl).strokeOpacity, 0,
           `stroke-opacity of hintEl for ${ hintTarget } should be 0` +
           " while mouse is out from the element");
         // Mouse over the pathEl.
-        ok(isStrokeChangedByMouseOver(interactionEl, win),
+        ok(isStrokeChangedByMouseOver(interactionEl, displayedEl, win),
           `stroke-opacity of hintEl for ${ hintTarget } should be 1` +
           " while mouse is over the element");
       }
     }
   }
 });
 
-function isStrokeChangedByMouseOver(pathEl, win) {
-  const boundingBox = pathEl.getBoundingClientRect();
+function isStrokeChangedByMouseOver(mouseoverEl, displayedEl, win) {
+  const boundingBox = mouseoverEl.getBoundingClientRect();
   const x = boundingBox.width / 2;
 
   for (let y = 0; y < boundingBox.height; y++) {
-    EventUtils.synthesizeMouse(pathEl, x, y, { type: "mouseover" }, win);
+    EventUtils.synthesizeMouse(mouseoverEl, x, y, { type: "mouseover" }, win);
 
-    if (win.getComputedStyle(pathEl).strokeOpacity == 1) {
+    if (win.getComputedStyle(displayedEl).strokeOpacity == 1) {
       return true;
     }
   }
 
   return false;
 }
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -601,22 +601,25 @@ select.playback-rate-selector.devtools-b
 }
 
 .keyframes-graph-path .hint path:hover {
   stroke-opacity: 1;
 }
 
 .keyframes-graph-path .hint rect {
   fill-opacity: 0.1;
+}
+
+.keyframes-graph-path .hint line {
   stroke: #00b0bd;
   stroke-opacity: 0;
   vector-effect: non-scaling-stroke;
 }
 
-.keyframes-graph-path .hint rect:hover {
+.keyframes-graph-path .hint:hover line {
   stroke-opacity: 1;
 }
 
 /* Keyframe Marker List */
 .keyframe-marker-list {
   pointer-events: none;
   position: absolute;
   height: 100%;