browser_perf-details-06-rerender-on-selection.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. /* Any copyright is dedicated to the Public Domain.
  2. http://creativecommons.org/publicdomain/zero/1.0/ */
  3. "use strict";
  4. /**
  5. * Tests that when flame chart views scroll to change selection,
  6. * other detail views are rerendered.
  7. */
  8. const { SIMPLE_URL } = require("devtools/client/performance/test/helpers/urls");
  9. const { initPerformanceInNewTab, teardownToolboxAndRemoveTab } = require("devtools/client/performance/test/helpers/panel-utils");
  10. const { startRecording, stopRecording } = require("devtools/client/performance/test/helpers/actions");
  11. const { once } = require("devtools/client/performance/test/helpers/event-utils");
  12. const { scrollCanvasGraph, HORIZONTAL_AXIS } = require("devtools/client/performance/test/helpers/input-utils");
  13. add_task(function* () {
  14. let { panel } = yield initPerformanceInNewTab({
  15. url: SIMPLE_URL,
  16. win: window
  17. });
  18. let {
  19. EVENTS,
  20. OverviewView,
  21. DetailsView,
  22. WaterfallView,
  23. JsCallTreeView,
  24. JsFlameGraphView
  25. } = panel.panelWin;
  26. yield startRecording(panel);
  27. yield stopRecording(panel);
  28. let waterfallRendered = once(WaterfallView, EVENTS.UI_WATERFALL_RENDERED);
  29. OverviewView.setTimeInterval({ startTime: 10, endTime: 20 });
  30. yield waterfallRendered;
  31. // Select the call tree to make sure it's initialized and ready to receive
  32. // redrawing requests once reselected.
  33. let callTreeRendered = once(JsCallTreeView, EVENTS.UI_JS_CALL_TREE_RENDERED);
  34. yield DetailsView.selectView("js-calltree");
  35. yield callTreeRendered;
  36. // Switch to the flamegraph and perform a scroll over the visualization.
  37. // The waterfall and call tree should get rerendered when reselected.
  38. let flamegraphRendered = once(JsFlameGraphView, EVENTS.UI_JS_FLAMEGRAPH_RENDERED);
  39. yield DetailsView.selectView("js-flamegraph");
  40. yield flamegraphRendered;
  41. let overviewRangeSelected = once(OverviewView, EVENTS.UI_OVERVIEW_RANGE_SELECTED);
  42. let waterfallRerendered = once(WaterfallView, EVENTS.UI_WATERFALL_RENDERED);
  43. let callTreeRerendered = once(JsCallTreeView, EVENTS.UI_JS_CALL_TREE_RENDERED);
  44. once(JsFlameGraphView, EVENTS.UI_JS_FLAMEGRAPH_RENDERED).then(() => {
  45. ok(false, "FlameGraphView should not publicly rerender, the internal state " +
  46. "and drawing should be handled by the underlying widget.");
  47. });
  48. // Reset the range to full view, trigger a "selection" event as if
  49. // our mouse has done this
  50. scrollCanvasGraph(JsFlameGraphView.graph, {
  51. axis: HORIZONTAL_AXIS,
  52. wheel: 200,
  53. x: 10
  54. });
  55. yield overviewRangeSelected;
  56. ok(true, "Overview range was changed.");
  57. yield DetailsView.selectView("waterfall");
  58. yield waterfallRerendered;
  59. ok(true, "Waterfall rerendered by flame graph changing interval.");
  60. yield DetailsView.selectView("js-calltree");
  61. yield callTreeRerendered;
  62. ok(true, "CallTree rerendered by flame graph changing interval.");
  63. yield teardownToolboxAndRemoveTab(panel);
  64. });