Archive - December, 2007

Simple Firefox Customizations: The Basics

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.

Let’s define some terms in case you don’t know them. XUL (pronounced “zool”) is Mozilla’s XML-based User interface Language. It is used along with JavaScript and CSS to create the user interface in Firefox. Extensions can modify XUL, JavaScript and CSS by overlaying new XUL, JavaScript and CSS that replaces what is built-in to Firefox. Most of our work is going to involve the creation of these overlays. If you want more details, check out XUL Overlays at the Mozilla Developer Center.

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:




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:


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.

One Year of Operator

It’s been one year since I released Operator and I wanted to take the opportunity to thank everyone who is using it and has had good things to say about it. I haven’t advanced the technology as much as I wanted to over the past year but hopefully this next year we’ll see much more, especially with the inclusion of a microformats API in Firefox 3.

And now for something completely different.

If you use Operator on amazon.com, you might notice that the “Tagspaces” item is available, but when you pop it down, you get a lot of stuff that says “ref=tag_dpp_cust_itdp_t.” This is because amazon (like a lot of other sites – any drupal site comes to mind) is not following the rel-tag spec. To attempt to work around this problem, I’ve added a hidden preference to Operator called “extensions.operator.allowInvalidTags.” If you add this preference via about:config and set it to true, Operator will display the text content of the tag and use it, instead of the proper tag value. Note that although this makes some things work on amazon.com, they still is completely clueless about how to use rel-tag – checkout their Firefox tag page and take a look at the Tagspaces menu with the hidden preference turned on. You’ll get things like “See all 226 tags” and “See all 25 customers.” Great job amazon! Go read the spec!

And for everyone else that has screwed up tags, please go read the spec. If you don’t like the spec, that’s fine, but please don’t add rel=”tag” to anything that is an invalid tag.

Operator 0.9 beta available

I’m making available a beta of Operator 0.9, which has support for Firefox 3 and uses the built-in Firefox 3 microformats support.

The primary focus of this release has been performance, and I believe it shows. Sites like the Samsonite Store Locator are MUCH faster. Note that if you want to improve performance even more, you should remove the adr microformat from your toolbar. I’ve done this for new installs of Operator in the future. Since most pages with adrs have them in hCards, I’ve moved all the functionality that was for adrs into the hCard submenus.

Other changes include support for whether or not hidden microformats are displayed. You can try this out on the Samsonite website. Note that this functionality doesn’t work on Firefox 3 because it required a change to the core Microformats support which hasn’t made it into Firefox 3 yet.

Other small changes are the addition of searching for tags on amazon.com products, as well as searching for addresses on MapQuest.

One thing that is NOT in this release is modifications to support the new RDFa spec. We’re still waiting for some stuff to be finalized for that.

Enjoy!