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,35 +61,38 @@ class App extends PureComponent {
         className: detailVisibility ? "animation-detail-visible" : "",
       },
       animations.length ?
-      SplitBox({
-        className: "animation-container-splitter",
-        endPanel: AnimationDetailContainer(
-          {
-            emitEventForTest,
-            getAnimatedPropertyMap,
-            getComputedStyle,
-            setDetailVisibility,
-            simulateAnimation,
-          }
-        ),
-        endPanelControl: true,
-        initialHeight: "50%",
-        splitterSize: 1,
-        startPanel: AnimationListContainer(
-          {
-            animations,
-            emitEventForTest,
-            getAnimatedPropertyMap,
-            getNodeFromActor,
-            onHideBoxModelHighlighter,
-            onShowBoxModelHighlighterForNode,
-            selectAnimation,
-            setSelectedNode,
-            simulateAnimation,
-          }
-        ),
-        vert: false,
-      })
+      [
+        AnimationToolbar(),
+        SplitBox({
+          className: "animation-container-splitter",
+          endPanel: AnimationDetailContainer(
+            {
+              emitEventForTest,
+              getAnimatedPropertyMap,
+              getComputedStyle,
+              setDetailVisibility,
+              simulateAnimation,
+            }
+          ),
+          endPanelControl: true,
+          initialHeight: "50%",
+          splitterSize: 1,
+          startPanel: AnimationListContainer(
+            {
+              animations,
+              emitEventForTest,
+              getAnimatedPropertyMap,
+              getNodeFromActor,
+              onHideBoxModelHighlighter,
+              onShowBoxModelHighlighterForNode,
+              selectAnimation,
+              setSelectedNode,
+              simulateAnimation,
+            }
+          ),
+          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;