Polishing Firefox Chrome

Hacking Firefox Chrome

Now if you've been following along and you moved the Search Bar to the menu bar, you'll notice that while the Address Bar expanded to fill up the remaining space, the same thing did not happen with the Search Bar. We're going to fix that now, but it will require some hacking.

First, an explanation: The Firefox UI is controlled by a set of text files. These text files can be CSS, JavaScript and XUL files. These text files are then all collected up and zipped into big files called "Jar" files. What we're going to do is unzip a Jar file, edit two files and then zip it back up. That's all that needs to be done to change the appearance and behavior of many facets within the Firefox user interface.

The file we're going to touch is in your Firefox installation directory (default is C:\Program Files\Mozilla Firefox\) under the "chrome" subdirectory and it's called browser.jar. First, make a copy of this file for backup. This is the file you can use to recover if you mess something up (simply delete your messed up browser.jar and rename this backup to browser.jar).

Now, make a copy of browser.jar for editing. Instructions for Windows XP follow:

• right-click browser.jar and click Copy
• right-click in the folder and click Paste
• right-click on this new file and rename it to browser.zip (ignore the warning about changing the file extension)
• right-click browser.zip and click "Extract All". Accept the defaults on the Extraction Wizard screen.

After extracting you'll have a subdirectory inside your "chrome" subdirectory. Navigate into this structure and the file content/browser/browser.xul. This is the first file we're going to edit. Right-click the file and open it up in a text editor (you may need to associate .xul files with a text editor first).

In the browser.xul file, find the following section:

and change it to:

Basically we just added two flex attributes. One to the Search Toolbar container and one to the Search Toolbar itself. This tells the layout engine to stretch this widget so that it takes up any remaining space in its container.

Next, for a bonus, edit the search.xml file (also located in content/browser/) and find the following section:

and change it to:

Here we've added the enablehistory attribute to the Search text box. This will give you a pull-down button on the bar and allow you to scroll through your previous searches.

Once the changes are done, it's time to see if we did everything proper. Navigate back up to the "C:\Program Files\Mozilla Firefox\chrome" subdirectory and right-click on the "browser" folder. Choose Send To > Compressed (zipped) Folder. This will update browser.zip with your changes.

Now the moment of truth. You'll need to install your new browser.zip as the chrome that Firefox should use. To do this final step, you must shut down your Firefox browser (since it is currently using the file). Once Firefox is completely closed, delete the browser.jar file and rename browser.zip to browser.jar. Start up your browser again. If you did everything right, you should see the new chrome as shown in the below picture (minus the purple arrows and text).

By the way, if any guru out there knows how to accomplish these changes using user.js, please let me know (leave a comment).

Pages: 1 2