From a8a67ac3ebcd86eae1a25b1fa3f5df31743afb9a Mon Sep 17 00:00:00 2001 From: Jordan Santell Date: Tue, 31 Mar 2015 10:18:00 +0200 Subject: [PATCH] Bug 1110550 - Enable performance overview graphs to rerender and change on devtools theme switch. r=vp --- .../performance/performance-controller.js | 26 ++++++ browser/devtools/performance/test/browser.ini | 1 + .../test/browser_perf-theme-toggle-01.js | 86 +++++++++++++++++++ .../devtools/performance/views/overview.js | 29 +++++++ .../shared/timeline/memory-overview.js | 4 +- .../themes/shared/devtools/widgets.inc.css | 2 +- 6 files changed, 145 insertions(+), 3 deletions(-) create mode 100644 browser/devtools/performance/test/browser_perf-theme-toggle-01.js diff --git a/browser/devtools/performance/performance-controller.js b/browser/devtools/performance/performance-controller.js index b9dcf5d6dcc6..ee374f752505 100644 --- a/browser/devtools/performance/performance-controller.js +++ b/browser/devtools/performance/performance-controller.js @@ -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]" }; diff --git a/browser/devtools/performance/test/browser.ini b/browser/devtools/performance/test/browser.ini index 816cb5bc3c91..09d39ec5fc9e 100644 --- a/browser/devtools/performance/test/browser.ini +++ b/browser/devtools/performance/test/browser.ini @@ -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] diff --git a/browser/devtools/performance/test/browser_perf-theme-toggle-01.js b/browser/devtools/performance/test/browser_perf-theme-toggle-01.js new file mode 100644 index 000000000000..03b98961cb1a --- /dev/null +++ b/browser/devtools/performance/test/browser_perf-theme-toggle-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 + }); +} diff --git a/browser/devtools/performance/views/overview.js b/browser/devtools/performance/views/overview.js index a6b5b81f044f..9d320f9ca1d2 100644 --- a/browser/devtools/performance/views/overview.js +++ b/browser/devtools/performance/views/overview.js @@ -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]" }; diff --git a/browser/devtools/shared/timeline/memory-overview.js b/browser/devtools/shared/timeline/memory-overview.js index 7e097c44cf9d..6b59ee55d46f 100644 --- a/browser/devtools/shared/timeline/memory-overview.js +++ b/browser/devtools/shared/timeline/memory-overview.js @@ -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)"; diff --git a/browser/themes/shared/devtools/widgets.inc.css b/browser/themes/shared/devtools/widgets.inc.css index 1bdd308cd303..754136b8215c 100644 --- a/browser/themes/shared/devtools/widgets.inc.css +++ b/browser/themes/shared/devtools/widgets.inc.css @@ -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;