Bug 1406287 - Part 1: Implement basic layout. r?gl
MozReview-Commit-ID: KAe8uupfQ3z
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimationListContainer.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, DOM: dom, PropTypes, PureComponent } =
+ require("devtools/client/shared/vendor/react");
+
+const AnimationList = createFactory(require("./AnimationList"));
+const AnimationListHeader = createFactory(require("./AnimationListHeader"));
+
+class AnimationListContainer extends PureComponent {
+ static get propTypes() {
+ return {
+ animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+ };
+ }
+
+ render() {
+ const { animations } = this.props;
+
+ return dom.div(
+ {
+ className: "animation-list-container"
+ },
+ AnimationListHeader(),
+ AnimationList(
+ {
+ animations
+ }
+ )
+ );
+ }
+}
+
+module.exports = AnimationListContainer;
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimationListHeader.js
@@ -0,0 +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 { createFactory, DOM: dom, PureComponent } =
+ require("devtools/client/shared/vendor/react");
+
+const AnimationTimelineTickList = createFactory(require("./AnimationTimelineTickList"));
+
+class AnimationListHeader extends PureComponent {
+ render() {
+ return dom.div(
+ {
+ className: "animation-list-header devtools-toolbar"
+ },
+ AnimationTimelineTickList()
+ );
+ }
+}
+
+module.exports = AnimationListHeader;
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimationTimelineTickList.js
@@ -0,0 +1,20 @@
+/* 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 { DOM: dom, PureComponent } =
+ require("devtools/client/shared/vendor/react");
+
+class AnimationTimelineTickList extends PureComponent {
+ render() {
+ return dom.div(
+ {
+ className: "animation-timeline-tick-list"
+ }
+ );
+ }
+}
+
+module.exports = AnimationTimelineTickList;
--- a/devtools/client/inspector/animation/components/App.js
+++ b/devtools/client/inspector/animation/components/App.js
@@ -3,17 +3,17 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const { createFactory, DOM: dom, PropTypes, PureComponent } =
require("devtools/client/shared/vendor/react");
const { connect } = require("devtools/client/shared/vendor/react-redux");
-const AnimationList = createFactory(require("./AnimationList"));
+const AnimationListContainer = createFactory(require("./AnimationListContainer"));
const NoAnimationPanel = createFactory(require("./NoAnimationPanel"));
class App extends PureComponent {
static get propTypes() {
return {
animations: PropTypes.arrayOf(PropTypes.object).isRequired,
toggleElementPicker: PropTypes.func.isRequired,
};
@@ -25,23 +25,24 @@ class App extends PureComponent {
render() {
const { animations, toggleElementPicker } = this.props;
return dom.div(
{
id: "animation-container"
},
- animations.length
- ? AnimationList(
+ animations.length ?
+ AnimationListContainer(
{
animations
}
)
- : NoAnimationPanel(
+ :
+ NoAnimationPanel(
{
toggleElementPicker
}
)
);
}
}
--- a/devtools/client/inspector/animation/components/moz.build
+++ b/devtools/client/inspector/animation/components/moz.build
@@ -1,10 +1,13 @@
# 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(
'AnimationItem.js',
'AnimationList.js',
+ 'AnimationListContainer.js',
+ 'AnimationListHeader.js',
+ 'AnimationTimelineTickList.js',
'App.js',
'NoAnimationPanel.js'
)
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -12,16 +12,27 @@
: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);
}
+/* Settings for animation-list-header */
+.animation-list-header {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.animation-timeline-tick-list {
+ margin-right: 10px;
+ width: calc(100% - 210px);
+}
+
/* Settings for animations element */
.animation-list {
list-style-type: none;
margin-top: 0;
padding: 0;
}
/* Settings for each animation element */