Webkit & Chrome UI Problem and Solution

Chrome's Tabs

I’m starting to like Chrome. I used it as my default browser for Windows for about a week before its various subtle bugs drove me back to Firefox (I got over my annoyance with Firefox…). Under Windows, Chrome is aesthetically challenged, but on the Mac it’s lovely. My one quibble is with the way tabs are positioned.

Chrome does put its tabs above the URL which—conceptually—belongs to the web page you’re looking at. But the tab also contains your bookmarks, which are global context.

Webkit's TabsWebkit/Safari has, without doubt, the most bizarre tab arrangement in the history of computing. It looks quite nice, but it makes no sense at all. It doesn’t work badly, and I guess if you’re going to give up on making sense conceptually, why not go for aesthetics?

I think there’s a very simple solution. Put the freaking tabs on the side of the window—like iTunes or Finder. There’s one browser that does this—Omniweb.

I actually bought a copy of Omniweb back when it was pretty much the best alternative to Internet Explorer 5.1—shortly afterwards Camino came out, followed by Firefox, followed by Safari. Omniweb is now free and webkit-based.

Omniweb's Drawer

The only problem with Omniweb is that the “tabs” are placed in a drawer, which is ugly, has the disadvantage of not visually associating the tabs with the browser view as Finder does, and—worst of all—being a freaking drawer. Even so, Omniweb probably has the best thought-out UI of any current browser. (And not just because it is the only browser to deal with “tabbed” browser windows in a sensible way.)

Aside: drawers should simply not be used for UI elements you expect to use all the time. I’d go so far as to say that Mac OS X would be better off without drawers in the first place. I can’t think of an application which uses a drawer that wouldn’t be better served by simply integrating the same stuff into the parent window. (Pathfinder’s pathological use of drawers is the main reason I can’t bear using it.)

Finder's sidebarHere’s Finder. This is how to do browser tabs. (It’s a shame Finder doesn’t actually dynamically insert open windows in its side menu—it would fix about 75% of what’s wrong with it.)

Tabs are, in general, a stupid idea. They waste vertical real estate (which is more valuable than horizontal, especially on today’s widescreens), and they do so inefficiently (since titles are wide the squat) so you frequently can’t see all your tabs. They’re really only useful in cases where they let you pick from between a small number of options (e.g. selecting views and palettes in Photoshop or Unity)—cases where a side panel would be massive overkill. This is why a lot of more complex programs have stopped using tabbed dialogs for their preferences.

Here endeth the lesson.

Google Chrome

Google has officially announced it will be releasing its own browser, named Chrome. The web comic explaining their thinking is well worth a look, but the key points are:

Each browser tab is a separate process. This means that one web page hanging or script stalling only affects that page. Your browser doesn’t crash or hang — individual tabs crash or hang and can be killed. It’s so obvious it’s brilliant. I imagine Firefox, Camino, and Safari will all follow suit as soon as they can.

Google has been working on a new JavaScript engine, named V8, that’s roughly twice as fast as the latest versions of Firefox or Safari nightly build. Remember that these engines were in turn a lot faster than Internet Explorer or anything else we had a year ago. We’re looking at something like a 10x improvement in overall JavaScript performance over the last two years.

It’s based on Webkit.

It’s entirely open source.

Safari 3.1.1

Safari Web Inspector

My friend Andrew pointed out in my post on FireFox 3.0b5 that it was too late to get him to try it, since he’d just given up on FireFox, switched to Safari, and wasn’t looking back. I’ve just made the switch too, after finding FireFox 3.0b5 both just as unstable as 2.0.0.14 and subject to some annoying rendering bugs and random thunks. I can’t just abandon FireFox — the web developer and FireBug extensions are just too damn useful — but it’s not going to be my daily browser for the foreseeable future.

For a long time, Safari has had the distinction of being producing the best looking web pages, and running JavaScript really fast (whether it’s the fastest is a matter of debate, but it sure feels quick). It has a better feature set than Internet Explorer (canvas support, anyone?), and supports a bunch of CSS extensions, such as shadows under text, that no-one else does.

And, frankly, it has the cleanest and most attractive user interface.

Most importantly for me, Safari’s Develop menu (which used to be its Debug menu) offers something of an alternative to the Web Developer plugin for FireFox. Although Drosera (the Safari JavaScript debugger) has been around for some time, it’s not yet part of the Safari release, and getting it is something of a chore. You need to download the Nightly Build (source code) and then “attach” Drosera to either Safari or WebKit (the open source version of Safari). Even if I could be bothered, Safari still lacks a few of the Web Developer plugin’s best features, such as the ability to see the generated HTML you’re looking at.

But, as a basic, daily browser — I’m afraid Safari has FireFox beat for now.