1 files changed, 107 insertions, 0 deletions
diff --git a/devtools/client/performance/components/waterfall-tree-row.js b/devtools/client/performance/components/waterfall-tree-row.js
new file mode 100644
index 000000000..b87750db1
--- /dev/null
+++ b/devtools/client/performance/components/waterfall-tree-row.js
@@ -0,0 +1,107 @@
+/* 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";
+
+/**
+ * A single row (node) in the waterfall tree
+ */
+
+const { DOM: dom, PropTypes } = require("devtools/client/shared/vendor/react");
+const { MarkerBlueprintUtils } = require("../modules/marker-blueprint-utils");
+
+// px
+const LEVEL_INDENT = 10;
+// px
+const ARROW_NODE_OFFSET = -14;
+// px
+const WATERFALL_MARKER_TIMEBAR_WIDTH_MIN = 5;
+
+function buildMarkerSidebar(blueprint, props) {
+  const { marker, level, sidebarWidth } = props;
+
+  let bullet = dom.div({
+    className: `waterfall-marker-bullet marker-color-${blueprint.colorName}`,
+    style: { transform: `translateX(${level * LEVEL_INDENT}px)` },
+    "data-type": marker.name
+  });
+
+  let label = MarkerBlueprintUtils.getMarkerLabel(marker);
+
+  let name = dom.div({
+    className: "plain waterfall-marker-name",
+    style: { transform: `translateX(${level * LEVEL_INDENT}px)` },
+    title: label
+  }, label);
+
+  return dom.div({
+    className: "waterfall-sidebar theme-sidebar",
+    style: { width: sidebarWidth + "px" }
+  }, bullet, name);
+}
+
+function buildMarkerTimebar(blueprint, props) {
+  const { marker, startTime, dataScale, arrow } = props;
+  const offset = (marker.start - startTime) * dataScale + ARROW_NODE_OFFSET;
+  const width = Math.max((marker.end - marker.start) * dataScale,
+                         WATERFALL_MARKER_TIMEBAR_WIDTH_MIN);
+
+  let bar = dom.div(
+    {
+      className: "waterfall-marker-wrap",
+      style: { transform: `translateX(${offset}px)` }
+    },
+    arrow,
+    dom.div({
+      className: `waterfall-marker-bar marker-color-${blueprint.colorName}`,
+      style: { width: `${width}px` },
+      "data-type": marker.name
+    })
+  );
+
+  return dom.div(
+    { className: "waterfall-marker waterfall-background-ticks" },
+    bar
+  );
+}
+
+function WaterfallTreeRow(props) {
+  const { marker, focused } = props;
+  const blueprint = MarkerBlueprintUtils.getBlueprintFor(marker);
+
+  let attrs = {
+    className: "waterfall-tree-item" + (focused ? " focused" : ""),
+    "data-otmt": marker.isOffMainThread
+  };
+
+  // Don't render an expando-arrow for leaf nodes.
+  let submarkers = marker.submarkers;
+  let hasDescendants = submarkers && submarkers.length > 0;
+  if (hasDescendants) {
+    attrs["data-expandable"] = "";
+  } else {
+    attrs["data-invisible"] = "";
+  }
+
+  return dom.div(
+    attrs,
+    buildMarkerSidebar(blueprint, props),
+    buildMarkerTimebar(blueprint, props)
+  );
+}
+
+WaterfallTreeRow.displayName = "WaterfallTreeRow";
+
+WaterfallTreeRow.propTypes = {
+  marker: PropTypes.object.isRequired,
+  level: PropTypes.number.isRequired,
+  arrow: PropTypes.element.isRequired,
+  expanded: PropTypes.bool.isRequired,
+  focused: PropTypes.bool.isRequired,
+  startTime: PropTypes.number.isRequired,
+  dataScale: PropTypes.number.isRequired,
+  sidebarWidth: PropTypes.number.isRequired,
+};
+
+module.exports = WaterfallTreeRow;