Bug 1416104 - Part 5: Implement animated property list header. r?gl draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Fri, 19 Jan 2018 15:20:45 +0900
changeset 722540 fda8d5643ab0e9a4b0b41f6ef005202a7cb59c60
parent 722539 4dea7ca825de4f711ddb9e6e351ab3f5074bc05a
child 722541 78236e70f3d6973cfe171754cfe7d5df62ab4fef
push id96167
push userbmo:dakatsuka@mozilla.com
push dateFri, 19 Jan 2018 07:35:17 +0000
reviewersgl
bugs1416104
milestone59.0a1
Bug 1416104 - Part 5: Implement animated property list header. r?gl MozReview-Commit-ID: 4d757OvWLBj
devtools/client/inspector/animation/components/AnimatedPropertyListHeader.js
devtools/client/inspector/animation/components/KeyframesProgressTickItem.js
devtools/client/inspector/animation/components/KeyframesProgressTickList.js
devtools/client/inspector/animation/components/moz.build
devtools/client/themes/animation.css
--- 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;
 }