browser_perf-tree-view-02.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. /* Any copyright is dedicated to the Public Domain.
  2. http://creativecommons.org/publicdomain/zero/1.0/ */
  3. "use strict";
  4. /**
  5. * Tests if the profiler's tree view implementation works properly and
  6. * creates the correct column structure after expanding some of the nodes.
  7. * Also tests that demangling works.
  8. */
  9. const { ThreadNode } = require("devtools/client/performance/modules/logic/tree-model");
  10. const { CallView } = require("devtools/client/performance/modules/widgets/tree-view");
  11. const { synthesizeProfile } = require("devtools/client/performance/test/helpers/synth-utils");
  12. const MANGLED_FN = "__Z3FooIiEvv";
  13. const UNMANGLED_FN = "void Foo<int>()";
  14. add_task(function () {
  15. // Create a profile and mangle a function inside the string table.
  16. let profile = synthesizeProfile();
  17. profile.threads[0].stringTable[1] =
  18. profile.threads[0].stringTable[1].replace("A (", `${MANGLED_FN} (`);
  19. let threadNode = new ThreadNode(profile.threads[0], { startTime: 0, endTime: 20 });
  20. // Don't display the synthesized (root) and the real (root) node twice.
  21. threadNode.calls = threadNode.calls[0].calls;
  22. let treeRoot = new CallView({ frame: threadNode });
  23. let container = document.createElement("vbox");
  24. treeRoot.autoExpandDepth = 0;
  25. treeRoot.attachTo(container);
  26. let $$ = node => container.querySelectorAll(node);
  27. let $fun = (node, ancestor) => (ancestor || container).querySelector(
  28. ".call-tree-cell[type=function] > " + node);
  29. let $$fun = (node, ancestor) => (ancestor || container).querySelectorAll(
  30. ".call-tree-cell[type=function] > " + node);
  31. let $$dur = i => container.querySelectorAll(".call-tree-cell[type=duration]")[i];
  32. let $$per = i => container.querySelectorAll(".call-tree-cell[type=percentage]")[i];
  33. let $$sam = i => container.querySelectorAll(".call-tree-cell[type=samples]")[i];
  34. is(container.childNodes.length, 1,
  35. "The container node should have one child available.");
  36. is(container.childNodes[0].className, "call-tree-item",
  37. "The root node in the tree has the correct class name.");
  38. is($$dur(0).textContent.trim(), "20 ms",
  39. "The root's duration cell displays the correct value.");
  40. is($$per(0).textContent.trim(), "100%",
  41. "The root's percentage cell displays the correct value.");
  42. is($$sam(0).textContent.trim(), "0",
  43. "The root's samples cell displays the correct value.");
  44. is($$fun(".call-tree-name")[0].textContent.trim(), "(root)",
  45. "The root's function cell displays the correct name.");
  46. is($$fun(".call-tree-url")[0], null,
  47. "The root's function cell displays no url.");
  48. is($$fun(".call-tree-line")[0], null,
  49. "The root's function cell displays no line.");
  50. is($$fun(".call-tree-host")[0], null,
  51. "The root's function cell displays no host.");
  52. is($$fun(".call-tree-category")[0], null,
  53. "The root's function cell displays no category.");
  54. treeRoot.expand();
  55. is(container.childNodes.length, 2,
  56. "The container node should have two children available.");
  57. is(container.childNodes[0].className, "call-tree-item",
  58. "The root node in the tree has the correct class name.");
  59. is(container.childNodes[1].className, "call-tree-item",
  60. "The .A node in the tree has the correct class name.");
  61. // Test demangling in the profiler tree.
  62. is($$dur(1).textContent.trim(), "20 ms",
  63. "The .A node's duration cell displays the correct value.");
  64. is($$per(1).textContent.trim(), "100%",
  65. "The .A node's percentage cell displays the correct value.");
  66. is($$sam(1).textContent.trim(), "0",
  67. "The .A node's samples cell displays the correct value.");
  68. is($fun(".call-tree-name", $$(".call-tree-item")[1]).textContent.trim(), UNMANGLED_FN,
  69. "The .A node's function cell displays the correct name.");
  70. is($fun(".call-tree-url", $$(".call-tree-item")[1]).textContent.trim(), "baz",
  71. "The .A node's function cell displays the correct url.");
  72. is($fun(".call-tree-line", $$(".call-tree-item")[1]).textContent.trim(), ":12",
  73. "The .A node's function cell displays the correct line.");
  74. is($fun(".call-tree-host", $$(".call-tree-item")[1]).textContent.trim(), "foo",
  75. "The .A node's function cell displays the correct host.");
  76. is($fun(".call-tree-category", $$(".call-tree-item")[1]).textContent.trim(), "Gecko",
  77. "The .A node's function cell displays the correct category.");
  78. ok($$(".call-tree-item")[1].getAttribute("tooltiptext").includes(MANGLED_FN),
  79. "The .A node's row's tooltip contains the original mangled name.");
  80. let A = treeRoot.getChild();
  81. A.expand();
  82. is(container.childNodes.length, 4,
  83. "The container node should have four children available.");
  84. is(container.childNodes[0].className, "call-tree-item",
  85. "The root node in the tree has the correct class name.");
  86. is(container.childNodes[1].className, "call-tree-item",
  87. "The .A node in the tree has the correct class name.");
  88. is(container.childNodes[2].className, "call-tree-item",
  89. "The .B node in the tree has the correct class name.");
  90. is(container.childNodes[3].className, "call-tree-item",
  91. "The .E node in the tree has the correct class name.");
  92. is($$dur(2).textContent.trim(), "15 ms",
  93. "The .A.B node's duration cell displays the correct value.");
  94. is($$per(2).textContent.trim(), "75%",
  95. "The .A.B node's percentage cell displays the correct value.");
  96. is($$sam(2).textContent.trim(), "0",
  97. "The .A.B node's samples cell displays the correct value.");
  98. is($fun(".call-tree-name", $$(".call-tree-item")[2]).textContent.trim(), "B",
  99. "The .A.B node's function cell displays the correct name.");
  100. is($fun(".call-tree-url", $$(".call-tree-item")[2]).textContent.trim(), "baz",
  101. "The .A.B node's function cell displays the correct url.");
  102. ok($fun(".call-tree-url", $$(".call-tree-item")[2]).getAttribute("tooltiptext").includes("http://foo/bar/baz"),
  103. "The .A.B node's function cell displays the correct url tooltiptext.");
  104. is($fun(".call-tree-line", $$(".call-tree-item")[2]).textContent.trim(), ":34",
  105. "The .A.B node's function cell displays the correct line.");
  106. is($fun(".call-tree-host", $$(".call-tree-item")[2]).textContent.trim(), "foo",
  107. "The .A.B node's function cell displays the correct host.");
  108. is($fun(".call-tree-category", $$(".call-tree-item")[2]).textContent.trim(), "Styles",
  109. "The .A.B node's function cell displays the correct category.");
  110. is($$dur(3).textContent.trim(), "5 ms",
  111. "The .A.E node's duration cell displays the correct value.");
  112. is($$per(3).textContent.trim(), "25%",
  113. "The .A.E node's percentage cell displays the correct value.");
  114. is($$sam(3).textContent.trim(), "0",
  115. "The .A.E node's samples cell displays the correct value.");
  116. is($fun(".call-tree-name", $$(".call-tree-item")[3]).textContent.trim(), "E",
  117. "The .A.E node's function cell displays the correct name.");
  118. is($fun(".call-tree-url", $$(".call-tree-item")[3]).textContent.trim(), "baz",
  119. "The .A.E node's function cell displays the correct url.");
  120. ok($fun(".call-tree-url", $$(".call-tree-item")[3]).getAttribute("tooltiptext").includes("http://foo/bar/baz"),
  121. "The .A.E node's function cell displays the correct url tooltiptext.");
  122. is($fun(".call-tree-line", $$(".call-tree-item")[3]).textContent.trim(), ":90",
  123. "The .A.E node's function cell displays the correct line.");
  124. is($fun(".call-tree-host", $$(".call-tree-item")[3]).textContent.trim(), "foo",
  125. "The .A.E node's function cell displays the correct host.");
  126. is($fun(".call-tree-category", $$(".call-tree-item")[3]).textContent.trim(), "GC",
  127. "The .A.E node's function cell displays the correct category.");
  128. });