Bug 1406285 - Part 12: Implement animation name label. r?gl
MozReview-Commit-ID: Ba2XG4nIYde
new file mode 100644
--- /dev/null
+++ b/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;
--- a/devtools/client/inspector/animation/components/graph/SummaryGraph.js
+++ b/devtools/client/inspector/animation/components/graph/SummaryGraph.js
@@ -3,16 +3,17 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
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 AnimationName = createFactory(require("./AnimationName"));
const DelaySign = createFactory(require("./DelaySign"));
const EndDelaySign = createFactory(require("./EndDelaySign"));
const SummaryGraphPath = createFactory(require("./SummaryGraphPath"));
class SummaryGraph extends PureComponent {
static get propTypes() {
return {
animation: PropTypes.object.isRequired,
@@ -51,14 +52,22 @@ class SummaryGraph extends PureComponent
animation.state.iterationCount && animation.state.endDelay ?
EndDelaySign(
{
animation,
timeScale,
}
)
:
+ null,
+ animation.state.name ?
+ AnimationName(
+ {
+ animation
+ }
+ )
+ :
null
);
}
}
module.exports = SummaryGraph;
--- a/devtools/client/inspector/animation/components/graph/moz.build
+++ b/devtools/client/inspector/animation/components/graph/moz.build
@@ -1,13 +1,14 @@
# 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/.
DevToolsModules(
+ 'AnimationName.js',
'ComputedTimingPath.js',
'DelaySign.js',
'EffectTimingPath.js',
'EndDelaySign.js',
'NegativeDelayPath.js',
'NegativeEndDelayPath.js',
'NegativePath.js',
'SummaryGraph.js',
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -161,16 +161,36 @@
right: -3px;
}
.animation-end-delay-sign.negative::before {
left: -3px;
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;
}
.animation-error-message > p {
white-space: pre;
}