1
edit
Changes
→Chrome URLs
=What is Chrome?=
In a nutshell, Chrome is the user interface parts of the application window that are outside Mozilla products. The user interface is composed mostly of a window's content area. Toolbars[[XUL]], menu bars[[XBL]], progress barsCSS, and window title bars 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 all examples of elements that are typically part of the chromejust starting out on Mozilla-based development).
In the XUL world, Chrome is the top level window which contains groups of UI elements of various types. Example of chrome are the <b>browser window</b> and <b>dialog window</b>.
=Chrome in depth=
==Chrome Providers==
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 URLs==
To maximize the flexibility, Mozilla introduces a new technology called "Configurable Chrome" (Refer to [http://www.mozilla.org/xpfe/ConfigChromeSpec.html 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#Chrome_Providers|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 [http://xulplanet.com/tutorials/xultu/chromeurl.html XULPlanet - The Chrome URL] for more details]:
<pre>chrome://WindowType/ProviderType/[ProviderName/]</pre>
*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 [http://www.mozilla.org/projects/intl/iuc15/paper/iuc15xul.html XUL - Creating Localizable XML GUI] for illustrations).
Below: Chrome registry - mapping chrome providers to URLs
[[Image:Chrome.JPG]]
==Chrome Registry==
This aspect requires sufficient understanding of Chrome.
Acoording to WierdAl (#developers), Firefox uses the toolkit approach: [http://developer.mozilla.org/en/docs/chrome.manifest Chrome Registration - MDC] whereas SeaMonkey uses the old way (xpfe).
==Code Registry Example==
<pre>
1. content necko jar:comm.jar!/content/necko/ xpcnativewrappers=yes
2. locale necko en-US jar:en-US.jar!/locale/en-US/necko/
3. content xbl-marquee jar:comm.jar!/content/xbl-marquee/
4. content pipnss jar:pipnss.jar!/content/pipnss/
5. locale pipnss en-US jar:en-US.jar!/locale/en-US/pipnss/
6. # Firefox-only
7. overlay chrome://browser/content/pageInfo.xul chrome://pippki/content/PageInfoOverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}
8. overlay chrome://communicator/content/pref/preftree.xul chrome://pippki/content/PrefOverlay.xul
9. overlay chrome://navigator/content/pageInfo.xul chrome://pippki/content/PageInfoOverlay.xul application=seamonkey@applications.mozilla.org
10. content pippki jar:pippki.jar!/content/pippki/ xpcnativewrappers=yes
11. locale pippki en-US jar:en-US.jar!/locale/en-US/pippki/
12. content global-platform jar:toolkit.jar!/content/global-platform/ platform
13. skin global classic/1.0 jar:classic.jar!/skin/classic/global/
14. override chrome://global/content/netError.xhtml jar:embedder.jar!/global/content/netError.xhtml
15. content inspector jar:inspector.jar!/content/inspector/ xpcnativewrappers=no
</pre>
*Line 1: <pre>content packagename uri/to/files/ [flags]</pre>
**This code will register the package called necko when resolving the URL jar:comm.jar!/content/necko/ with the xpcnativewrappers flag on
*Line 5: <pre>locale packagename localename uri/to/files/ [flags]</pre>
**This code will register a locale package called pinpnss with the localename en-US when resolving the URL jar:en-US.jar!/locale/en-US/pipnss/
**NOTE: If there are more than one locale file register for the package, chrome will select the best-fit locale for the URL.
*Line 6: <pre># this line is a comment - you can put whatever you want here</pre>
**To comment your code, put '#' in the beginning of the line.
*Line 7: <pre>overlay chrome://URI-to-be-overlayed chrome://overlay-URI [flags]</pre>
**The prupose of this code is to overlaying one chrome on top of the other. The application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} is a flag that specific which application will have this overlay.
*Line 13: <pre>skin packagename skinname uri/to/files/ [flags]</pre>
**This will register a skin package gobal with the skinname classic/1.0 when resolving the URL jar:classic.jar!/skin/classic/global/
**NOTE: If more than one skin register for the package, chrome will select the best-fit skin for the URL.
*Line 14: <pre>override chrome://package/type/original-uri.whatever new-resolved-URI [flags]</pre>
**The purpose of this is to override a chrome file provided by the application or XULRunner with a new extension or embedder.
=Additional Info=
==Starting Out==
WierdAl in #developers said he started doing the development work by obtaining [http://www.gerv.net/software/patch-maker 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:
*[http://weblogs.mozillazine.org/weirdal/archives/cat_xul_widgets.html Burning Chrome: XUL Widgets Archives]
*[http://weblogs.mozillazine.org/weirdal/archives/cat_xul_xbl_js_and_dom.html Burning Chrome: XUL, XBL, JS and DOM Archives]
== Chrome Tutorials==
Here are tutorials on how to create user interface parts using Chrome:
*[http://developer.mozilla.org/en/docs/Creating_a_Skin_for_Mozilla:Getting_Started Create a skin for Mozilla]
*[http://developer.mozilla.org/en/docs/Working_with_windows_in_chrome_code Working with windows in Chrome Code]
*[http://developer.mozilla.org/en/docs/Creating_toolbar_buttons Create toolbar buttons]
*[http://developer.mozilla.org/en/docs/Creating_a_Firefox_sidebar Create a Firefox sidebar]
*[http://developer.mozilla.org/en/docs/XUL_Tutorial:Creating_a_Window XULTutorial: Creating a Window - MDC]
*[http://www.g4tv.com/screensavers/features/41046/Create_a_Mozilla_Extension_pg3.html Create a Mozilla Extension]
*[http://www.mozilla.org/unix/customizing.html Customizing Mozilla]
=Resources=
WierdAl in #developers [http://www.mozilla.org/projects/intl/iuc15/paper/iuc15xul.html XUL - Creating Localizable XML GUI] [Configurable Chrome | http://www.mozilla.org/xpfe/ConfigChromeSpec.htmlConfigurable Chrome ] by Benjamin Smedberg <benjamin@smedbergs.us> [http://developer.mozilla.org/en/docs/Chrome_Registration Chrome Registration] http://www.mozilla.org/support/firefox/tips [http://www.xulplanet.com/tutorials/xultu/intro.html 1.1 Introduction]