Bug 1406285 - Part 12: Implement animation name label. r=gl

MozReview-Commit-ID: Ba2XG4nIYde

--HG--
extra : rebase_source : 32da6e5d905e31ea4dcfa869f0c5e1f830b5fafd

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

@@ -0,0 +1,38 @@
+/* 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");
+
+class AnimationName extends PureComponent {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      animation,
+    } = this.props;
+
+    return dom.svg(
+      {
+        className: "animation-name",
+      },
+      dom.text(
+        {
+          y: "50%",
+          x: "100%"
+        },
+        animation.state.name
+      )
+    );
+  }
+}
+
+module.exports = AnimationName;

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

@@ -8,6 +8,7 @@ const { createFactory, PureComponent } = require("devtools/client/shared/vendor/
 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"));
@@ -56,6 +57,14 @@ class SummaryGraph extends PureComponent {
           }
         )
       :
+      null,
+      animation.state.name ?
+        AnimationName(
+          {
+            animation
+          }
+        )
+      :
       null
     );
   }

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

@@ -3,6 +3,7 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
+    'AnimationName.js',
     'ComputedTimingPath.js',
     'DelaySign.js',
     'EffectTimingPath.js',

devtools/client/themes/animation.css

@@ -166,6 +166,26 @@
   right: unset;
 }
 
+.animation-name {
+  height: 100%;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: calc(100% - 20px);
+}
+
+.animation-name text {
+  dominant-baseline: middle;
+  fill: var(--theme-focus-outline-color);
+  paint-order: stroke;
+  stroke: var(--theme-body-background);
+  stroke-linejoin: round;
+  stroke-opacity: .5;
+  stroke-width: 4;
+  text-anchor: end;
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;