1108843-platformdata.patch

From: Jordan Santell <jsantell@gmail.com>
Date: Fri, 20 Mar 2015 16:50:43 -0700
Subject: Bug 1108843 - generalize platform data in call tree view when
 platform data is hidden. r=vp

diff --git a/browser/devtools/performance/test/browser.ini b/browser/devtools/performance/test/browser.ini
index ab202744..53258b7 100644
--- a/browser/devtools/performance/test/browser.ini
+++ b/browser/devtools/performance/test/browser.ini
@@ -94,17 +94,19 @@ support-files =
 [browser_profiler_tree-abstract-04.js]
 [browser_profiler_tree-frame-node.js]
 [browser_profiler_tree-model-01.js]
 [browser_profiler_tree-model-02.js]
 [browser_profiler_tree-model-03.js]
 [browser_profiler_tree-model-04.js]
 [browser_profiler_tree-model-05.js]
 [browser_profiler_tree-model-06.js]
+[browser_profiler_tree-model-07.js]
 [browser_profiler_tree-view-01.js]
 [browser_profiler_tree-view-02.js]
 [browser_profiler_tree-view-03.js]
 [browser_profiler_tree-view-04.js]
 [browser_profiler_tree-view-05.js]
 [browser_profiler_tree-view-06.js]
 [browser_profiler_tree-view-07.js]
+[browser_profiler_tree-view-08.js]
 [browser_timeline_blueprint.js]
 [browser_timeline_filters.js]
diff --git a/browser/devtools/performance/test/browser_profiler_tree-model-07.js b/browser/devtools/performance/test/browser_profiler_tree-model-07.js
new file mode 100644
index 0000000..5896093
--- /dev/null
+++ b/browser/devtools/performance/test/browser_profiler_tree-model-07.js
@@ -0,0 +1,91 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that when displaying only content nodes, platform nodes are generalized.
+ */
+
+let { CATEGORY_MASK } = devtools.require("devtools/shared/profiler/global");
+
+function test() {
+  let { ThreadNode } = devtools.require("devtools/shared/profiler/tree-model");
+  let url = (n) => `http://content/${n}`;
+
+  // Create a root node from a given samples array.
+
+  let root = new ThreadNode(gSamples, { contentOnly: true });
+
+  /*
+   * should have a tree like:
+   * root
+   *   - (JS)
+   *   - A
+   *     - (GC)
+   *     - B
+   *       - C
+   *       - D
+   *     - E
+   *       - F
+   *       - (JS)
+   */
+
+  // Test the root node.
+
+  is(Object.keys(root.calls).length, 2, "root has 2 children");
+  ok(root.calls[url("A")], "root has content child");
+  ok(root.calls["64"], "root has platform generalized child");
+  is(Object.keys(root.calls["64"].calls).length, 0, "platform generalized child is a leaf.");
+
+  ok(root.calls[url("A")].calls["128"], "A has platform generalized child of another type");
+  is(Object.keys(root.calls[url("A")].calls["128"].calls).length, 0, "second generalized type is a leaf.");
+
+  ok(root.calls[url("A")].calls[url("E")].calls[url("F")].calls["64"],
+    "a second leaf of the first generalized type exists deep in the tree.");
+  ok(root.calls[url("A")].calls["128"], "A has platform generalized child of another type");
+
+  is(root.calls["64"].category, root.calls[url("A")].calls[url("E")].calls[url("F")].calls["64"].category,
+    "generalized frames of same type are duplicated in top-down view");
+  finish();
+}
+
+let gSamples = [{
+  time: 5,
+  frames: [
+    { location: "(root)" },
+    { location: "http://content/A" },
+    { location: "http://content/B" },
+    { location: "http://content/C" }
+  ]
+}, {
+  time: 5 + 6,
+  frames: [
+    { location: "(root)" },
+    { location: "http://content/A" },
+    { location: "http://content/B" },
+    { location: "contentY", category: CATEGORY_MASK("css") },
+    { location: "http://content/D" }
+  ]
+}, {
+  time: 5 + 6 + 7,
+  frames: [
+    { location: "(root)" },
+    { location: "http://content/A" },
+    { location: "contentY", category: CATEGORY_MASK("css") },
+    { location: "http://content/E" },
+    { location: "http://content/F" },
+    { location: "contentY", category: CATEGORY_MASK("js") },
+  ]
+}, {
+  time: 5 + 20,
+  frames: [
+    { location: "(root)" },
+    { location: "contentX", category: CATEGORY_MASK("js") },
+  ]
+}, {
+  time: 5 + 25,
+  frames: [
+    { location: "(root)" },
+    { location: "http://content/A" },
+    { location: "contentZ", category: CATEGORY_MASK("gc", 1) },
+  ]
+}];
diff --git a/browser/devtools/performance/test/browser_profiler_tree-view-08.js b/browser/devtools/performance/test/browser_profiler_tree-view-08.js
new file mode 100644
index 0000000..7403d28
--- /dev/null
+++ b/browser/devtools/performance/test/browser_profiler_tree-view-08.js
@@ -0,0 +1,104 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that the profiler's tree view renders generalized platform data
+ * when `contentOnly` is on correctly.
+ */
+
+let { CATEGORY_MASK } = devtools.require("devtools/shared/profiler/global");
+
+function test() {
+  let { ThreadNode } = devtools.require("devtools/shared/profiler/tree-model");
+  let { CallView } = devtools.require("devtools/shared/profiler/tree-view");
+
+  /*
+   * should have a tree like:
+   * root
+   *   - A
+   *     - B
+   *       - C
+   *       - D
+   *     - E
+   *       - F
+   *         - (JS)
+   *     - (GC)
+   *   - (JS)
+   */
+
+  let threadNode = new ThreadNode(gSamples, { contentOnly: true });
+  let treeRoot = new CallView({ frame: threadNode, autoExpandDepth: 10 });
+
+  let container = document.createElement("vbox");
+  treeRoot.attachTo(container);
+
+  let A = treeRoot.getChild(0);
+  let JS = treeRoot.getChild(1);
+  let GC = A.getChild(1);
+  let JS2 = A.getChild(2).getChild().getChild();
+
+  is(JS.target.getAttribute("category"), "js",
+    "Generalized JS node has correct category");
+  is(JS.target.getAttribute("tooltiptext"), "JIT",
+    "Generalized JS node has correct category");
+  is(JS.target.querySelector(".call-tree-name").getAttribute("value"), "JIT",
+    "Generalized JS node has correct display value as just the category name.");
+
+  is(JS2.target.getAttribute("category"), "js",
+    "Generalized second JS node has correct category");
+  is(JS2.target.getAttribute("tooltiptext"), "JIT",
+    "Generalized second JS node has correct category");
+  is(JS2.target.querySelector(".call-tree-name").getAttribute("value"), "JIT",
+    "Generalized second JS node has correct display value as just the category name.");
+
+  is(GC.target.getAttribute("category"), "gc",
+    "Generalized GC node has correct category");
+  is(GC.target.getAttribute("tooltiptext"), "GC",
+    "Generalized GC node has correct category");
+  is(GC.target.querySelector(".call-tree-name").getAttribute("value"), "GC",
+    "Generalized GC node has correct display value as just the category name.");
+
+  finish();
+}
+
+let gSamples = [{
+  time: 5,
+  frames: [
+    { location: "(root)" },
+    { location: "http://content/A" },
+    { location: "http://content/B" },
+    { location: "http://content/C" }
+  ]
+}, {
+  time: 5 + 6,
+  frames: [
+    { location: "(root)" },
+    { location: "http://content/A" },
+    { location: "http://content/B" },
+    { location: "contentY", category: CATEGORY_MASK("css") },
+    { location: "http://content/D" }
+  ]
+}, {
+  time: 5 + 6 + 7,
+  frames: [
+    { location: "(root)" },
+    { location: "http://content/A" },
+    { location: "contentY", category: CATEGORY_MASK("css") },
+    { location: "http://content/E" },
+    { location: "http://content/F" },
+    { location: "contentY", category: CATEGORY_MASK("js") },
+  ]
+}, {
+  time: 5 + 20,
+  frames: [
+    { location: "(root)" },
+    { location: "contentX", category: CATEGORY_MASK("js") },
+  ]
+}, {
+  time: 5 + 25,
+  frames: [
+    { location: "(root)" },
+    { location: "http://content/A" },
+    { location: "contentZ", category: CATEGORY_MASK("gc", 1) },
+  ]
+}];
diff --git a/browser/devtools/shared/profiler/tree-model.js b/browser/devtools/shared/profiler/tree-model.js
index 1b79dca..7f87874 100644
--- a/browser/devtools/shared/profiler/tree-model.js
+++ b/browser/devtools/shared/profiler/tree-model.js
@@ -1,24 +1,29 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 const {Cc, Ci, Cu, Cr} = require("chrome");
+const {extend} = require("sdk/util/object");
 
 loader.lazyRequireGetter(this, "Services");
 loader.lazyRequireGetter(this, "L10N",
   "devtools/shared/profiler/global", true);
 loader.lazyRequireGetter(this, "CATEGORY_MAPPINGS",
   "devtools/shared/profiler/global", true);
+loader.lazyRequireGetter(this, "CATEGORIES",
+  "devtools/shared/profiler/global", true);
 loader.lazyRequireGetter(this, "CATEGORY_JIT",
   "devtools/shared/profiler/global", true);
 loader.lazyRequireGetter(this, "JITOptimizations",
   "devtools/shared/profiler/jit", true);
+loader.lazyRequireGetter(this, "CATEGORY_OTHER",
+  "devtools/shared/profiler/global", true);
 
 const CHROME_SCHEMES = ["chrome://", "resource://", "jar:file://"];
 const CONTENT_SCHEMES = ["http://", "https://", "file://", "app://"];
 
 exports.ThreadNode = ThreadNode;
 exports.FrameNode = FrameNode;
 exports.FrameNode.isContent = isContent;
 
@@ -92,17 +97,17 @@ ThreadNode.prototype = {
     }
 
     let sampleFrames = sample.frames;
 
     // Filter out platform frames if only content-related function calls
     // should be taken into consideration.
     if (options.contentOnly) {
       // The (root) node is not considered a content function, it'll be removed.
-      sampleFrames = sampleFrames.filter(isContent);
+      sampleFrames = filterPlatformData(sampleFrames);
     } else {
       // Remove the (root) node manually.
       sampleFrames = sampleFrames.slice(1);
     }
     // If no frames remain after filtering, then this is a leaf node, no need
     // to continue.
     if (!sampleFrames.length) {
       return;
@@ -156,28 +161,32 @@ ThreadNode.prototype = {
  * @param number line
  *        The line number inside the source containing this function call.
  * @param number column
  *        The column number inside the source containing this function call.
  * @param number category
  *        The category type of this function call ("js", "graphics" etc.).
  * @param number allocations
  *        The number of memory allocations performed in this frame.
+ * @param boolean isMetaCategory
+ *        Whether or not this is a platform node that should appear as a
+ *        generalized meta category or not.
  */
-function FrameNode({ location, line, column, category, allocations }) {
+function FrameNode({ location, line, column, category, allocations, isMetaCategory }) {
   this.location = location;
   this.line = line;
   this.column = column;
   this.category = category;
   this.allocations = allocations || 0;
   this.sampleTimes = [];
   this.samples = 0;
   this.duration = 0;
   this.calls = {};
   this._optimizations = null;
+  this.isMetaCategory = isMetaCategory;
 }
 
 FrameNode.prototype = {
   /**
    * Adds function calls in the tree from a sample's frames. For example, given
    * the the frames below (which would account for three calls to `insert` on
    * the root frame), the following tree structure is created:
    *
@@ -197,18 +206,22 @@ FrameNode.prototype = {
    * @param number duration
    *        The amount of time spent executing all functions on the stack.
    */
   insert: function(frames, optimizations, index, time, duration, _store = this.calls) {
     let frame = frames[index];
     if (!frame) {
       return;
     }
-    let location = frame.location;
-    let child = _store[location] || (_store[location] = new FrameNode(frame));
+    // If we are only displaying content, then platform data will have
+    // a `isMetaCategory` property. Group by category (GC, Graphics, etc.)
+    // to group together frames so they're displayed only once, since we don't
+    // need the location anyway.
+    let key = frame.isMetaCategory ? frame.category : frame.location;
+    let child = _store[key] || (_store[key] = new FrameNode(frame));
     child.sampleTimes.push({ start: time, end: time + duration });
     child.samples++;
     child.duration += duration;
     if (optimizations && frame.optsIndex != null) {
       let opts = child._optimizations || (child._optimizations = new JITOptimizations(optimizations));
       opts.addOptimizationSite(frame.optsIndex);
     }
     child.insert(frames, optimizations, index + 1, time, duration);
@@ -268,17 +281,18 @@ FrameNode.prototype = {
       nodeType: "Frame",
       functionName: functionName,
       fileName: fileName,
       hostName: hostName,
       url: url,
       line: line,
       column: column,
       categoryData: categoryData,
-      isContent: !!isContent(this)
+      isContent: !!isContent(this),
+      isMetaCategory: this.isMetaCategory
     };
   },
 
   /**
    * Returns whether or not the frame node has an JITOptimizations model.
    *
    * @return {Boolean}
    */
@@ -327,8 +341,52 @@ function nsIURL(url) {
     // The passed url string is invalid.
   }
   gNSURLStore.set(url, uri);
   return uri;
 }
 
 // The cache used in the `nsIURL` function.
 let gNSURLStore = new Map();
+
+/**
+ * This filters out platform data frames in a sample. With latest performance
+ * tool in Fx40, when displaying only content, we still filter out all platform data,
+ * except we generalize platform data that are leaves. We do this because of two
+ * observations:
+ *
+ * 1. The leaf is where time is _actually_ being spent, so we _need_ to show it
+ * to developers in some way to give them accurate profiling data. We decide to
+ * split the platform into various category buckets and just show time spent in
+ * each bucket.
+ *
+ * 2. The calls leading to the leaf _aren't_ where we are spending time, but
+ * _do_ give the developer context for how they got to the leaf where they _are_
+ * spending time. For non-platform hackers, the non-leaf platform frames don't
+ * give any meaningful context, and so we can safely filter them out.
+ *
+ * Example transformations:
+ * Before: PlatformA -> PlatformB -> ContentA -> ContentB
+ * After:  ContentA -> ContentB
+ *
+ * Before: PlatformA -> ContentA -> PlatformB -> PlatformC
+ * After:  ContentA -> Category(PlatformC)
+ */
+function filterPlatformData (frames) {
+  let result = [];
+  let last = frames.length - 1;
+  let frame;
+
+  for (let i = 0; i < frames.length; i++) {
+    frame = frames[i];
+    if (isContent(frame)) {
+      result.push(frame);
+    } else if (last === i) {
+      // Extend here so we're not destructively editing
+      // the original profiler data. Set isMetaCategory `true`,
+      // and ensure we have a category set by default, because that's how
+      // the generalized frame nodes are organized.
+      result.push(extend({ isMetaCategory: true, category: CATEGORY_OTHER }, frame));
+    }
+  }
+
+  return result;
+}
diff --git a/browser/devtools/shared/profiler/tree-view.js b/browser/devtools/shared/profiler/tree-view.js
index 16e45b1..eb67806 100644
--- a/browser/devtools/shared/profiler/tree-view.js
+++ b/browser/devtools/shared/profiler/tree-view.js
@@ -182,17 +182,18 @@ CallView.prototype = Heritage.extend(AbstractTreeItem.prototype, {
     if (this.visibleCells.function) {
       var functionCell = this._createFunctionCell(arrowNode, frameInfo, this.level);
     }
 
     let targetNode = document.createElement("hbox");
     targetNode.className = "call-tree-item";
     targetNode.setAttribute("origin", frameInfo.isContent ? "content" : "chrome");
     targetNode.setAttribute("category", frameInfo.categoryData.abbrev || "");
-    targetNode.setAttribute("tooltiptext", this.frame.location || "");
+    targetNode.setAttribute("tooltiptext", frameInfo.isMetaCategory ? frameInfo.categoryData.label :
+                                           this.frame.location || "");
     if (this.hidden) {
       targetNode.style.display = "none";
     }
 
     let isRoot = frameInfo.nodeType == "Thread";
     if (isRoot) {
       functionCell.querySelector(".call-tree-zoom").hidden = true;
       functionCell.querySelector(".call-tree-category").hidden = true;
@@ -304,58 +305,63 @@ CallView.prototype = Heritage.extend(AbstractTreeItem.prototype, {
     cell.style.MozMarginStart = (frameLevel * CALL_TREE_INDENTATION) + "px";
     cell.setAttribute("type", "function");
     cell.appendChild(arrowNode);
 
     let nameNode = this.document.createElement("label");
     nameNode.className = "plain call-tree-name";
     nameNode.setAttribute("flex", "1");
     nameNode.setAttribute("crop", "end");
-    nameNode.setAttribute("value", frameInfo.functionName || "");
+    nameNode.setAttribute("value", frameInfo.isMetaCategory
+                                     ? frameInfo.categoryData.label
+                                     : frameInfo.functionName || "");
     cell.appendChild(nameNode);
 
-    let urlNode = this.document.createElement("label");
-    urlNode.className = "plain call-tree-url";
-    urlNode.setAttribute("flex", "1");
-    urlNode.setAttribute("crop", "end");
-    urlNode.setAttribute("value", frameInfo.fileName || "");
-    urlNode.setAttribute("tooltiptext", URL_LABEL_TOOLTIP + " → " + frameInfo.url);
-    urlNode.addEventListener("mousedown", this._onUrlClick);
-    cell.appendChild(urlNode);
-
-    let lineNode = this.document.createElement("label");
-    lineNode.className = "plain call-tree-line";
-    lineNode.setAttribute("value", frameInfo.line ? ":" + frameInfo.line : "");
-    cell.appendChild(lineNode);
-
-    let columnNode = this.document.createElement("label");
-    columnNode.className = "plain call-tree-column";
-    columnNode.setAttribute("value", frameInfo.column ? ":" + frameInfo.column : "");
-    cell.appendChild(columnNode);
-
-    let hostNode = this.document.createElement("label");
-    hostNode.className = "plain call-tree-host";
-    hostNode.setAttribute("value", frameInfo.hostName || "");
-    cell.appendChild(hostNode);
-
-    let zoomNode = this.document.createElement("button");
-    zoomNode.className = "plain call-tree-zoom";
-    zoomNode.setAttribute("tooltiptext", ZOOM_BUTTON_TOOLTIP);
-    zoomNode.addEventListener("mousedown", this._onZoomClick);
-    cell.appendChild(zoomNode);
-
-    let spacerNode = this.document.createElement("spacer");
-    spacerNode.setAttribute("flex", "10000");
-    cell.appendChild(spacerNode);
-
-    let categoryNode = this.document.createElement("label");
-    categoryNode.className = "plain call-tree-category";
-    categoryNode.style.color = frameInfo.categoryData.color;
-    categoryNode.setAttribute("value", frameInfo.categoryData.label || "");
-    cell.appendChild(categoryNode);
+    // Don't render detailed labels for meta category frames
+    if (!frameInfo.isMetaCategory) {
+      let urlNode = this.document.createElement("label");
+      urlNode.className = "plain call-tree-url";
+      urlNode.setAttribute("flex", "1");
+      urlNode.setAttribute("crop", "end");
+      urlNode.setAttribute("value", frameInfo.fileName || "");
+      urlNode.setAttribute("tooltiptext", URL_LABEL_TOOLTIP + " → " + frameInfo.url);
+      urlNode.addEventListener("mousedown", this._onUrlClick);
+      cell.appendChild(urlNode);
+
+      let lineNode = this.document.createElement("label");
+      lineNode.className = "plain call-tree-line";
+      lineNode.setAttribute("value", frameInfo.line ? ":" + frameInfo.line : "");
+      cell.appendChild(lineNode);
+
+      let columnNode = this.document.createElement("label");
+      columnNode.className = "plain call-tree-column";
+      columnNode.setAttribute("value", frameInfo.column ? ":" + frameInfo.column : "");
+      cell.appendChild(columnNode);
+
+      let hostNode = this.document.createElement("label");
+      hostNode.className = "plain call-tree-host";
+      hostNode.setAttribute("value", frameInfo.hostName || "");
+      cell.appendChild(hostNode);
+
+      let zoomNode = this.document.createElement("button");
+      zoomNode.className = "plain call-tree-zoom";
+      zoomNode.setAttribute("tooltiptext", ZOOM_BUTTON_TOOLTIP);
+      zoomNode.addEventListener("mousedown", this._onZoomClick);
+      cell.appendChild(zoomNode);
+
+      let spacerNode = this.document.createElement("spacer");
+      spacerNode.setAttribute("flex", "10000");
+      cell.appendChild(spacerNode);
+
+      let categoryNode = this.document.createElement("label");
+      categoryNode.className = "plain call-tree-category";
+      categoryNode.style.color = frameInfo.categoryData.color;
+      categoryNode.setAttribute("value", frameInfo.categoryData.label || "");
+      cell.appendChild(categoryNode);
+    }
 
     let hasDescendants = Object.keys(this.frame.calls).length > 0;
     if (hasDescendants == false) {
       arrowNode.setAttribute("invisible", "");
     }
 
     return cell;
   },
-- 
2.2.1