summaryrefslogtreecommitdiffstats
path: root/devtools/client/animationinspector/components/keyframes.js
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /devtools/client/animationinspector/components/keyframes.js
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'devtools/client/animationinspector/components/keyframes.js')
-rw-r--r--devtools/client/animationinspector/components/keyframes.js81
1 files changed, 81 insertions, 0 deletions
diff --git a/devtools/client/animationinspector/components/keyframes.js b/devtools/client/animationinspector/components/keyframes.js
new file mode 100644
index 000000000..a017935a3
--- /dev/null
+++ b/devtools/client/animationinspector/components/keyframes.js
@@ -0,0 +1,81 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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 EventEmitter = require("devtools/shared/event-emitter");
+const {createNode} = require("devtools/client/animationinspector/utils");
+
+/**
+ * UI component responsible for displaying a list of keyframes.
+ */
+function Keyframes() {
+ EventEmitter.decorate(this);
+ this.onClick = this.onClick.bind(this);
+}
+
+exports.Keyframes = Keyframes;
+
+Keyframes.prototype = {
+ init: function (containerEl) {
+ this.containerEl = containerEl;
+
+ this.keyframesEl = createNode({
+ parent: this.containerEl,
+ attributes: {"class": "keyframes"}
+ });
+
+ this.containerEl.addEventListener("click", this.onClick);
+ },
+
+ destroy: function () {
+ this.containerEl.removeEventListener("click", this.onClick);
+ this.keyframesEl.remove();
+ this.containerEl = this.keyframesEl = this.animation = null;
+ },
+
+ render: function ({keyframes, propertyName, animation}) {
+ this.keyframes = keyframes;
+ this.propertyName = propertyName;
+ this.animation = animation;
+
+ let iterationStartOffset =
+ animation.state.iterationStart % 1 == 0
+ ? 0
+ : 1 - animation.state.iterationStart % 1;
+
+ this.keyframesEl.classList.add(animation.state.type);
+ for (let frame of this.keyframes) {
+ let offset = frame.offset + iterationStartOffset;
+ createNode({
+ parent: this.keyframesEl,
+ attributes: {
+ "class": "frame",
+ "style": `left:${offset * 100}%;`,
+ "data-offset": frame.offset,
+ "data-property": propertyName,
+ "title": frame.value
+ }
+ });
+ }
+ },
+
+ onClick: function (e) {
+ // If the click happened on a frame, tell our parent about it.
+ if (!e.target.classList.contains("frame")) {
+ return;
+ }
+
+ e.stopPropagation();
+ this.emit("frame-selected", {
+ animation: this.animation,
+ propertyName: this.propertyName,
+ offset: parseFloat(e.target.dataset.offset),
+ value: e.target.getAttribute("title"),
+ x: e.target.offsetLeft + e.target.closest(".frames").offsetLeft
+ });
+ }
+};