wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 967168 - DevTools Addon icons should not be inverted on light theme;r=jwalker

Browse Source
This commit is contained in:
Brian Grinstead 2014-02-10 07:50:13 -06:00
parent 773d7da0fe
commit 9e738ee620
9 changed files with 36 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
browser/devtools/commandline/BuiltinCommands.jsm
View File

@ -1991,7 +1991,7 @@ gcli.addCommand({
name: 'paintflashing toggle',
hidden: true,
buttonId: "command-button-paintflashing",
buttonClass: "command-button",
buttonClass: "command-button command-button-invertable",
state: {
isChecked: function(aTarget) {
if (aTarget.isLocalTab) {
@ -2284,7 +2284,7 @@ gcli.addCommand({
name: 'splitconsole',
hidden: true,
buttonId: "command-button-splitconsole",
buttonClass: "command-button",
buttonClass: "command-button command-button-invertable",
tooltipText: gcli.lookup("splitconsoleTooltip"),
state: {
isChecked: function(aTarget) {

5
browser/devtools/framework/gDevTools.jsm
View File

@ -55,6 +55,11 @@ DevTools.prototype = {
* A falsy value indicates that it cannot be hidden.
* - icon: URL pointing to a graphic which will be used as the src for an
* 16x16 img tag (string|required)
* - invertIconForLightTheme: The icon can automatically have an inversion
* filter applied (default is false). All builtin tools are true, but
* addons may omit this to prevent unwanted changes to the `icon`
* image. See browser/themes/shared/devtools/filters.svg#invert for
* the filter being applied to the images (boolean|optional)
* - url: URL pointing to a XUL/XHTML document containing the user interface
* (string|required)
* - label: Localized name for the tool to be displayed to the user

6
browser/devtools/framework/test/browser_devtools_api.js
View File

@ -49,6 +49,12 @@ function continueTests(toolbox, panel) {
ok(toolbox.getCurrentPanel(), "panel value is correct");
is(toolbox.currentToolId, toolId, "toolbox _currentToolId is correct");
ok(!toolbox.doc.getElementById("toolbox-tab-" + toolId).hasAttribute("icon-invertable"),
"The tool tab does not have the invertable attribute");
ok(toolbox.doc.getElementById("toolbox-tab-inspector").hasAttribute("icon-invertable"),
"The builtin tool tabs do have the invertable attribute");
let toolDefinitions = gDevTools.getToolDefinitionMap();
is(toolDefinitions.has(toolId), true, "The tool is in gDevTools");

7
browser/devtools/framework/toolbox.js
View File

@ -554,7 +554,7 @@ Toolbox.prototype = {
_buildPickerButton: function() {
this._pickerButton = this.doc.createElement("toolbarbutton");
this._pickerButton.id = "command-button-pick";
this._pickerButton.className = "command-button";
this._pickerButton.className = "command-button command-button-invertable";
this._pickerButton.setAttribute("tooltiptext", toolboxStrings("pickButton.tooltip"));
let container = this.doc.querySelector("#toolbox-buttons");
@ -588,11 +588,14 @@ Toolbox.prototype = {
// The radio element is not being used in the conventional way, thus
// the devtools-tab class replaces the radio XBL binding with its base
// binding (the control-item binding).
radio.className = "toolbox-tab devtools-tab";
radio.className = "devtools-tab";
radio.id = "toolbox-tab-" + id;
radio.setAttribute("toolid", id);
radio.setAttribute("ordinal", toolDefinition.ordinal);
radio.setAttribute("tooltiptext", toolDefinition.tooltip);
if (toolDefinition.invertIconForLightTheme) {
radio.setAttribute("icon-invertable", "true");
}
radio.addEventListener("command", () => {
this.selectTool(id);

9
browser/devtools/main.js
View File

@ -61,6 +61,7 @@ Tools.options = {
ordinal: 0,
url: "chrome://browser/content/devtools/framework/toolbox-options.xul",
icon: "chrome://browser/skin/devtools/tool-options.svg",
invertIconForLightTheme: true,
bgTheme: "theme-body",
tooltip: l10n("optionsButton.tooltip", toolboxStrings),
inMenu: false,
@ -80,6 +81,7 @@ Tools.webConsole = {
modifiers: Services.appinfo.OS == "Darwin" ? "accel,alt" : "accel,shift",
ordinal: 1,
icon: "chrome://browser/skin/devtools/tool-webconsole.svg",
invertIconForLightTheme: true,
url: "chrome://browser/content/devtools/webconsole.xul",
label: l10n("ToolboxTabWebconsole.label", webConsoleStrings),
menuLabel: l10n("MenuWebconsole.label", webConsoleStrings),
@ -110,6 +112,7 @@ Tools.inspector = {
ordinal: 2,
modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
icon: "chrome://browser/skin/devtools/tool-inspector.svg",
invertIconForLightTheme: true,
url: "chrome://browser/content/devtools/inspector/inspector.xul",
label: l10n("inspector.label", inspectorStrings),
tooltip: l10n("inspector.tooltip", inspectorStrings),
@ -137,6 +140,7 @@ Tools.jsdebugger = {
modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
ordinal: 3,
icon: "chrome://browser/skin/devtools/tool-debugger.svg",
invertIconForLightTheme: true,
highlightedicon: "chrome://browser/skin/devtools/tool-debugger-paused.svg",
url: "chrome://browser/content/devtools/debugger.xul",
label: l10n("ToolboxDebugger.label", debuggerStrings),
@ -160,6 +164,7 @@ Tools.styleEditor = {
accesskey: l10n("open.accesskey", styleEditorStrings),
modifiers: "shift",
icon: "chrome://browser/skin/devtools/tool-styleeditor.svg",
invertIconForLightTheme: true,
url: "chrome://browser/content/devtools/styleeditor.xul",
label: l10n("ToolboxStyleEditor.label", styleEditorStrings),
tooltip: l10n("ToolboxStyleEditor.tooltip2", styleEditorStrings),
@ -180,6 +185,7 @@ Tools.shaderEditor = {
ordinal: 5,
visibilityswitch: "devtools.shadereditor.enabled",
icon: "chrome://browser/skin/devtools/tool-styleeditor.svg",
invertIconForLightTheme: true,
url: "chrome://browser/content/devtools/shadereditor.xul",
label: l10n("ToolboxShaderEditor.label", shaderEditorStrings),
tooltip: l10n("ToolboxShaderEditor.tooltip", shaderEditorStrings),
@ -202,6 +208,7 @@ Tools.jsprofiler = {
modifiers: "shift",
visibilityswitch: "devtools.profiler.enabled",
icon: "chrome://browser/skin/devtools/tool-profiler.svg",
invertIconForLightTheme: true,
url: "chrome://browser/content/devtools/profiler.xul",
label: l10n("profiler.label", profilerStrings),
tooltip: l10n("profiler.tooltip2", profilerStrings),
@ -225,6 +232,7 @@ Tools.netMonitor = {
modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
visibilityswitch: "devtools.netmonitor.enabled",
icon: "chrome://browser/skin/devtools/tool-network.svg",
invertIconForLightTheme: true,
url: "chrome://browser/content/devtools/netmonitor.xul",
label: l10n("netmonitor.label", netMonitorStrings),
tooltip: l10n("netmonitor.tooltip", netMonitorStrings),
@ -245,6 +253,7 @@ Tools.scratchpad = {
ordinal: 8,
visibilityswitch: "devtools.scratchpad.enabled",
icon: "chrome://browser/skin/devtools/tool-scratchpad.svg",
invertIconForLightTheme: true,
url: "chrome://browser/content/devtools/scratchpad.xul",
label: l10n("scratchpad.label", scratchpadStrings),
tooltip: l10n("scratchpad.tooltip", scratchpadStrings),

2
browser/devtools/responsivedesign/CmdResize.jsm
View File

@ -36,7 +36,7 @@ gcli.addCommand({
gcli.addCommand({
name: 'resize toggle',
buttonId: "command-button-responsive",
buttonClass: "command-button",
buttonClass: "command-button command-button-invertable",
tooltipText: gcli.lookup("resizeModeToggleTooltip"),
description: gcli.lookup('resizeModeToggleDesc'),
manual: gcli.lookupFormat('resizeModeManual2', [BRAND_SHORT_NAME]),

2
browser/devtools/scratchpad/CmdScratchpad.jsm
View File

@ -12,7 +12,7 @@ Components.utils.import("resource://gre/modules/devtools/gcli.jsm");
gcli.addCommand({
name: "scratchpad",
buttonId: "command-button-scratchpad",
buttonClass: "command-button",
buttonClass: "command-button command-button-invertable",
tooltipText: gcli.lookup("scratchpadOpenTooltip"),
hidden: true,
exec: function(args, context) {

2
browser/devtools/tilt/CmdTilt.jsm
View File

@ -54,7 +54,7 @@ gcli.addCommand({
gcli.addCommand({
name: "tilt toggle",
buttonId: "command-button-tilt",
buttonClass: "command-button",
buttonClass: "command-button command-button-invertable",
tooltipText: gcli.lookup("tiltToggleTooltip"),
hidden: true,
state: {

12
browser/themes/shared/devtools/toolbars.inc.css
View File

@ -753,10 +753,10 @@
/* Invert the colors of certain dark theme images for displaying
* inside of the light theme.
*/
.theme-light .devtools-tab > image,
.theme-light .devtools-tab[icon-invertable] > image,
.theme-light #toolbox-dock-buttons > toolbarbutton > image,
.theme-light .command-button > image,
.theme-light .command-button:active > image,
.theme-light .command-button-invertable > image,
.theme-light .command-button-invertable:active > image,
.theme-light .devtools-closebutton > image,
.theme-light .devtools-toolbarbutton > image,
.theme-light .devtools-option-toolbarbutton > image,
@ -771,9 +771,9 @@
/* Since selected backgrounds are blue, we want to use the normal
* (light) icons. */
.theme-light .command-button[checked=true]:not(:active) > image,
.theme-light .devtools-tab[selected] > image,
.theme-light .devtools-tab[highlighted] > image,
.theme-light .command-button-invertable[checked=true]:not(:active) > image,
.theme-light .devtools-tab[icon-invertable][selected] > image,
.theme-light .devtools-tab[icon-invertable][highlighted] > image,
.theme-light .devtools-option-toolbarbutton[open] > image,
.theme-light #resume[checked] > image {
filter: none !important;