Bug 1416104 - Part 4: Implement base of animated property list. r=gl

MozReview-Commit-ID: 8HOajYo3WKr

--HG--
extra : rebase_source : e9d5106648b16207e8c686c8b9ed5065ee94759d

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;

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;

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;

devtools/client/inspector/animation/components/AnimationDetailContainer.js

@@ -10,6 +10,8 @@ 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() {
@@ -26,13 +28,17 @@ class AnimationDetailContainer extends PureComponent {
         className: "animation-detail-container"
       },
       animation ?
-      AnimationDetailHeader(
-        {
-          animation,
-        }
-      )
+        AnimationDetailHeader(
+          {
+            animation,
+          }
+        )
       :
-      null
+        null,
+      animation ?
+        AnimatedPropertyListContainer()
+      :
+        null
     );
   }
 }

devtools/client/inspector/animation/components/moz.build

@@ -7,6 +7,9 @@ DIRS += [
 ]
 
 DevToolsModules(
+    'AnimatedPropertyList.js',
+    'AnimatedPropertyListContainer.js',
+    'AnimatedPropertyListHeader.js',
     'AnimationDetailContainer.js',
     'AnimationDetailHeader.js',
     'AnimationItem.js',