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

browser/devtools/commandline/BuiltinCommands.jsm

@@ -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) {

browser/devtools/framework/gDevTools.jsm

@@ -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

browser/devtools/framework/test/browser_devtools_api.js

@@ -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");
 

browser/devtools/framework/toolbox.js

@@ -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);

browser/devtools/main.js

@@ -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),

browser/devtools/responsivedesign/CmdResize.jsm

@@ -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]),

browser/devtools/scratchpad/CmdScratchpad.jsm

@@ -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) {

browser/devtools/tilt/CmdTilt.jsm

@@ -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: {

browser/themes/shared/devtools/toolbars.inc.css

@@ -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-invertable > image,
-.theme-light .command-button:active > 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 .command-button-invertable[checked=true]:not(:active) > image,
-.theme-light .devtools-tab[selected] > image,
+.theme-light .devtools-tab[icon-invertable][selected] > image,
-.theme-light .devtools-tab[highlighted] > image,
+.theme-light .devtools-tab[icon-invertable][highlighted] > image,
 .theme-light .devtools-option-toolbarbutton[open] > image,
 .theme-light #resume[checked] > image {
   filter: none !important;