=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).
To make Mozilla modifiableIf you look in the chrome subdirectory of your installation, you will first extract 'll find .jar files - these contain the UI chrome files from that make up the user interface. These jar files are actually just ZIP archives stored within . Extensions are (usually) chrome applets. 90% of an [http://developer.mozilla.org/en/docs/Extensions 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 <b>browser window</b> and <b>dialog window</b>. =Chrome in depth= ==Chrome Providers==The chrome subdirectory 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 installation directory with an unzip utilityintroduces a new technology called "Configurable Chrome" (Refer to [http://www.mozilla.org/xpfe/ConfigChromeSpec.html Configurable Chrome] by Benjamin Smedberg <benjamin@smedbergs.us>). Use your unzip utility to extract all files A XUL file can be written in such a fashion that directory with 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]].jar extension To achieve this, chrome type URLs must be used to reference external sources; such as CSS files and JavaScript files. Make sure you extract them into A Chrome URL points to a file registered within the same 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) directory in which they are located.Below: Chrome registry - mapping chrome providers to URLs[[Image:Chrome.JPG]]
=More=
==Chrome Registry==
The chrome registry is a file that lists each major Mozilla component and where in This aspect requires sufficient understanding of Chrome. Acoording to WierdAl (#developers), Firefox uses the chrome directory its UI files are locatedtoolkit approach: [http://developer.mozilla. It is located in the chrome directory itself and is called either org/en/docs/chrome.rdf or installedmanifest Chrome Registration -chrome.txt MDC] whereas SeaMonkey uses the old way (or bothxpfe).
A supplier of ==Code Registry Example==<pre>1. content necko jar:comm.jar!/content/necko/ xpcnativewrappers=yes2. 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-only7. overlay chrome://browser/content/pageInfo.xul chrome for a given window type (e://pippki/content/PageInfoOverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}8.goverlay chrome://communicator/content/pref/preftree., for the browser window) is called a xul chrome://pippki/content/PrefOverlay.xul9. overlay chrome provider://navigator/content/pageInfo. The providers work together to supply a complete set of xul chrome for a particular window, from the images on the toolbar buttons to the files that describe the text, contents and appearance of the window itself://pippki/content/PageInfoOverlay.xul application=seamonkey@applications.mozilla.org10. content pippki jar:pippki.jar!/content/pippki/ xpcnativewrappers=yes11. locale pippki en-US jar:en-US.jar!/locale/en-US/pippki/12. content global-platform jar:toolkit.jar!/content/global-platform/ platform13. skin global classic/1.0 jar:classic.jar!/skin/classic/global/14. override chrome://global/content/netError.xhtml jar:embedder.jar!/global/content/netError.xhtml15. content inspector jar:inspector.jar!/content/inspector/ xpcnativewrappers=no</pre>
There are three basic types of chrome providers*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
==Content==
The main source file for *Line 5: <pre>locale packagename localename uri/to/files/ [flags]</pre>**This code will register a window description comes from locale package called pinpnss with the localename en-US when resolving the content provider, and it can be any file type viewable from within MozillaURL jar:en-US. It will typically be a XUL jar!/locale/en-US/pipnss/**NOTE: If there are more than one locale file, since XUL is designed register for describing the contents of windows and dialogs. The javascript files that define package, chrome will select the user interface are also contained within best-fit locale for the content packages, as well as most XBL binding filesURL.
==Locale==
Localizable applications keep all their localized information in locale providers. This allows translators to plug *Line 6: <pre># this line is a comment - you can put whatever you want here</pre>**To comment your code, put '#' in a different chrome package to translate an application without altering the rest beginning of the source code. The two main types of localizable files are DTD files and java-style properties filesline.
==Skin==
A skin provider *Line 7: <pre>overlay chrome://URI-to-be-overlayed chrome://overlay-URI [flags]</pre>**The prupose of this code is responsible for providing a complete set to overlaying one chrome on top of files that describe the visual appearance of the chromeother. Typically The application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} is a skin provider flag that specific which application will provide CSS files and imageshave 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=What you can do =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 the following examples of what you can do with 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]
[http://www.mozilla.org/xpfe/ConfigChromeSpec.html Configurable 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://developer.mozilla.org/en/docs/Working_with_windows_in_chrome_code http://developer.mozilla.org/en/docs/Chrome_Registration [http://www.xulplanet.com/tutorials/xultu/chromeurlintro.html1.1 Introduction]