Chrome
Contents
What is Chrome?
In a nutshell, Chrome is the user interface of Mozilla products. The user interface is composed mostly of XUL, XBL, CSS, and JS files. (You can make changes to these files without needing to recompile the Mozilla project you're working on - which is an enormous timesaver, especially for people who are just starting out on Mozilla-based development).
If you look in the chrome subdirectory of your installation, you'll find .jar files - these contain the chrome files that make up the user interface. These jar files are actually just ZIP archives. Extensions are (usually) chrome applets. 90% of an extension, typically is chrome.
In the XUL world, Chrome is the top level window which contains groups of UI elements of various types. Example of chrome are the browser window and dialog window. The chrome obtains its UI description from four types of providers:
- Content provider
- Provides the skeleton, i.e., the menus, command buttons
- Skin provider
- Supplies the look-and-feel of the chrome
- Platform provider
- Gives platform dependent UI description
- Locale provider
- Offers the language and culture sensitive resources
Chrome in depth
Chrome URLs
To maximize the flexibility, Mozilla introduces a new technology called "Configurable Chrome" (Refer to Configurable Chrome by Benjamin Smedberg <benjamin@smedbergs.us>). A XUL file can be written in such a fashion that its chrome description comes from a mixture of physical sources, either locally, remotely, or a combination of both. An end user may customize her/his configuration to pick up any of the source type from his favor chrome providers.
To achieve this, chrome type URLs must be used to reference external sources; such as CSS files and JavaScript files. A Chrome URL points to a file registered within the Mozilla product (it could be e-mail, calendar, browser etc.)
The general form of chrome URLs look like this [Refer to XULPlanet - The Chrome URL for more details]:
chrome://WindowType/ProviderType/[ProviderName/]
- The "WindowType" is the window type of the chrome. Possible values are "navigator", "messenger", etc. The "ProviderType" is one of the four providers: content, skin, platform, or locale. Examples of the provider names, "ProviderName", are Mozilla, Mozillazine, xyzOrg, myISP, and etc. (Refer to XUL - Creating Localizable XML GUI for illustrations).
Chrome Registry
This aspect requires sufficient understanding of Chrome.
Acoording to WierdAl (#developers), Firefox uses the toolkit approach: Chrome Registration - MDC whereas SeaMonkey uses the old way (xpfe).
Additional Info
Code Example
content necko jar:comm.jar!/content/necko/ xpcnativewrappers=yes
locale necko en-US jar:en-US.jar!/locale/en-US/necko/
content xbl-marquee jar:comm.jar!/content/xbl-marquee/
content pipnss jar:pipnss.jar!/content/pipnss/
locale pipnss en-US jar:en-US.jar!/locale/en-US/pipnss/
# Firefox-only
overlay chrome://browser/content/pageInfo.xul chrome://pippki/content/PageInfoOverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}
overlay chrome://communicator/content/pref/preftree.xul chrome://pippki/content/PrefOverlay.xul
overlay chrome://navigator/content/pageInfo.xul chrome://pippki/content/PageInfoOverlay.xul application=seamonkey@applications.mozilla.org
content pippki jar:pippki.jar!/content/pippki/ xpcnativewrappers=yes
locale pippki en-US jar:en-US.jar!/locale/en-US/pippki/
content global-platform jar:toolkit.jar!/content/global-platform/ platform
skin global classic/1.0 jar:classic.jar!/skin/classic/global/
override chrome://global/content/netError.xhtml jar:embedder.jar!/global/content/netError.xhtml
content inspector jar:inspector.jar!/content/inspector/ xpcnativewrappers=no
Starting Out
WierdAl in #developers said he started doing the development work by obtaining Gerv's Patch Maker and looking in Bugzilla for a bug with the words "good first bug" in the Status Whiteboard. WierdAl also has a blog on his development:
Chrome Tutorials
Here are tutorials on how to create user interface parts using Chrome:
- Create a skin for Mozilla
- Working with windows in Chrome Code
- Create toolbar buttons
- Create a Firefox sidebar
- XULTutorial: Creating a Window - MDC
- Create a Mozilla Extension
- Customizing Mozilla
Resources
WierdAl in #developers
XUL - Creating Localizable XML GUI
Configurable Chrome by Benjamin Smedberg <benjamin@smedbergs.us>
