Multibutton Images

Many of the button image files in Firefox have multiple button images. This reduces the number of files that must be opened, improving Firefox's performance.

The image portion to be used is specified as shown in the following code snippet:

 menuitem.bookmark-item {   list-style-image: url("chrome://global/skin/icons/folder-item.png") !important;   -moz-image-region: rect(0px, 16px, 16px, 0px) } 

In this code, the image comes from the graphic file named folder-item.png. This image is 32 x 48 pixels in size. The part you want is defined by the moz-image-region, specifically the rect() part. In rect() there are four parameters. In order (left to right) they are top, right, bottom, left. Think of a box and follow the perimeter in a clockwise manner, and you should remember which parameter is which.

Now, for this example you see that

 top = 0 right = 16 bottom = 16 left = 0 

So, the top and left are 0,0, or the upper-left corner of the image. (All images have an origin of 0,0 at their upper-left corner.) You also see that the right and bottom are both 16 pixels. You are taking a piece of this image starting at 0, 0 to 16, 16 to use as your button image (see Figure 15.2). The image is 16 pixels square, starting at pixel 0 and ending at pixel 15. The pixel at 16 is not included in this image.

Figure 15.2. The icon will be the one in the upper-left corner of the image.

After you have created your button images, you need some background images for the menu and toolbars.