Bug 1130276 - Add an 'invert flame graph' option to go along with 'invert call tree', r=jsantell

browser/app/profile/firefox.js

@@ -1438,6 +1438,7 @@ pref("devtools.profiler.ui.show-idle-blocks", true);
 
 // The default Performance UI settings
 pref("devtools.performance.ui.invert-call-tree", true);
+pref("devtools.performance.ui.invert-flame-graph", false);
 pref("devtools.performance.ui.flatten-tree-recursion", true);
 pref("devtools.performance.ui.show-platform-data", false);
 pref("devtools.performance.ui.show-idle-blocks", true);

browser/devtools/performance/performance.xul

@@ -50,6 +50,11 @@
                 data-pref="invert-call-tree"
                 label="&profilerUI.invertTree;"
                 tooltiptext="&profilerUI.invertTree.tooltiptext;"/>
+      <menuitem id="option-invert-flame-graph"
+                type="checkbox"
+                data-pref="invert-flame-graph"
+                label="&profilerUI.invertFlameGraph;"
+                tooltiptext="&profilerUI.invertFlameGraph.tooltiptext;"/>
       <menuitem id="option-flatten-tree-recursion"
                 type="checkbox"
                 data-pref="flatten-tree-recursion"

browser/devtools/performance/test/browser.ini

@@ -37,6 +37,8 @@ support-files =
 [browser_perf-options-02.js]
 [browser_perf-options-invert-call-tree-01.js]
 [browser_perf-options-invert-call-tree-02.js]
+[browser_perf-options-invert-flame-graph-01.js]
+[browser_perf-options-invert-flame-graph-02.js]
 [browser_perf-options-flatten-tree-recursion-01.js]
 [browser_perf-options-flatten-tree-recursion-02.js]
 [browser_perf-options-show-platform-data-01.js]

browser/devtools/performance/test/browser_perf-options-invert-flame-graph-01.js

@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const INVERT_PREF = "devtools.performance.ui.invert-flame-graph";
+
+/**
+ * Tests that the js Flamegraphs gets rerendered when toggling `invert-flame-graph`
+ */
+function spawnTest () {
+  let { panel } = yield initPerformance(SIMPLE_URL);
+  let { EVENTS, DetailsView, JsFlameGraphView } = panel.panelWin;
+
+  yield DetailsView.selectView("js-flamegraph");
+
+  Services.prefs.setBoolPref(INVERT_PREF, true);
+
+  yield startRecording(panel);
+  yield busyWait(100);
+
+  let rendered = once(JsFlameGraphView, EVENTS.JS_FLAMEGRAPH_RENDERED);
+  yield stopRecording(panel);
+  yield rendered;
+
+  rendered = once(JsFlameGraphView, EVENTS.JS_FLAMEGRAPH_RENDERED);
+  Services.prefs.setBoolPref(INVERT_PREF, false);
+  yield rendered;
+
+  ok(true, "JsFlameGraphView rerendered when toggling invert-flame-graph.");
+
+  rendered = once(JsFlameGraphView, EVENTS.JS_FLAMEGRAPH_RENDERED);
+  Services.prefs.setBoolPref(INVERT_PREF, true);
+  yield rendered;
+
+  ok(true, "JsFlameGraphView rerendered when toggling back invert-flame-graph.");
+
+  yield teardown(panel);
+  finish();
+}

browser/devtools/performance/test/browser_perf-options-invert-flame-graph-02.js

@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const INVERT_PREF = "devtools.performance.ui.invert-flame-graph";
+
+/**
+ * Tests that the memory Flamegraphs gets rerendered when toggling `invert-flame-graph`
+ */
+function spawnTest () {
+  let { panel } = yield initPerformance(SIMPLE_URL);
+  let { EVENTS, DetailsView, MemoryFlameGraphView } = panel.panelWin;
+
+  yield DetailsView.selectView("memory-flamegraph");
+
+  Services.prefs.setBoolPref(INVERT_PREF, true);
+
+  yield startRecording(panel);
+  yield busyWait(100);
+
+  let rendered = once(MemoryFlameGraphView, EVENTS.MEMORY_FLAMEGRAPH_RENDERED);
+  yield stopRecording(panel);
+  yield rendered;
+
+  rendered = once(MemoryFlameGraphView, EVENTS.MEMORY_FLAMEGRAPH_RENDERED);
+  Services.prefs.setBoolPref(INVERT_PREF, false);
+  yield rendered;
+
+  ok(true, "MemoryFlameGraphView rerendered when toggling invert-flame-graph.");
+
+  rendered = once(MemoryFlameGraphView, EVENTS.MEMORY_FLAMEGRAPH_RENDERED);
+  Services.prefs.setBoolPref(INVERT_PREF, true);
+  yield rendered;
+
+  ok(true, "MemoryFlameGraphView rerendered when toggling back invert-flame-graph.");
+
+  yield teardown(panel);
+  finish();
+}

browser/devtools/performance/views/details-js-call-tree.js

@@ -8,7 +8,10 @@
  */
 let JsCallTreeView = Heritage.extend(DetailsSubview, {
 
-  rerenderPrefs: ["invert-call-tree", "show-platform-data"],
+  rerenderPrefs: [
+    "invert-call-tree",
+    "show-platform-data"
+  ],
 
   rangeChangeDebounceTime: 50, // ms
 

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

@@ -9,7 +9,12 @@
  */
 let JsFlameGraphView = Heritage.extend(DetailsSubview, {
 
-  rerenderPrefs: ["flatten-tree-recursion", "show-platform-data", "show-idle-blocks"],
+  rerenderPrefs: [
+    "invert-flame-graph",
+    "flatten-tree-recursion",
+    "show-platform-data",
+    "show-idle-blocks"
+  ],
 
   /**
    * Sets up the view with event binding.
@@ -48,6 +53,7 @@ let JsFlameGraphView = Heritage.extend(DetailsSubview, {
     let samples = profile.threads[0].samples;
 
     let data = FlameGraphUtils.createFlameGraphDataFromSamples(samples, {
+      invertStack: PerformanceController.getPref("invert-flame-graph"),
       flattenRecursion: PerformanceController.getPref("flatten-tree-recursion"),
       filterFrames: !PerformanceController.getPref("show-platform-data") && FrameNode.isContent,
       showIdleBlocks: PerformanceController.getPref("show-idle-blocks") && L10N.getStr("table.idle")

browser/devtools/performance/views/details-memory-call-tree.js

@@ -8,7 +8,9 @@
  */
 let MemoryCallTreeView = Heritage.extend(DetailsSubview, {
 
-  rerenderPrefs: ["invert-call-tree"],
+  rerenderPrefs: [
+    "invert-call-tree"
+  ],
 
   rangeChangeDebounceTime: 100, // ms
 

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

@@ -9,7 +9,11 @@
  */
 let MemoryFlameGraphView = Heritage.extend(DetailsSubview, {
 
-  rerenderPrefs: ["flatten-tree-recursion", "show-idle-blocks"],
+  rerenderPrefs: [
+    "invert-flame-graph",
+    "flatten-tree-recursion",
+    "show-idle-blocks"
+  ],
 
   /**
    * Sets up the view with event binding.
@@ -48,6 +52,7 @@ let MemoryFlameGraphView = Heritage.extend(DetailsSubview, {
 
     let samples = RecordingUtils.getSamplesFromAllocations(allocations);
     let data = FlameGraphUtils.createFlameGraphDataFromSamples(samples, {
+      invertStack: PerformanceController.getPref("invert-flame-graph"),
       flattenRecursion: PerformanceController.getPref("flatten-tree-recursion"),
       showIdleBlocks: PerformanceController.getPref("show-idle-blocks") && L10N.getStr("table.idle")
     });

browser/devtools/shared/widgets/FlameGraph.jsm

@@ -870,6 +870,8 @@ let FlameGraphUtils = {
    *        A list of { time, frames: [{ location }] } objects.
    * @param object options [optional]
    *        Additional options supported by this operation:
+   *          - invertStack: specifies if the frames array in every sample
+   *                         should be reversed
    *          - flattenRecursion: specifies if identical consecutive frames
    *                              should be omitted from the output
    *          - filterFrames: predicate used for filtering all frames, passing
@@ -917,6 +919,11 @@ let FlameGraphUtils = {
         frames = frames.filter(options.filterFrames);
       }
 
+      // Invert the stack if preferred, reversing the frames array in place.
+      if (options.invertStack) {
+        frames.reverse();
+      }
+
       // If no frames are available, add a pseudo "idle" block in between.
       if (options.showIdleBlocks && frames.length == 0) {
         frames = [{ location: options.showIdleBlocks || "" }];

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

@@ -81,6 +81,11 @@
 <!ENTITY profilerUI.invertTree             "Invert Call Tree">
 <!ENTITY profilerUI.invertTree.tooltiptext "Inverting the call tree displays the profiled call paths starting from the youngest frames and expanding out to the older frames.">
 
+<!-- LOCALIZATION NOTE (profilerUI.invertFlameGraph): This is the label shown next to
+  -  a checkbox that inverts and un-inverts the profiler's flame graph. -->
+<!ENTITY profilerUI.invertFlameGraph             "Invert Flame Chart">
+<!ENTITY profilerUI.invertFlameGraph.tooltiptext "Inverting the flame chart displays the profiled call paths starting from the youngest frames and expanding out to the older frames.">
+
 <!-- LOCALIZATION NOTE (profilerUI.showPlatformData): This is the
   -  label for the checkbox that toggles whether or not Gecko platform data
   -  is displayed in the profiler. -->