Sharing CSS styles between platform themes

Matthew N. MattN+firefox-dev at mozilla.com
Thu Jan 31 04:17:29 UTC 2013


I've noticed that there is quite a bit of duplication of CSS styles between our default themes (e.g. winstripe/pinstripe/gnomestripe) which makes implementing new features and re-styling old features somewhat tedious and error prone.

I propose that we share more styles between the default themes and split up the shared css files to make them more manageable (similar to how browser.js was recently split up).  We would continue to use browser/base/content/browser.css for structural markup so this would only affect theme-related styles.  To avoid a performance impact, the modularized shared CSS files can be pre-processed into the various OS-theme stylesheets. This also allows them to use #defines of the including stylesheet.

We already have a little used browserShared.inc[1] in browser/themes/ so we can put new shared files in that file and the same directory. Alternatively, we could create a new subdirectory with a name like "commonstripe" or "shared" and move browserShared.inc inside of it. Examples of shared stylesheets would be browser-social.css, browser-devtools.css, and browser-tabs.css. Perhaps a "browserShared-" prefix would be better than "browser-" to make it easier to distinguish between the shared and default theme files?

My preference is to create the directory browser/themes/shared/ with files having the "browserShared" prefix.  Any thoughts or objections?

Thanks,
Matthew
IRC: MattN

[1] https://mxr.mozilla.org/mozilla-central/source/browser/themes/browserShared.inc?rev=dc359d500e94



More information about the firefox-dev mailing list