Bug 1431573 - Part 1: Implement base of animation toolbar. r=gl

MozReview-Commit-ID: 29257Nvq6Z

devtools/client/inspector/animation/components/AnimationToolbar.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 AnimationToolbar extends PureComponent {
+  render() {
+    return dom.div(
+      {
+        className: "animation-toolbar devtools-toolbar",
+      }
+    );
+  }
+}
+
+module.exports = AnimationToolbar;

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

@@ -11,6 +11,7 @@ const { connect } = require("devtools/client/shared/vendor/react-redux");
 
 const AnimationDetailContainer = createFactory(require("./AnimationDetailContainer"));
 const AnimationListContainer = createFactory(require("./AnimationListContainer"));
+const AnimationToolbar = createFactory(require("./AnimationToolbar"));
 const NoAnimationPanel = createFactory(require("./NoAnimationPanel"));
 const SplitBox = createFactory(require("devtools/client/shared/components/splitter/SplitBox"));
 
@@ -60,6 +61,8 @@ class App extends PureComponent {
         className: detailVisibility ? "animation-detail-visible" : "",
       },
       animations.length ?
+      [
+        AnimationToolbar(),
         SplitBox({
           className: "animation-container-splitter",
           endPanel: AnimationDetailContainer(
@@ -89,6 +92,7 @@ class App extends PureComponent {
           ),
           vert: false,
         })
+      ]
       :
       NoAnimationPanel(
         {

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

@@ -22,6 +22,7 @@ DevToolsModules(
     'AnimationTarget.js',
     'AnimationTimelineTickItem.js',
     'AnimationTimelineTickList.js',
+    'AnimationToolbar.js',
     'App.js',
     'KeyframesProgressTickItem.js',
     'KeyframesProgressTickList.js',

devtools/client/themes/animation.css

@@ -31,6 +31,8 @@
 
 /* Root element of animation inspector */
 #animation-container {
+  display: flex;
+  flex-direction: column;
   height: 100%;
 }
 
@@ -42,6 +44,10 @@
   display: none;
 }
 
+#animation-container .animation-container-splitter {
+  overflow: auto;
+}
+
 /* Animation List Container */
 .animation-list-container {
   display: flex;