Bug 1456828 - Part 1: Introduce ProgressInspectionPanel. r=gl

MozReview-Commit-ID: Jc5LEAOYvxr

--HG--
extra : rebase_source : e0f0a766e5f2fb99afccdee508b344cc0c11bd42

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

@@ -0,0 +1,46 @@
+/* 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 PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+
+const TickLabels = createFactory(require("./TickLabels"));
+const TickLines = createFactory(require("./TickLines"));
+
+/**
+ * This component is a panel for the progress of animations or keyframes, supports
+ * displaying the ticks, take the areas of indicator and the list.
+ */
+class ProgressInspectionPanel extends PureComponent {
+  static get propTypes() {
+    return {
+      indicator: PropTypes.any.isRequired,
+      list: PropTypes.any.isRequired,
+      ticks: PropTypes.arrayOf(PropTypes.object).isRequired,
+    };
+  }
+
+  render() {
+    const {
+      indicator,
+      list,
+      ticks,
+    } = this.props;
+
+    return dom.div(
+      {
+        className: "progress-inspection-panel",
+      },
+      dom.div({ className: "background" }, TickLines({ ticks })),
+      dom.div({ className: "indicator" }, indicator),
+      dom.div({ className: "header devtools-toolbar" }, TickLabels({ ticks })),
+      list
+    );
+  }
+}
+
+module.exports = ProgressInspectionPanel;

devtools/client/inspector/animation/components/TickLabels.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 { 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");
+
+/**
+ * This component is intended to show tick labels on the header.
+ */
+class TickLabels extends PureComponent {
+  static get propTypes() {
+    return {
+      ticks: PropTypes.array.isRequired,
+    };
+  }
+
+  render() {
+    const { ticks } = this.props;
+
+    return dom.div(
+      {
+        className: "tick-labels"
+      },
+      ticks.map(tick =>
+        dom.div(
+          {
+            className: "tick-label",
+            style: { left: `${ tick.position }%` },
+          },
+          tick.label
+        )
+      )
+    );
+  }
+}
+
+module.exports = TickLabels;

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

@@ -0,0 +1,40 @@
+/* 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");
+
+/**
+ * This component is intended to show the tick line as the background.
+ */
+class TickLines extends PureComponent {
+  static get propTypes() {
+    return {
+      ticks: PropTypes.array.isRequired,
+    };
+  }
+
+  render() {
+    const { ticks } = this.props;
+
+    return dom.div(
+      {
+        className: "tick-lines"
+      },
+      ticks.map(tick =>
+        dom.div(
+          {
+            className: "tick-line",
+            style: { left: `${ tick.position }%` }
+          }
+        )
+      )
+    );
+  }
+}
+
+module.exports = TickLines;

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

@@ -33,5 +33,8 @@ DevToolsModules(
     'NoAnimationPanel.js',
     'PauseResumeButton.js',
     'PlaybackRateSelector.js',
+    'ProgressInspectionPanel.js',
     'RewindButton.js',
+    'TickLabels.js',
+    'TickLines.js',
 )

devtools/client/themes/animation.css

@@ -673,6 +673,64 @@ select.playback-rate-selector.devtools-button:not(:empty):not(:disabled):not(.ch
   background-color: var(--fill-color-scriptanimation);
 }
 
+/* Common Components */
+/* Progress Inspection Panel */
+.progress-inspection-panel {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.progress-inspection-panel > .header {
+  padding: 0;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.progress-inspection-panel > ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.progress-inspection-panel > div,
+.progress-inspection-panel > ul > li {
+  display: grid;
+  grid-template-columns:
+    var(--sidebar-width) calc(100% - var(--sidebar-width) - var(--graph-right-offset)) var(--graph-right-offset);
+}
+
+/* Tick Lines */
+.tick-lines {
+  grid-column: 2 / 3;
+  position: relative;
+}
+
+.tick-line {
+  position: absolute;
+}
+
+.tick-line::before {
+  border-left: var(--tick-line-style);
+  content: "";
+  height: 100vh;
+  position: fixed;
+}
+
+/* Tick Labels */
+.tick-labels {
+  grid-column: 2 / 3;
+  height: 100%;
+  position: relative;
+}
+
+.tick-label {
+  border-left: var(--tick-line-style);
+  height: 100%;
+  position: absolute;
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;