Bug 1416104 - Part 4: Implement base of animated property list. r=gl
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Fri, 19 Jan 2018 15:20:23 +0900
changeset 454326 31525f892e0220d9e747c94e29de6a048e90181e
parent 454325 cd6a207773cffa652d9b2a221ab2994f9686bd22
child 454327 ad217aa1cc46a058a668d949a6a7895659c2ed74
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 4: Implement base of animated property list. r=gl MozReview-Commit-ID: 8HOajYo3WKr
devtools/client/inspector/animation/components/AnimatedPropertyList.js
devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
devtools/client/inspector/animation/components/AnimatedPropertyListHeader.js
devtools/client/inspector/animation/components/AnimationDetailContainer.js
devtools/client/inspector/animation/components/moz.build
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyList.js
@@ -0,0 +1,20 @@
+/* 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");
+
+class AnimatedPropertyList extends PureComponent {
+  render() {
+    return dom.ul(
+      {
+        className: "animated-property-list"
+      }
+    );
+  }
+}
+
+module.exports = AnimatedPropertyList;
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
@@ -0,0 +1,25 @@
+/* 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 AnimatedPropertyList = createFactory(require("./AnimatedPropertyList"));
+const AnimatedPropertyListHeader = createFactory(require("./AnimatedPropertyListHeader"));
+
+class AnimatedPropertyListContainer extends PureComponent {
+  render() {
+    return dom.div(
+      {
+        className: "animated-property-list-container"
+      },
+      AnimatedPropertyListHeader(),
+      AnimatedPropertyList()
+    );
+  }
+}
+
+module.exports = AnimatedPropertyListContainer;
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyListHeader.js
@@ -0,0 +1,20 @@
+/* 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");
+
+class AnimatedPropertyListHeader extends PureComponent {
+  render() {
+    return dom.div(
+      {
+        className: "animated-property-list-header"
+      }
+    );
+  }
+}
+
+module.exports = AnimatedPropertyListHeader;
--- a/devtools/client/inspector/animation/components/AnimationDetailContainer.js
+++ b/devtools/client/inspector/animation/components/AnimationDetailContainer.js
@@ -5,39 +5,45 @@
 "use strict";
 
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 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 AnimationDetailHeader = createFactory(require("./AnimationDetailHeader"));
+const AnimatedPropertyListContainer =
+  createFactory(require("./AnimatedPropertyListContainer"));
 
 class AnimationDetailContainer extends PureComponent {
   static get propTypes() {
     return {
       animation: PropTypes.object.isRequired,
     };
   }
 
   render() {
     const { animation } = this.props;
 
     return dom.div(
       {
         className: "animation-detail-container"
       },
       animation ?
-      AnimationDetailHeader(
-        {
-          animation,
-        }
-      )
+        AnimationDetailHeader(
+          {
+            animation,
+          }
+        )
       :
-      null
+        null,
+      animation ?
+        AnimatedPropertyListContainer()
+      :
+        null
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
     animation: state.animations.selectedAnimation,
   };
--- a/devtools/client/inspector/animation/components/moz.build
+++ b/devtools/client/inspector/animation/components/moz.build
@@ -2,16 +2,19 @@
 # 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(
+    'AnimatedPropertyList.js',
+    'AnimatedPropertyListContainer.js',
+    'AnimatedPropertyListHeader.js',
     'AnimationDetailContainer.js',
     'AnimationDetailHeader.js',
     'AnimationItem.js',
     'AnimationList.js',
     'AnimationListContainer.js',
     'AnimationListHeader.js',
     'AnimationTarget.js',
     'AnimationTimelineTickItem.js',