зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1110550 - Enable performance overview graphs to rerender and change on devtools theme switch. r=vp
This commit is contained in:
Родитель
f11bb0fb8a
Коммит
a8a67ac3eb
|
@ -60,6 +60,9 @@ const EVENTS = {
|
|||
// Fired by the PerformanceController and OptionsView when a pref changes.
|
||||
PREF_CHANGED: "Performance:PrefChanged",
|
||||
|
||||
// Fired by the PerformanceController when the devtools theme changes.
|
||||
THEME_CHANGED: "Performance:ThemeChanged",
|
||||
|
||||
// Emitted by the PerformanceView when the state (display mode) changes,
|
||||
// for example when switching between "empty", "recording" or "recorded".
|
||||
// This causes certain panels to be hidden or visible.
|
||||
|
@ -177,6 +180,7 @@ let PerformanceController = {
|
|||
this._onTimelineData = this._onTimelineData.bind(this);
|
||||
this._onRecordingSelectFromView = this._onRecordingSelectFromView.bind(this);
|
||||
this._onPrefChanged = this._onPrefChanged.bind(this);
|
||||
this._onThemeChanged = this._onThemeChanged.bind(this);
|
||||
|
||||
// All boolean prefs should be handled via the OptionsView in the
|
||||
// ToolbarView, so that they may be accessible via the "gear" menu.
|
||||
|
@ -198,6 +202,7 @@ let PerformanceController = {
|
|||
RecordingsView.on(EVENTS.UI_EXPORT_RECORDING, this.exportRecording);
|
||||
RecordingsView.on(EVENTS.RECORDING_SELECTED, this._onRecordingSelectFromView);
|
||||
|
||||
gDevTools.on("pref-changed", this._onThemeChanged);
|
||||
gFront.on("markers", this._onTimelineData); // timeline markers
|
||||
gFront.on("frames", this._onTimelineData); // stack frames
|
||||
gFront.on("memory", this._onTimelineData); // memory measurements
|
||||
|
@ -220,6 +225,7 @@ let PerformanceController = {
|
|||
RecordingsView.off(EVENTS.UI_EXPORT_RECORDING, this.exportRecording);
|
||||
RecordingsView.off(EVENTS.RECORDING_SELECTED, this._onRecordingSelectFromView);
|
||||
|
||||
gDevTools.off("pref-changed", this._onThemeChanged);
|
||||
gFront.off("markers", this._onTimelineData);
|
||||
gFront.off("frames", this._onTimelineData);
|
||||
gFront.off("memory", this._onTimelineData);
|
||||
|
@ -227,6 +233,13 @@ let PerformanceController = {
|
|||
gFront.off("allocations", this._onTimelineData);
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the current devtools theme.
|
||||
*/
|
||||
getTheme: function () {
|
||||
return Services.prefs.getCharPref("devtools.theme");
|
||||
},
|
||||
|
||||
/**
|
||||
* Get a boolean preference setting from `prefName` via the underlying
|
||||
* OptionsView in the ToolbarView.
|
||||
|
@ -414,6 +427,19 @@ let PerformanceController = {
|
|||
this.emit(EVENTS.PREF_CHANGED, prefName, prefValue);
|
||||
},
|
||||
|
||||
/*
|
||||
* Called when the developer tools theme changes.
|
||||
*/
|
||||
_onThemeChanged: function (_, data) {
|
||||
// Right now, gDevTools only emits `pref-changed` for the theme,
|
||||
// but this could change in the future.
|
||||
if (data.pref !== "devtools.theme") {
|
||||
return;
|
||||
}
|
||||
|
||||
this.emit(EVENTS.THEME_CHANGED, data.newValue);
|
||||
},
|
||||
|
||||
toString: () => "[object PerformanceController]"
|
||||
};
|
||||
|
||||
|
|
|
@ -81,6 +81,7 @@ support-files =
|
|||
[browser_perf-recording-selected-02.js]
|
||||
[browser_perf-recording-selected-03.js]
|
||||
[browser_perf-recording-selected-04.js]
|
||||
[browser_perf-theme-toggle-01.js]
|
||||
[browser_profiler_categories.js]
|
||||
[browser_profiler_content-check.js]
|
||||
[browser_profiler_tree-abstract-01.js]
|
||||
|
|
|
@ -0,0 +1,86 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests if the markers and memory overviews render with the correct
|
||||
* theme on load, and rerenders when changed.
|
||||
*/
|
||||
|
||||
const LIGHT_BG = "#fcfcfc";
|
||||
const DARK_BG = "#14171a";
|
||||
|
||||
setTheme("dark");
|
||||
Services.prefs.setBoolPref(MEMORY_PREF, false);
|
||||
|
||||
function spawnTest () {
|
||||
let { panel } = yield initPerformance(SIMPLE_URL);
|
||||
let { EVENTS, $, OverviewView, document: doc } = panel.panelWin;
|
||||
|
||||
yield startRecording(panel);
|
||||
is(OverviewView.markersOverview.backgroundColor, DARK_BG,
|
||||
"correct theme on load for markers.");
|
||||
yield stopRecording(panel);
|
||||
|
||||
let refreshed = once(OverviewView.markersOverview, "refresh");
|
||||
setTheme("light");
|
||||
yield refreshed;
|
||||
|
||||
ok(true, "markers were rerendered after theme change.");
|
||||
is(OverviewView.markersOverview.backgroundColor, LIGHT_BG,
|
||||
"correct theme on after toggle for markers.");
|
||||
|
||||
// reset back to dark
|
||||
refreshed = once(OverviewView.markersOverview, "refresh");
|
||||
setTheme("dark");
|
||||
yield refreshed;
|
||||
|
||||
info("Testing with memory overview");
|
||||
|
||||
Services.prefs.setBoolPref(MEMORY_PREF, true);
|
||||
|
||||
yield startRecording(panel);
|
||||
is(OverviewView.memoryOverview.backgroundColor, DARK_BG,
|
||||
"correct theme on load for memory.");
|
||||
yield stopRecording(panel);
|
||||
|
||||
refreshed = Promise.all([
|
||||
once(OverviewView.markersOverview, "refresh"),
|
||||
once(OverviewView.memoryOverview, "refresh"),
|
||||
]);
|
||||
setTheme("light");
|
||||
yield refreshed;
|
||||
|
||||
ok(true, "Both memory and markers were rerendered after theme change.");
|
||||
is(OverviewView.markersOverview.backgroundColor, LIGHT_BG,
|
||||
"correct theme on after toggle for markers.");
|
||||
is(OverviewView.memoryOverview.backgroundColor, LIGHT_BG,
|
||||
"correct theme on after toggle for memory.");
|
||||
|
||||
refreshed = Promise.all([
|
||||
once(OverviewView.markersOverview, "refresh"),
|
||||
once(OverviewView.memoryOverview, "refresh"),
|
||||
]);
|
||||
|
||||
// Set theme back to light
|
||||
setTheme("light");
|
||||
yield refreshed;
|
||||
|
||||
yield teardown(panel);
|
||||
finish();
|
||||
}
|
||||
|
||||
/**
|
||||
* Mimics selecting the theme selector in the toolbox;
|
||||
* sets the preference and emits an event on gDevTools to trigger
|
||||
* the themeing.
|
||||
*/
|
||||
function setTheme (newTheme) {
|
||||
let oldTheme = Services.prefs.getCharPref("devtools.theme");
|
||||
info("Setting `devtools.theme` to \"" + newTheme + "\"");
|
||||
Services.prefs.setCharPref("devtools.theme", newTheme);
|
||||
gDevTools.emit("pref-changed", {
|
||||
pref: "devtools.theme",
|
||||
newValue: newTheme,
|
||||
oldValue: oldTheme
|
||||
});
|
||||
}
|
|
@ -37,6 +37,7 @@ let OverviewView = {
|
|||
this._onRecordingTick = this._onRecordingTick.bind(this);
|
||||
this._onGraphSelecting = this._onGraphSelecting.bind(this);
|
||||
this._onPrefChanged = this._onPrefChanged.bind(this);
|
||||
this._onThemeChanged = this._onThemeChanged.bind(this);
|
||||
|
||||
// Toggle the initial visibility of memory and framerate graph containers
|
||||
// based off of prefs.
|
||||
|
@ -44,6 +45,7 @@ let OverviewView = {
|
|||
$("#time-framerate").hidden = !PerformanceController.getOption("enable-framerate");
|
||||
|
||||
PerformanceController.on(EVENTS.PREF_CHANGED, this._onPrefChanged);
|
||||
PerformanceController.on(EVENTS.THEME_CHANGED, this._onThemeChanged);
|
||||
PerformanceController.on(EVENTS.RECORDING_WILL_START, this._onRecordingWillStart);
|
||||
PerformanceController.on(EVENTS.RECORDING_STARTED, this._onRecordingStarted);
|
||||
PerformanceController.on(EVENTS.RECORDING_WILL_STOP, this._onRecordingWillStop);
|
||||
|
@ -66,6 +68,7 @@ let OverviewView = {
|
|||
}
|
||||
|
||||
PerformanceController.off(EVENTS.PREF_CHANGED, this._onPrefChanged);
|
||||
PerformanceController.off(EVENTS.THEME_CHANGED, this._onThemeChanged);
|
||||
PerformanceController.off(EVENTS.RECORDING_WILL_START, this._onRecordingWillStart);
|
||||
PerformanceController.off(EVENTS.RECORDING_STARTED, this._onRecordingStarted);
|
||||
PerformanceController.off(EVENTS.RECORDING_WILL_STOP, this._onRecordingWillStop);
|
||||
|
@ -92,6 +95,23 @@ let OverviewView = {
|
|||
return this._disabled;
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the theme for the markers overview and memory overview.
|
||||
*/
|
||||
setTheme: function (options={}) {
|
||||
let theme = options.theme || PerformanceController.getTheme();
|
||||
|
||||
if (this.markersOverview) {
|
||||
this.markersOverview.setTheme(theme);
|
||||
this.markersOverview.refresh({ force: options.redraw });
|
||||
}
|
||||
|
||||
if (this.memoryOverview) {
|
||||
this.memoryOverview.setTheme(theme);
|
||||
this.memoryOverview.refresh({ force: options.redraw });
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the time interval selection for all graphs in this overview.
|
||||
*
|
||||
|
@ -152,6 +172,7 @@ let OverviewView = {
|
|||
this.markersOverview.groupPadding = MARKERS_GROUP_VERTICAL_PADDING;
|
||||
this.markersOverview.on("selecting", this._onGraphSelecting);
|
||||
yield this.markersOverview.ready();
|
||||
this.setTheme();
|
||||
return true;
|
||||
}),
|
||||
|
||||
|
@ -173,6 +194,7 @@ let OverviewView = {
|
|||
this.memoryOverview = new MemoryOverview($("#memory-overview"));
|
||||
this.memoryOverview.fixedHeight = MEMORY_GRAPH_HEIGHT;
|
||||
yield this.memoryOverview.ready();
|
||||
this.setTheme();
|
||||
|
||||
CanvasGraphUtils.linkAnimation(this.markersOverview, this.memoryOverview);
|
||||
CanvasGraphUtils.linkSelection(this.markersOverview, this.memoryOverview);
|
||||
|
@ -369,6 +391,13 @@ let OverviewView = {
|
|||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Called when `devtools.theme` changes.
|
||||
*/
|
||||
_onThemeChanged: function (_, theme) {
|
||||
this.setTheme({ theme, redraw: true });
|
||||
},
|
||||
|
||||
toString: () => "[object OverviewView]"
|
||||
};
|
||||
|
||||
|
|
|
@ -69,8 +69,8 @@ MemoryOverview.prototype = Heritage.extend(LineGraphWidget.prototype, {
|
|||
setTheme: function (theme) {
|
||||
theme = theme || "light";
|
||||
this.backgroundColor = getColor("body-background", theme);
|
||||
this.backgroundGradientStart = setAlpha(getColor("highlight-blue", theme), 0.1);
|
||||
this.backgroundGradientEnd = setAlpha(getColor("highlight-blue", theme), 0);
|
||||
this.backgroundGradientStart = setAlpha(getColor("highlight-blue", theme), 0.2);
|
||||
this.backgroundGradientEnd = setAlpha(getColor("highlight-blue", theme), 0.05);
|
||||
this.strokeColor = getColor("highlight-blue", theme);
|
||||
this.selectionBackgroundColor = setAlpha(getColor("selection-background", theme), 0.25);
|
||||
this.selectionStripesColor = "rgba(255, 255, 255, 0.1)";
|
||||
|
|
|
@ -909,7 +909,7 @@
|
|||
|
||||
.line-graph-widget-tooltip {
|
||||
position: absolute;
|
||||
background: rgba(255,255,255,0.75);
|
||||
background: rgba(255,255,255,0.9);
|
||||
border-radius: 2px;
|
||||
line-height: 15px;
|
||||
-moz-padding-start: 6px;
|
||||
|
|
Загрузка…
Ссылка в новой задаче