Bug 1416104 - Part 5: Implement animated property list header. r?gl
MozReview-Commit-ID: 4d757OvWLBj
--- a/devtools/client/inspector/animation/components/AnimatedPropertyListHeader.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyListHeader.js
@@ -1,20 +1,23 @@
/* 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 { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const KeyframesProgressTickList = createFactory(require("./KeyframesProgressTickList"));
+
class AnimatedPropertyListHeader extends PureComponent {
render() {
return dom.div(
{
- className: "animated-property-list-header"
- }
+ className: "animated-property-list-header devtools-toolbar"
+ },
+ KeyframesProgressTickList()
);
}
}
module.exports = AnimatedPropertyListHeader;
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/KeyframesProgressTickItem.js
@@ -0,0 +1,37 @@
+/* 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 PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+
+class KeyframesProgressTickItem extends PureComponent {
+ static get propTypes() {
+ return {
+ direction: PropTypes.string.isRequired,
+ position: PropTypes.number.isRequired,
+ progressTickLabel: PropTypes.string.isRequired,
+ };
+ }
+
+ render() {
+ const {
+ direction,
+ position,
+ progressTickLabel,
+ } = this.props;
+
+ return dom.div(
+ {
+ className: `keyframes-progress-tick-item ${ direction }`,
+ style: { [direction]: `${ position }%` }
+ },
+ progressTickLabel
+ );
+ }
+}
+
+module.exports = KeyframesProgressTickItem;
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/KeyframesProgressTickList.js
@@ -0,0 +1,37 @@
+/* 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 { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+
+const KeyframesProgressTickItem = createFactory(require("./KeyframesProgressTickItem"));
+const { getFormatStr } = require("../utils/l10n");
+
+class KeyframesProgressTickList extends PureComponent {
+ render() {
+ return dom.div(
+ {
+ className: "keyframes-progress-tick-list"
+ },
+ [0, 50, 100].map(progress => {
+ const direction = progress === 100 ? "right" : "left";
+ const position = progress === 100 ? 0 : progress;
+ const progressTickLabel =
+ getFormatStr("detail.propertiesHeader.percentage", progress);
+
+ return KeyframesProgressTickItem(
+ {
+ direction,
+ position,
+ progressTickLabel,
+ }
+ );
+ })
+ );
+ }
+}
+
+module.exports = KeyframesProgressTickList;
--- a/devtools/client/inspector/animation/components/moz.build
+++ b/devtools/client/inspector/animation/components/moz.build
@@ -15,10 +15,12 @@ DevToolsModules(
'AnimationItem.js',
'AnimationList.js',
'AnimationListContainer.js',
'AnimationListHeader.js',
'AnimationTarget.js',
'AnimationTimelineTickItem.js',
'AnimationTimelineTickList.js',
'App.js',
+ 'KeyframesProgressTickItem.js',
+ 'KeyframesProgressTickList.js',
'NoAnimationPanel.js',
)
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -4,16 +4,17 @@
/* Animation-inspector specific theme variables */
:root {
--animation-even-background-color: rgba(0, 0, 0, 0.05);
--command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
--graph-right-offset: 10px;
--sidebar-width: 200px;
+ --tick-line-style: 0.5px solid rgba(128, 136, 144, 0.5);
}
:root.theme-dark {
--animation-even-background-color: rgba(255, 255, 255, 0.05);
}
:root.theme-firebug {
--command-pick-image: url(chrome://devtools/skin/images/firebug/command-pick.svg);
@@ -43,17 +44,17 @@
/* Animation Timeline Tick List */
.animation-timeline-tick-list {
margin-right: var(--graph-right-offset);
position: relative;
width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
}
.animation-timeline-tick-item {
- border-left: 0.5px solid rgba(128, 136, 144, .5);
+ border-left: var(--tick-line-style);
height: 100vh;
position: absolute;
}
/* Animation List */
.animation-list {
flex: 1;
list-style-type: none;
@@ -225,16 +226,43 @@
.animation-detail-container {
width: 100%;
}
.animation-detail-header {
white-space: nowrap;
}
+/* Animated Property List Header */
+.animated-property-list-header {
+ display: flex;
+ justify-content: flex-end;
+ padding: 0;
+}
+
+/* Keyframes Progress Tick List */
+.keyframes-progress-tick-list {
+ margin-right: var(--graph-right-offset);
+ position: relative;
+ width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
+}
+
+.keyframes-progress-tick-item {
+ height: 100vh;
+ position: absolute;
+}
+
+.keyframes-progress-tick-item.left {
+ border-left: var(--tick-line-style);
+}
+
+.keyframes-progress-tick-item.right {
+ border-right: var(--tick-line-style);
+}
+
/* No Animation Panel */
.animation-error-message {
overflow: auto;
}
.animation-error-message > p {
white-space: pre;
}