mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-20 16:55:40 +00:00
Bug 1049820 - Add a dark theme style for the profiler's category graphs. r=vp
This commit is contained in:
parent
16e39dfd4d
commit
9c4569b7a5
@ -8,6 +8,7 @@ const { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
|
||||
Cu.import("resource://gre/modules/Task.jsm");
|
||||
Cu.import("resource://gre/modules/devtools/Loader.jsm");
|
||||
Cu.import("resource:///modules/devtools/ViewHelpers.jsm");
|
||||
Cu.import("resource:///modules/devtools/gDevTools.jsm");
|
||||
|
||||
devtools.lazyRequireGetter(this, "Services");
|
||||
devtools.lazyRequireGetter(this, "promise");
|
||||
|
@ -109,3 +109,4 @@ skip-if = true # Bug 1047124
|
||||
[browser_profiler_tree-view-05.js]
|
||||
[browser_profiler_tree-view-06.js]
|
||||
[browser_profiler_tree-view-07.js]
|
||||
[browser_profiler_theme.js]
|
||||
|
51
browser/devtools/profiler/test/browser_profiler_theme.js
Normal file
51
browser/devtools/profiler/test/browser_profiler_theme.js
Normal file
@ -0,0 +1,51 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests if the graphs rerender with the correct theme once the theme changes.
|
||||
*/
|
||||
|
||||
const LIGHT_BG = "#fcfcfc";
|
||||
const DARK_BG = "#14171a";
|
||||
|
||||
let test = Task.async(function*() {
|
||||
let [target, debuggee, panel] = yield initFrontend(SIMPLE_URL);
|
||||
let { $, EVENTS, ProfileView } = panel.panelWin;
|
||||
|
||||
yield startRecording(panel);
|
||||
yield stopRecording(panel, { waitForDisplay: true });
|
||||
|
||||
let graph = ProfileView._getCategoriesGraph();
|
||||
let refreshed = once(graph, "refresh");
|
||||
setTheme("dark");
|
||||
|
||||
yield refreshed;
|
||||
is(graph.backgroundColor, DARK_BG,
|
||||
"correct theme (dark) after toggle.");
|
||||
|
||||
refreshed = once(graph, "refresh");
|
||||
setTheme("light");
|
||||
|
||||
yield refreshed;
|
||||
is(graph.backgroundColor, LIGHT_BG,
|
||||
"correct theme (light) after toggle.");
|
||||
|
||||
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
|
||||
});
|
||||
}
|
@ -163,3 +163,34 @@ function getSourceActor(aSources, aURL) {
|
||||
let item = aSources.getItemForAttachment(a => a.source.url === aURL);
|
||||
return item && item.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Wait for eventName on target.
|
||||
* @param {Object} target An observable object that either supports on/off or
|
||||
* addEventListener/removeEventListener
|
||||
* @param {String} eventName
|
||||
* @param {Boolean} useCapture Optional, for addEventListener/removeEventListener
|
||||
* @return A promise that resolves when the event has been handled
|
||||
*/
|
||||
function once(target, eventName, useCapture=false) {
|
||||
info("Waiting for event: '" + eventName + "' on " + target + ".");
|
||||
|
||||
let deferred = promise.defer();
|
||||
|
||||
for (let [add, remove] of [
|
||||
["addEventListener", "removeEventListener"],
|
||||
["addListener", "removeListener"],
|
||||
["on", "off"]
|
||||
]) {
|
||||
if ((add in target) && (remove in target)) {
|
||||
target[add](eventName, function onEvent(...aArgs) {
|
||||
info("Got event: '" + eventName + "' on " + target + ".");
|
||||
target[remove](eventName, onEvent, useCapture);
|
||||
deferred.resolve.apply(deferred, aArgs);
|
||||
}, useCapture);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return deferred.promise;
|
||||
}
|
||||
|
@ -36,10 +36,13 @@ let ProfileView = {
|
||||
this._onCallViewFocus = this._onCallViewFocus.bind(this);
|
||||
this._onCallViewLink = this._onCallViewLink.bind(this);
|
||||
this._onCallViewZoom = this._onCallViewZoom.bind(this);
|
||||
this._onThemeChange = this._onThemeChange.bind(this);
|
||||
|
||||
this._panels.addEventListener("select", this._onTabSelect, false);
|
||||
this._newtabButton.addEventListener("click", this._onNewTabClick, false);
|
||||
this._invertTree.addEventListener("command", this._onInvertTree, false);
|
||||
|
||||
gDevTools.on("pref-changed", this._onThemeChange);
|
||||
},
|
||||
|
||||
/**
|
||||
@ -51,6 +54,7 @@ let ProfileView = {
|
||||
this._panels.removeEventListener("select", this._onTabSelect, false);
|
||||
this._newtabButton.removeEventListener("click", this._onNewTabClick, false);
|
||||
this._invertTree.removeEventListener("command", this._onInvertTree, false);
|
||||
gDevTools.off("pref-changed", this._onThemeChange);
|
||||
},
|
||||
|
||||
/**
|
||||
@ -427,6 +431,8 @@ let ProfileView = {
|
||||
}
|
||||
|
||||
let graph = new BarGraphWidget($(".categories", panel));
|
||||
let theme = Services.prefs.getCharPref("devtools.theme");
|
||||
graph.setTheme(theme);
|
||||
graph.fixedHeight = CATEGORIES_GRAPH_HEIGHT;
|
||||
graph.minBarsWidth = CATEGORIES_GRAPH_MIN_BARS_WIDTH;
|
||||
graph.format = CATEGORIES.sort((a, b) => a.ordinal > b.ordinal);
|
||||
@ -607,6 +613,18 @@ let ProfileView = {
|
||||
*/
|
||||
_onCallViewZoom: function(event, treeItem) {
|
||||
this._spawnTabFromFrameNode(treeItem.frame);
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when the developer tools theme changes. Redraws
|
||||
* the graphs with the new theme setting.
|
||||
*/
|
||||
_onThemeChange: function (_, { newValue: theme }) {
|
||||
let graph = this._getCategoriesGraph();
|
||||
if (graph) {
|
||||
graph.setTheme(theme);
|
||||
graph.refresh({ force: true });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -5,11 +5,14 @@
|
||||
|
||||
const Cu = Components.utils;
|
||||
|
||||
const require = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools.require;
|
||||
Cu.import("resource:///modules/devtools/ViewHelpers.jsm");
|
||||
const promise = Cu.import("resource://gre/modules/Promise.jsm", {}).Promise;
|
||||
const {EventEmitter} = Cu.import("resource://gre/modules/devtools/event-emitter.js", {});
|
||||
const {Task} = Cu.import("resource://gre/modules/Task.jsm", {});
|
||||
|
||||
const {getColor} = require("devtools/shared/theme");
|
||||
|
||||
this.EXPORTED_SYMBOLS = [
|
||||
"AbstractCanvasGraph",
|
||||
"LineGraphWidget",
|
||||
@ -76,7 +79,7 @@ const BAR_GRAPH_MIN_BARS_WIDTH = 5; // px
|
||||
const BAR_GRAPH_MIN_BLOCKS_HEIGHT = 1; // px
|
||||
|
||||
const BAR_GRAPH_BACKGROUND_GRADIENT_START = "rgba(0,136,204,0.0)";
|
||||
const BAR_GRAPH_BACKGROUND_GRADIENT_END = "rgba(255,255,255,0.25)";
|
||||
const BAR_GRAPH_BACKGROUND_GRADIENT_END = "rgba(255,255,255,0.1)";
|
||||
|
||||
const BAR_GRAPH_CLIPHEAD_LINE_COLOR = "#666";
|
||||
const BAR_GRAPH_SELECTION_LINE_COLOR = "#555";
|
||||
@ -1536,6 +1539,7 @@ this.BarGraphWidget = function(parent, ...args) {
|
||||
// when this graph is being destroyed.
|
||||
this.outstandingEventListeners = [];
|
||||
|
||||
this.setTheme();
|
||||
this.once("ready", () => {
|
||||
this._onLegendMouseOver = this._onLegendMouseOver.bind(this);
|
||||
this._onLegendMouseOut = this._onLegendMouseOut.bind(this);
|
||||
@ -1553,6 +1557,8 @@ this.BarGraphWidget = function(parent, ...args) {
|
||||
};
|
||||
|
||||
BarGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, {
|
||||
backgroundGradientStart: BAR_GRAPH_BACKGROUND_GRADIENT_START,
|
||||
backgroundGradientEnd: BAR_GRAPH_BACKGROUND_GRADIENT_END,
|
||||
clipheadLineColor: BAR_GRAPH_CLIPHEAD_LINE_COLOR,
|
||||
selectionLineColor: BAR_GRAPH_SELECTION_LINE_COLOR,
|
||||
selectionBackgroundColor: BAR_GRAPH_SELECTION_BACKGROUND_COLOR,
|
||||
@ -1598,9 +1604,13 @@ BarGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, {
|
||||
let width = this._width;
|
||||
let height = this._height;
|
||||
|
||||
// Draw the background.
|
||||
ctx.fillStyle = this.backgroundColor;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
let gradient = ctx.createLinearGradient(0, 0, 0, height);
|
||||
gradient.addColorStop(0, BAR_GRAPH_BACKGROUND_GRADIENT_START);
|
||||
gradient.addColorStop(1, BAR_GRAPH_BACKGROUND_GRADIENT_END);
|
||||
gradient.addColorStop(0, this.backgroundGradientStart);
|
||||
gradient.addColorStop(1, this.backgroundGradientEnd);
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
@ -1917,6 +1927,16 @@ BarGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, {
|
||||
_onLegendMouseUp: function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the theme via `theme` to either "light" or "dark",
|
||||
* and updates the internal styling to match. Requires a redraw
|
||||
* to see the effects.
|
||||
*/
|
||||
setTheme: function (theme) {
|
||||
theme = theme || "light";
|
||||
this.backgroundColor = getColor("body-background", theme);
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -993,10 +993,6 @@
|
||||
|
||||
/* Bar graph widget */
|
||||
|
||||
.bar-graph-widget-canvas {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.bar-graph-widget-legend {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
@ -1027,13 +1023,22 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bar-graph-widget-legend-item > [view="label"] {
|
||||
.theme-light .bar-graph-widget-legend-item > [view="label"] {
|
||||
color: var(--theme-body-color);
|
||||
text-shadow: 1px 0px rgba(255,255,255,0.8),
|
||||
-1px 0px rgba(255,255,255,0.8),
|
||||
0px -1px rgba(255,255,255,0.8),
|
||||
0px 1px rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
.theme-dark .bar-graph-widget-legend-item > [view="label"] {
|
||||
color: var(--theme-selection-color);
|
||||
text-shadow: 1px 0px rgba(0,0,0,0.8),
|
||||
-1px 0px rgba(0,0,0,0.8),
|
||||
0px -1px rgba(0,0,0,0.8),
|
||||
0px 1px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
/* Charts */
|
||||
|
||||
.generic-chart-container {
|
||||
|
Loading…
Reference in New Issue
Block a user