Bug 1406287 - Part 1: Implement basic layout. r=gl

MozReview-Commit-ID: KAe8uupfQ3z

--HG--
extra : rebase_source : e10cb17e0f46f6ade5995eddd1a97cbfea9f40d6

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

@@ -0,0 +1,37 @@
+/* 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, DOM: dom, PropTypes, PureComponent } =
+  require("devtools/client/shared/vendor/react");
+
+const AnimationList = createFactory(require("./AnimationList"));
+const AnimationListHeader = createFactory(require("./AnimationListHeader"));
+
+class AnimationListContainer extends PureComponent {
+  static get propTypes() {
+    return {
+      animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+    };
+  }
+
+  render() {
+    const { animations } = this.props;
+
+    return dom.div(
+      {
+        className: "animation-list-container"
+      },
+      AnimationListHeader(),
+      AnimationList(
+        {
+          animations
+        }
+      )
+    );
+  }
+}
+
+module.exports = AnimationListContainer;

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

@@ -0,0 +1,23 @@
+/* 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, DOM: dom, PureComponent } =
+  require("devtools/client/shared/vendor/react");
+
+const AnimationTimelineTickList = createFactory(require("./AnimationTimelineTickList"));
+
+class AnimationListHeader extends PureComponent {
+  render() {
+    return dom.div(
+      {
+        className: "animation-list-header devtools-toolbar"
+      },
+      AnimationTimelineTickList()
+    );
+  }
+}
+
+module.exports = AnimationListHeader;

devtools/client/inspector/animation/components/AnimationTimelineTickList.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 { DOM: dom, PureComponent } =
+  require("devtools/client/shared/vendor/react");
+
+class AnimationTimelineTickList extends PureComponent {
+  render() {
+    return dom.div(
+      {
+        className: "animation-timeline-tick-list"
+      }
+    );
+  }
+}
+
+module.exports = AnimationTimelineTickList;

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

@@ -8,7 +8,7 @@ const { createFactory, DOM: dom, PropTypes, PureComponent } =
   require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 
-const AnimationList = createFactory(require("./AnimationList"));
+const AnimationListContainer = createFactory(require("./AnimationListContainer"));
 const NoAnimationPanel = createFactory(require("./NoAnimationPanel"));
 
 class App extends PureComponent {
@@ -30,13 +30,14 @@ class App extends PureComponent {
       {
         id: "animation-container"
       },
-      animations.length
-      ? AnimationList(
+      animations.length ?
+      AnimationListContainer(
         {
           animations
         }
       )
-      : NoAnimationPanel(
+      :
+      NoAnimationPanel(
         {
           toggleElementPicker
         }

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

@@ -5,6 +5,9 @@
 DevToolsModules(
     'AnimationItem.js',
     'AnimationList.js',
+    'AnimationListContainer.js',
+    'AnimationListHeader.js',
+    'AnimationTimelineTickList.js',
     'App.js',
     'NoAnimationPanel.js'
 )

devtools/client/themes/animation.css

@@ -17,6 +17,17 @@
   --command-pick-image: url(chrome://devtools/skin/images/firebug/command-pick.svg);
 }
 
+/* Settings for animation-list-header */
+.animation-list-header {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.animation-timeline-tick-list {
+  margin-right: 10px;
+  width: calc(100% - 210px);
+}
+
 /* Settings for animations element */
 .animation-list {
   list-style-type: none;