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

This commit is contained in:
Victor Porof 2015-02-06 13:26:08 -05:00
parent 342edf1f1f
commit c272f0b160
11 changed files with 116 additions and 4 deletions

View File

@ -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);

View File

@ -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"

View File

@ -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]

View File

@ -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();
}

View File

@ -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();
}

View File

@ -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

View File

@ -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")

View File

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

View File

@ -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")
});

View File

@ -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 || "" }];

View File

@ -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. -->