Bug 1416104 - Part 6: Implement keyframes list. r?gl draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Fri, 19 Jan 2018 15:21:15 +0900
changeset 722541 78236e70f3d6973cfe171754cfe7d5df62ab4fef
parent 722540 fda8d5643ab0e9a4b0b41f6ef005202a7cb59c60
child 722542 ca9094474bb55e981d240f617a352c6f3d1cc42a
child 722547 accb860818c64b6507330bca2e03db372dec8ad0
push id96167
push userbmo:dakatsuka@mozilla.com
push dateFri, 19 Jan 2018 07:35:17 +0000
reviewersgl
bugs1416104
milestone59.0a1
Bug 1416104 - Part 6: Implement keyframes list. r?gl MozReview-Commit-ID: 1fMQEGjps7u
devtools/client/inspector/animation/components/AnimatedPropertyItem.js
devtools/client/inspector/animation/components/AnimatedPropertyList.js
devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
devtools/client/inspector/animation/components/AnimationDetailContainer.js
devtools/client/inspector/animation/components/App.js
devtools/client/inspector/animation/components/moz.build
devtools/client/themes/animation.css
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;
 }