Bug 1416104 - Part 6: Implement keyframes list. r=gl
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Fri, 19 Jan 2018 15:21:15 +0900
changeset 454328 37439dceeaaf2e62c6bb10d76a6299c1a36e4211
parent 454327 ad217aa1cc46a058a668d949a6a7895659c2ed74
child 454329 ff74c42691e20055b7e3430bb1de8e380b40de5b
push id1648
push usermtabara@mozilla.com
push dateThu, 01 Mar 2018 12:45:47 +0000
treeherdermozilla-release@cbb9688c2eeb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1416104
milestone59.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 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;
 }