isn't quite ashamed enough to present

jr conlin's ink stained banana

2008-09-10

::Adding Tails to a Fox

Right, moderate milestone reached. i can pick up here again.

So, you've probably done the Firefox tutorial where you add a box to the status bar, but what if you want to do more than that?

Well, turns out that you can (obviously) control damn near everything in the chrome from the protected chrome layer. The only trick is, of course, figuring out where things are.

First off, you probably need to realize that the .xul file generally describes and replaces things… except for some things. This is controlled by the "overlay" element inside of the chrome.manifest file. Chances are, you have a like like:
overlay chrome://browser/content/browser.xul chrome://flixo/content/flixo.xul
This tells firefox to look for the special ID names and merge what's in your file with what's in browser.xul There are root elements that Firefox will attach your defined .xul elements to which you're not going to be able to easily replace. This is a good thing, but it can be a bit tricky for folks to grasp, particularly when coming from a CSS/Javascript world where defining an element by a particular ID pretty much means replacing that item.

All of these can be found by sifting through the $MOZILLA_APPLICATION/chrome/browser.jar/content/browser/browser.xul file, but i'm going to annotate the main elements here. Here's a run down of the main "anchor" points for XUL:

Toolbars

navigator-toolbox
The main container for toolbars. This is where every toolbar based extension shoves itself. The class of "chromeclass-toolbar" makes sure that the toolbar inherits the look of the parent chrome.
<toolbox id="navigator-toolbox">
<toolbar id="myExample" class="chromeclass-toolbar">
<toolbarbutton label="Hello Sailor" />
</toolbar>
</toolbox>
BrowserToolbarPalette
The container for the various Back/Forward, Refresh, Cancel, Home, etc. buttons

Menus

The context menu (right click menu)
<popup id="contextAreaContextMenu">
<menuitem id="myExample" label="Hello Sailor" insertafter="context-searchselect" />
</popup>
main-menubar
This is the main menubar space, where you'd add additional top level menu items. (e.g. where File, Edit, View… live) i'll add in that the URL bar urlbar and the search box search-container live within this box.
<menubar id="main-menubar">
<menu id="myExample" accessKey="m">
<menupopup>
<menuitem label="Hello Sailor" />
</menupopup>
</menu>
</menubar>

The menu bar includes the following:

File file-menu
Edit edit-menu
View view-menu
History history-menu
Bookmarks bookmarksMenu
Tools tools-menu
Help helpMenu

Why are Bookmarks and Help menu ids different? Your guess is as good as mine, but i'm willing to believe that because both of these are dynamically populated, someone got a wild hair to "fix" the naming convention.

Misc

sidebar-box
The sidebar. This contains all the bits for the sidebar, including the title sidebar-title, throbber sidebar-throbber and close button (which i note doesn't have an id, but is the only toolbarbutton object)
appcontent
The main window. This is where the tabbed browser elements reside. i STRONGLY urge you not to screw with this one unless you're quite sure you know what your doing and don't want to be set on fire.
browser-bottombox
The crap at the bottom of the screen. including the status bar statusbar-display, the progress meter statusbarpanel-progress, the download meter download-monitor and other bits and inserts.

Naturally, while this list is hardly extensive, everything is also subject to change. Fortunately, i just found out a friend of mine will be working at Mozilla soon, so i fully intend on badgering him to make sure that at least some of this crap stays reasonably consistent from iteration to iteration.

Hey, delicious user, Save This Page
Blogs of note
personal that's my blog
(The Official Blog of the Internet)
memoirs of hydrogen guy matthew shepherd (quebec) rhapsodic.org j$ (right) Henriette's Herbal Blog fanatical apathy lynne ydw i iconophobia slumbering lungfish
geek Y!Cool Thing michael j radwin jeremy z
(The Official Website of the Internet)
dave's picks ultramookie Josh Woodward derek balling j$ (left) simon willison Yahoo! Search Blog
news ars technica search engine watch webmaster world.com
forums uh.net man-man killroy & tina

experimental

Firefox search plugins for Yahoo!

My Living Room media box config

The Official "Official" Registry of the Internet

Powered by WordPress
Hosted on Dreamhost.
And Steveo's page is Totally Fucking Awsome.