Bug 1416104 - Part 6: Implement keyframes list. r?gl
MozReview-Commit-ID: 1fMQEGjps7u
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyItem.js
@@ -0,0 +1,28 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+class AnimatedPropertyItem extends PureComponent {
+ static get propTypes() {
+ return {
+ property: PropTypes.string.isRequired,
+ values: PropTypes.array.isRequired,
+ };
+ }
+
+ render() {
+ return dom.li(
+ {
+ className: "animated-property-item"
+ }
+ );
+ }
+}
+
+module.exports = AnimatedPropertyItem;
--- a/devtools/client/inspector/animation/components/AnimatedPropertyList.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyList.js
@@ -1,20 +1,67 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
-const { PureComponent } = require("devtools/client/shared/vendor/react");
+const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const AnimatedPropertyItem = createFactory(require("./AnimatedPropertyItem"));
class AnimatedPropertyList extends PureComponent {
+ static get propTypes() {
+ return {
+ animation: PropTypes.object.isRequired,
+ getAnimatedPropertyMap: PropTypes.func.isRequired,
+ };
+ }
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ animatedPropertyMap: null
+ };
+ }
+
+ componentDidMount() {
+ this.updateKeyframesList(this.props.animation);
+ }
+
+ componentWillReceiveProps(nextProps) {
+ this.updateKeyframesList(nextProps.animation);
+ }
+
+ async updateKeyframesList(animation) {
+ const { getAnimatedPropertyMap } = this.props;
+ const animatedPropertyMap = await getAnimatedPropertyMap(animation);
+
+ this.setState({ animatedPropertyMap });
+ }
+
render() {
+ const { animatedPropertyMap } = this.state;
+
+ if (!animatedPropertyMap) {
+ return null;
+ }
+
return dom.ul(
{
className: "animated-property-list"
- }
+ },
+ [...animatedPropertyMap.entries()].map(([property, values]) => {
+ return AnimatedPropertyItem(
+ {
+ property,
+ values,
+ }
+ );
+ })
);
}
}
module.exports = AnimatedPropertyList;
--- a/devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
@@ -1,25 +1,43 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const AnimatedPropertyList = createFactory(require("./AnimatedPropertyList"));
const AnimatedPropertyListHeader = createFactory(require("./AnimatedPropertyListHeader"));
class AnimatedPropertyListContainer extends PureComponent {
+ static get propTypes() {
+ return {
+ animation: PropTypes.object.isRequired,
+ getAnimatedPropertyMap: PropTypes.func.isRequired,
+ };
+ }
+
render() {
+ const {
+ animation,
+ getAnimatedPropertyMap,
+ } = this.props;
+
return dom.div(
{
className: "animated-property-list-container"
},
AnimatedPropertyListHeader(),
- AnimatedPropertyList()
+ AnimatedPropertyList(
+ {
+ animation,
+ getAnimatedPropertyMap,
+ }
+ )
);
}
}
module.exports = AnimatedPropertyListContainer;
--- a/devtools/client/inspector/animation/components/AnimationDetailContainer.js
+++ b/devtools/client/inspector/animation/components/AnimationDetailContainer.js
@@ -12,36 +12,45 @@ const PropTypes = require("devtools/clie
const AnimationDetailHeader = createFactory(require("./AnimationDetailHeader"));
const AnimatedPropertyListContainer =
createFactory(require("./AnimatedPropertyListContainer"));
class AnimationDetailContainer extends PureComponent {
static get propTypes() {
return {
animation: PropTypes.object.isRequired,
+ getAnimatedPropertyMap: PropTypes.func.isRequired,
};
}
render() {
- const { animation } = this.props;
+ const {
+ animation,
+ getAnimatedPropertyMap,
+ } = this.props;
return dom.div(
{
className: "animation-detail-container"
},
animation ?
AnimationDetailHeader(
{
animation,
}
)
:
null,
animation ?
- AnimatedPropertyListContainer()
+ AnimatedPropertyListContainer(
+ {
+ animation,
+ getAnimatedPropertyMap,
+ }
+ )
:
null
);
}
}
const mapStateToProps = state => {
return {
--- a/devtools/client/inspector/animation/components/App.js
+++ b/devtools/client/inspector/animation/components/App.js
@@ -50,17 +50,21 @@ class App extends PureComponent {
return dom.div(
{
id: "animation-container"
},
animations.length ?
SplitBox({
className: "animation-container-splitter",
- endPanel: AnimationDetailContainer(),
+ endPanel: AnimationDetailContainer(
+ {
+ getAnimatedPropertyMap,
+ }
+ ),
endPanelControl: true,
initialHeight: "50%",
splitterSize: 1,
startPanel: AnimationListContainer(
{
animations,
emitEventForTest,
getAnimatedPropertyMap,
--- a/devtools/client/inspector/animation/components/moz.build
+++ b/devtools/client/inspector/animation/components/moz.build
@@ -2,16 +2,17 @@
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
DIRS += [
'graph'
]
DevToolsModules(
+ 'AnimatedPropertyItem.js',
'AnimatedPropertyList.js',
'AnimatedPropertyListContainer.js',
'AnimatedPropertyListHeader.js',
'AnimationDetailContainer.js',
'AnimationDetailHeader.js',
'AnimationItem.js',
'AnimationList.js',
'AnimationListContainer.js',
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -253,16 +253,32 @@
.keyframes-progress-tick-item.left {
border-left: var(--tick-line-style);
}
.keyframes-progress-tick-item.right {
border-right: var(--tick-line-style);
}
+/* Animated Property List */
+.animated-property-list {
+ list-style-type: none;
+ margin-top: 0;
+ padding: 0;
+}
+
+/* Animated Property Item */
+.animated-property-item {
+ height: 30px;
+}
+
+.animated-property-item:nth-child(2n+1) {
+ background-color: var(--animation-even-background-color);
+}
+
/* No Animation Panel */
.animation-error-message {
overflow: auto;
}
.animation-error-message > p {
white-space: pre;
}