browser_flame-graph-03a.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. /* Any copyright is dedicated to the Public Domain.
  2. http://creativecommons.org/publicdomain/zero/1.0/ */
  3. "use strict";
  4. // Tests that selections in the flame graph widget work properly.
  5. const TEST_DATA = [
  6. {
  7. color: "#f00",
  8. blocks: [
  9. { x: 0, y: 0, width: 50, height: 20, text: "FOO" },
  10. { x: 50, y: 0, width: 100, height: 20, text: "BAR" }
  11. ]
  12. },
  13. {
  14. color: "#00f",
  15. blocks: [
  16. { x: 0, y: 30, width: 30, height: 20, text: "BAZ" }
  17. ]
  18. }
  19. ];
  20. const TEST_BOUNDS = { startTime: 0, endTime: 150 };
  21. const TEST_WIDTH = 200;
  22. const TEST_HEIGHT = 100;
  23. const {FlameGraph} = require("devtools/client/shared/widgets/FlameGraph");
  24. add_task(function* () {
  25. yield addTab("about:blank");
  26. yield performTest();
  27. gBrowser.removeCurrentTab();
  28. });
  29. function* performTest() {
  30. let [host,, doc] = yield createHost();
  31. doc.body.setAttribute("style",
  32. "position: fixed; width: 100%; height: 100%; margin: 0;");
  33. let graph = new FlameGraph(doc.body, 1);
  34. graph.fixedWidth = TEST_WIDTH;
  35. graph.fixedHeight = TEST_HEIGHT;
  36. graph.horizontalPanThreshold = 0;
  37. graph.verticalPanThreshold = 0;
  38. yield graph.ready();
  39. testGraph(graph);
  40. yield graph.destroy();
  41. host.destroy();
  42. }
  43. function testGraph(graph) {
  44. graph.setData({ data: TEST_DATA, bounds: TEST_BOUNDS });
  45. is(graph.getViewRange().startTime, 0,
  46. "The selection start boundary is correct (1).");
  47. is(graph.getViewRange().endTime, 150,
  48. "The selection end boundary is correct (1).");
  49. scroll(graph, 200, HORIZONTAL_AXIS, 10);
  50. is(graph.getViewRange().startTime | 0, 75,
  51. "The selection start boundary is correct (2).");
  52. is(graph.getViewRange().endTime | 0, 150,
  53. "The selection end boundary is correct (2).");
  54. scroll(graph, -200, HORIZONTAL_AXIS, 10);
  55. is(graph.getViewRange().startTime | 0, 37,
  56. "The selection start boundary is correct (3).");
  57. is(graph.getViewRange().endTime | 0, 112,
  58. "The selection end boundary is correct (3).");
  59. scroll(graph, 200, VERTICAL_AXIS, TEST_WIDTH / 2);
  60. is(graph.getViewRange().startTime | 0, 34,
  61. "The selection start boundary is correct (4).");
  62. is(graph.getViewRange().endTime | 0, 115,
  63. "The selection end boundary is correct (4).");
  64. scroll(graph, -200, VERTICAL_AXIS, TEST_WIDTH / 2);
  65. is(graph.getViewRange().startTime | 0, 37,
  66. "The selection start boundary is correct (5).");
  67. is(graph.getViewRange().endTime | 0, 112,
  68. "The selection end boundary is correct (5).");
  69. dragStart(graph, TEST_WIDTH / 2);
  70. is(graph.getViewRange().startTime | 0, 37,
  71. "The selection start boundary is correct (6).");
  72. is(graph.getViewRange().endTime | 0, 112,
  73. "The selection end boundary is correct (6).");
  74. hover(graph, TEST_WIDTH / 2 - 10);
  75. is(graph.getViewRange().startTime | 0, 41,
  76. "The selection start boundary is correct (7).");
  77. is(graph.getViewRange().endTime | 0, 116,
  78. "The selection end boundary is correct (7).");
  79. dragStop(graph, 10);
  80. is(graph.getViewRange().startTime | 0, 71,
  81. "The selection start boundary is correct (8).");
  82. is(graph.getViewRange().endTime | 0, 145,
  83. "The selection end boundary is correct (8).");
  84. }
  85. // EventUtils just doesn't work!
  86. function hover(graph, x, y = 1) {
  87. x /= window.devicePixelRatio;
  88. y /= window.devicePixelRatio;
  89. graph._onMouseMove({ testX: x, testY: y });
  90. }
  91. function dragStart(graph, x, y = 1) {
  92. x /= window.devicePixelRatio;
  93. y /= window.devicePixelRatio;
  94. graph._onMouseMove({ testX: x, testY: y });
  95. graph._onMouseDown({ testX: x, testY: y });
  96. }
  97. function dragStop(graph, x, y = 1) {
  98. x /= window.devicePixelRatio;
  99. y /= window.devicePixelRatio;
  100. graph._onMouseMove({ testX: x, testY: y });
  101. graph._onMouseUp({ testX: x, testY: y });
  102. }
  103. var HORIZONTAL_AXIS = 1;
  104. var VERTICAL_AXIS = 2;
  105. function scroll(graph, wheel, axis, x, y = 1) {
  106. x /= window.devicePixelRatio;
  107. y /= window.devicePixelRatio;
  108. graph._onMouseMove({ testX: x, testY: y });
  109. graph._onMouseWheel({ testX: x, testY: y, axis, detail: wheel,
  110. HORIZONTAL_AXIS,
  111. VERTICAL_AXIS
  112. });
  113. }