Bug 1406285 - Part 3: Implement summary graph base. r=gl

MozReview-Commit-ID: KMbUvJPDuNM

--HG--
extra : rebase_source : 14dc92800f6790907433c91e609325adc76dd37c

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

@@ -9,6 +9,7 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const AnimationTarget = createFactory(require("./AnimationTarget"));
+const SummaryGraph = createFactory(require("./graph/SummaryGraph"));
 
 class AnimationItem extends PureComponent {
   static get propTypes() {
@@ -19,6 +20,7 @@ class AnimationItem extends PureComponent {
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
+      timeScale: PropTypes.object.isRequired,
     };
   }
 
@@ -30,6 +32,7 @@ class AnimationItem extends PureComponent {
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       setSelectedNode,
+      timeScale,
     } = this.props;
 
     return dom.li(
@@ -45,6 +48,12 @@ class AnimationItem extends PureComponent {
           onShowBoxModelHighlighterForNode,
           setSelectedNode,
         }
+      ),
+      SummaryGraph(
+        {
+          animation,
+          timeScale,
+        }
       )
     );
   }

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

@@ -19,6 +19,7 @@ class AnimationList extends PureComponent {
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
+      timeScale: PropTypes.object.isRequired,
     };
   }
 
@@ -30,6 +31,7 @@ class AnimationList extends PureComponent {
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       setSelectedNode,
+      timeScale,
     } = this.props;
 
     return dom.ul(
@@ -45,6 +47,7 @@ class AnimationList extends PureComponent {
             onHideBoxModelHighlighter,
             onShowBoxModelHighlighterForNode,
             setSelectedNode,
+            timeScale,
           }
         )
       )

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

@@ -12,6 +12,8 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const AnimationList = createFactory(require("./AnimationList"));
 const AnimationListHeader = createFactory(require("./AnimationListHeader"));
 
+const TimeScale = require("../utils/timescale");
+
 class AnimationListContainer extends PureComponent {
   static get propTypes() {
     return {
@@ -33,6 +35,7 @@ class AnimationListContainer extends PureComponent {
       onShowBoxModelHighlighterForNode,
       setSelectedNode,
     } = this.props;
+    const timeScale = new TimeScale(animations);
 
     return dom.div(
       {
@@ -40,7 +43,7 @@ class AnimationListContainer extends PureComponent {
       },
       AnimationListHeader(
         {
-          animations
+          timeScale,
         }
       ),
       AnimationList(
@@ -51,6 +54,7 @@ class AnimationListContainer extends PureComponent {
           onHideBoxModelHighlighter,
           onShowBoxModelHighlighterForNode,
           setSelectedNode,
+          timeScale,
         }
       )
     );

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

@@ -14,12 +14,12 @@ const AnimationTimelineTickList = createFactory(require("./AnimationTimelineTick
 class AnimationListHeader extends PureComponent {
   static get propTypes() {
     return {
-      animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+      timeScale: PropTypes.object.isRequired,
     };
   }
 
   render() {
-    const { animations } = this.props;
+    const { timeScale } = this.props;
 
     return dom.div(
       {
@@ -27,7 +27,7 @@ class AnimationListHeader extends PureComponent {
       },
       AnimationTimelineTickList(
         {
-          animations
+          timeScale
         }
       )
     );

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

@@ -13,7 +13,6 @@ const ReactDOM = require("devtools/client/shared/vendor/react-dom");
 
 const AnimationTimelineTickItem = createFactory(require("./AnimationTimelineTickItem"));
 
-const TimeScale = require("../utils/timescale");
 const { findOptimalTimeInterval } = require("../utils/utils");
 
 // The minimum spacing between 2 time graduation headers in the timeline (px).
@@ -22,8 +21,8 @@ const TIME_GRADUATION_MIN_SPACING = 40;
 class AnimationTimelineTickList extends PureComponent {
   static get propTypes() {
     return {
-      animations: PropTypes.arrayOf(PropTypes.object).isRequired,
       sidebarWidth: PropTypes.number.isRequired,
+      timeScale: PropTypes.object.isRequired,
     };
   }
 
@@ -61,8 +60,7 @@ class AnimationTimelineTickList extends PureComponent {
   }
 
   updateTickList() {
-    const { animations } = this.props;
-    const timeScale = new TimeScale(animations);
+    const { timeScale } = this.props;
     const tickListEl = ReactDOM.findDOMNode(this);
     const width = tickListEl.offsetWidth;
     const animationDuration = timeScale.getDuration();

devtools/client/inspector/animation/components/graph/SummaryGraph.js

@@ -0,0 +1,41 @@
+/* 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 SummaryGraphPath = createFactory(require("./SummaryGraphPath"));
+
+class SummaryGraph extends PureComponent {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      animation,
+      timeScale,
+    } = this.props;
+
+    return dom.div(
+      {
+        className: "animation-summary-graph",
+      },
+      SummaryGraphPath(
+        {
+          animation,
+          timeScale,
+        }
+      )
+    );
+  }
+}
+
+module.exports = SummaryGraph;

devtools/client/inspector/animation/components/graph/SummaryGraphPath.js

@@ -0,0 +1,38 @@
+/* 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 SummaryGraphPath extends PureComponent {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      animation,
+      timeScale,
+    } = this.props;
+
+    const totalDisplayedDuration = animation.state.playbackRate * timeScale.getDuration();
+    const startTime = timeScale.minStartTime;
+
+    return dom.svg(
+      {
+        className: "animation-summary-graph-path",
+        preserveAspectRatio: "none",
+        viewBox: `${ startTime } -1 ${ totalDisplayedDuration } 1`
+      }
+    );
+  }
+}
+
+module.exports = SummaryGraphPath;

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

@@ -0,0 +1,8 @@
+# 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(
+    'SummaryGraph.js',
+    'SummaryGraphPath.js'
+)

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

@@ -2,6 +2,10 @@
 # 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/.
 
+DIRS += [
+    'graph'
+]
+
 DevToolsModules(
     'AnimationItem.js',
     'AnimationList.js',

devtools/client/themes/animation.css

@@ -7,6 +7,7 @@
 :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;
 }
 
@@ -27,9 +28,9 @@
 
 /* Animation Timeline Tick List */
 .animation-timeline-tick-list {
-  margin-right: 10px;
+  margin-right: var(--graph-right-offset);
   position: relative;
-  width: calc(100% - var(--sidebar-width) - 10px);
+  width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
 }
 
 .animation-timeline-tick-item {
@@ -47,6 +48,7 @@
 
 /* Animation Item */
 .animation-item {
+  display: flex;
   height: 30px;
 }
 
@@ -67,6 +69,17 @@
   cursor: default;
 }
 
+/* Summary Graph */
+.animation-summary-graph {
+  height: 100%;
+  width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
+}
+
+.animation-summary-graph-path {
+  height: 100%;
+  width: 100%;
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;