8

There were already tons of questions about Firefox's userChrome.css file. Most of these stem from the fact that apparently there isn't a complete specification for this file from Mozilla, a complete list of css tags that have an effect on the browser and what those effects are. Instead, people rely to trial and error and also some tricks that work with one version quickly become obsolete with a newer one.

I was wondering whether such a specification is indeed non-available and whether it is reasonable for Mozilla to not release it (if there isn't such a specs) and to not keep it up to date.

What would be the way to find the complete list of css tags that one can tweak via userChrome.css?

2
  • Why would there be a formal specification? There typically isn’t one for webpages either. Just use DOM Inspector to browse the XUL DOM.
    – Daniel B
    Commented Jun 3, 2017 at 11:13
  • Sounds good, how exactly would I do that? Commented Jun 3, 2017 at 11:17

1 Answer 1

9

What you generally try to change with userChrome.css is known as the browser chrome, the parts of the browser outside the web page content. This includes the tab bar, address bar, etc. What you want to do is open this up in a DOM inspector so you can figure out which CSS selectors will target the elements you want to change.

There are no guarantees, and anything you change could be broken by the next version. The advantage is you get far more granularity and flexibility than if they only specified a few limited APIs.

There are two ways you can figure out what elements can be restyled in the current version.


The easiest way to get an inspector open on the page is to navigate to chrome://browser/content/browser.xhtml, which will open up the browser chrome inside a the content area of a tab and give you a funny-looking double window:

From here, you want to open the Page Inspector tool. There's a couple ways to open it but I personally like the F12 keyboard shortcut. Once you do, you will see the DOM tree under the "Inspect" tab, which encompasses the entire browser chrome; for instance, the browser buttons are under #navigator-toolbox #nav-bar, the menus are under #mainPopupSet, the sidebar is under #browser #sidebar-box, etc. There also exists an outline of the important elements and their selectors that you can use as a jumping-off point.

You can then use Page Inspector to select elements, and view existing CSS rules. You can right-click an element in the tree and use the context menu item "Copy -> CSS Selector" to get a quick'n'easy selector to use in your userChrome.css, but it's best if you have some understanding of the basics of CSS selectors so you can figure out the best one.

Remember, the Page Inspector inspects the page content, not the browser chrome. It only works in this case because we launched a copy of the chrome inside a page, as the content.


The other way to inspect the browser chrome is to use the Browser Toolbox, which will let you inspect a normal live window. It's less hacky than opening the chrome as content, but it's also a little bit more complex to get started and doesn't offer much benefit for simple restyling.

2
  • 1
    Answer says navigate to "... .xhtml", but screenshot indicates "... .xul". The former results in an error page for me, and the .xul version chrome has significantly different layout and styling than my usual Firefox appearance.
    – kreemoweet
    Commented Oct 10, 2019 at 4:39
  • 1
    @kreemoweet AFAICT the URL must have been updated in some version, possibly along with Firefox's progressing removal/replacement of XUL. MultiplyByZer0 was kind enough to update the answer text but not the screenshot - I may get around to that at some point. .xhtml should be the current correct one on Firefox 69, I think. You can extract the ./browser/omni.ja file in your browser install directory and look in ./chrome/browser/content/browser/ to see what is correct for you. Or use the Browser Toolbox method.
    – Bob
    Commented Oct 10, 2019 at 5:27

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .