Bug 1416104 - Part 3: Implement header of animation detail pane. r=gl

MozReview-Commit-ID: BWFRp7YgXiY

--HG--
extra : rebase_source : 83400fd7fa188ca0ed698d25f8a90b82ecf176c7

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

@@ -4,17 +4,43 @@
 
 "use strict";
 
-const { PureComponent } = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+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 AnimationDetailHeader = createFactory(require("./AnimationDetailHeader"));
 
 class AnimationDetailContainer extends PureComponent {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+    };
+  }
+
   render() {
+    const { animation } = this.props;
+
     return dom.div(
       {
         className: "animation-detail-container"
-      }
+      },
+      animation ?
+      AnimationDetailHeader(
+        {
+          animation,
+        }
+      )
+      :
+      null
     );
   }
 }
 
-module.exports = AnimationDetailContainer;
+const mapStateToProps = state => {
+  return {
+    animation: state.animations.selectedAnimation,
+  };
+};
+
+module.exports = connect(mapStateToProps)(AnimationDetailContainer);

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

@@ -0,0 +1,32 @@
+/* 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");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const { getFormattedTitle } = require("../utils/l10n");
+
+class AnimationDetailHeader extends PureComponent {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const { animation } = this.props;
+
+    return dom.div(
+      {
+        className: "animation-detail-header devtools-toolbar",
+      },
+      getFormattedTitle(animation.state)
+    );
+  }
+}
+
+module.exports = AnimationDetailHeader;

devtools/client/inspector/animation/components/graph/SummaryGraph.js

@@ -13,7 +13,7 @@ const DelaySign = createFactory(require("./DelaySign"));
 const EndDelaySign = createFactory(require("./EndDelaySign"));
 const SummaryGraphPath = createFactory(require("./SummaryGraphPath"));
 
-const { getFormatStr, getStr, numberWithDecimals } = require("../../utils/l10n");
+const { getFormattedTitle, getFormatStr, getStr, numberWithDecimals } = require("../../utils/l10n");
 
 class SummaryGraph extends PureComponent {
   static get propTypes() {
@@ -188,29 +188,4 @@ class SummaryGraph extends PureComponent {
   }
 }
 
-/**
- * Get a formatted title for this animation. This will be either:
- * "%S", "%S : CSS Transition", "%S : CSS Animation",
- * "%S : Script Animation", or "Script Animation", depending
- * if the server provides the type, what type it is and if the animation
- * has a name.
- *
- * @param {Object} state
- */
-function getFormattedTitle(state) {
-  // Older servers don't send a type, and only know about
-  // CSSAnimations and CSSTransitions, so it's safe to use
-  // just the name.
-  if (!state.type) {
-    return state.name;
-  }
-
-  // Script-generated animations may not have a name.
-  if (state.type === "scriptanimation" && !state.name) {
-    return getStr("timeline.scriptanimation.unnamedLabel");
-  }
-
-  return getFormatStr(`timeline.${state.type}.nameLabel`, state.name);
-}
-
 module.exports = SummaryGraph;

devtools/client/inspector/animation/components/moz.build

@@ -8,6 +8,7 @@ DIRS += [
 
 DevToolsModules(
     'AnimationDetailContainer.js',
+    'AnimationDetailHeader.js',
     'AnimationItem.js',
     'AnimationList.js',
     'AnimationListContainer.js',

devtools/client/inspector/animation/utils/l10n.js

@@ -8,8 +8,34 @@ const { LocalizationHelper } = require("devtools/shared/l10n");
 const L10N =
   new LocalizationHelper("devtools/client/locales/animationinspector.properties");
 
+/**
+ * Get a formatted title for this animation. This will be either:
+ * "%S", "%S : CSS Transition", "%S : CSS Animation",
+ * "%S : Script Animation", or "Script Animation", depending
+ * if the server provides the type, what type it is and if the animation
+ * has a name.
+ *
+ * @param {Object} state
+ */
+function getFormattedTitle(state) {
+  // Older servers don't send a type, and only know about
+  // CSSAnimations and CSSTransitions, so it's safe to use
+  // just the name.
+  if (!state.type) {
+    return state.name;
+  }
+
+  // Script-generated animations may not have a name.
+  if (state.type === "scriptanimation" && !state.name) {
+    return L10N.getStr("timeline.scriptanimation.unnamedLabel");
+  }
+
+  return L10N.getFormatStr(`timeline.${state.type}.nameLabel`, state.name);
+}
+
 module.exports = {
   getFormatStr: (...args) => L10N.getFormatStr(...args),
+  getFormattedTitle,
   getStr: (...args) => L10N.getStr(...args),
   numberWithDecimals: (...args) => L10N.numberWithDecimals(...args),
 };

devtools/client/themes/animation.css

@@ -221,6 +221,15 @@
   text-anchor: end;
 }
 
+/* Animation Detail */
+.animation-detail-container {
+  width: 100%;
+}
+
+.animation-detail-header {
+  white-space: nowrap;
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;