New Firebug theme option in Toolbox options

[janodvarko]

One of the first steps is implementation of new Firebug theme for native tools. There should also be a new option that allows activation/deactivation of the theme. See the screenshot.

Note that the active theme appends a new class on document-element in the Toolbox. For now this is hardcoded inside chrome.js file, see loadFirebugTheme() method.

doc.documentElement.classList.add("theme-firebug");

The code that appends the new option into Toolbox options dialog might be in chrome.js module or perhaps new module can be created (and used from chrome.js).

Honza

[janodvarko]

@zendyani: are you interested to look at this issue? I think it could be good-first-bug to start with.

Honza

[zendyani]

Of course Honza, i'll take it.

Djalil

2014-06-12 12:10 GMT+01:00 Jan Odvarko notifications@github.com:

@zendyani https://github.com/zendyani: are you interested to look at
this issue? I think it could be good-first-bug to start with.

Honza

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

[janodvarko]

Awesome, you might also want to read hacking-on-firebug-next instructions here:
https://github.com/firebug/firebug.next/blob/master/README.md#hacking-on-firebugnext
(and please let me know if I can improve it, so it's easier for others to start hacking).

Thanks,
Honza

[janodvarko]

Here is a link to a theme-switching module, we might want to take a look and see how themes switching works internally:
http://dxr.mozilla.org/mozilla-central/source/browser/devtools/shared/theme-switching.js

Honza

[janodvarko]

Here is related patch that implements OptionsOverlay object and creates additional button in the options panel
e169e5e

Djalil: The next step is handling theme switch event and make sure that all iframes in the toolbox have properly set the "theme-firebug" flag.

See how native tools do it here:
http://dxr.mozilla.org/mozilla-central/source/browser/devtools/shared/theme-switching.js

(see also some xxxDjalil comments in the code)

Honza

[janodvarko]

Yet one small and related commit:
cb90f69

Honza

[janodvarko]

Development branch:
https://github.com/firebug/firebug.next/commits/issue2

One related commit:
a61912b

1. Panel (and the toolbox) are responsible for loading specific theme stylesheets into the right iframes.
2. Panels registers to get theme-swithing events
3. When theme has been changed the panel should also change the class attribute in related iframes i.e. set 'theme-firebug'. We might want to set also 'theme-light' since the firebug theme will be probably built on top of the light theme.

add #3) We might get direct API support within theme-switching.js file (TODO Honza: report a bug).

@zendyani: try to open the Options panel and change firebug <-> light theme and back. The Options toolbar button (and the other ones to the right) are damaged. Can you please check out the problem?

Honza

[janodvarko]

Here is a bug where I am requiring new API for implementation of a new theme.
https://bugzilla.mozilla.org/show_bug.cgi?id=1038562

@zendyani: feel free to add new thoughts/requirements into the bug if there are any API that would make our lives easier.

For now we should continue implementing Firebug theme with the logic we have in place and focus on fixing issues that are there when themes are switched.

Honza