Bug 1416104 - Part 1: Implement base. r=gl
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Fri, 19 Jan 2018 15:16:29 +0900
changeset 400036 f9ef5865484a02eb21e944f01e6370ecb3a37dd4
parent 400035 c897609672e6cd4953aa9c7856b9e46ad6af62e5
child 400037 4c29e8818f8e06dd00958003493254458ce5e1c3
push id99079
push userrgurzau@mozilla.com
push dateSat, 20 Jan 2018 09:46:52 +0000
treeherdermozilla-inbound@85824602b479 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1416104
milestone59.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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;