Bug 1110550 - Enable performance overview graphs to rerender and change on devtools theme switch. r=vp

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

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]

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
+  });
+}

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

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.backgroundGradientStart = setAlpha(getColor("highlight-blue", theme), 0.2);
-    this.backgroundGradientEnd = setAlpha(getColor("highlight-blue", theme), 0);
+    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)";

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;