I get asked a lot of questions about customizing Firefox that are beyond the scope of the CCK. Most of these questions involve how to prevent users from doing certain things or hide certain options in the UI. My typical answer is “you can write an extension for that,” but most people don’t want to go through the hassle of figuring out how to write an extension for what in most cases is a very simple change.
To try to address these issues, I’m going to do a series where I answer questions related to making simple changes to Firefox that might be needed in an enterprise environment. My goal is that a person with no extension experience at all will be able to make these changes by simply modifying an existing CCK extension.
Before I get into the specific customizations, I’m going to start with a very high level view of how we are going to make these changes.
There are currently two changes that the CCK makes using XUL overlays – adding a menu item to the Help menu and chanding the icon, link and tool tip for the animated icon (sometimes called the throbber). Both of these involve knowing the ID of the item you want to modify and then writing XUL that either modifies or replaces the existing XUL.
Here’s the XUL Overlay for adding the Help menu item:
<menupopup id="menu_HelpPopup"> <menuseparator insertafter="aboutSeparator"/> <menuitem label="Our New Help Item" insertafter="aboutSeparator" accesskey="o" oncommand="openUILink('http://example.com'), event, false, true);" onclick="checkForMiddleClick(this, event);"/> </menupopup>
In this case, we needed two IDs – the ID of the help menu (menu_HelpPopup) and the id of the item after which we want to insert our menu (aboutSeparator). What this overlay says is “in the menupopup with an ID of menu_HelpPopup, insert a new separator after the exisiting item aboutSeparator, then insert a new menuitem after that old separator as well.” Don’t worry about the different attributes – we’ll cover those later.
We can also use a XUL overlay to replace content. Here’s the overlay for the animated icon:
<button id="navigator-throbber" oncommand="openUILink('http://example.com')" onclick="checkForMiddleClick(this, event);" tooltiptext="TOOLTIP" disabled="false"/>
In this case, we needed the id of the existing animated icon (navigator-throbber) and we used our XUL to actually change the animated icon. We changed it from being disabled, we added tooltip text, and we added functionality when it is clicked.
Now that you have a very basic sense of how XUL overlays work, next we’re going to take a look at where in an existing CCK XPI our new overlays are going to be placed.