Hacking Firefox - part 40 docx

To theme the Help window, I recommend using the DOM Inspector to find out the CSS id of each button and then adding the code to theme the buttons at the bottom of the global\global.css f

F IGURE 18-10: Paint Shop Pro, layered overlay

Simply repeat the process until you have covered all images from the default theme with the images you want to appear in your theme If you put each individual image on its own layer, you can easily manipulate them later on to correct alignment issues When you are finished editing, select the Raster 1 and then press the Delete key on the keyboard to remove the default images When saving the image, you might be asked if you want to merge all layers Select Yes to finish saving the file

If you are using separate images for each button, as I choose to do, the process is similar You can skip the step on deleting the layer containing the default images, but make sure to put each state of the images on a different layer to help with alignment

Most image editors have the capability to display gridlines behind the images to aid with align-ment In Figures 18-9 and 18-10, the gridlines are shown as the gray and white squares visible

on the background of the images

An easy way to create the small toolbar icons is to simply resize the large toolbar icons If you’ve already completed the large toolbar icons, you can press Shift+S or choose Image ➪ Resize to shrink your image and then save it as a different name than the large toolbar icon

If you don’t use a different name, you will lose the large toolbar icon because the file will be overwritten

Different image editors handle things slightly differently, but all have the ability to display gridlines and resize images If you are unsure how to perform an action, consult the help file for your image editor for more information

Graphics Locations

If you are familiar with CSS, you can modify attributes freely The majority of the buttons that you see while using Firefox are defined within the browser\browser.css file I would say that about 90 percent of the Firefox interface that you see from day to day is defined in that file If you are ever unsure of where a button’s image is located, refer to the DOM Inspector example

to find which CSS file the button’s code resides in; then you can look at that CSS file to find out the exact location of the image

Main Toolbar

The majority of the buttons you see when using Firefox are defined within the browser\

browser.css file Browsing through this file will give you the location of all the images used, and you can modify attributes for buttons here Figure 18-11 displays the main toolbar of the Atlas theme

F IGURE 18-11: Main toolbar

Extensions Window

The Extensions window requires a few graphics of its own, and they are defined in the mozapps\extensions\extensions.css file If you wish to put icons on the buttons in the lower left, that is possible I do not provide icons for those buttons in my themes Figure 18-12 dis-plays the Extensions window of the Mars theme

F IGURE 18-12: Extensions window

Options Window

The Options window requires a few icons for the option categories The code that governs them resides in the browser\pref\pref.css file Figure 18-13 displays the Options window of the Apollo theme

F IGURE 18-13: Options window

In Firefox 1.1, the location of the code that handles the Options window will be changing The new location is the browser\preferences\preferences.css file Figure 18-14 displays the new Options window of Firefox 1.1 with the Neptune theme

F IGURE 18-14: Options window, Firefox 1.1

Bookmarks Manager

The Bookmarks Manager has seven buttons to theme The code defining the buttons is in the browser\bookmarks\bookmarksManager.css file Figure 18-15 shows the Bookmarks Manager window of the Pluto theme

F IGURE 18-15: Bookmarks Manager

Help Window

The icons for the Help window are not actually included within the classic.jar file; they are in the Firefox\Chrome\help.jar file To theme the Help window, I recommend using the DOM Inspector to find out the CSS id of each button and then adding the code to theme the buttons

at the bottom of the global\global.css file Be sure to set the !importantflag after defining any styles for the Help window buttons so that your styles will be used instead of the default

Figure 18-16 shows the Help window of the Playground theme

F IGURE 18-16: Help window

Icon Conversion

I did not draw any of the images in my themes I am somewhat of a novice when it comes to creating images The method I used to create the button images in my themes was to find existing icon sets After receiving permission from the icon creator to use his or her work, I converted the ICO files to PNG files

To create a PNG image from an ICO file, I use a product from Axialis IconWorkshop (see Figure 18-17) This is not a free program, and it is available for Windows users only After opening the ICO file with IconWorkshop, you’ll need to select the size that you want to export

as PNG from the list on the right After selecting the image size, press Ctrl+Shift+T, or select File ➪ Export ➪ PNG with Transparency

F IGURE 18-17: IconWorkshop

A Linux utility called ImageMagick will convert ICO files to PNG format You can find more information at http://www.imagemagick.org/

A Mac program called IconBuilder can convert ICO files to PNG format You can find more information at http://www.iconfactory.com/iconbuilder.asp

Supporting Popular Extension Buttons

While not a requirement, supporting the buttons of popular extensions does enhance a theme Theming the buttons of an extension is handled slightly differently from theming the standard buttons of Firefox To theme an extension’s button, you need to find out the button’s CSS id This can be done one of two ways: with the DOM Inspector or by manually opening up the extension’s JAR file and looking at the code Either way will work, but I prefer to open the JAR file and look in the CSS there for any button ids That way, I’m certain that I’ll theme all but-tons of the extension After locating the button ids and creating images, you’ll need to add lines

of code to your theme to support the extension’s buttons The best way to do this is to open global\global.css and insert lines of code at the bottom of this file Add the code for all of the extension’s buttons to the bottom of global.css and point the button ids to your images

To ensure that your image is shown, you must specify the !importantflag in the line of code identifying the button image The !importantflag means that once an attribute is defined as

!important, it can never be changed, even if the element is redefined in another CSS file

Here is an example of its use:

#extension-button { list-style-image: url(“chrome:\\browser\skin\extension_button.png”) !important;

}

Let’s look at a real-world example I’ll show you how to support the Basics extension, available

at my web site:http://www.spuler.us The Basics extension does only one thing: adds a button to the left side of the tab bar that opens a new tab when clicked This emulates the behavior of the New Tab button that resides in the tab bar for Mozilla and Netscape The Basics extension utilizes a 16 ×16 pixel image — anything taller than 16 pixels would not fix properly on the tab bar By default, I have the image for the button set to look identical to the small version of the New Tab button, because many users will be using the default theme

Figure 18-18 shows the default theme with the Basics extension installed

F IGURE 18-18: Default theme, Basics extension

I support the Basics extension in all my themes If I had left out the code for the Basics exten-sion, the iCandy Junior theme would have looked like something was not quite right, because the Basics button would display the icon that is bundled with the extension — the icon from the default Firefox theme, as shown in Figure 18-19

F IGURE 18-19: iCandy Junior theme, Basics extension not supported

To add support for the Basics extension, I needed to add some code to the browser\browser.css file This approach generally works for most extensions, but remember to specify the attributes

as !important If you come across an extension where this method does not work, add the code to the global\global.css file instead The code that I needed to add to browser\browser.css for the Basics extension is as follows:

.tabs-newbutton { list-style-image: url(“chrome://browser/skin/icons/basics.png”) !important; }

After you add that code to the browser\browser.css file and supply the necessary image, the button is themed appropriately, as demonstrated in Figure 18-20

F IGURE 18-20: iCandy Junior theme, Basics extension supported

By now, you can see how adding support for extensions to your themes can enhance them However, just because you don’t provide support for an extension doesn’t mean that the exten-sion will not work The extenexten-sion will still work, but without support for it, the extenexten-sion’s but-tons will not be themed to match the rest of the icons used throughout your theme Listed are

a number of popular extensions that I support on my Firefox themes:

Basics

Calendar

Chromedit

CuteMenus

Download Manager

Google Bar

JavaScript Debugger

Quicknote

Search Button

Scrollable Tabs

Tabbrowser Preferences

Toolbar Enhancements

Translation Panel

Web Developer Toolbar

Packaging the Files

Now that you’ve customized the graphics and modified your code, you can take care of the last remaining tasks before creating the JAR file archive for your theme

The install.rdf file needs to be modified to reflect your theme Replace the GUID of Smoke (3646e22c-5e51-43fb-b8a4-9ebaf7eb11f2) with the custom GUID you created ear-lier The following also need to be changed:

name

description

creator

contributor (optional)

homepageUrl (optional)

updateURL (optional)

internalName Any optional elements can be left blank The name element is the theme’s name The

internalNameelement will need to be identical to the theme’s name, but lowercase

Earlier, you used the contents.rdf file from the Smoke theme The only modification left is to change every instance of smoketo the internalNamein your install.rdf file

Creating an Update Definition File

If you would like users to be able to automatically update the theme without having to go to your web site and reinstall, you can specify an updateURL in the install.rdf file I prefer that users know what has changed in my themes, so I don’t utilize this feature If you wish to use this feature, you will need to create a file, named updade.rdf, and place it on a web site Specify the URL of the update.rdf file in the updateURL field of the install.rdf file A sample update.rdf file follows:

<RDF:RDF xmlns:RDF=”http://www.w3.org/1999/02/22-rdf-syntax-ns#”

xmlns:em=”http://www.mozilla.org/2004/em-rdf#”>

<RDF:Description about=”urn:mozilla:extension:{88060a48-addf-4060-87db-c9aec3e5615a}”>

<em:version>1.5.1</em:version>

<em:updateLink>http://www.website.com/theme.jar</em:updateLink>

</RDF:Description>

</RDF:RDF>

The GUID listed in the urn:Mozilla:extensionfield must be the GUID of the theme The em:versionis the version of the theme located online, the most recent version number When Firefox looks for an update to a theme, it will query the URL of the update.rdf file and compare the version number in the update.rdf file to the version number of the theme currently installed If the version number in update.rdf is greater than what is currently installed, Firefox will update the theme with the file located in the em:updateLinkfield

Now that all files are ready, you can create the JAR file for your theme Using your ZIP-format compression tool, create an archive named theme.jar, replacing “theme” with the name of your

new theme Make sure that you do not select the “Save Path Info” option if it is offered.

Testing

To install your new theme, open the Themes window from within Firefox by selecting Tools ➪ Themes You can drag your theme JAR file on the left pane of the Themes window or use the Local Install extension mentioned in Chapter 3 MR Tech’s Local Install extension can be found at http://www.mrtech.com/extensions If the theme doesn’t install, check to see that the install.rdf and contents.rdf files are formatted properly Also, verify that the JAR file directory structure matches that previously shown in Figure 18-2

On a Mac, the drag-and-drop functionality is disabled, and the Local Install extension is the only method of installing a theme stored locally

Using the DOM Inspector

If your theme installs properly but you still need to make minor adjustments, you can once again use the DOM Inspector For any element not displaying as expected, you can view its attributes in the DOM Inspector, using the same process that you used earlier to locate button ids and attributes You can examine the attributes in use and correct any mistakes in your CSS files After making corrections, repackage the JAR file Repeat this process as many times as necessary to get the theme exactly as you want it If you are stuck on something and can’t figure

it out, the greatest source of information that I know of for Firefox themes is the MozillaZine Themes forum (http://forums.mozillazine.org/viewforum.php?f=18) Many theme authors visit this forum regularly to get help and offer advice to others

A quicker way to see your changes without reinstalling the theme is to replace the file manu-ally Navigate to your profile folder, as described in Chapter 1 Then navigate to the extensions folder and locate the folder that is named after the GUID of your theme Opening that folder will show the theme file; you can replace this with the newly corrected version You’ll have to exit Firefox before replacing the file, but afterwards you can open Firefox and see the changes immediately Another advantage of this method is that when you install the theme multiple times, multiple copies of the jar file are stored in the profile directory

Deploying Your Theme

Once you feel that the theme is ready for general use, you need to deploy it There are two ways

of deploying a theme: hosting it on your web site or hosting it on the Mozilla Update web site

There are pros and cons to each method

Hosting your theme on the Mozilla Update site means that many people will be able to see it, but you won’t be able to manage your files One popular complaint is that there can be two ver-sions of your theme available to the public if you host the file on Mozilla Update and on a per-sonal site — the most recently updated copy on your web site and a possibly outdated copy on the Mozilla Update site The site administrator does all file management on Mozilla Update, and you have to file a bug in Bugzilla (http://bugzilla.mozilla.org) in order for changes to take place This process usually takes several weeks The Mozilla Update site has been known to be out of commission for long periods Many theme authors like having control over their files and thus don’t post them on the Mozilla Update site To find out more informa-tion, visit https://addons.update.mozilla.org/about

Hosting your theme on your web site gives you total control over your files, but it may or may not get as much visibility as the Mozilla Update site I used to host my files on both Mozilla Update and http://www.spuler.us, but now I prefer to manage my own files (Currently,

my site is averaging 2.2 million hits and 45GB of bandwidth traffic per month.)

Creating JavaScript Installer Links

Hosting the theme on your web site requires some JavaScript to provide a clickable install link for the theme Otherwise, users will have to download the theme and then use a local install method The following is a sample install link:

<a href = “javascript:void (InstallTrigger.installChrome (InstallTrigger.SKIN,’icandyjr_fb.jar’,’iCandy Junior.’))”>Install</a>

You will need to modify the link to match your theme name and filename That link will pop

up a dialog in Firefox like that shown in Figure 18-21

F IGURE 18-21: JavaScript install confirmation

Making Your Theme Public

After you’ve hosted your theme on a web site, you need to get the word out A few web sites where you can post your theme release include the following: