Bug 1080911 - Sort frames by samples instead of duration in the call tree. r=vp

browser/devtools/profiler/test/browser_profiler_tree-view-01.js

@@ -29,7 +29,7 @@ function test() {
 
   is(container.childNodes[0].childNodes[0].getAttribute("type"), "duration",
     "The root node in the tree has a duration cell.");
-  is(container.childNodes[0].childNodes[0].getAttribute("value"), "18",
+  is(container.childNodes[0].childNodes[0].getAttribute("value"), "15",
     "The root node in the tree has the correct duration cell value.");
 
   is(container.childNodes[0].childNodes[1].getAttribute("type"), "percentage",
@@ -49,7 +49,7 @@ function test() {
 
   is(container.childNodes[0].childNodes[4].getAttribute("type"), "samples",
     "The root node in the tree has an samples cell.");
-  is(container.childNodes[0].childNodes[4].getAttribute("value"), "3",
+  is(container.childNodes[0].childNodes[4].getAttribute("value"), "4",
     "The root node in the tree has the correct samples cell value.");
 
   is(container.childNodes[0].childNodes[5].getAttribute("type"), "function",
@@ -69,7 +69,7 @@ let gSamples = [{
     { category: 32, location: "C (http://foo/bar/baz:56)" }
   ]
 }, {
-  time: 5 + 6,
+  time: 5 + 1,
   frames: [
     { category: 8,  location: "(root)" },
     { category: 8,  location: "A (http://foo/bar/baz:12)" },
@@ -77,7 +77,15 @@ let gSamples = [{
     { category: 64, location: "D (http://foo/bar/baz:78)" }
   ]
 }, {
-  time: 5 + 6 + 7,
+  time: 5 + 1 + 2,
+  frames: [
+    { category: 8,  location: "(root)" },
+    { category: 8,  location: "A (http://foo/bar/baz:12)" },
+    { category: 16, location: "B (http://foo/bar/baz:34)" },
+    { category: 64, location: "D (http://foo/bar/baz:78)" }
+  ]
+}, {
+  time: 5 + 1 + 2 + 7,
   frames: [
     { category: 8,   location: "(root)" },
     { category: 8,   location: "A (http://foo/bar/baz:12)" },

browser/devtools/profiler/test/browser_profiler_tree-view-02.js

@@ -27,11 +27,11 @@ function test() {
   is(container.childNodes[0].className, "call-tree-item",
     "The root node in the tree has the correct class name.");
 
-  is($$dur(0).getAttribute("value"), "18",
+  is($$dur(0).getAttribute("value"), "15",
     "The root's duration cell displays the correct value.");
   is($$perc(0).getAttribute("value"), "100%",
     "The root's percentage cell displays the correct value.");
-  is($$sampl(0).getAttribute("value"), "3",
+  is($$sampl(0).getAttribute("value"), "4",
     "The root's samples cell displays the correct value.");
   is($$fun(".call-tree-name")[0].getAttribute("value"), "(root)",
     "The root's function cell displays the correct name.");
@@ -53,11 +53,11 @@ function test() {
   is(container.childNodes[1].className, "call-tree-item",
     "The .A node in the tree has the correct class name.");
 
-  is($$dur(1).getAttribute("value"), "18",
+  is($$dur(1).getAttribute("value"), "15",
     "The .A node's duration cell displays the correct value.");
   is($$perc(1).getAttribute("value"), "100%",
     "The .A node's percentage cell displays the correct value.");
-  is($$sampl(1).getAttribute("value"), "3",
+  is($$sampl(1).getAttribute("value"), "4",
     "The .A node's samples cell displays the correct value.");
   is($$fun(".call-tree-name")[1].getAttribute("value"), "A",
     "The .A node's function cell displays the correct name.");
@@ -82,11 +82,11 @@ function test() {
   is(container.childNodes[3].className, "call-tree-item",
     "The .E node in the tree has the correct class name.");
 
-  is($$dur(2).getAttribute("value"), "11",
+  is($$dur(2).getAttribute("value"), "8",
     "The .A.B node's duration cell displays the correct value.");
-  is($$perc(2).getAttribute("value"), "66.66%",
+  is($$perc(2).getAttribute("value"), "75%",
     "The .A.B node's percentage cell displays the correct value.");
-  is($$sampl(2).getAttribute("value"), "2",
+  is($$sampl(2).getAttribute("value"), "3",
     "The .A.B node's samples cell displays the correct value.");
   is($$fun(".call-tree-name")[2].getAttribute("value"), "B",
     "The .A.B node's function cell displays the correct name.");
@@ -103,7 +103,7 @@ function test() {
 
   is($$dur(3).getAttribute("value"), "7",
     "The .A.E node's duration cell displays the correct value.");
-  is($$perc(3).getAttribute("value"), "33.33%",
+  is($$perc(3).getAttribute("value"), "25%",
     "The .A.E node's percentage cell displays the correct value.");
   is($$sampl(3).getAttribute("value"), "1",
     "The .A.E node's samples cell displays the correct value.");
@@ -132,7 +132,7 @@ let gSamples = [{
     { category: 32, location: "C (http://foo/bar/baz:56)" }
   ]
 }, {
-  time: 5 + 6,
+  time: 5 + 1,
   frames: [
     { category: 8,  location: "(root)" },
     { category: 8,  location: "A (http://foo/bar/baz:12)" },
@@ -140,7 +140,15 @@ let gSamples = [{
     { category: 64, location: "D (http://foo/bar/baz:78)" }
   ]
 }, {
-  time: 5 + 6 + 7,
+  time: 5 + 1 + 2,
+  frames: [
+    { category: 8,  location: "(root)" },
+    { category: 8,  location: "A (http://foo/bar/baz:12)" },
+    { category: 16, location: "B (http://foo/bar/baz:34)" },
+    { category: 64, location: "D (http://foo/bar/baz:78)" }
+  ]
+}, {
+  time: 5 + 1 + 2 + 7,
   frames: [
     { category: 8,   location: "(root)" },
     { category: 8,   location: "A (http://foo/bar/baz:12)" },

browser/devtools/profiler/test/browser_profiler_tree-view-03.js

@@ -55,13 +55,13 @@ function test() {
   is($$name(6).getAttribute("value"), "F",
     "The .A.E.F node's function cell displays the correct name.");
 
-  is($$duration(0).getAttribute("value"), "18",
+  is($$duration(0).getAttribute("value"), "15",
     "The root node's function cell displays the correct duration.");
-  is($$duration(1).getAttribute("value"), "18",
+  is($$duration(1).getAttribute("value"), "15",
     "The .A node's function cell displays the correct duration.");
-  is($$duration(2).getAttribute("value"), "11",
+  is($$duration(2).getAttribute("value"), "8",
     "The .A.B node's function cell displays the correct duration.");
-  is($$duration(3).getAttribute("value"), "6",
+  is($$duration(3).getAttribute("value"), "3",
     "The .A.B.D node's function cell displays the correct duration.");
   is($$duration(4).getAttribute("value"), "5",
     "The .A.B.C node's function cell displays the correct duration.");
@@ -82,7 +82,7 @@ let gSamples = [{
     { category: 32, location: "C (http://foo/bar/baz:56)" }
   ]
 }, {
-  time: 5 + 6,
+  time: 5 + 1,
   frames: [
     { category: 8,  location: "(root)" },
     { category: 8,  location: "A (http://foo/bar/baz:12)" },
@@ -90,7 +90,15 @@ let gSamples = [{
     { category: 64, location: "D (http://foo/bar/baz:78)" }
   ]
 }, {
-  time: 5 + 6 + 7,
+  time: 5 + 1 + 2,
+  frames: [
+    { category: 8,  location: "(root)" },
+    { category: 8,  location: "A (http://foo/bar/baz:12)" },
+    { category: 16, location: "B (http://foo/bar/baz:34)" },
+    { category: 64, location: "D (http://foo/bar/baz:78)" }
+  ]
+}, {
+  time: 5 + 1 + 2 + 7,
   frames: [
     { category: 8,   location: "(root)" },
     { category: 8,   location: "A (http://foo/bar/baz:12)" },

browser/devtools/profiler/test/browser_profiler_tree-view-04.js

@@ -29,35 +29,35 @@ function test() {
 
   let A = treeRoot.getChild();
   let B = A.getChild();
-  let C = B.getChild();
+  let D = B.getChild();
 
-  is(C.target.getAttribute("origin"), "chrome",
-    "The .A.B.C node's 'origin' attribute is correct.");
-  is(C.target.getAttribute("category"), "gc",
-    "The .A.B.C node's 'category' attribute is correct.");
-  is(C.target.getAttribute("tooltiptext"), "D (http://foo/bar/baz:78)",
-    "The .A.B.C node's 'tooltiptext' attribute is correct.");
+  is(D.target.getAttribute("origin"), "chrome",
+    "The .A.B.D node's 'origin' attribute is correct.");
+  is(D.target.getAttribute("category"), "gc",
+    "The .A.B.D node's 'category' attribute is correct.");
+  is(D.target.getAttribute("tooltiptext"), "D (http://foo/bar/baz:78)",
+    "The .A.B.D node's 'tooltiptext' attribute is correct.");
   ok(!A.target.querySelector(".call-tree-zoom").hidden,
-    "The .A.B.C node's zoom button cell should not be hidden.");
+    "The .A.B.D node's zoom button cell should not be hidden.");
   ok(!A.target.querySelector(".call-tree-category").hidden,
-    "The .A.B.C node's category label cell should not be hidden.");
+    "The .A.B.D node's category label cell should not be hidden.");
 
-  is(C.target.childNodes.length, 6,
+  is(D.target.childNodes.length, 6,
     "The number of columns displayed for tree items is correct.");
-  is(C.target.childNodes[0].getAttribute("type"), "duration",
+  is(D.target.childNodes[0].getAttribute("type"), "duration",
     "The first column displayed for tree items is correct.");
-  is(C.target.childNodes[1].getAttribute("type"), "percentage",
+  is(D.target.childNodes[1].getAttribute("type"), "percentage",
     "The third column displayed for tree items is correct.");
-  is(C.target.childNodes[2].getAttribute("type"), "self-duration",
+  is(D.target.childNodes[2].getAttribute("type"), "self-duration",
     "The second column displayed for tree items is correct.");
-  is(C.target.childNodes[3].getAttribute("type"), "self-percentage",
+  is(D.target.childNodes[3].getAttribute("type"), "self-percentage",
     "The fourth column displayed for tree items is correct.");
-  is(C.target.childNodes[4].getAttribute("type"), "samples",
+  is(D.target.childNodes[4].getAttribute("type"), "samples",
     "The fifth column displayed for tree items is correct.");
-  is(C.target.childNodes[5].getAttribute("type"), "function",
+  is(D.target.childNodes[5].getAttribute("type"), "function",
     "The sixth column displayed for tree items is correct.");
 
-  let functionCell = C.target.childNodes[5];
+  let functionCell = D.target.childNodes[5];
 
   is(functionCell.childNodes.length, 8,
     "The number of columns displayed for function cells is correct.");
@@ -90,7 +90,7 @@ let gSamples = [{
     { category: 32, location: "C (http://foo/bar/baz:56)" }
   ]
 }, {
-  time: 5 + 6,
+  time: 5 + 1,
   frames: [
     { category: 8,  location: "(root)" },
     { category: 8,  location: "A (http://foo/bar/baz:12)" },
@@ -98,7 +98,15 @@ let gSamples = [{
     { category: 64, location: "D (http://foo/bar/baz:78)" }
   ]
 }, {
-  time: 5 + 6 + 7,
+  time: 5 + 1 + 2,
+  frames: [
+    { category: 8,  location: "(root)" },
+    { category: 8,  location: "A (http://foo/bar/baz:12)" },
+    { category: 16, location: "B (http://foo/bar/baz:34)" },
+    { category: 64, location: "D (http://foo/bar/baz:78)" }
+  ]
+}, {
+  time: 5 + 1 + 2 + 7,
   frames: [
     { category: 8,   location: "(root)" },
     { category: 8,   location: "A (http://foo/bar/baz:12)" },

browser/devtools/profiler/test/browser_profiler_tree-view-05.js

@@ -40,7 +40,7 @@ let gSamples = [{
     { category: 32, location: "C (http://foo/bar/baz:56)" }
   ]
 }, {
-  time: 5 + 6,
+  time: 5 + 1,
   frames: [
     { category: 8,  location: "(root)" },
     { category: 8,  location: "A (http://foo/bar/baz:12)" },
@@ -48,7 +48,15 @@ let gSamples = [{
     { category: 64, location: "D (http://foo/bar/baz:78)" }
   ]
 }, {
-  time: 5 + 6 + 7,
+  time: 5 + 1 + 2,
+  frames: [
+    { category: 8,  location: "(root)" },
+    { category: 8,  location: "A (http://foo/bar/baz:12)" },
+    { category: 16, location: "B (http://foo/bar/baz:34)" },
+    { category: 64, location: "D (http://foo/bar/baz:78)" }
+  ]
+}, {
+  time: 5 + 1 + 2 + 7,
   frames: [
     { category: 8,   location: "(root)" },
     { category: 8,   location: "A (http://foo/bar/baz:12)" },

browser/devtools/profiler/test/browser_profiler_tree-view-06.js

@@ -18,19 +18,19 @@ let test = Task.async(function*() {
 
   let A = treeRoot.getChild();
   let B = A.getChild();
-  let C = B.getChild();
+  let D = B.getChild();
 
   let receivedLinkEvent = treeRoot.once("link");
-  EventUtils.sendMouseEvent({ type: "mousedown" }, C.target.querySelector(".call-tree-url"));
+  EventUtils.sendMouseEvent({ type: "mousedown" }, D.target.querySelector(".call-tree-url"));
 
   let eventItem = yield receivedLinkEvent;
-  is(eventItem, C, "The 'link' event target is correct.");
+  is(eventItem, D, "The 'link' event target is correct.");
 
   let receivedZoomEvent = treeRoot.once("zoom");
-  EventUtils.sendMouseEvent({ type: "mousedown" }, C.target.querySelector(".call-tree-zoom"));
+  EventUtils.sendMouseEvent({ type: "mousedown" }, D.target.querySelector(".call-tree-zoom"));
 
   eventItem = yield receivedZoomEvent;
-  is(eventItem, C, "The 'zoom' event target is correct.");
+  is(eventItem, D, "The 'zoom' event target is correct.");
 
   finish();
 });
@@ -44,7 +44,7 @@ let gSamples = [{
     { category: 32, location: "C (http://foo/bar/baz:56)" }
   ]
 }, {
-  time: 5 + 6,
+  time: 5 + 1,
   frames: [
     { category: 8,  location: "(root)" },
     { category: 8,  location: "A (http://foo/bar/baz:12)" },
@@ -52,7 +52,15 @@ let gSamples = [{
     { category: 64, location: "D (http://foo/bar/baz:78)" }
   ]
 }, {
-  time: 5 + 6 + 7,
+  time: 5 + 1 + 2,
+  frames: [
+    { category: 8,  location: "(root)" },
+    { category: 8,  location: "A (http://foo/bar/baz:12)" },
+    { category: 16, location: "B (http://foo/bar/baz:34)" },
+    { category: 64, location: "D (http://foo/bar/baz:78)" }
+  ]
+}, {
+  time: 5 + 1 + 2 + 7,
   frames: [
     { category: 8,   location: "(root)" },
     { category: 8,   location: "A (http://foo/bar/baz:12)" },

browser/devtools/profiler/test/browser_profiler_tree-view-07.js

@@ -19,18 +19,18 @@ function test() {
 
   let A = treeRoot.getChild();
   let B = A.getChild();
-  let C = B.getChild();
+  let D = B.getChild();
 
-  is(C.root, treeRoot,
-    "The .A.B.C node has the correct root.");
-  is(C.parent, B,
-    "The .A.B.C node has the correct parent.");
-  is(C.level, 3,
-    "The .A.B.C node has the correct level.");
-  is(C.target.className, "call-tree-item",
-    "The .A.B.C node has the correct target node.");
-  is(C.container.id, "call-tree-container",
-    "The .A.B.C node has the correct container node.");
+  is(D.root, treeRoot,
+    "The .A.B.D node has the correct root.");
+  is(D.parent, B,
+    "The .A.B.D node has the correct parent.");
+  is(D.level, 3,
+    "The .A.B.D node has the correct level.");
+  is(D.target.className, "call-tree-item",
+    "The .A.B.D node has the correct target node.");
+  is(D.container.id, "call-tree-container",
+    "The .A.B.D node has the correct container node.");
 
   finish();
 }
@@ -44,7 +44,7 @@ let gSamples = [{
     { category: 32, location: "C (http://foo/bar/baz:56)" }
   ]
 }, {
-  time: 5 + 6,
+  time: 5 + 1,
   frames: [
     { category: 8,  location: "(root)" },
     { category: 8,  location: "A (http://foo/bar/baz:12)" },
@@ -52,7 +52,15 @@ let gSamples = [{
     { category: 64, location: "D (http://foo/bar/baz:78)" }
   ]
 }, {
-  time: 5 + 6 + 7,
+  time: 5 + 1 + 2,
+  frames: [
+    { category: 8,  location: "(root)" },
+    { category: 8,  location: "A (http://foo/bar/baz:12)" },
+    { category: 16, location: "B (http://foo/bar/baz:34)" },
+    { category: 64, location: "D (http://foo/bar/baz:78)" }
+  ]
+}, {
+  time: 5 + 1 + 2 + 7,
   frames: [
     { category: 8,   location: "(root)" },
     { category: 8,   location: "A (http://foo/bar/baz:12)" },

browser/devtools/profiler/utils/tree-view.js

@@ -174,8 +174,8 @@ CallView.prototype = Heritage.extend(AbstractTreeItem.prototype, {
       }));
     }
 
-    // Sort the "callees" asc. by duration, before inserting them in the tree.
-    children.sort((a, b) => a.frame.duration < b.frame.duration ? 1 : -1);
+    // Sort the "callees" asc. by samples, before inserting them in the tree.
+    children.sort((a, b) => a.frame.samples < b.frame.samples ? 1 : -1);
   },
 
   /**