Bug 1416104 - Part 8: Open detail pane when an animation was selected or number of displayed animation was one. r=gl

MozReview-Commit-ID: AMFpjjYdcxr

--HG--
extra : rebase_source : 842bc509149bf7e7e1a754eb415f578ae7d8e800

devtools/client/inspector/animation/animation.js

@@ -226,6 +226,8 @@ class AnimationInspector {
     if (!this.animations || !isAllAnimationEqual(animations, this.animations)) {
       this.inspector.store.dispatch(updateAnimations(animations));
       this.animations = animations;
+      // If number of displayed animations is one, we select the animation automatically.
+      this.selectAnimation(animations.length === 1 ? animations[0] : null);
     }
 
     done();

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

@@ -39,8 +39,10 @@ class AnimationItem extends PureComponent {
 
   componentWillReceiveProps(nextProps) {
     const { animation } = this.props;
+
     this.setState({
-      isSelected: animation.actorID === nextProps.selectedAnimation.actorID
+      isSelected: nextProps.selectedAnimation &&
+                  animation.actorID === nextProps.selectedAnimation.actorID
     });
   }
 

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

@@ -18,6 +18,7 @@ class App extends PureComponent {
   static get propTypes() {
     return {
       animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+      detailVisibility: PropTypes.bool.isRequired,
       emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
       getNodeFromActor: PropTypes.func.isRequired,
@@ -37,6 +38,7 @@ class App extends PureComponent {
   render() {
     const {
       animations,
+      detailVisibility,
       emitEventForTest,
       getAnimatedPropertyMap,
       getNodeFromActor,
@@ -50,7 +52,8 @@ class App extends PureComponent {
 
     return dom.div(
       {
-        id: "animation-container"
+        id: "animation-container",
+        className: detailVisibility ? "animation-detail-visible" : "",
       },
       animations.length ?
       SplitBox({
@@ -90,7 +93,8 @@ class App extends PureComponent {
 
 const mapStateToProps = state => {
   return {
-    animations: state.animations.animations
+    animations: state.animations.animations,
+    detailVisibility: state.animations.detailVisibility,
   };
 };
 

devtools/client/inspector/animation/reducers/animations.js

@@ -13,6 +13,7 @@ const {
 
 const INITIAL_STATE = {
   animations: [],
+  detailVisibility: false,
   elementPickerEnabled: false,
   selectedAnimation: null,
   sidebarSize: {
@@ -24,7 +25,7 @@ const INITIAL_STATE = {
 const reducers = {
   [UPDATE_ANIMATIONS](state, { animations }) {
     return Object.assign({}, state, {
-      animations
+      animations,
     });
   },
 
@@ -35,7 +36,10 @@ const reducers = {
   },
 
   [UPDATE_SELECTED_ANIMATION](state, { selectedAnimation }) {
+    const detailVisibility = !!selectedAnimation;
+
     return Object.assign({}, state, {
+      detailVisibility,
       selectedAnimation
     });
   },

devtools/client/themes/animation.css

@@ -29,6 +29,10 @@
   overflow: hidden;
 }
 
+#animation-container:not(.animation-detail-visible) .controlled {
+  display: none;
+}
+
 /* Animation List Container */
 .animation-list-container {
   display: flex;