Difference between revisions of "Chrome"

From CDOT Wiki
Jump to: navigation, search
(What is Chrome?)
(Chrome URLs)
 
(66 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
=What is Chrome?=
 
=What is Chrome?=
Chrome is the user interface parts of the application window that are outside of a window's content area.
+
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).  
[http://developer.mozilla.org/en/docs/Creating_toolbar_buttons Toolbars], menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.
 
  
=Chrome Registration=
+
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 [http://developer.mozilla.org/en/docs/Extensions extension], typically is chrome.
A supplier of chrome for a given window type (e.g., for the browser window) is called a chrome provider. The providers work together to supply a complete set of 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.
 
  
There are three basic types of chrome providers:
+
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>.
  
==Content==
 
  
The main source file for a window description comes from the content provider, and it can be any file type viewable from within Mozilla. It will typically be a XUL file, since XUL is designed for describing the contents of windows and dialogs. The javascript files that define the user interface are also contained within the content packages, as well as most XBL binding files.
+
=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
  
==Locale==
+
==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]].
  
Localizable applications keep all their localized information in locale providers. This allows translators to plug in a different chrome package to translate an application without altering the rest of the source code. The two main types of localizable files are DTD files and java-style properties files.
+
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]:
  
==Skin==
+
<pre>chrome://WindowType/ProviderType/[ProviderName/]</pre>
  
A skin provider is responsible for providing a complete set of files that describe the visual appearance of the chrome. Typically a skin provider will provide CSS files and images.
+
*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]]
  
=What you can do with Chrome=
+
==Chrome Registry==
Here are the following examples of what you can do with Chrome:
+
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/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/Working_with_windows_in_chrome_code Working with windows in Chrome Code]
*http://developer.mozilla.org/en/docs/Creating_toolbar_buttons
+
*[http://developer.mozilla.org/en/docs/Creating_toolbar_buttons Create toolbar buttons]
*http://developer.mozilla.org/en/docs/Creating_a_Firefox_sidebar
+
*[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=
 
=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 ]&nbsp;&nbsp;  by Benjamin Smedberg <benjamin@smedbergs.us>
 
[http://www.mozilla.org/xpfe/ConfigChromeSpec.html Configurable Chrome ]&nbsp;&nbsp;  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.mozilla.org/support/firefox/tips
  
http://developer.mozilla.org/en/docs/Working_with_windows_in_chrome_code
+
[http://www.xulplanet.com/tutorials/xultu/intro.html 1.1 Introduction]
 
 
http://developer.mozilla.org/en/docs/Chrome_Registration
 
 
 
http://www.xulplanet.com/tutorials/xultu/chromeurl.html
 

Latest revision as of 12:46, 6 October 2006

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.


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 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).

Below: Chrome registry - mapping chrome providers to URLs Chrome.JPG

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).

Code Registry Example

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
  • Line 1:
    content packagename uri/to/files/ [flags]
    • This code will register the package called necko when resolving the URL jar:comm.jar!/content/necko/ with the xpcnativewrappers flag on


  • Line 5:
    locale packagename localename uri/to/files/ [flags]
    • 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:
    # this line is a comment - you can put whatever you want here
    • To comment your code, put '#' in the beginning of the line.


  • Line 7:
    overlay chrome://URI-to-be-overlayed chrome://overlay-URI [flags]
    • 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:
    skin packagename skinname uri/to/files/ [flags]
    • 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:
    override chrome://package/type/original-uri.whatever new-resolved-URI [flags]
    • 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 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:


Resources

WierdAl in #developers

XUL - Creating Localizable XML GUI

Configurable Chrome    by Benjamin Smedberg <benjamin@smedbergs.us>

Chrome Registration

http://www.mozilla.org/support/firefox/tips

1.1 Introduction