Bug 1119934 - Display (idle) nodes in the flamegraph for the new performance tool, r=jsantell

browser/app/profile/firefox.js

@@ -1432,6 +1432,7 @@ pref("devtools.performance.ui.show-timeline-memory", false);
 // The default Profiler UI settings
 pref("devtools.profiler.ui.flatten-tree-recursion", true);
 pref("devtools.profiler.ui.show-platform-data", false);
+pref("devtools.profiler.ui.show-idle-blocks", true);
 
 // The default cache UI setting
 pref("devtools.cache.disabled", false);

browser/devtools/performance/performance-controller.js

@@ -346,7 +346,6 @@ let PerformanceController = {
     return this.getCurrentRecording().getAllData();
   },
 
-  /**
   /**
    * Get most recently added profile that was triggered manually (via UI)
    */
@@ -385,6 +384,7 @@ EventEmitter.decorate(PerformanceController);
 const Prefs = new ViewHelpers.Prefs("devtools.profiler", {
   flattenTreeRecursion: ["Bool", "ui.flatten-tree-recursion"],
   showPlatformData: ["Bool", "ui.show-platform-data"],
+  showIdleBlocks: ["Bool", "ui.show-idle-blocks"],
 });
 
 /**

browser/devtools/performance/views/details-flamegraph.js

@@ -45,6 +45,7 @@ let FlameGraphView = {
     let dataSrc = FlameGraphUtils.createFlameGraphDataFromSamples(samples, {
       flattenRecursion: Prefs.flattenTreeRecursion,
       filterFrames: !Prefs.showPlatformData && FrameNode.isContent,
+      showIdleBlocks: Prefs.showIdleBlocks && L10N.getStr("table.idle")
     });
     this.graph.setData(dataSrc);
     this.emit(EVENTS.FLAMEGRAPH_RENDERED);

browser/devtools/shared/test/browser.ini

@@ -23,6 +23,7 @@ support-files =
 [browser_flame-graph-utils-01.js]
 [browser_flame-graph-utils-02.js]
 [browser_flame-graph-utils-03.js]
+[browser_flame-graph-utils-04.js]
 [browser_graphs-01.js]
 [browser_graphs-02.js]
 [browser_graphs-03.js]

browser/devtools/shared/test/browser_flame-graph-utils-04.js

@@ -0,0 +1,167 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests if (idle) nodes are added when necessary in the flame graph data.
+
+let {FlameGraphUtils} = Cu.import("resource:///modules/devtools/FlameGraph.jsm", {});
+let {FrameNode} = devtools.require("devtools/profiler/tree-model");
+
+let test = Task.async(function*() {
+  yield promiseTab("about:blank");
+  yield performTest();
+  gBrowser.removeCurrentTab();
+  finish();
+});
+
+function* performTest() {
+  let out = FlameGraphUtils.createFlameGraphDataFromSamples(TEST_DATA, {
+    flattenRecursion: true,
+    filterFrames: FrameNode.isContent,
+    showIdleBlocks: "\m/"
+  });
+
+  ok(out, "Some data was outputted properly");
+  is(out.length, 10, "The outputted length is correct.");
+
+  info("Got flame graph data:\n" + out.toSource() + "\n");
+
+  for (let i = 0; i < out.length; i++) {
+    let found = out[i];
+    let expected = EXPECTED_OUTPUT[i];
+
+    is(found.blocks.length, expected.blocks.length,
+      "The correct number of blocks were found in this bucket.");
+
+    for (let j = 0; j < found.blocks.length; j++) {
+      is(found.blocks[j].x, expected.blocks[j].x,
+        "The expected block X position is correct for this frame.");
+      is(found.blocks[j].y, expected.blocks[j].y,
+        "The expected block Y position is correct for this frame.");
+      is(found.blocks[j].width, expected.blocks[j].width,
+        "The expected block width is correct for this frame.");
+      is(found.blocks[j].height, expected.blocks[j].height,
+        "The expected block height is correct for this frame.");
+      is(found.blocks[j].text, expected.blocks[j].text,
+        "The expected block text is correct for this frame.");
+    }
+  }
+}
+
+let TEST_DATA = [{
+  frames: [{
+    location: "http://A"
+  }, {
+    location: "http://A"
+  }, {
+    location: "http://A"
+  }, {
+    location: "https://B"
+  }, {
+    location: "https://B"
+  }, {
+    location: "file://C",
+  }, {
+    location: "chrome://D"
+  }, {
+    location: "resource://E"
+  }],
+  time: 50
+}, {
+  frames: [{
+    location: "chrome://D"
+  }, {
+    location: "resource://E"
+  }],
+  time: 100
+}, {
+  frames: [{
+    location: "http://A"
+  }, {
+    location: "https://B"
+  }, {
+    location: "file://C",
+  }],
+  time: 150
+}];
+
+let EXPECTED_OUTPUT = [{
+  blocks: []
+}, {
+  blocks: []
+}, {
+  blocks: [{
+    srcData: {
+      startTime: 0,
+      rawLocation: "http://A"
+    },
+    x: 0,
+    y: 0,
+    width: 50,
+    height: 11,
+    text: "http://A"
+  }, {
+    srcData: {
+      startTime: 0,
+      rawLocation: "file://C"
+    },
+    x: 0,
+    y: 22,
+    width: 50,
+    height: 11,
+    text: "file://C"
+  }, {
+    srcData: {
+      startTime: 100,
+      rawLocation: "http://A"
+    },
+    x: 100,
+    y: 0,
+    width: 50,
+    height: 11,
+    text: "http://A"
+  }]
+}, {
+  blocks: [{
+    srcData: {
+      startTime: 50,
+      rawLocation: "\m/"
+    },
+    x: 50,
+    y: 0,
+    width: 50,
+    height: 11,
+    text: "\m/"
+  }]
+}, {
+  blocks: []
+}, {
+  blocks: []
+}, {
+  blocks: []
+}, {
+  blocks: []
+}, {
+  blocks: [{
+    srcData: {
+      startTime: 0,
+      rawLocation: "https://B"
+    },
+    x: 0,
+    y: 11,
+    width: 50,
+    height: 11,
+    text: "https://B"
+  }, {
+    srcData: {
+      startTime: 100,
+      rawLocation: "https://B"
+    },
+    x: 100,
+    y: 11,
+    width: 50,
+    height: 11,
+    text: "https://B"
+  }]
+}, {
+  blocks: []
+}];

browser/devtools/shared/widgets/FlameGraph.jsm

@@ -833,6 +833,8 @@ let FlameGraphUtils = {
    *                              should be omitted from the output
    *          - filterFrames: predicate used for filtering all frames, passing
    *                          in each frame, its index and the sample array
+   *          - showIdleBlocks: adds "idle" blocks when no frames are available
+   *                            using the provided localized text
    * @param array out [optional]
    *        An output storage to reuse for storing the flame graph data.
    * @return array
@@ -869,6 +871,11 @@ let FlameGraphUtils = {
         frames = frames.filter(options.filterFrames);
       }
 
+      // If no frames are available, add a pseudo "idle" block in between.
+      if (options.showIdleBlocks && frames.length == 0) {
+        frames = [{ location: options.showIdleBlocks || "" }];
+      }
+
       for (let { location } of frames) {
         let prevFrame = prevFrames[frameIndex];
 

browser/locales/en-US/chrome/browser/devtools/profiler.properties

@@ -87,6 +87,10 @@ category.events=Input & Events
 # This string is displayed in the call tree for the root node.
 table.root=(root)
 
+# LOCALIZATION NOTE (table.idle):
+# This string is displayed in the call tree for the idle blocks.
+table.idle=(idle)
+
 # LOCALIZATION NOTE (table.url.tooltiptext):
 # This string is displayed in the call tree as the tooltip text for the url
 # labels which, when clicked, jump to the debugger.