Firefox 3 – Put More Emphasis on URL Highlighting

Way back in July we introduced a new Firefox 3 feature that focused on making users safer from phishing attacks. This is done using URL highlighting which puts more emphasis on the domain name, kind of like what the Locationbar² extension is used for.

Unfortunately this feature was backed out of the nightly builds shortly after it was put in. Apparently there were some problems getting it to work the way they expected it to, but it has finally made a reappearance in the latest Firefox 3 nightly builds!

Below you’ll find an animated image that show the current state of the Firefox 3 URL highlighting, and also one that demonstrates a tweak that I’m about to show you.

As it stands right now the URL highlighting is a bit basic, and I wanted to make it stand out even more than it already does. Using the Stylish Firefox extension we were able to make the domain name both bold and black, while the remaining portions of the URL were a lighter gray. To do this you just have to create a new style (pictured above) and insert the following CSS code:

#urlbar .formatted-url-domain{
   color: black !important;
   font-weight: bold !important;
}

#urlbar .formatted-url-contents{
   color: #777777 !important;
}

And finally here are two animated images that show the before and after:

How the URL appears before styling:

How the URL appears after styling:

I think that the styled appearance is much better, and those of you familiar with CSS will find a lot of different customization options that you can apply to the different portions of the URL. You can even go crazy and underline, add a background, or put borders around the domain name!

Kudos to WildcatRay over in the Firefox forum for pointing this out!