Bug 1416104 - Part 8: Open detail pane when an animation was selected or number of displayed animation was one. r=gl
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Fri, 19 Jan 2018 16:40:33 +0900
changeset 400043 1622c88dee9a35ec7e320c132b2c0ad01a3018da
parent 400042 ff74c42691e20055b7e3430bb1de8e380b40de5b
child 400044 08b53d0a8765902b3cf7ccb66e66685096f53486
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 8: Open detail pane when an animation was selected or number of displayed animation was one. r=gl MozReview-Commit-ID: AMFpjjYdcxr
devtools/client/inspector/animation/animation.js
devtools/client/inspector/animation/components/AnimationItem.js
devtools/client/inspector/animation/components/App.js
devtools/client/inspector/animation/reducers/animations.js
devtools/client/themes/animation.css
--- a/devtools/client/inspector/animation/animation.js
+++ b/devtools/client/inspector/animation/animation.js
@@ -221,16 +221,18 @@ class AnimationInspector {
     const animations =
       selection.isConnected() && selection.isElementNode()
       ? await this.animationsFront.getAnimationPlayersForNode(selection.nodeFront)
       : [];
 
     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();
   }
 
   selectAnimation(animation) {
     this.inspector.store.dispatch(updateSelectedAnimation(animation));
   }
--- a/devtools/client/inspector/animation/components/AnimationItem.js
+++ b/devtools/client/inspector/animation/components/AnimationItem.js
@@ -34,18 +34,20 @@ class AnimationItem extends PureComponen
 
     this.state = {
       isSelected: false,
     };
   }
 
   componentWillReceiveProps(nextProps) {
     const { animation } = this.props;
+
     this.setState({
-      isSelected: animation.actorID === nextProps.selectedAnimation.actorID
+      isSelected: nextProps.selectedAnimation &&
+                  animation.actorID === nextProps.selectedAnimation.actorID
     });
   }
 
   shouldComponentUpdate(nextProps, nextState) {
     return this.state.isSelected !== nextState.isSelected ||
            this.props.animation !== nextProps.animation ||
            this.props.timeScale !== nextProps.timeScale;
   }
--- a/devtools/client/inspector/animation/components/App.js
+++ b/devtools/client/inspector/animation/components/App.js
@@ -13,16 +13,17 @@ const AnimationDetailContainer = createF
 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,
+      detailVisibility: PropTypes.bool.isRequired,
       emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
       getNodeFromActor: PropTypes.func.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       selectAnimation: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
       simulateAnimation: PropTypes.func.isRequired,
@@ -32,30 +33,32 @@ class App extends PureComponent {
 
   shouldComponentUpdate(nextProps, nextState) {
     return this.props.animations.length !== 0 || nextProps.animations.length !== 0;
   }
 
   render() {
     const {
       animations,
+      detailVisibility,
       emitEventForTest,
       getAnimatedPropertyMap,
       getNodeFromActor,
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       selectAnimation,
       setSelectedNode,
       simulateAnimation,
       toggleElementPicker,
     } = this.props;
 
     return dom.div(
       {
-        id: "animation-container"
+        id: "animation-container",
+        className: detailVisibility ? "animation-detail-visible" : "",
       },
       animations.length ?
       SplitBox({
         className: "animation-container-splitter",
         endPanel: AnimationDetailContainer(
           {
             getAnimatedPropertyMap,
           }
@@ -85,13 +88,14 @@ class App extends PureComponent {
         }
       )
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
-    animations: state.animations.animations
+    animations: state.animations.animations,
+    detailVisibility: state.animations.detailVisibility,
   };
 };
 
 module.exports = connect(mapStateToProps)(App);
--- a/devtools/client/inspector/animation/reducers/animations.js
+++ b/devtools/client/inspector/animation/reducers/animations.js
@@ -8,39 +8,43 @@ const {
   UPDATE_ANIMATIONS,
   UPDATE_ELEMENT_PICKER_ENABLED,
   UPDATE_SELECTED_ANIMATION,
   UPDATE_SIDEBAR_SIZE,
 } = require("../actions/index");
 
 const INITIAL_STATE = {
   animations: [],
+  detailVisibility: false,
   elementPickerEnabled: false,
   selectedAnimation: null,
   sidebarSize: {
     height: 0,
     width: 0,
   },
 };
 
 const reducers = {
   [UPDATE_ANIMATIONS](state, { animations }) {
     return Object.assign({}, state, {
-      animations
+      animations,
     });
   },
 
   [UPDATE_ELEMENT_PICKER_ENABLED](state, { elementPickerEnabled }) {
     return Object.assign({}, state, {
       elementPickerEnabled
     });
   },
 
   [UPDATE_SELECTED_ANIMATION](state, { selectedAnimation }) {
+    const detailVisibility = !!selectedAnimation;
+
     return Object.assign({}, state, {
+      detailVisibility,
       selectedAnimation
     });
   },
 
   [UPDATE_SIDEBAR_SIZE](state, { sidebarSize }) {
     return Object.assign({}, state, {
       sidebarSize
     });
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -24,16 +24,20 @@
 #animation-container {
   height: 100%;
 }
 
 #animation-container .uncontrolled {
   overflow: hidden;
 }
 
+#animation-container:not(.animation-detail-visible) .controlled {
+  display: none;
+}
+
 /* Animation List Container */
 .animation-list-container {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
   width: 100%;
 }