1 files changed, 236 insertions, 0 deletions
diff --git a/devtools/client/shared/test/browser_flame-graph-03c.js b/devtools/client/shared/test/browser_flame-graph-03c.js
new file mode 100644
index 0000000000..f0e2aa5b89
--- /dev/null
+++ b/devtools/client/shared/test/browser_flame-graph-03c.js
@@ -0,0 +1,236 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that vertical panning in the flame graph widget works properly.
+
+const TEST_DATA = [
+  {
+    color: "#f00",
+    blocks: [
+      { x: 0, y: 0, width: 50, height: 20, text: "FOO" },
+      { x: 50, y: 0, width: 100, height: 20, text: "BAR" },
+    ],
+  },
+  {
+    color: "#00f",
+    blocks: [{ x: 0, y: 30, width: 30, height: 20, text: "BAZ" }],
+  },
+];
+const TEST_BOUNDS = { startTime: 0, endTime: 150 };
+const TEST_WIDTH = 200;
+const TEST_HEIGHT = 100;
+const TEST_DPI_DENSITIY = 2;
+
+const { FlameGraph } = require("devtools/client/shared/widgets/FlameGraph");
+
+add_task(async function() {
+  await addTab("about:blank");
+  await performTest();
+  gBrowser.removeCurrentTab();
+});
+
+async function performTest() {
+  const { host, doc } = await createHost();
+  doc.body.setAttribute(
+    "style",
+    "position: fixed; width: 100%; height: 100%; margin: 0;"
+  );
+
+  const graph = new FlameGraph(doc.body, TEST_DPI_DENSITIY);
+  graph.fixedWidth = TEST_WIDTH;
+  graph.fixedHeight = TEST_HEIGHT;
+
+  await graph.ready();
+
+  testGraph(graph);
+
+  await graph.destroy();
+  host.destroy();
+}
+
+function testGraph(graph) {
+  graph.setData({ data: TEST_DATA, bounds: TEST_BOUNDS });
+
+  // Drag up vertically only.
+
+  dragStart(graph, TEST_WIDTH / 2, TEST_HEIGHT / 2);
+  is(
+    graph.getViewRange().startTime | 0,
+    0,
+    "The selection start boundary is correct (1)."
+  );
+  is(
+    graph.getViewRange().endTime | 0,
+    150,
+    "The selection end boundary is correct (1)."
+  );
+  is(
+    graph.getViewRange().verticalOffset | 0,
+    0,
+    "The vertical offset is correct (1)."
+  );
+
+  hover(graph, TEST_WIDTH / 2, TEST_HEIGHT / 2 - 50);
+  is(
+    graph.getViewRange().startTime | 0,
+    0,
+    "The selection start boundary is correct (2)."
+  );
+  is(
+    graph.getViewRange().endTime | 0,
+    150,
+    "The selection end boundary is correct (2)."
+  );
+  is(
+    graph.getViewRange().verticalOffset | 0,
+    17,
+    "The vertical offset is correct (2)."
+  );
+
+  dragStop(graph, TEST_WIDTH / 2, TEST_HEIGHT / 2 - 100);
+  is(
+    graph.getViewRange().startTime | 0,
+    0,
+    "The selection start boundary is correct (3)."
+  );
+  is(
+    graph.getViewRange().endTime | 0,
+    150,
+    "The selection end boundary is correct (3)."
+  );
+  is(
+    graph.getViewRange().verticalOffset | 0,
+    42,
+    "The vertical offset is correct (3)."
+  );
+
+  // Drag down strongly vertically and slightly horizontally.
+
+  dragStart(graph, TEST_WIDTH / 2, TEST_HEIGHT / 2);
+  is(
+    graph.getViewRange().startTime | 0,
+    0,
+    "The selection start boundary is correct (4)."
+  );
+  is(
+    graph.getViewRange().endTime | 0,
+    150,
+    "The selection end boundary is correct (4)."
+  );
+  is(
+    graph.getViewRange().verticalOffset | 0,
+    42,
+    "The vertical offset is correct (4)."
+  );
+
+  hover(graph, TEST_WIDTH / 2, TEST_HEIGHT / 2 + 50);
+  is(
+    graph.getViewRange().startTime | 0,
+    0,
+    "The selection start boundary is correct (5)."
+  );
+  is(
+    graph.getViewRange().endTime | 0,
+    150,
+    "The selection end boundary is correct (5)."
+  );
+  is(
+    graph.getViewRange().verticalOffset | 0,
+    25,
+    "The vertical offset is correct (5)."
+  );
+
+  dragStop(graph, TEST_WIDTH / 2 + 100, TEST_HEIGHT / 2 + 500);
+  is(
+    graph.getViewRange().startTime | 0,
+    0,
+    "The selection start boundary is correct (6)."
+  );
+  is(
+    graph.getViewRange().endTime | 0,
+    150,
+    "The selection end boundary is correct (6)."
+  );
+  is(
+    graph.getViewRange().verticalOffset | 0,
+    0,
+    "The vertical offset is correct (6)."
+  );
+
+  // Drag up slightly vertically and strongly horizontally.
+
+  dragStart(graph, TEST_WIDTH / 2, TEST_HEIGHT / 2);
+  is(
+    graph.getViewRange().startTime | 0,
+    0,
+    "The selection start boundary is correct (7)."
+  );
+  is(
+    graph.getViewRange().endTime | 0,
+    150,
+    "The selection end boundary is correct (7)."
+  );
+  is(
+    graph.getViewRange().verticalOffset | 0,
+    0,
+    "The vertical offset is correct (7)."
+  );
+
+  hover(graph, TEST_WIDTH / 2 + 50, TEST_HEIGHT / 2);
+  is(
+    graph.getViewRange().startTime | 0,
+    0,
+    "The selection start boundary is correct (8)."
+  );
+  is(
+    graph.getViewRange().endTime | 0,
+    116,
+    "The selection end boundary is correct (8)."
+  );
+  is(
+    graph.getViewRange().verticalOffset | 0,
+    0,
+    "The vertical offset is correct (8)."
+  );
+
+  dragStop(graph, TEST_WIDTH / 2 + 500, TEST_HEIGHT / 2 + 100);
+  is(
+    graph.getViewRange().startTime | 0,
+    0,
+    "The selection start boundary is correct (9)."
+  );
+  is(
+    graph.getViewRange().endTime | 0,
+    0,
+    "The selection end boundary is correct (9)."
+  );
+  is(
+    graph.getViewRange().verticalOffset | 0,
+    0,
+    "The vertical offset is correct (9)."
+  );
+}
+
+// EventUtils just doesn't work!
+
+function hover(graph, x, y = 1) {
+  x /= window.devicePixelRatio;
+  y /= window.devicePixelRatio;
+  graph._onMouseMove({ testX: x, testY: y });
+}
+
+function dragStart(graph, x, y = 1) {
+  x /= window.devicePixelRatio;
+  y /= window.devicePixelRatio;
+  graph._onMouseMove({ testX: x, testY: y });
+  graph._onMouseDown({ testX: x, testY: y });
+}
+
+function dragStop(graph, x, y = 1) {
+  x /= window.devicePixelRatio;
+  y /= window.devicePixelRatio;
+  graph._onMouseMove({ testX: x, testY: y });
+  graph._onMouseUp({ testX: x, testY: y });
+}