Panel icon colours responding to DevTools theme options

[richgilbank]

@wbamberg First off, just wanted to say thanks for making this - it's been a huge help in getting started on an addon I'm working on. One thing I've found though is that using the native DevTools theme switcher to alternate back and forth between the light and dark options can obscure a single-colour icon. Example:

Stock light theme:

Stock dark theme:

Do you know if there's a recommended way to switch icons depending on theme, at least for the two that come with FF?
Thanks!

[wbamberg]

It's a really good question, and I do not know the answer. Maybe @rpl or @Gozala do?

[rpl]

Looking into the sources I've found that in the other tools dark/light icon switch is accomplished applying an svg filter to the icon image:

• http://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/devtools/toolbars.inc.css#822

This filter is applied only on tool registered with a new "invertIconForLightTheme" option set to true:

• http://mxr.mozilla.org/mozilla-central/source/browser/devtools/framework/toolbox.js#782
• http://mxr.mozilla.org/mozilla-central/source/browser/devtools/main.js#102
• http://mxr.mozilla.org/mozilla-central/source/browser/devtools/framework/gDevTools.jsm#94

@Gozala, how about exposing the new attributes on the DevTools SDK Panel class?

[Gozala]

I do believe that inversion of colors used to be a default behavior, I guess it’s changed since then. I think exposing additional options sounds good.

Regards

On 2014-11-06, at 11:02 , Luca Greco notifications@github.com wrote:

Looking into the sources I've found that in the other tools dark/light icon switch is accomplished applying an svg filter to the icon image:

http://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/devtools/toolbars.inc.css#822 http://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/devtools/toolbars.inc.css#822
This filter is applied only on tool registered with a new "invertIconForLightTheme" option set to true:

http://mxr.mozilla.org/mozilla-central/source/browser/devtools/framework/toolbox.js#782 http://mxr.mozilla.org/mozilla-central/source/browser/devtools/framework/toolbox.js#782
http://mxr.mozilla.org/mozilla-central/source/browser/devtools/main.js#102 http://mxr.mozilla.org/mozilla-central/source/browser/devtools/main.js#102
http://mxr.mozilla.org/mozilla-central/source/browser/devtools/framework/gDevTools.jsm#94 http://mxr.mozilla.org/mozilla-central/source/browser/devtools/framework/gDevTools.jsm#94
@Gozala https://github.com/gozala, how about exposing the new attributes on the DevTools SDK Panel class?

—
Reply to this email directly or view it on GitHub #1 (comment).

Regards

Irakli Gozalishvili
Web: http://www.jeditoolkit.com/ http://www.jeditoolkit.com/

[wbamberg]

I've filed a bug for this: https://bugzilla.mozilla.org/show_bug.cgi?id=1095222. Even if we don't do it using color inversion, I think it's important for add-on authors to get their icons looking good with both themes.