summaryrefslogtreecommitdiff
path: root/browser/devtools/shared/test/browser_flame-graph-03a.js
blob: 2913f60dd25527d680167a04f6e2adcf70cb9751 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */

// Tests that selections in the flame graph widget work properly.

let 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" }] }];
let TEST_BOUNDS = { startTime: 0, endTime: 150 };
let TEST_WIDTH = 200;
let TEST_HEIGHT = 100;

let {FlameGraph} = Cu.import("resource:///modules/devtools/FlameGraph.jsm", {});
let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");

add_task(function*() {
  yield promiseTab("about:blank");
  yield performTest();
  gBrowser.removeCurrentTab();
});

function* performTest() {
  let [host, win, doc] = yield createHost();
  doc.body.setAttribute("style", "position: fixed; width: 100%; height: 100%; margin: 0;");

  let graph = new FlameGraph(doc.body, 1);
  graph.fixedWidth = TEST_WIDTH;
  graph.fixedHeight = TEST_HEIGHT;

  yield graph.ready();

  testGraph(graph);

  graph.destroy();
  host.destroy();
}

function testGraph(graph) {
  graph.setData({ data: TEST_DATA, bounds: TEST_BOUNDS });

  is(graph.getViewRange().startTime, 0,
    "The selection start boundary is correct (1).");
  is(graph.getViewRange().endTime, 150,
    "The selection end boundary is correct (1).");

  scroll(graph, 200, HORIZONTAL_AXIS, 10);
  is(graph.getViewRange().startTime | 0, 75,
    "The selection start boundary is correct (2).");
  is(graph.getViewRange().endTime | 0, 150,
    "The selection end boundary is correct (2).");

  scroll(graph, -200, HORIZONTAL_AXIS, 10);
  is(graph.getViewRange().startTime | 0, 37,
    "The selection start boundary is correct (3).");
  is(graph.getViewRange().endTime | 0, 112,
    "The selection end boundary is correct (3).");

  scroll(graph, 200, VERTICAL_AXIS, TEST_WIDTH / 2);
  is(graph.getViewRange().startTime | 0, 34,
    "The selection start boundary is correct (4).");
  is(graph.getViewRange().endTime | 0, 115,
    "The selection end boundary is correct (4).");

  scroll(graph, -200, VERTICAL_AXIS, TEST_WIDTH / 2);
  is(graph.getViewRange().startTime | 0, 37,
    "The selection start boundary is correct (5).");
  is(graph.getViewRange().endTime | 0, 112,
    "The selection end boundary is correct (5).");

  dragStart(graph, TEST_WIDTH / 2);
  is(graph.getViewRange().startTime | 0, 37,
    "The selection start boundary is correct (6).");
  is(graph.getViewRange().endTime | 0, 112,
    "The selection end boundary is correct (6).");

  hover(graph, TEST_WIDTH / 2 - 10);
  is(graph.getViewRange().startTime | 0, 41,
    "The selection start boundary is correct (7).");
  is(graph.getViewRange().endTime | 0, 116,
    "The selection end boundary is correct (7).");

  dragStop(graph, 10);
  is(graph.getViewRange().startTime | 0, 71,
    "The selection start boundary is correct (8).");
  is(graph.getViewRange().endTime | 0, 145,
    "The selection end boundary is correct (8).");
}

// EventUtils just doesn't work!

function hover(graph, x, y = 1) {
  x /= window.devicePixelRatio;
  y /= window.devicePixelRatio;
  graph._onMouseMove({ clientX: x, clientY: y });
}

function dragStart(graph, x, y = 1) {
  x /= window.devicePixelRatio;
  y /= window.devicePixelRatio;
  graph._onMouseMove({ clientX: x, clientY: y });
  graph._onMouseDown({ clientX: x, clientY: y });
}

function dragStop(graph, x, y = 1) {
  x /= window.devicePixelRatio;
  y /= window.devicePixelRatio;
  graph._onMouseMove({ clientX: x, clientY: y });
  graph._onMouseUp({ clientX: x, clientY: y });
}

let HORIZONTAL_AXIS = 1;
let VERTICAL_AXIS = 2;

function scroll(graph, wheel, axis, x, y = 1) {
  x /= window.devicePixelRatio;
  y /= window.devicePixelRatio;
  graph._onMouseMove({ clientX: x, clientY: y });
  graph._onMouseWheel({ clientX: x, clientY: y, axis, detail: wheel, axis,
    HORIZONTAL_AXIS,
    VERTICAL_AXIS
  });
}