Firefox 3 gotcha: No more yellow address bars

One of the first things I noticed using Firefox 3 was that the address bar for HTTPS (encrypted) pages was no longer yellow. As the old joke goes, it's not a bug, it's a feature. That is, the decision was made for the address bar in Firefox 3 to always be white.

I thought the yellow address bar, advertising encrypted pages, was a great Firefox feature. It was in addition to the classic lock icon that also indicates encrypted pages. The problem with the lock was that it moved around from the bottom right corner to the bottom left corner to the top right corner of the screen depending on the browser being used. Also, it's small and easily overlooked. There was no overlooking the yellow address bar.

In Firefox 3, the visual indicator of encrypted pages is the icon just to the left of the Web page address.

This used to simply indicate the site you were on, nothing more. Webmasters know it as the favorite icon or favicon. In Firefox 3, it was upgraded from an icon to a button with new features, functions and a new name, it's now called the Site Identification button (also known as the "site favicon" and the "site identity button").

In the screenshot above, the gray button color indicates the page is not encrypted. In the screenshot below, the blue button color indicates that the page is encrypted.

The top-of-the-line color though is green (see below), which indicates not only that the page is encrypted but also that the Web site really truly is what it proclaims to be. For more on this see Firefox 3: Site Identification button by Deb Richardson.

To me, this new encrypted indicator is too easy to miss or forget, especially for non-techies and anyone who uses multiple browsers. Fortunately, LifeHacker has a instructions on how to Turn Firefox 3's Location Bar Yellow at https:// URLs. In all operating systems, we have to manually edit (or create) a file called userChrome.css.

Windows XP, 2000 and Vista

In Windows XP and 2000 go to:

C:\Documents and Settings\[User Name]\Application Data\
Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome\

In Windows Vista go to:

C:\Users\<[User Name]>\AppData\Roaming\
Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome

The Xs represent randomly generated characters. In both XP and Vista, you may have to first configure the OS to show hidden and/or system files.

There is no userChrome.css file by default, but there is a file called userChrome-example.css. With Firefox not running, open userChrome-example.css in Notepad, make the necessary change and save it as userChrome.css. The change is simply adding this code:

#urlbar[level] .autocomplete-textbox-container
{ background-color: #FFFFB7 !important; }

Update June 27, 2008: When I tried this on a Windows 2000 machine that originally had Firefox version 1.5 there was no userChrome-example.css file in the chrome directory. I created a new file called userChrome.css consisting of nothing more than the two lines of text above. That worked.

Portable Firefox (Windows)

Earlier I suggested that, on Windows, your first foray into Firefox 3 be with the portable version. Portable Firefox users (regardless of the version of Windows being used) should go to:

Z:\yourfolder\Data\profile\chrome

where "Z:\yourfolder" is the folder where your portable copy of Firefox resides. This is where you'll find the userChrome-example.css file mentioned above.

Ubuntu Linux

LifeHacker hadn't tried it on Linux, so I'm glad to report that it does work, at least under Ubuntu 8.04. I found the appropriate folder with the help of this Mozilla Knowledge Base article, Backing up your information, which also has instructions for Windows and Macs. The trail is:

Places menu -> Home Folder -> Show Hidden Files ->
.mozilla -> firefox -> xxxxxxxx.default -> chrome

My thanks go out to David, who pointed out that adding an extra greater than sign and asterisk to the first line is necessary in Linux. That is, the code below needs to be added to the userChrome.css file.

#urlbar[level] .autocomplete-textbox-container > *
{ background-color: #FFFFB7 !important; }

Mac OSX

According to LifeHacker this tweak doesn't work on the Mac. I'm not a Mac user but Andrew read this posting and was nice enough to suggest changing ".autocomplete-textbox-container" to ".textbox-input-box". Thus, Mac users should add the following to the userChrome.css file.

#urlbar[level="high"] .textbox-input-box
{ background-color: #FFFFB7 !important; }

According to Mozilla, the trail that leads to the OS X profile folder is:

Finder -> your home folder -> Library -> Application Support ->
Firefox -> Profiles -> xxxxxxxx.default

Then, as with all the other operating systems, drill down one more level to the "chrome" folder.

Andrew confirmed that this tweak works on 10.5 Leopard on an Intel-based Mac. Later, he tried the Linux tweak above and found that it too worked on Leopard. In fact, he felt the Linux tweak was preferable because it didn't conflict with the Fission extension. Fellow CNET blogger Don Reisinger, who writes the Digital Home blog, confirms that, on Leopard, both the Mac tweak and the Linux tweak work. He too, felt that the Linux tweak is better for Mac users.

End Result

If all goes well, then logging in to a NewEgg account should look like the below. Next, why yellow?

Update June 22, 2008: Added folder location for Windows Vista, thanks to CNET user AXG.
Update June 22, 2008: Added Ubuntu Linux.
Update June 22, 2008: Added Mac suggestion.
Update June 23, 2008: Added confirmation from Don Reisinger of the Mac tweaks.

My next posting is about using a green address bar instead of yellow and the one after that is on expanding the site identification button on HTTPS pages to make things even more visually obvious.

To make a comment or suggestion privately, email me at michaelhorowitz at gmail.

For more on the Firefox "profile" folder, see Profile folder - Firefox from mozillaZine.

Note: I'm using a normally installed copy of Firefox 3 in a virtual machine and a portable copy on a test machine. As I wrote earlier, I'm in no immediate rush to fully convert over to the new version.

See a summary of all my Defensive Computing postings.

[Smoothieking]

Michael,

I've been using FF3 since RC1 and all of my secure sites have shown in yellow in the address bar.

[Smoothieking]

Yes, I am still seeing the yellow bars for HTTPS pages. I am using the final copy of FF3 on XP Pro. I have not set up a userchrome.css file on this machine.

[Matt Asay]

I agree with your point, Michael. I'm not a techie. I have no idea what the various icons/favicons/colors mean. Given that Firefox doesn't force you into a tutorial to use it, I'm guessing I'm not alone in this.

Isn't there a way to flag problem sites in a way that someone like me will understand without prior training/expertise?

[hyperwill]

like Michael explained,
gray = not encrypted (the usual and common websites)
blue = encrypted (registration)
green = encrypted + truly is what it proclaims to be (banking, health, education)

it's not that complicated..