Switching from Safari to Firefox

I finally changed over from Safari to Firefox, with the release of 1.0.3. Greasemonkey's cross-domain XMLHTTPRequest and Firefox's Mycroft search plugins were the main reasons (though I still miss PithHelmet, the Services menu and the keyboard shortcut for directly adding bookmarks). The other reason was that I'd tried the nightly builds of Firefox 1.1 and could see that the broken middle-click action on OS X will be fixed in that version.

Jon Hicks had done some hacking to make Firefox tabs look better on the Mac, and there are some other settings that can be tweaked to make things look and work a bit smoother. Here's my list of extensions, userChrome.css file and prefs.js file (the important bits, anyway)...

Extensions

userChrome.css (contains browser interface stylesheet modifications)


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

menubar > menu, menupopup > * {
font-weight: normal !important;
font-size: 8pt !important;
}

#urlbar, #status-bar, #bookmark-window statusbar{
font-weight: normal !important;
font-size: 8pt !important;
}

#urlbar-progressmeter > .progress-bar {
background-color: #ddd !important
}

.bookmark-item > .toolbarbutton-text, .tab-text {
font-weight: normal !important;
font-size: 8pt !important;
}

.searchbar-textbox {
font-weight: normal !important;
font-size: 8pt !important;
width: 32em !important;
background: white !important;
border: 1px solid #444 !important;
}

tabbrowser .tab-image-middle {
display: block !important;
position: relative !important;
overflow: hidden !important;
}

tabbrowser .tab-text {
display: block !important;
position: absolute !important;
top: 3px !important;
left: 17px !important;
}

tabbrowser .tab-icon {
display: none !important;
}

tabbrowser .tabs-closebutton, tabbrowser .tabx-tab-close-button {
position: absolute !important;
left: 0px !important;
top: 3px !important;
padding-bottom: 0 !important;
}

prefs.js (contains changes made in about:config)


user_pref("browser.download.manager.closeWhenDone", true);
user_pref("browser.link.open_external", 3);
user_pref("browser.link.open_newwindow", 3);
user_pref("browser.startup.homepage", "about:blank");
user_pref("browser.tabs.opentabfor.windowopen", true);
user_pref("browser.tabs.showSingleWindowModePrefs", true);
user_pref("browser.urlbar.autoFill", true);
user_pref("browser.urlbar.clickSelectsAll", false);
user_pref("browser.xul.error_pages.enabled", true);
user_pref("dom.disable_window_flip", true);
user_pref("dom.disable_window_move_resize", true);
user_pref("dom.event.contextmenu.enabled", false);
user_pref("editor.singleLine.pasteNewlines", 3);
user_pref("extensions.tabx.hideTabbarCloseButton", true);
user_pref("extensions.tabx.useThemeCloseIcon", true);
user_pref("font.name.serif.x-western", "Lucida Grande");
user_pref("font.size.variable.x-western", 14);
user_pref("mousewheel.withnokey.numlines", 3);
user_pref("mousewheel.withnokey.sysnumlines", false);
user_pref("privacy.popups.showBrowserMessage", false);

userContent.css (contains web page stylesheet modifications)

In this case, the stylesheet changes fix the form widgets. Here's the whole file.
April 17, 2005

Comments

I wonder if there's anything that can be done to improve how Firefox handles HTML forms: http://www.pbenz.com/switch/archives/2005/04/safari_vs_firef_1.html

Posted by: Paul on April 18, 2005 2:26 PM

I'm actually quite happy with the form widgets at the moment - they're much better than they used to be (and mine are different from the ones in your post - see the image here for example: http://hublog.hubmed.org/archives/001103.html ).

The graphics that Safari uses don't seem to be available for other applications to use though, as far as I can tell.

Posted by: alf on April 18, 2005 2:32 PM

I just realised I'm using a custom userContent.css to fix the form widgets. Here it is: http://hublog.hubmed.org/files/userContent.css

Unfortunately I can't remember where it came from originally.

Posted by: alf on April 19, 2005 11:45 AM

Thanks, Alf! It's cool that you can change this stuff via a simple css file. Unfortunately, in my humble opinion, I think this particular file makes the situation a bit worse because:

1. The blue border around the current form widget isn't drawn as cleanly as it is in Safari. Compare the two side by side and you'll see that Safari's border appears directly over if not a bit on the outside of the widget, while Firefox draws it on the inside, interfering with the text (especially when the text is selected).

2. Drop down lists look funky. The font doesn't match with the rest of the form widgets.

3. You still can't tab into drop down lists.

One other thing - I think the class attribute for the TR tag is broken in Firefox. One of my clients uses this to display required form fields in bold, and it works everywhere BUT Firefox.

BTW I hope I don't sound like a Firefox basher. It's a great browser and it totally rocks on Windows, I'm just a bit disappointed in the Mac version.

Posted by: Paul on April 20, 2005 2:11 PM

1. You're right about the blue text input outline, but I don't find that it interferes with the text enough to worry about. You could always increase the text input padding, though that does increase the size of the text box slightly.

2. I'm sure that's fixable.

3. In about:config, set accessibility.tabfocus to '3'

4. TR classes work okay for me here. Try this example: http://www.alistapart.com/d/stripedtables/example.html

Posted by: alf on April 20, 2005 7:02 PM

Hey - it sounds like you're trying to get me to switch back to FireFox! LOL. You're doing a great job, but it's going to be a hard sell, especially with a new version on the horizon in Tiger.

Thanks for the info re: about:config. According to http://kb.mozillazine.org/Firefox_:_FAQs_:_About:config_Entries, the default for tabfocus is supposed to be 7, but mine was 1 for some reason. Changing it to 3 or higher works great, and accessing the items in a dropdown list is even easier than in Safari!

Re: the TR problem, thanks to your example it's obviously working, but it still doesn't work on my client's site. The good news is that I'm closer now to figuring out why - just don't have the time to spend on it now. ;-) The CSS element is declared like this:

.required .labelColumn { font-weight: bold; }

and the TR has "required" specified for it's CLASS, where the enclosed TD has "labelColumn".

Actually now that I've typed this out and looked at the code, I get it now. Bold is only applied when a TD has "labelColumn" and the surrounding TR has "required". If "required" is not present in the TR, then the field should not be bold. This is how it works in every other browser but Firefox/Mac.

I had no idea that by responding to your entry that I would get an education in CSS and custom Firefox settings! Sometimes it pays to speak up! :-)

Posted by: Paul on April 21, 2005 3:02 PM

There was a line in the userContent.css which said:

temp bug......
button, input, select, option {font-size:13px;}

Now that I've got rid of that, the drop-down menus seem to look much better.

Posted by: alf on April 21, 2005 3:57 PM

All fields are optional, email address will not be shown; no HTML, URLs are automatically hyperlinked.