summaryrefslogtreecommitdiffstats
path: root/devtools/client/performance/components/waterfall-header.js
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /devtools/client/performance/components/waterfall-header.js
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'devtools/client/performance/components/waterfall-header.js')
-rw-r--r--devtools/client/performance/components/waterfall-header.js69
1 files changed, 69 insertions, 0 deletions
diff --git a/devtools/client/performance/components/waterfall-header.js b/devtools/client/performance/components/waterfall-header.js
new file mode 100644
index 000000000..f3030091b
--- /dev/null
+++ b/devtools/client/performance/components/waterfall-header.js
@@ -0,0 +1,69 @@
+/* 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";
+
+/**
+ * The "waterfall ticks" view, a header for the markers displayed in the waterfall.
+ */
+
+const { DOM: dom, PropTypes } = require("devtools/client/shared/vendor/react");
+const { L10N } = require("../modules/global");
+const { TickUtils } = require("../modules/waterfall-ticks");
+
+// ms
+const WATERFALL_HEADER_TICKS_MULTIPLE = 5;
+// px
+const WATERFALL_HEADER_TICKS_SPACING_MIN = 50;
+// px
+const WATERFALL_HEADER_TEXT_PADDING = 3;
+
+function WaterfallHeader(props) {
+ let { startTime, dataScale, sidebarWidth, waterfallWidth } = props;
+
+ let tickInterval = TickUtils.findOptimalTickInterval({
+ ticksMultiple: WATERFALL_HEADER_TICKS_MULTIPLE,
+ ticksSpacingMin: WATERFALL_HEADER_TICKS_SPACING_MIN,
+ dataScale: dataScale
+ });
+
+ let ticks = [];
+ for (let x = 0; x < waterfallWidth; x += tickInterval) {
+ let left = x + WATERFALL_HEADER_TEXT_PADDING;
+ let time = Math.round(x / dataScale + startTime);
+ let label = L10N.getFormatStr("timeline.tick", time);
+
+ let node = dom.div({
+ className: "plain waterfall-header-tick",
+ style: { transform: `translateX(${left}px)` }
+ }, label);
+ ticks.push(node);
+ }
+
+ return dom.div(
+ { className: "waterfall-header" },
+ dom.div(
+ {
+ className: "waterfall-sidebar theme-sidebar waterfall-header-name",
+ style: { width: sidebarWidth + "px" }
+ },
+ L10N.getStr("timeline.records")
+ ),
+ dom.div(
+ { className: "waterfall-header-ticks waterfall-background-ticks" },
+ ticks
+ )
+ );
+}
+
+WaterfallHeader.displayName = "WaterfallHeader";
+
+WaterfallHeader.propTypes = {
+ startTime: PropTypes.number.isRequired,
+ dataScale: PropTypes.number.isRequired,
+ sidebarWidth: PropTypes.number.isRequired,
+ waterfallWidth: PropTypes.number.isRequired,
+};
+
+module.exports = WaterfallHeader;