Bug 1416104 - Part 9: Add close button. r=gl

MozReview-Commit-ID: AMFpjjYdcxr

--HG--
extra : rebase_source : 743013b0c7d981bcdf868155ba2a0722bed8a864

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

@@ -6,6 +6,7 @@
 
 const {
   UPDATE_ANIMATIONS,
+  UPDATE_DETAIL_VISIBILITY,
   UPDATE_ELEMENT_PICKER_ENABLED,
   UPDATE_SELECTED_ANIMATION,
   UPDATE_SIDEBAR_SIZE
@@ -22,6 +23,16 @@ module.exports = {
     };
   },
 
+  /**
+   * Update visibility of detail pane.
+   */
+  updateDetailVisibility(detailVisibility) {
+    return {
+      type: UPDATE_DETAIL_VISIBILITY,
+      detailVisibility,
+    };
+  },
+
   /**
    * Update the state of element picker in animation inspector.
    */

devtools/client/inspector/animation/actions/index.js

@@ -11,6 +11,9 @@ createEnum([
   // Update the list of animation.
   "UPDATE_ANIMATIONS",
 
+  // Update visibility of detail pane.
+  "UPDATE_DETAIL_VISIBILITY",
+
   // Update state of the picker enabled.
   "UPDATE_ELEMENT_PICKER_ENABLED",
 

devtools/client/inspector/animation/animation.js

@@ -14,6 +14,7 @@ const App = createFactory(require("./components/App"));
 
 const {
   updateAnimations,
+  updateDetailVisibility,
   updateElementPickerEnabled,
   updateSelectedAnimation,
   updateSidebarSize
@@ -28,6 +29,7 @@ class AnimationInspector {
     this.getAnimatedPropertyMap = this.getAnimatedPropertyMap.bind(this);
     this.getNodeFromActor = this.getNodeFromActor.bind(this);
     this.selectAnimation = this.selectAnimation.bind(this);
+    this.setDetailVisibility = this.setDetailVisibility.bind(this);
     this.simulateAnimation = this.simulateAnimation.bind(this);
     this.toggleElementPicker = this.toggleElementPicker.bind(this);
     this.update = this.update.bind(this);
@@ -57,6 +59,7 @@ class AnimationInspector {
       getAnimatedPropertyMap,
       getNodeFromActor,
       selectAnimation,
+      setDetailVisibility,
       simulateAnimation,
       toggleElementPicker,
     } = this;
@@ -78,6 +81,7 @@ class AnimationInspector {
           onHideBoxModelHighlighter,
           onShowBoxModelHighlighterForNode,
           selectAnimation,
+          setDetailVisibility,
           setSelectedNode,
           simulateAnimation,
           toggleElementPicker,
@@ -237,6 +241,10 @@ class AnimationInspector {
     this.inspector.store.dispatch(updateSelectedAnimation(animation));
   }
 
+  setDetailVisibility(isVisible) {
+    this.inspector.store.dispatch(updateDetailVisibility(isVisible));
+  }
+
   onElementPickerStarted() {
     this.inspector.store.dispatch(updateElementPickerEnabled(true));
   }

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

@@ -18,6 +18,7 @@ class AnimationDetailContainer extends PureComponent {
     return {
       animation: PropTypes.object.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
+      setDetailVisibility: PropTypes.func.isRequired,
     };
   }
 
@@ -25,6 +26,7 @@ class AnimationDetailContainer extends PureComponent {
     const {
       animation,
       getAnimatedPropertyMap,
+      setDetailVisibility,
     } = this.props;
 
     return dom.div(
@@ -35,6 +37,7 @@ class AnimationDetailContainer extends PureComponent {
         AnimationDetailHeader(
           {
             animation,
+            setDetailVisibility,
           }
         )
       :

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

@@ -14,9 +14,15 @@ class AnimationDetailHeader extends PureComponent {
   static get propTypes() {
     return {
       animation: PropTypes.object.isRequired,
+      setDetailVisibility: PropTypes.func.isRequired,
     };
   }
 
+  onClick() {
+    const { setDetailVisibility } = this.props;
+    setDetailVisibility(false);
+  }
+
   render() {
     const { animation } = this.props;
 
@@ -24,7 +30,18 @@ class AnimationDetailHeader extends PureComponent {
       {
         className: "animation-detail-header devtools-toolbar",
       },
-      getFormattedTitle(animation.state)
+      dom.div(
+        {
+          className: "animation-detail-title",
+        },
+        getFormattedTitle(animation.state)
+      ),
+      dom.button(
+        {
+          className: "animation-detail-close-button devtools-button",
+          onClick: this.onClick.bind(this),
+        }
+      )
     );
   }
 }

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

@@ -25,6 +25,7 @@ class App extends PureComponent {
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       selectAnimation: PropTypes.func.isRequired,
+      setDetailVisibility: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
       simulateAnimation: PropTypes.func.isRequired,
       toggleElementPicker: PropTypes.func.isRequired,
@@ -45,6 +46,7 @@ class App extends PureComponent {
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       selectAnimation,
+      setDetailVisibility,
       setSelectedNode,
       simulateAnimation,
       toggleElementPicker,
@@ -61,6 +63,7 @@ class App extends PureComponent {
         endPanel: AnimationDetailContainer(
           {
             getAnimatedPropertyMap,
+            setDetailVisibility,
           }
         ),
         endPanelControl: true,

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

@@ -6,6 +6,7 @@
 
 const {
   UPDATE_ANIMATIONS,
+  UPDATE_DETAIL_VISIBILITY,
   UPDATE_ELEMENT_PICKER_ENABLED,
   UPDATE_SELECTED_ANIMATION,
   UPDATE_SIDEBAR_SIZE,
@@ -29,6 +30,12 @@ const reducers = {
     });
   },
 
+  [UPDATE_DETAIL_VISIBILITY](state, { detailVisibility }) {
+    return Object.assign({}, state, {
+      detailVisibility
+    });
+  },
+
   [UPDATE_ELEMENT_PICKER_ENABLED](state, { elementPickerEnabled }) {
     return Object.assign({}, state, {
       elementPickerEnabled

devtools/client/themes/animation.css

@@ -240,9 +240,18 @@
 }
 
 .animation-detail-header {
+  display: flex;
+}
+
+.animation-detail-title {
+  flex: 1;
   white-space: nowrap;
 }
 
+.animation-detail-close-button::before {
+  background-image: url(chrome://devtools/skin/images/close.svg);
+}
+
 /* Animated Property List Container */
 .animated-property-list-container {
   display: flex;