--- a/devtools/client/inspector/animation/components/AnimationDetailContainer.js
+++ b/devtools/client/inspector/animation/components/AnimationDetailContainer.js
@@ -1,20 +1,46 @@
 /* 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 { 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);

new file mode 100644
--- /dev/null
+++ b/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;

--- a/devtools/client/inspector/animation/components/graph/SummaryGraph.js
+++ b/devtools/client/inspector/animation/components/graph/SummaryGraph.js
@@ -8,17 +8,17 @@ const { createFactory, PureComponent } =
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const AnimationName = createFactory(require("./AnimationName"));
 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() {
     return {
       animation: PropTypes.object.isRequired,
       emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
       selectAnimation: PropTypes.func.isRequired,
@@ -183,34 +183,9 @@ class SummaryGraph extends PureComponent
           }
         )
       :
       null
     );
   }
 }
 
-/**
- * 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;

--- a/devtools/client/inspector/animation/components/moz.build
+++ b/devtools/client/inspector/animation/components/moz.build
@@ -3,16 +3,17 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DIRS += [
     'graph'
 ]
 
 DevToolsModules(
     'AnimationDetailContainer.js',
+    'AnimationDetailHeader.js',
     'AnimationItem.js',
     'AnimationList.js',
     'AnimationListContainer.js',
     'AnimationListHeader.js',
     'AnimationTarget.js',
     'AnimationTimelineTickItem.js',
     'AnimationTimelineTickList.js',
     'App.js',

--- a/devtools/client/inspector/animation/utils/l10n.js
+++ b/devtools/client/inspector/animation/utils/l10n.js
@@ -3,13 +3,39 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 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),
 };

--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -216,16 +216,25 @@
   paint-order: stroke;
   stroke: var(--theme-body-background);
   stroke-linejoin: round;
   stroke-opacity: .5;
   stroke-width: 4;
   text-anchor: end;
 }
 
+/* Animation Detail */
+.animation-detail-container {
+  width: 100%;
+}
+
+.animation-detail-header {
+  white-space: nowrap;
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;
 }
 
 .animation-error-message > p {
   white-space: pre;
 }