Chapter 18: Tailoring Your Toolbars

If you've ever struggled to set the clock in your car — just turn off the AC and press Eject while going 61.5 mph, of course! — you'll appreciate the toolbar customization features in Firefox. The toolbars are those collections of buttons and text boxes that sit at the top of every Firefox window. Like your car's dashboard, the toolbars offer quick access to features you might use hundreds of times a day — such as going back to the previous page. Unlike your car's dashboard, Firefox toolbars are completely configurable. This chapter shows you how you can add, remove, and rearrange the toolbar items and even create new toolbars to ensure that the things you do regularly are always within reach and easy to use … unlike your car clock.

Changing the Items on Your Toolbars

Firefox is designed to be simple, and to that end, its toolbars offer access only to those features that nearly everyone needs every day — features such as Back, Forward, and Search. However, Firefox is also designed to be simple to customize. If you can drag and drop, you can give your toolbars a makeover by adding buttons that offer new functionality and by sprucing up the toolbar layout. The following sections look at the powerful Customize Toolbar window that makes all this possible.

REMEMBER 

You can't customize the menu bar (the topmost bar, with File, Edit, and so on) in the Mac version of Firefox.

Adding items to the toolbar

By default, Firefox offers only a limited set of buttons on its toolbars. However, Firefox has a large collection of buttons from which you can choose to customize your toolbars as you like.

Tip 

Many extensions, such as the Google Toolbar (http://toolbar.google.com), add items to the Customize Toolbar window when you install them. You can add these items to your toolbars in the same way you add the default items, by following the instructions in this section. See Chapter 20 for more information about extensions.

Follow these steps to add an item to the toolbar:

1. The Customize Toolbar window appears, as shown in Figure 18-1.

   
   Figure 18-1: The Customize Toolbar window.

   Tip 

   You can access this window more quickly by right-clicking on the Home, Reload, Stop, or Go buttons (or anywhere on the menu bar if you're using Windows), and then choosing Customize from the contextual menu that appears.

2. Drag the item you want to add from the Customize Toolbar window and drop it onto the desired spot on a toolbar.

   A black line indicates where the item will be inserted when you drop it, as shown in Figure 18-2.

   
   Figure 18-2: Add an item by dragging it from the Customize window to the desired location.

3. When you're done adding buttons, click Done to close the Customize Toolbar window.

REMEMBER 

At any given time, the Customize Toolbar window displays only those items that aren't already on one of the toolbars.

Tip 

You might want to enlarge the Customize Toolbar window by dragging the window border so you can view its entire collection of buttons in one screen without having to scroll.

Rearranging toolbar items

Firefox makes it easy to rearrange toolbar items if, for example, you want to move a button you click frequently to a more prominent location.

To move an item, follow these steps:

1. Tip 

   You can access this window more quickly by right-clicking on the Home, Reload, Stop, or Go buttons (or anywhere on the menu bar if you're using Windows), and then choosing Customize from the contextual menu that appears.

2. Drag the toolbar item you want to move to its desired spot.

   A black line indicates the position where the item will appear after you drop it.

   For example, suppose you want the Stop and Reload buttons (as shown in Figure 18-3) to change places. Simply drag the Reload button and drop it to the right of the Stop button, as illustrated in Figure 18-4.

   Figure 18-3: By default, the Reload button is to the left of the Stop button…

   
   Figure 18-4: …but if you just drag the Reload button one position over, then…

   As soon as you release the mouse button, the Reload button appears in its new location. Rather than leaving an empty space in the toolbar, Firefox automatically shifts the Stop button over to where the Reload button used to be, as shown in Figure 18-5.

   
   Figure 18-5: …voilá! The Stop and Reload buttons change places.

3. Click Done to close the Customize Toolbar window.

Removing toolbar items

First, make sure you have the Customize Toolbar window open by choosing View
Figure 18-6: This Separator separates navigation and clipboard buttons.

Space: A Space is — as the name suggests — a small bit of horizontal space you can use to separate two adjacent items. Some people like to use Spaces like Separators to delineate a group of related toolbar items; others just find aesthetic appeal in having more spacious and less cluttered toolbars. Figure 18-7 illustrates using a space rather than a separator to distinguish the group of Cut, Copy, and Paste buttons. Notice that the bottom part of Figure 18-7 shows how the space fades into the toolbar color when you close the Customize Toolbar window.

Figure 18-7: Like Separators, Spaces help you divide up your toolbars logically.

Flexible Spaces: A Flexible Space is very similar to a Space, except that instead of offering a fixed amount of space, a Flexible Space stretches to fill all the unused space in the toolbar to which you add it.

The toolbar design in the Windows version of Firefox contains a Flexible Space by default. Look in the top-right corner of the Firefox window, and you see a small image called the Activity Indicator, which animates when a Web site is loading. This image is separated from the Firefox menus with a Flexible Space, which is revealed when you open the Customize Toolbar window, as shown in Figure 18-8. If you'd like, you can remove this Flexible Space by dragging it back into the Customize Toolbar window, just as you remove other toolbar items.

Figure 18-8: Flexible Space items, normally invisible, are revealed when the Customize Toolbar window is open.

What's the best toolbar design?

Most people tend to think of software development as a technical discipline with little creative outlet. Sometimes the other Firefox team members and I wish that were true, because the debate over what constitutes the best toolbar design turned out to be one of the most divisive and heated in our development history. This wasn't a question of code. It was a question of, quite frankly, what feels right. Of the thousands of possible toolbar arrangements, which one offers the best balance of ease-of-use and aesthetics? Which is spacious without stealing precious screen real estate from Web sites? Which will adequately distinguish Firefox from other browsers without being so inconsistent that it's impossible to figure out?

To understand why the toolbar is such a big deal, consider how many times a day you click that Back button. Serious Internet surfers use the Firefox toolbars for hours at a time every day. An ugly, distracting, or nonintuitive toolbar design would be a deal-breaker for most people, even if they didn't consciously understand what it was that didn't feel right about Firefox. Even though we intended to offer customization tools, we knew that the overwhelming majority of our target audience would lack the time or technical literacy to fix our toolbar mistakes. And we couldn't just fix the toolbars in a subsequent release because that would be a jarring change to people who had grown accustomed to them. We had one shot at toolbar perfection.

One of the major points of contention during what we now call the Toolbar Wars was whether Firefox should follow other browsers in giving the Location Bar its own toolbar or try something new by merging the navigation buttons and the Location Bar into a single toolbar.

The first route was tried and true. Even if it wasn't the greatest design in the world, people expected it, which made it the safer route. Because it devoted an entire toolbar to buttons, the design would also allow us to include a variety of buttons to access features like Bookmarks and History, just as the popular Internet Explorer does.

The second route was much riskier. No browser had ever done it before. And it had very little space for buttons beyond the core set (Back, Forward, Stop, Reload, and Home) because we needed to keep the Location Bar a reasonable size so you could read its contents. But as we talked with people, a funny thing happened: We realized that the "disadvantages" were actually benefits. People didn't want a toolbar that offered access to everything under the sun. They wanted to go back, forward, and home. They wanted to stop and reload a page. And that was it. When we gave them trial versions of the new design for testing, hardly anyone missed the Bookmarks or Print buttons—they lauded the simplicity. Firefox 1.0 launched with the new design and nearly all of its competitors have since changed their designs. Of course, this chapter tells you everything you need to know to revert to the old-style layout if you prefer it.

REMEMBER 

The Firefox Location Bar is designed to be flexible in that it also stretches to fill unused space on whatever toolbar it resides on to give you plenty of space to view the current address. If you place a Flexible Space in the same toolbar as the Location Bar, the Location Bar wins out and takes up the unused space, and the Flexible Space is reduced to a thin black line (since, sadly, it has no space to take up).

These special items are for cosmetic purposes only and don't do anything when you click them.

REMEMBER 

Unlike the other items in the Customize Toolbar window, these special layout items don't disappear from that window after you drag them to a toolbar. You can drag as many Separators, Spaces, and Flexible Spaces onto the toolbars as you want.

Using the special Bookmarks Toolbar Items item

As I discuss in Chapter 5, Firefox allows you to add your most frequently accessed bookmarks to the Bookmarks Toolbar (the bottom toolbar) for quick access. The Bookmarks Toolbar Items item represents this set of bookmarks, enabling you to move all the bookmarks to a different toolbar by dragging a single item. Note that, by default, this item exists on the Bookmarks Toolbar instead of in the Customize Toolbar window, but it appears only when the Customize Toolbar window is open.