From 2ad4bcd235a947d3ebf27ad2c6603da4417b6f5c Mon Sep 17 00:00:00 2001
From: Victor Porof <vporof@mozilla.com>
Date: Fri, 6 Feb 2015 13:26:08 -0500
Subject: [PATCH] Bug 1130276 - Add an 'invert flame graph' option to go along
 with 'invert call tree', r=jsantell

---
 browser/app/profile/firefox.js                |  1 +
 browser/devtools/performance/performance.xul  |  5 +++
 browser/devtools/performance/test/browser.ini |  2 +
 ...wser_perf-options-invert-flame-graph-01.js | 38 +++++++++++++++++++
 ...wser_perf-options-invert-flame-graph-02.js | 38 +++++++++++++++++++
 .../performance/views/details-js-call-tree.js |  5 ++-
 .../views/details-js-flamegraph.js            |  8 +++-
 .../views/details-memory-call-tree.js         |  4 +-
 .../views/details-memory-flamegraph.js        |  7 +++-
 .../devtools/shared/widgets/FlameGraph.jsm    |  7 ++++
 .../chrome/browser/devtools/profiler.dtd      |  5 +++
 11 files changed, 116 insertions(+), 4 deletions(-)
 create mode 100644 browser/devtools/performance/test/browser_perf-options-invert-flame-graph-01.js
 create mode 100644 browser/devtools/performance/test/browser_perf-options-invert-flame-graph-02.js

diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js
index 9778aaeedc93..d8019c1f0729 100644
--- a/browser/app/profile/firefox.js
+++ b/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);
diff --git a/browser/devtools/performance/performance.xul b/browser/devtools/performance/performance.xul
index 0dd4d8849cb5..6b391447c315 100644
--- a/browser/devtools/performance/performance.xul
+++ b/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"
diff --git a/browser/devtools/performance/test/browser.ini b/browser/devtools/performance/test/browser.ini
index 4ad8ecd411c5..923c4744ba4e 100644
--- a/browser/devtools/performance/test/browser.ini
+++ b/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]
diff --git a/browser/devtools/performance/test/browser_perf-options-invert-flame-graph-01.js b/browser/devtools/performance/test/browser_perf-options-invert-flame-graph-01.js
new file mode 100644
index 000000000000..287c584db902
--- /dev/null
+++ b/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();
+}
diff --git a/browser/devtools/performance/test/browser_perf-options-invert-flame-graph-02.js b/browser/devtools/performance/test/browser_perf-options-invert-flame-graph-02.js
new file mode 100644
index 000000000000..0c407e9aef89
--- /dev/null
+++ b/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();
+}
diff --git a/browser/devtools/performance/views/details-js-call-tree.js b/browser/devtools/performance/views/details-js-call-tree.js
index edfa78b1e061..18ee5e1e80e9 100644
--- a/browser/devtools/performance/views/details-js-call-tree.js
+++ b/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
 
diff --git a/browser/devtools/performance/views/details-js-flamegraph.js b/browser/devtools/performance/views/details-js-flamegraph.js
index 8141243da498..e949f1241445 100644
--- a/browser/devtools/performance/views/details-js-flamegraph.js
+++ b/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")
diff --git a/browser/devtools/performance/views/details-memory-call-tree.js b/browser/devtools/performance/views/details-memory-call-tree.js
index e93362aa71a1..ac2a17f5128e 100644
--- a/browser/devtools/performance/views/details-memory-call-tree.js
+++ b/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
 
diff --git a/browser/devtools/performance/views/details-memory-flamegraph.js b/browser/devtools/performance/views/details-memory-flamegraph.js
index eb67cedc0f60..d37760159fa6 100644
--- a/browser/devtools/performance/views/details-memory-flamegraph.js
+++ b/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")
     });
diff --git a/browser/devtools/shared/widgets/FlameGraph.jsm b/browser/devtools/shared/widgets/FlameGraph.jsm
index 3e830c766ca5..dcd073074f7c 100644
--- a/browser/devtools/shared/widgets/FlameGraph.jsm
+++ b/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 || "" }];
diff --git a/browser/locales/en-US/chrome/browser/devtools/profiler.dtd b/browser/locales/en-US/chrome/browser/devtools/profiler.dtd
index bf95f4fb5249..d0a3242916db 100644
--- a/browser/locales/en-US/chrome/browser/devtools/profiler.dtd
+++ b/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. -->