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.

    What do you think, sirs?

    Blogs of note
    personal that's my blog
    (The Official Blog of the Internet)
    memoirs of hydrogen guy matthew shepherd (quebec) rhapsodic.org Henriette's Herbal Blog lynne ydw i slumbering lungfish
    geek Y!Cool Thing jeremy z
    (The Official Website of the Internet)
    dave's picks ultramookie Josh Woodward derek balling simon willison
    news ars technica search engine watch

    Powered by WordPress
    Hosted on Dreamhost.