Why are CSS declarations for about:addons placed i

Question

Why do CSS declarations for about:addons have to be placed in userContent and not userChrome, given that the namespace of about:addons is XUL?

This is regarding CSS programming for Firefox.

Related: What namespace should be defined in Firefox's userContent.css?

Answer 1

The short answer to this is that the page about:addons is considered content. Thus, userContent.css is used. The namespace(s) (e.g. HTML, XUL) of the elements used in the <document> don't matter with respect to which of userChrome.css or userContent.css is used (only one or the other is used per <document>).

What does matter is the role for which the <document> is being used. If the <document> is being used for chrome, userChrome.css is used. If it's being used for anything else, it's considered content for which userContent.css is used.

If it's something that's displayed in the content area of Firefox by navigating to the page (e.g. by changing the entry in the URL bar), then it's content, even if it's using XUL elements.

MDN defines "chrome" as:

In a browser, the chrome is any visible aspect of a browser aside from the webpages themselves (e.g., toolbars, menu bar, tabs). This should not to be confused with the Google Chrome browser.

It also provides a link to a blog post, "Browser and GUI Chrome", which provides a similar definition:

Chrome is the visual design elements that give users information about or commands to operate on the screen's content (as opposed to being part of that content). These design elements are provided by the underlying system — whether it be an operating system, a website, or an application — and surround the user's data.

In Firefox, the content portion of the display is:

The chrome portion includes everything else. This includes interface popups (e.g. the add bookmarks dialog), but not content-page popups. While it also includes the borders around the window, many people generally think of it including this portion of the display:

More detail

Specifically, only one of userChrome.css or userContent.css is applied to each <document>. It is done in this code. The choice in the code comes down to what value is of the property document.docShell.itemType. If that value is a 0, then userChrome.css is used, if not (or does not exist, etc.) then userContent.css is used.

The itemType can have the following values:

• typeChrome = 0,
• typeContent = 1,
• typeContentWrapper = 2,
• typeChromeWrapper = 3,
• typeAll = 2147483647

Which is assigned depends on how the page/file is loaded, not just the type of file, or the URL. For instance, an .xul file which is loaded from a chrome:// URL may be contained in a typeContent <document> (has userContent.css applied), if it was loaded from the URLbar. On the other hand, the same .xul file which is loaded as the content for a <window> with openDialog() may be in a typeChrome document (has userChrome.css applied).

The namespace of the elements contained in the file used for the doesn't matter to which of the two files, userChrome.css or userContent.css, is used. The namespace does matter for if the CSS applies to the elements (at least if it is a typeChrome <document>).