Bug 1416104 - Part 1: Implement base. r?gl draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Fri, 19 Jan 2018 15:16:29 +0900
changeset 722536 7fe774d5d7db6db1d480acce287c2609e25cdfc5
parent 722535 46ddb3a35f7966d8653c48bd019b6299a02ca4d9
child 722537 c2832735edb042b841ea80e529ad7b82909122c4
push id96167
push userbmo:dakatsuka@mozilla.com
push dateFri, 19 Jan 2018 07:35:17 +0000
reviewersgl
bugs1416104
milestone59.0a1
Bug 1416104 - Part 1: Implement base. r?gl MozReview-Commit-ID: 2Cdb3hFvSu0
devtools/client/inspector/animation/components/AnimationDetailContainer.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/AnimationDetailContainer.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 AnimationDetailContainer extends PureComponent {
+  render() {
+    return dom.div(
+      {
+        className: "animation-detail-container"
+      }
+    );
+  }
+}
+
+module.exports = AnimationDetailContainer;
--- a/devtools/client/inspector/animation/components/App.js
+++ b/devtools/client/inspector/animation/components/App.js
@@ -4,18 +4,20 @@
 
 "use strict";
 
 const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 
+const AnimationDetailContainer = createFactory(require("./AnimationDetailContainer"));
 const AnimationListContainer = createFactory(require("./AnimationListContainer"));
 const NoAnimationPanel = createFactory(require("./NoAnimationPanel"));
+const SplitBox = createFactory(require("devtools/client/shared/components/splitter/SplitBox"));
 
 class App extends PureComponent {
   static get propTypes() {
     return {
       animations: PropTypes.arrayOf(PropTypes.object).isRequired,
       emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
       getNodeFromActor: PropTypes.func.isRequired,
@@ -44,28 +46,36 @@ class App extends PureComponent {
       toggleElementPicker,
     } = this.props;
 
     return dom.div(
       {
         id: "animation-container"
       },
       animations.length ?
-      AnimationListContainer(
-        {
-          animations,
-          emitEventForTest,
-          getAnimatedPropertyMap,
-          getNodeFromActor,
-          onHideBoxModelHighlighter,
-          onShowBoxModelHighlighterForNode,
-          setSelectedNode,
-          simulateAnimation,
-        }
-      )
+      SplitBox({
+        className: "animation-container-splitter",
+        endPanel: AnimationDetailContainer(),
+        endPanelControl: true,
+        initialHeight: "50%",
+        splitterSize: 1,
+        startPanel: AnimationListContainer(
+          {
+            animations,
+            emitEventForTest,
+            getAnimatedPropertyMap,
+            getNodeFromActor,
+            onHideBoxModelHighlighter,
+            onShowBoxModelHighlighterForNode,
+            setSelectedNode,
+            simulateAnimation,
+          }
+        ),
+        vert: false,
+      })
       :
       NoAnimationPanel(
         {
           toggleElementPicker
         }
       )
     );
   }
--- a/devtools/client/inspector/animation/components/moz.build
+++ b/devtools/client/inspector/animation/components/moz.build
@@ -2,16 +2,17 @@
 # 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/.
 
 DIRS += [
     'graph'
 ]
 
 DevToolsModules(
+    'AnimationDetailContainer.js',
     'AnimationItem.js',
     'AnimationList.js',
     'AnimationListContainer.js',
     'AnimationListHeader.js',
     'AnimationTarget.js',
     'AnimationTimelineTickItem.js',
     'AnimationTimelineTickList.js',
     'App.js',
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -24,16 +24,18 @@
   height: 100%;
 }
 
 /* Animation List Container */
 .animation-list-container {
   display: flex;
   flex-direction: column;
   height: 100%;
+  overflow: hidden;
+  width: 100%;
 }
 
 /* Animation List Header */
 .animation-list-header {
   display: flex;
   justify-content: flex-end;
   padding: 0;
 }
@@ -50,17 +52,17 @@
   height: 100vh;
   position: absolute;
 }
 
 /* Animation List */
 .animation-list {
   flex: 1;
   list-style-type: none;
-  margin-top: 0;
+  margin: 0;
   overflow: auto;
   padding: 0;
 }
 
 /* Animation Item */
 .animation-item {
   display: flex;
   height: 30px;