Bug 1416104 - Part 5: Implement animated property list header. r=gl

MozReview-Commit-ID: 4d757OvWLBj

--HG--
extra : rebase_source : 3339d115d8cb0d01db8ff76a2d6e4324c85f4daa

devtools/client/inspector/animation/components/AnimatedPropertyListHeader.js

@@ -4,15 +4,18 @@
 
 "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()
     );
   }
 }

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;

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;

devtools/client/inspector/animation/components/moz.build

@@ -20,5 +20,7 @@ DevToolsModules(
     'AnimationTimelineTickItem.js',
     'AnimationTimelineTickList.js',
     'App.js',
+    'KeyframesProgressTickItem.js',
+    'KeyframesProgressTickList.js',
     'NoAnimationPanel.js',
 )

devtools/client/themes/animation.css

@@ -9,6 +9,7 @@
   --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 {
@@ -48,7 +49,7 @@
 }
 
 .animation-timeline-tick-item {
-  border-left: 0.5px solid rgba(128, 136, 144, .5);
+  border-left: var(--tick-line-style);
   height: 100vh;
   position: absolute;
 }
@@ -230,6 +231,33 @@
   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;