Bug 1268591 - Support new invertIconForDarkTheme flag. r=bgrins, jsantell a=kwierso CLOSED TREE
authorTim Nguyen <ntim.bugs@gmail.com>
Fri, 22 Jul 2016 00:44:11 +0200
changeset 346190 f055f19a78292d4e848ab64b67769b0a30e1efa8
parent 346189 ef44d06bef2ca58c6a083c074eb112d607a27f7a
child 346191 7ba94e0c5daa48d7667519c930eca31d98648512
push id6389
push userraliiev@mozilla.com
push dateMon, 19 Sep 2016 13:38:22 +0000
treeherdermozilla-beta@01d67bfe6c81 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins, jsantell, kwierso
bugs1268591
milestone50.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1268591 - Support new invertIconForDarkTheme flag. r=bgrins, jsantell a=kwierso CLOSED TREE MozReview-Commit-ID: DfMBsD2u0ow
addon-sdk/source/lib/dev/panel.js
addon-sdk/source/lib/dev/toolbox.js
devtools/client/definitions.js
devtools/client/framework/toolbox.js
devtools/client/themes/toolbars.css
devtools/client/themes/toolbox.css
--- a/addon-sdk/source/lib/dev/panel.js
+++ b/addon-sdk/source/lib/dev/panel.js
@@ -159,16 +159,20 @@ validate.define(Panel, contract({
     map: x => resolve(x.toString()),
     is: ["string"],
     ok: x => isLocalURL(x),
     msg: "The `options.url` must be a valid local URI."
   },
   invertIconForLightTheme: {
     is: ["boolean", "undefined"],
     msg: "The `options.invertIconForLightTheme` must be a boolean."
+  },
+  invertIconForDarkTheme: {
+    is: ["boolean", "undefined"],
+    msg: "The `options.invertIconForDarkTheme` must be a boolean."
   }
 }));
 
 setup.define(Panel, (panel, {window, toolbox, url}) => {
   // Hack: Given that iframe created by devtools API is no good for us,
   // we obtain original iframe and replace it with the one that has
   // desired configuration.
   const original = getFrameElement(window);
--- a/addon-sdk/source/lib/dev/toolbox.js
+++ b/addon-sdk/source/lib/dev/toolbox.js
@@ -37,27 +37,28 @@ const Tool = Class({
   setup: function(params={}) {
     const { panels } = validate(this, params);
     const { themes } = validate(this, params);
 
     this.panels = panels;
     this.themes = themes;
 
     each(([key, Panel]) => {
-      const { url, label, tooltip, icon,
-             invertIconForLightTheme } = validate(Panel.prototype);
+      const { url, label, tooltip, icon, invertIconForLightTheme,
+              invertIconForDarkTheme } = validate(Panel.prototype);
       const { id } = Panel.prototype;
 
       gDevTools.registerTool({
         id: id,
         url: "about:blank",
         label: label,
         tooltip: tooltip,
         icon: icon,
         invertIconForLightTheme: invertIconForLightTheme,
+        invertIconForDarkTheme: invertIconForDarkTheme,
         isTargetSupported: target => target.isLocalTab,
         build: (window, toolbox) => {
           const panel = new Panel();
           setup(panel, { window: window,
                          toolbox: toolbox,
                          url: url });
 
           return panel.ready();
--- a/devtools/client/definitions.js
+++ b/devtools/client/definitions.js
@@ -58,17 +58,17 @@ var Tools = {};
 exports.Tools = Tools;
 
 // Definitions
 Tools.options = {
   id: "options",
   ordinal: 0,
   url: "chrome://devtools/content/framework/toolbox-options.xhtml",
   icon: "chrome://devtools/skin/images/tool-options.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   bgTheme: "theme-body",
   label: l10n("options.label", toolboxStrings),
   iconOnly: true,
   panelLabel: l10n("options.panelLabel", toolboxStrings),
   tooltip: l10n("optionsButton.tooltip", toolboxStrings),
   inMenu: false,
 
   isTargetSupported: function () {
@@ -82,17 +82,17 @@ Tools.options = {
 
 Tools.inspector = {
   id: "inspector",
   accesskey: l10n("inspector.accesskey", inspectorStrings),
   key: l10n("inspector.commandkey", inspectorStrings),
   ordinal: 1,
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   icon: "chrome://devtools/skin/images/tool-inspector.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/inspector/inspector.xul",
   label: l10n("inspector.label", inspectorStrings),
   panelLabel: l10n("inspector.panelLabel", inspectorStrings),
   get tooltip() {
     return l10n("inspector.tooltip2", inspectorStrings,
     (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + this.key);
   },
   inMenu: true,
@@ -118,17 +118,17 @@ Tools.inspector = {
 
 Tools.webConsole = {
   id: "webconsole",
   key: l10n("cmd.commandkey", webConsoleStrings),
   accesskey: l10n("webConsoleCmd.accesskey", webConsoleStrings),
   modifiers: Services.appinfo.OS == "Darwin" ? "accel,alt" : "accel,shift",
   ordinal: 2,
   icon: "chrome://devtools/skin/images/tool-webconsole.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/webconsole/webconsole.xul",
   label: l10n("ToolboxTabWebconsole.label", webConsoleStrings),
   menuLabel: l10n("MenuWebconsole.label", webConsoleStrings),
   panelLabel: l10n("ToolboxWebConsole.panelLabel", webConsoleStrings),
   get tooltip() {
     return l10n("ToolboxWebconsole.tooltip2", webConsoleStrings,
     (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + this.key);
   },
@@ -156,17 +156,17 @@ Tools.webConsole = {
 
 Tools.jsdebugger = {
   id: "jsdebugger",
   key: l10n("debuggerMenu.commandkey", debuggerStrings),
   accesskey: l10n("debuggerMenu.accesskey", debuggerStrings),
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   ordinal: 3,
   icon: "chrome://devtools/skin/images/tool-debugger.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   highlightedicon: "chrome://devtools/skin/images/tool-debugger-paused.svg",
   url: "chrome://devtools/content/debugger/debugger.xul",
   label: l10n("ToolboxDebugger.label", debuggerStrings),
   panelLabel: l10n("ToolboxDebugger.panelLabel", debuggerStrings),
   get tooltip() {
     return l10n("ToolboxDebugger.tooltip2", debuggerStrings,
     (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + this.key);
   },
@@ -185,17 +185,17 @@ Tools.jsdebugger = {
 Tools.styleEditor = {
   id: "styleeditor",
   key: l10n("open.commandkey", styleEditorStrings),
   ordinal: 4,
   visibilityswitch: "devtools.styleeditor.enabled",
   accesskey: l10n("open.accesskey", styleEditorStrings),
   modifiers: "shift",
   icon: "chrome://devtools/skin/images/tool-styleeditor.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/styleeditor/styleeditor.xul",
   label: l10n("ToolboxStyleEditor.label", styleEditorStrings),
   panelLabel: l10n("ToolboxStyleEditor.panelLabel", styleEditorStrings),
   get tooltip() {
     return l10n("ToolboxStyleEditor.tooltip3", styleEditorStrings,
     "Shift+" + functionkey(this.key));
   },
   inMenu: true,
@@ -210,17 +210,17 @@ Tools.styleEditor = {
   }
 };
 
 Tools.shaderEditor = {
   id: "shadereditor",
   ordinal: 5,
   visibilityswitch: "devtools.shadereditor.enabled",
   icon: "chrome://devtools/skin/images/tool-shadereditor.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/shadereditor/shadereditor.xul",
   label: l10n("ToolboxShaderEditor.label", shaderEditorStrings),
   panelLabel: l10n("ToolboxShaderEditor.panelLabel", shaderEditorStrings),
   tooltip: l10n("ToolboxShaderEditor.tooltip", shaderEditorStrings),
 
   isTargetSupported: function (target) {
     return target.hasActor("webgl") && !target.chrome;
   },
@@ -230,17 +230,17 @@ Tools.shaderEditor = {
   }
 };
 
 Tools.canvasDebugger = {
   id: "canvasdebugger",
   ordinal: 6,
   visibilityswitch: "devtools.canvasdebugger.enabled",
   icon: "chrome://devtools/skin/images/tool-canvas.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/canvasdebugger/canvasdebugger.xul",
   label: l10n("ToolboxCanvasDebugger.label", canvasDebuggerStrings),
   panelLabel: l10n("ToolboxCanvasDebugger.panelLabel", canvasDebuggerStrings),
   tooltip: l10n("ToolboxCanvasDebugger.tooltip", canvasDebuggerStrings),
 
   // Hide the Canvas Debugger in the Add-on Debugger and Browser Toolbox
   // (bug 1047520).
   isTargetSupported: function (target) {
@@ -251,17 +251,17 @@ Tools.canvasDebugger = {
     return new CanvasDebuggerPanel(iframeWindow, toolbox);
   }
 };
 
 Tools.performance = {
   id: "performance",
   ordinal: 7,
   icon: "chrome://devtools/skin/images/tool-profiler.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   highlightedicon: "chrome://devtools/skin/images/tool-profiler-active.svg",
   url: "chrome://devtools/content/performance/performance.xul",
   visibilityswitch: "devtools.performance.enabled",
   label: l10n("performance.label", performanceStrings),
   panelLabel: l10n("performance.panelLabel", performanceStrings),
   get tooltip() {
     return l10n("performance.tooltip", performanceStrings,
     "Shift+" + functionkey(this.key));
@@ -279,17 +279,17 @@ Tools.performance = {
     return new PerformancePanel(frame, target);
   }
 };
 
 Tools.memory = {
   id: "memory",
   ordinal: 8,
   icon: "chrome://devtools/skin/images/tool-memory.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   highlightedicon: "chrome://devtools/skin/images/tool-memory-active.svg",
   url: "chrome://devtools/content/memory/memory.xhtml",
   visibilityswitch: "devtools.memory.enabled",
   label: l10n("memory.label", memoryStrings),
   panelLabel: l10n("memory.panelLabel", memoryStrings),
   tooltip: l10n("memory.tooltip", memoryStrings),
 
   isTargetSupported: function (target) {
@@ -304,17 +304,17 @@ Tools.memory = {
 Tools.netMonitor = {
   id: "netmonitor",
   accesskey: l10n("netmonitor.accesskey", netMonitorStrings),
   key: l10n("netmonitor.commandkey", netMonitorStrings),
   ordinal: 9,
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   visibilityswitch: "devtools.netmonitor.enabled",
   icon: "chrome://devtools/skin/images/tool-network.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/netmonitor/netmonitor.xul",
   label: l10n("netmonitor.label", netMonitorStrings),
   panelLabel: l10n("netmonitor.panelLabel", netMonitorStrings),
   get tooltip() {
     return l10n("netmonitor.tooltip2", netMonitorStrings,
     (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + this.key);
   },
   inMenu: true,
@@ -331,17 +331,17 @@ Tools.netMonitor = {
 Tools.storage = {
   id: "storage",
   key: l10n("storage.commandkey", storageStrings),
   ordinal: 10,
   accesskey: l10n("storage.accesskey", storageStrings),
   modifiers: "shift",
   visibilityswitch: "devtools.storage.enabled",
   icon: "chrome://devtools/skin/images/tool-storage.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/storage/storage.xul",
   label: l10n("storage.label", storageStrings),
   menuLabel: l10n("storage.menuLabel", storageStrings),
   panelLabel: l10n("storage.panelLabel", storageStrings),
   get tooltip() {
     return l10n("storage.tooltip3", storageStrings,
     "Shift+" + functionkey(this.key));
   },
@@ -357,17 +357,17 @@ Tools.storage = {
   }
 };
 
 Tools.webAudioEditor = {
   id: "webaudioeditor",
   ordinal: 11,
   visibilityswitch: "devtools.webaudioeditor.enabled",
   icon: "chrome://devtools/skin/images/tool-webaudio.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/webaudioeditor/webaudioeditor.xul",
   label: l10n("ToolboxWebAudioEditor1.label", webAudioEditorStrings),
   panelLabel: l10n("ToolboxWebAudioEditor1.panelLabel", webAudioEditorStrings),
   tooltip: l10n("ToolboxWebAudioEditor1.tooltip", webAudioEditorStrings),
 
   isTargetSupported: function (target) {
     return !target.chrome && target.hasActor("webaudio");
   },
@@ -377,17 +377,17 @@ Tools.webAudioEditor = {
   }
 };
 
 Tools.scratchpad = {
   id: "scratchpad",
   ordinal: 12,
   visibilityswitch: "devtools.scratchpad.enabled",
   icon: "chrome://devtools/skin/images/tool-scratchpad.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/scratchpad/scratchpad.xul",
   label: l10n("scratchpad.label", scratchpadStrings),
   panelLabel: l10n("scratchpad.panelLabel", scratchpadStrings),
   tooltip: l10n("scratchpad.tooltip", scratchpadStrings),
   inMenu: false,
   commands: "devtools/client/scratchpad/scratchpad-commands",
 
   isTargetSupported: function (target) {
@@ -402,17 +402,17 @@ Tools.scratchpad = {
 Tools.dom = {
   id: "dom",
   accesskey: l10n("dom.accesskey", domStrings),
   key: l10n("dom.commandkey", domStrings),
   ordinal: 13,
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   visibilityswitch: "devtools.dom.enabled",
   icon: "chrome://devtools/skin/images/tool-dom.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/dom/dom.html",
   label: l10n("dom.label", domStrings),
   panelLabel: l10n("dom.panelLabel", domStrings),
   get tooltip() {
     return l10n("dom.tooltip", domStrings,
     (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + this.key);
   },
   inMenu: true,
--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -1098,17 +1098,19 @@ Toolbox.prototype = {
     // the devtools-tab class replaces the radio XBL binding with its base
     // binding (the control-item binding).
     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.setAttribute("icon-invertable", "light-theme");
+    } else if (toolDefinition.invertIconForDarkTheme) {
+      radio.setAttribute("icon-invertable", "dark-theme");
     }
 
     radio.addEventListener("command", () => {
       this.selectTool(id);
     });
 
     // spacer lets us center the image and label, while allowing cropping
     let spacer = this.doc.createElement("spacer");
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -178,21 +178,16 @@
 #toolbox-buttons {
   display: flex;
 }
 
 #toolbox-picker-container {
   display: flex;
 }
 
-/* Invert toolbox button icons in Firebug theme. */
-.theme-firebug #toolbox-buttons toolbarbutton image {
-  filter: invert(1);
-}
-
 .devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
   display: none;
 }
 
 .devtools-toolbarbutton > .toolbarbutton-icon {
   margin: 0;
 }
 
@@ -612,26 +607,16 @@
 #black-boxed-message-button .button-icon,
 #requests-menu-perf-notice-button .button-icon,
 #canvas-debugging-empty-notice-button .button-icon,
 #toggle-breakpoints[checked] > image,
 .event-tooltip-debugger-icon {
   filter: var(--icon-filter);
 }
 
-/* Since the tab selected background is blue, we should invert the icon */
-.devtools-tab[icon-invertable][selected] > image {
-  filter: invert(1);
-}
-
-/* Since "highlighted" icons are green, we should omit the filter */
-.devtools-tab[icon-invertable][highlighted] > image {
-  filter: none;
-}
-
 .hidden-labels-box:not(.visible) > label,
 .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
   display: none;
 }
 
 .devtools-invisible-splitter {
   border-color: transparent;
   background-color: transparent;
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -129,16 +129,31 @@
   border: none;
   margin: 0;
   margin-inline-start: 4px;
   opacity: 0.6;
   max-height: 16px;
   width: 16px; /* Prevents collapse during theme switching */
 }
 
+/* Support invertable icon flags and make icon white when it's on a blue background */
+.theme-light .devtools-tab[icon-invertable="light-theme"]:not([selected]) > image,
+.devtools-tab[icon-invertable="dark-theme"][selected] > image {
+  filter: invert(1);
+}
+
+/* Don't apply any filter to non-invertable command button icons */
+.command-button:not(.command-button-invertable),
+/* [icon-invertable="light-theme"] icons are white, so do not invert them for the dark theme */
+.theme-dark .devtools-tab[icon-invertable="light-theme"] > image,
+/* Since "highlighted" icons are green, we should omit the filter */
+.devtools-tab[icon-invertable][highlighted]:not([selected]) > image {
+  filter: none;
+}
+
 .devtools-tab > label {
   white-space: nowrap;
   margin: 0 4px;
 }
 
 .devtools-tab:hover > image {
   opacity: 0.8;
 }