Skip to content

aprendía

(I was learning)

Making Firefox usable

For me, specifically

For all the web-development hotness that Firefox has going on, I really hate using it; there are a bunch of small things that really bother me. Below are fixes for three of those issues.

To the left, please

Should a tab’s close button be on the right or the left? Holy wars have been started over this very issue. But for a Safari user like me, there is really no option but to have it on the left. I need it there or else my brain explodes.

But I also have an argument in the war: It belongs on the left. When a user is reaching to close a tab they are looking for some identifier — the favicon or title — that tells them what the tab is. And they are not generally going to be reading the entire title. Their eyes start at the left of the tab and can identify it quickly. With the close button on the left the user’s focus is near the button and they can easily associate the two and complete their task.

With the button on the right they must identify and then track across the rest of the tab to locate the correct button. The user’s focus is actually closer to the close button on the tab nextdoor then on the target tab.

Fortunately I found a post in the MozillaZine forum with CSS styles that move the close button to the left side. Just drop this in your userChrome.css (at ~/Library/Application Support/Firefox/Profiles/[gibberish]/chrome/userChrome.css). Here are my styles with a little more customization and comments.

/* Move tabs’ close-button to the left side. */
.tab-image-middle, .tab-image-right {
    -moz-box-ordinal-group: 2 !important;
    }

.tab-image-middle {
    padding-left: .5em !important;
    }

/* Make text centered on the tab, not centered between
   the close button and the right edge of the tab. */
.tab-text, .tab-text-shadow {
    margin-left: -1em !important;
    padding-right: 1em !important;
    padding-left: 1em !important;
    }

/* Remove tab favicons. */
.tab-icon-image {
    display: none !important;
    }

One issue solved. Let’s move on.

What’s your progress?

Scenario: A user focuses on the location bar (visully and technically) to do what? Go to a new location! That means loading a new page. The user might want information about the progress of the loading page. And so we have the “progress bar” — duh. Now, from a classification stance it makes sense to put that information in the “status bar.” Unfortunately that status bar is at the very bottom of the browser. Putting the progress bar in the status bar is moving it as far as it could possibly be from the user’s focus.

Let’s fix this the same way Safari does by moving the progress bar into the location bar. Yes, even the exact place the user is already focused on. The Firefox add-on Fission does that for us. And just for familiarity’s sake, I set the Fission preferences to use a PNG version of the image that Safari uses for its progress bar. You can find the original at /Applications/Safari.app/Contents/Resources/Location_Middle_Progress.tif

And while we’re up here in the toolbar, let’s look at the final issue.

Don’t waste my space

Of all the actions that I can do simultaniously in my browser, there are two actions that I will never, ever do at the same time. And that is press the reload and stop buttons. Never.

So why in the world does any browser present them both to the user? It needlessly takes up precious space in the toolbar. Again, I vote for the solution that Safari already employs. Present the user with a reload or a stop button according to context. The Firefox Stop-or-Reload add-on does just that.

I’m good for now

There are other issues that I have with Firefox’ design, but solving these three issues brings me all sorts of happiness and gets it to the point I can focus on the task at hand, whatever it may be.