Bug 1416106 - Part 11: Implement keyframe markers. r=gl
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Wed, 14 Feb 2018 23:18:13 +0900
changeset 404005 d717511990c418ad5bb5df663ffe12295163cfc6
parent 404004 f20d1625e15bd501a5e36a85f9b30544ae35114a
child 404006 481dab8f36707756c83796d53ce9ece126202e64
push id99924
push userebalazs@mozilla.com
push dateThu, 15 Feb 2018 20:43:51 +0000
treeherdermozilla-inbound@a7d2a49f46fb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1416106
milestone60.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1416106 - Part 11: Implement keyframe markers. r=gl MozReview-Commit-ID: 2hN43aFN9Da
devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerItem.js
devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerList.js
devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
devtools/client/inspector/animation/components/keyframes-graph/moz.build
devtools/client/themes/animation.css
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerItem.js
@@ -0,0 +1,33 @@
+/* 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 dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+class KeyframeMarkerItem extends PureComponent {
+  static get propTypes() {
+    return {
+      keyframe: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const { keyframe } = this.props;
+
+    return dom.li(
+      {
+        className: "keyframe-marker-item",
+        title: keyframe.value,
+        style: {
+          left: `${ keyframe.offset * 100 }%`,
+        },
+      }
+    );
+  }
+}
+
+module.exports = KeyframeMarkerItem;
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerList.js
@@ -0,0 +1,32 @@
+/* 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 PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const KeyframeMarkerItem = createFactory(require("./KeyframeMarkerItem"));
+
+class KeyframeMarkerList extends PureComponent {
+  static get propTypes() {
+    return {
+      values: PropTypes.array.isRequired,
+    };
+  }
+
+  render() {
+    const { values } = this.props;
+
+    return dom.ul(
+      {
+        className: "keyframe-marker-list"
+      },
+      values.map(value => KeyframeMarkerItem({ keyframe: value }))
+    );
+  }
+}
+
+module.exports = KeyframeMarkerList;
--- a/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
@@ -3,16 +3,17 @@
  * 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 PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
+const KeyframeMarkerList = createFactory(require("./KeyframeMarkerList"));
 const KeyframesGraphPath = createFactory(require("./KeyframesGraphPath"));
 
 class KeyframesGraph extends PureComponent {
   static get propTypes() {
     return {
       getComputedStyle: PropTypes.func.isRequired,
       property: PropTypes.string.isRequired,
       simulateAnimation: PropTypes.func.isRequired,
@@ -37,14 +38,15 @@ class KeyframesGraph extends PureCompone
       KeyframesGraphPath(
         {
           getComputedStyle,
           property,
           simulateAnimation,
           type,
           values,
         }
-      )
+      ),
+      KeyframeMarkerList({ values })
     );
   }
 }
 
 module.exports = KeyframesGraph;
--- a/devtools/client/inspector/animation/components/keyframes-graph/moz.build
+++ b/devtools/client/inspector/animation/components/keyframes-graph/moz.build
@@ -2,11 +2,13 @@
 # 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(
     'ColorPath.js',
     'ComputedStylePath.js',
     'DiscretePath.js',
     'DistancePath.js',
+    'KeyframeMarkerItem.js',
+    'KeyframeMarkerList.js',
     'KeyframesGraph.js',
     'KeyframesGraphPath.js',
 )
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -7,25 +7,27 @@
 :root {
   --animation-even-background-color: rgba(0, 0, 0, 0.05);
   --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
   --fast-track-image: url("images/animation-fast-track.svg");
   --fill-color-cssanimation: var(--theme-contrast-background);
   --fill-color-csstransition: var(--theme-highlight-blue);
   --fill-color-scriptanimation: var(--theme-graphs-green);
   --graph-right-offset: 10px;
+  --keyframe-marker-shadow-color: #c4c4c4;
   --sidebar-width: 200px;
   --stroke-color-cssanimation: var(--theme-highlight-lightorange);
   --stroke-color-csstransition: var(--theme-highlight-bluegrey);
   --stroke-color-scriptanimation: var(--theme-highlight-green);
   --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);
+  --keyframe-marker-shadow-color: #818181;
 }
 
 :root.theme-firebug {
   --command-pick-image: url(chrome://devtools/skin/images/firebug/command-pick.svg);
 }
 
 /* Root element of animation inspector */
 #animation-container {
@@ -356,16 +358,17 @@
 .animated-property-name.warning span {
   text-decoration: underline dotted;
 }
 
 /* Keyframes Graph */
 .keyframes-graph {
   height: 100%;
   padding-top: 3px;
+  position: relative;
   width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
 }
 
 .keyframes-graph-path {
   height: 100%;
   width: 100%;
 }
 
@@ -406,16 +409,49 @@
   stroke-opacity: 0;
   vector-effect: non-scaling-stroke;
 }
 
 .keyframes-graph-path .hint rect:hover {
   stroke-opacity: 1;
 }
 
+/* Keyframe Marker List */
+.keyframe-marker-list {
+  pointer-events: none;
+  position: absolute;
+  height: 100%;
+  list-style-type: none;
+  top: 0%;
+  width: 100%;
+}
+
+.keyframe-marker-item {
+  box-shadow: 0 0 0 1px var(--keyframe-marker-shadow-color);
+  border-radius: 100%;
+  pointer-events: auto;
+  position: absolute;
+  top: 50%;
+  height: 10px;
+  transform: translate(-5px, -3px);
+  width: 10px;
+}
+
+.animated-property-list-container.cssanimation .keyframe-marker-item {
+  background-color: var(--fill-color-cssanimation);
+}
+
+.animated-property-list-container.csstransition .keyframe-marker-item {
+  background-color: var(--fill-color-csstransition);
+}
+
+.animated-property-list-container.scriptanimation .keyframe-marker-item {
+  background-color: var(--fill-color-scriptanimation);
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;
 }
 
 .animation-error-message > p {
   white-space: pre;
 }