Jim Barraud

Tag: ‘safari’

Safarify Your Firefox

One of the touted new features of Firefox 3 is a more native look within your operating system of choice. I’m a Mac guy, so lets focus there. The new Mac theme is called Firelight. While it is a huge improvement over the Firefox 2 default theme, it still falls short of feeling like a native Mac app. It feels more like a Windows app pretending to be a Mac app. Gray gradients do not in itself make a Mac interface. While well known Apple pundits have given excellent Safari vs. Firefox comparisons, I figured I’d take a slightly different approach.

I’ve been a Safari fan for a while. I love it’s simple interface and think the webkit rendering engine is top-notch. But most of my day-to-day work involves working on web applications that are predominantly internal facing. And the ones I work on usually don’t have official support for Safari (as much as would love it they did). While Safari’s web development debug tools have made great strides, they still don’t compare to Firebug. That being said, my default browser for the past year or so has been Safari. Firefox 2 was just far to buggy to be considered any more than a development browser. Normal browsing and “getting things done” tasks were left to Safari. Firefox 3 on the other hand has made tremendous leaps over Firefox 2. I’ve been using it since beta 2 and while I still run into the occasional bug, I run into them far less often (days to weeks apart as opposed to hours). Now that Firefox 3 is officially released, I’ve made it my default browser (we’ll see how long that last though).

Default Firefox 3 Theme

Now that I’ve made Firefox 3 my default browser, how do I get around the not so native feeling of the Firefox 3 interface? Turns out there’s a wealth of options to paint your brand spanking new Firefox 3 with a coat of Safari. Lets check them out.

GrApple
This is the foundation to your Firefox Safarification. GrApple if a Firefox theme by Aronnax that pretty much mimics Safari in any way possible. You have two flavors to choose from, Yummy or Delicious. The difference between the two are the placement of the tabs in the tab bar. If your going for authentic Safari, you want Yummy.
Fission
One of the nicest safari features is the integrated loading bar into the address bar. Fission is a plugin that adds this useful feature to Firefox. You have the options of changing the color of the loading bar or adding a custom image, but the GrApple theme takes this into account adds that for you.
Stop or Reload Button
The stop and reload buttons are combined into one button in Safari. This cleans up and simplifies the toolbar a bit (or adds room for even more buttons depending on your taste). Use the Stop-or-Reload Button extension to combine these buttons in Firefox.
firefox-mac-pdf
One of my favorite Safari features is the built in PDF viewing support. The day I don’t need to load up the Adobe Acrobat Plug-in is a good day. The firefox-mac-pdf extension adds this same built in PDF viewing support to Firefox.
Tab to Window
Sometimes you need to pop out a tab into a new window. This often happens to me when I’m referencing content in one tab to fill out a form in another. Surprisingly this isn’t a built-in feature, but here’s an extension to fix that. Safari makes this easy in that you can just drag a tab off the tab bar and it’ll turn into a new browser window. This solution relies on good old contextual menus. Not as fancy, but it’s functional.
Color Management
Safari has great color management support since it reads the color profiles that can be embedded into images. Browsing a site like flickr is different experience in Safari then in any other browser because the colors are displayed “correctly”. Firefox actually has built in color management, but it’s not enabled by default due to performance issues and other small regressions. But the Color Management extension will enable this feature for you if you want to try it out. And I say try it out because I personally don’t recommend using it full-time since I did experience some noticeable performance issues when I had it enabled. The other issue is you need to define your system default color profile and no matter what I did I couldn’t get the colors in the browser to be correct. All colors in the browser, including the toolbar, were dark and over saturated. I’m not an expert on color profiles, so maybe I’m missing something. But the color and performance issues didn’t seem worth having this feature enabled. Which of course is probably why it’s off by default. I only list here as another weapon in your Safarification arsenal. Use it with caution.

Firefox with GrApple Theme and Stop/Reload plugin

Now these add-ons will get you most of the way there. But there will still be things you come across in your day-to-day Firefox use that reminds you of Firefox’s non-native Mac roots.

  • There is no integration with the operating system wide keychain for password storage. I’m fully aware of Firefox’s password saving capability (and I use it), but this is functionality that should really be utilizing the system wide keychain. It gets real annoying when passwords are saved in multiple locations and there’s no way to keep them synced. This is probably my biggest Firefox pet peeve.
  • Contextual menus have squared off edges and not round. It’s a little thing, but it gives you that “something’s not right” feeling.
  • The form controls are not native. They’ve done a lot of work in trying to make them look native, but they still feel a bit off.
  • There’s no support for the system wide dictionary. Command+Control+D has to be one of the most under used OS X keyboard shortcuts. I use it constantly, but whenever I mention it or someone sees me use it, they ask “what’s that?”

I know there will be the usual “Just use Camino” comments. I’ve used Camino and I think it’s a great browser. But I rely on Firefox’s web development extensions too much to even consider it.

If anyone has any solutions for the above issues, drop me a comment. I’d love to hear them.

CSS (in)Efficiency

Shaun Inman has an interesting blog post proposing CSS parent selectors. Something a lot of people (including me) have been begging for. The proposal on the surface looks good and sound, but when you dig into the comments, apparently it’s a lot more complicated. Take particular note of the responses from Dave Hyatt, he’s the lead developer on Webkit. You find out why it’s not something that will be implemented, and surprisingly (at least to me), how CSS selectors in general can get expensive in terms of performance. Especially for large scale web apps.

I was always with the understanding that CSS selectors were the most optimal route for CSS definitions, since your getting very specific about the element you want to style and not adding a ton of IDs and classes to your HTML. Apparently when it comes to performance the opposite is true. While it seems this performance hit isn’t noticeable on smaller scale sites, it can become a performance bottleneck on larger scale web-apps. The problem is I don’t know what the degree of the performance hit is and how complicated your site needs to be for it to be noticeable. I’m also not clear on if this is a browser specific issue. Browsers that are referenced include Safari and Firefox, but does IE or Opera suffer from this as well?

If this issue gets any more prominence, I’m sure some performance tests strictly dealing with CSS will start to emerge. As of right now, it’s something take note and of and keep on eye on.

Update: One of my partners in crime at Media-Hive, Mr. Jon Sykes, has posted a 3 part series on testing the above issue. Testing CSS Performance, Testing CSS Performance pt.2, and More CSS Performance Testing.

Safari 2 In Leopard

Safari 2 In Leopard

Interesting… If you use one of these custom Safari 2 builds in Leopard michelf.com/projects/multi-safari/ , you get the older Web Clips icon. It’s non-functioning though.