Bug 1406287 - Part 1: Implement basic layout. r?gl draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Mon, 13 Nov 2017 16:41:04 +0900
changeset 697014 f1e54c2f6496d9be6377de3f44f6b10b1b2b1c6c
parent 693376 179dae92e4d794e7f45ad080ff01908c80691f31
child 697015 c86a160ef96269d0b50973995f4dbb7f9d2a1fec
push id88864
push userbmo:dakatsuka@mozilla.com
push dateMon, 13 Nov 2017 08:47:24 +0000
reviewersgl
bugs1406287
milestone58.0a1
Bug 1406287 - Part 1: Implement basic layout. r?gl MozReview-Commit-ID: KAe8uupfQ3z
devtools/client/inspector/animation/components/AnimationListContainer.js
devtools/client/inspector/animation/components/AnimationListHeader.js
devtools/client/inspector/animation/components/AnimationTimelineTickList.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/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;
new file mode 100644
--- /dev/null
+++ b/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;
new file mode 100644
--- /dev/null
+++ b/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;
--- a/devtools/client/inspector/animation/components/App.js
+++ b/devtools/client/inspector/animation/components/App.js
@@ -3,17 +3,17 @@
  * 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 { 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 {
   static get propTypes() {
     return {
       animations: PropTypes.arrayOf(PropTypes.object).isRequired,
       toggleElementPicker: PropTypes.func.isRequired,
     };
@@ -25,23 +25,24 @@ class App extends PureComponent {
 
   render() {
     const { animations, toggleElementPicker } = this.props;
 
     return dom.div(
       {
         id: "animation-container"
       },
-      animations.length
-      ? AnimationList(
+      animations.length ?
+      AnimationListContainer(
         {
           animations
         }
       )
-      : NoAnimationPanel(
+      :
+      NoAnimationPanel(
         {
           toggleElementPicker
         }
       )
     );
   }
 }
 
--- a/devtools/client/inspector/animation/components/moz.build
+++ b/devtools/client/inspector/animation/components/moz.build
@@ -1,10 +1,13 @@
 # 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/.
 
 DevToolsModules(
     'AnimationItem.js',
     'AnimationList.js',
+    'AnimationListContainer.js',
+    'AnimationListHeader.js',
+    'AnimationTimelineTickList.js',
     'App.js',
     'NoAnimationPanel.js'
 )
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -12,16 +12,27 @@
 :root.theme-dark {
   --animation-even-background-color: rgba(255,255,255,0.05);
 }
 
 :root.theme-firebug {
   --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;
   margin-top: 0;
   padding: 0;
 }
 
 /* Settings for each animation element */