Bug 1438072 - Part 2: Change the opacity of unchanged items. r?pbro draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 20 Mar 2018 15:25:51 +0900
changeset 769834 5597dea5e90ab60f23adf2074aec5aff8b07d83d
parent 769833 c493a571f39213b5ba15d7154a36f85b95d5477f
child 769835 de5a4e84921fc253438ff5e864fcfbd6166bc9e1
push id103230
push userbmo:dakatsuka@mozilla.com
push dateTue, 20 Mar 2018 06:32:07 +0000
reviewerspbro
bugs1438072
milestone61.0a1
Bug 1438072 - Part 2: Change the opacity of unchanged items. r?pbro MozReview-Commit-ID: 6gH9Ad7Crn3
devtools/client/inspector/animation/components/AnimatedPropertyItem.js
devtools/client/inspector/animation/components/AnimatedPropertyList.js
devtools/client/themes/animation.css
--- a/devtools/client/inspector/animation/components/AnimatedPropertyItem.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyItem.js
@@ -10,37 +10,40 @@ const PropTypes = require("devtools/clie
 
 const AnimatedPropertyName = createFactory(require("./AnimatedPropertyName"));
 const KeyframesGraph = createFactory(require("./keyframes-graph/KeyframesGraph"));
 
 class AnimatedPropertyItem extends PureComponent {
   static get propTypes() {
     return {
       getComputedStyle: PropTypes.func.isRequired,
+      isUnchanged: PropTypes.bool.isRequired,
       keyframes: PropTypes.array.isRequired,
       name: PropTypes.string.isRequired,
       simulateAnimation: PropTypes.func.isRequired,
       state: PropTypes.object.isRequired,
       type: PropTypes.string.isRequired,
     };
   }
 
   render() {
     const {
       getComputedStyle,
+      isUnchanged,
       keyframes,
       name,
       simulateAnimation,
       state,
       type,
     } = this.props;
 
     return dom.li(
       {
-        className: "animated-property-item"
+        className: "animated-property-item" +
+                   (isUnchanged ? " unchanged" : ""),
       },
       AnimatedPropertyName(
         {
           name,
           state,
         }
       ),
       KeyframesGraph(
--- a/devtools/client/inspector/animation/components/AnimatedPropertyList.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyList.js
@@ -119,21 +119,22 @@ class AnimatedPropertyList extends PureC
     if (!animatedProperties) {
       return null;
     }
 
     return dom.ul(
       {
         className: "animated-property-list"
       },
-      animatedProperties.map(({ keyframes, name, type }) => {
+      animatedProperties.map(({ isUnchanged, keyframes, name, type }) => {
         const state = this.getPropertyState(name);
         return AnimatedPropertyItem(
           {
             getComputedStyle,
+            isUnchanged,
             keyframes,
             name,
             simulateAnimation,
             state,
             type,
           }
         );
       })
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -435,16 +435,20 @@ select.playback-rate-selector.devtools-b
   display: flex;
   height: 30px;
 }
 
 .animated-property-item:nth-child(2n+1) {
   background-color: var(--animation-even-background-color);
 }
 
+.animated-property-item.unchanged {
+  opacity: 0.6;
+}
+
 /* Animated Property Name */
 .animated-property-name {
   align-items: center;
   display: flex;
   height: 100%;
   justify-content: flex-end;
   padding-right: 10px;
   width: var(--sidebar-width);