Firefox 4 XUL source

Question

I'd like to understand how to customize Firefox 4's UI with userChrome.css But I can't find documentation about the element structure that make up the UI that can be modified by userChrome.css

What is the source code for Firefox 4's XUL?

Answer 1

Use the DOM Inspector add-on to inspect the UI directly. If you're familiar with Firebug or the Inspector in Safari or Chrome, it should be straightforward to use. The one thing to note is that you need to use the "File" -> "Inspect Chrome Document" menu, selecting the first item, in order to inspect the Firefox window itself rather than the current page.

Here's an article detailing how to use DOM Inspector in conjunction with userChrome.css: http://eriwen.com/firefox/use-the-dom-inspector/

Answer 2

If you really want the source, then start here, for searching through the source and comparisons between versions online.

But I think you're probably far better off reading through something like the Mozilla Developer Network's Introduction to XUL, and all about working directly on Mozilla/Firefox including the interface.