Bug 1438072 - Part 2: Change the opacity of unchanged items. r?pbro
MozReview-Commit-ID: 6gH9Ad7Crn3
--- 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);