Another day, another cool new WebKit-related application that made me stop what I was doing and take some screenshots! In this case, I also took a couple of home movies to demonstrate features that words may not quite do justice to. What am I talking about tonight? Much to my delight, I’m referring to the new public beta release of Shiira 2.0, an open source web browser based on Apple’s WebKit and its WebCore/JavaScriptCore framework.

Most of the folks who wander into this blog from a Mac OS X background have undoubtedly tried Shiira before. The project’s humble goal is “to create a browser that is better and more useful than Safari.” That goal has been elusive in the past, although Shiira has certainly put WebKit through some powerful experiments up to now, and come up with a few key features that Apple would do well to emulate (draggable tabs, anyone?). But mark my words… if the Shiira team finishes version 2.0 before Apple unveils Safari 3.0 next spring with the launch of Mac OS X 10.5 (”Leopard”), they will have accomplished their goal—at least for a little while.

This prediction is based on no more than an hour of browsing and tinkering with the as-yet-unfinished Shiira 2.0 beta release. I’m not going to go through a blow-by-blow of Shiira 2.0 here. (For that, check out this useful “visual preview” of Shiira 2.0.) Instead, I want to highlight a couple of the features that I think could very well lead me to switch from Safari to Shiira once the developers complete a few more of the missing functionalities (e.g., bookmark bar). In my opinion, this browser is that good.

The mind blower

When you stop to think about it, the notion of an Exposé for tabbed windows is obvious… and obviously useful, even necessary. It fills a widening gap in Apple’s Exposé function, which only gathers application windows, completely ignoring windows that are embedded as tabs in a parent window. When I consider the number of applications that I use daily which now use tabbed windows instead of separate ones, it’s astonishing. This may very well be why I don’t use Exposé all that much, except to gather all the windows of all my open applications. Most of my apps don’t ever have more than one or two windows open. The biggest exception is—guess what—the Finder. And from what I’ve seen, Apple plans to beat back Finder-window-proliferation in Leopard, so I’ll be able to use tabs there as well.

The apps I rely on the most for web programmming already have a tabbed interface:

• Safari
• Firefox
• Opera
• BBEdit
• Smultron
• TextMate
• Transmit

With all of this, my primary need for finding windows turns out to be a need for finding tabs. In apps with vertically arranged tabs—particularly those like BBEdit and Opera where the tabs contain mostly or only text—it’s hard to run out of room for more tabs, so you can usually see which tab you want at a glance.

However, with Safari and Firefox—and even OmniWeb, with its vertical tabs—I have found myself frequently wanting a Tabs Exposé function lately. With Safari, it would help greatly if I could rearrange the tabs via drag/drop as easily as I can in Opera, Firefox, OmniWeb, or Shiira. So, in fact, the pain I feel from the lack of Tabs Exposé is definitely the most accute in Safari, with Firefox running a close second.

Shiira pioneered the idea of a “Tabs Exposé” back in 2005, even before Shiira 2.0 had been released. The idea, based on Apple’s new Exposé for Panther, didn’t go far, perhaps because the implementation wasn’t quite right. For one thing, Shiira’s team modestly called it “Show All Tabs” and buried it in the Window menu. For another, the “explosion” animation isn’t as smooth or as slick as the “real” Exposé, and the Exposéd windows don’t give you any mouseover feedback to speak of. I’ve made a small movie of the Shiira 1.x Tabs Exposé for reference.

Late last year, Firefox gained an extension that approximates Shiira’s “Show All Tabs” feature. The Mozilla crowd seems to think it’s a violation of your civil rights to let browser content expand beyond the borders of one browser window, however, so the Foxpos plugin squeezes all the tab thumbnails inside the window frame. This kind of defeats the benefit of Exposé, which is to enable quick and easy identification of all active windows, since Foxposé’s limitation means that

• Window thumbnails quickly shrink to no bigger than 240 pixels wide after you have more than 4 or so web pages open, and
• You have to scroll in the Foxposé window in order to see all your open pages after you get more than will fit in one Firefox window.

Besides that, Foxposé itself becomes yet another permanent tab in your crowded browser window, unless you specifically close it. For many users, especially those with weak eyes, the Foxposé-sized thumbnails don’t cut it, and it’s a drag that you can’t see all your open windows at once. There’s no getting around the fact that an Exposé function works best when it uses the entire monitor window… anything less is just that: Less. (From what I’ve read, Camino is working on a Tabsposé implementation that will be patterned after the Firefox extension, which is too bad.) You can take a look at how the Foxposé plugin works in the accompanying QuickTime movie. (One last note to demonstrate the relative absurdity of using Exposé inside a single application window: In OmniWeb, I can make the sidebar icons as wide as 480 pixels—twice the width of a Foxposé thumbnail—and in Shiira 2.0, I can make the bottom tab icons up to 220 pixels wide—almost as big as Foxposé. The point is that Exposé is supposed to make window thumbnails as large as possible for easy identification of tabs, whereas Foxposé actually makes them smaller than or no bigger than the page-icon tabs in other browsers.)

From what I’ve seen of Shiira’s direction with Tabs Exposé in version 2.0, I think this will finally be a huge hit outside of that browser’s fan base. For Mac OS X users who insist on Cocoa-framework apps and otherwise love Safari, Shiira’s “Show All Tabs” in version 2.0 will prove to be an absolutely essential feature of tabbed browsing on the Mac. So immediately, obviously useful, one realizes the lack of it in Exposé at once.

In version 2.0, Shiira’s implementation is nearly identical to Exposé, quickly expanding all of your open web pages into an easy to navigate full-screen display.

Besides a more usable interface, Shiira 2.0 correctly puts Tabs Exposé in a prominent corner of the browser chrome… and gives it an intuitive icon as well. Where you might have missed “Show All Tabs” in Shiira’s Window menu previously, you’re sure to click on that icon to see WTF it is. Just be sure to try it after you load your window with web pages. Take a look at the small video, though to do justice to this mind-blowingly great extension, you’ll have to download Shiira and try it for yourself.

Once you try it, another feature of Shiira’s Exposé that obviously outclasses previous attempts (including Shiira’s own) is that the response time is instantaneous. Click on the icon, and boom! Just like Apple’s own Exposé. Then go try Foxposé in Firefox or Shiira’s implementation in version 1.x. Can you say “Laggy?” (Note: The lag gets worse the more windows you open. It’s snappy with just a few.)

The mind melter

What makes a user interface element “intuitive”? Now, there’s a $$million question for you—one of the Holy Grails of computing! In an interesting demonstration of just how important “attention to detail” can be in making interfaces “intuitive,” I’m going to try to explain why I’ve found Shiira’s implementation of “thumbnail tabs” more intuitive and immediately useful than OmniWeb’s pioneering use of the same basic element.

Clearly, the Shiira interface designers have been hard at work brainstorming about the function, utility, and implementation of tabs in web browsers this last few months. Not only did that brainstorming improve “Show All Tabs,” but it led Shiira to dump its sidebar and implement the “Page Dock.” Wrapping your brain around what the Page Dock is may take effort at first. (Note: I’m not going to weigh in on the pros and cons of the old Shiira sidebar versus Shiira’s new “heads-up displays” (”HUD” is far easier to remember, though no more obvious a term for those little translucent black windows Apple’s been sprinkling through its applications—e.g., iPhoto, Aperture, iWeb—lately) in this article. First, I don’t know how I feel about them yet, as Shiira’s HUDs aren’t fully implemented. Second, I’ve never cared for Sidebars, championed originally by Opera and IE, so can’t really find any cons to losing them.)

In some ways, the Page Dock in Shiira is simply an alternative to tabs. At least in the current beta release, you can toggle between the Page Dock and Tabs in Shiira’s preferences. I still haven’t decided whether I’d vote for an option to show both at the same time, but I love being given the choice between Safari-style and OmniWeb-style tabs. One of the main reasons I’ve never adopted OmniWeb is that I find its vertically oriented tabs disorienting. I guess I still prefer horizontal tabs. In Opera, I’ve been experimenting with loading tabs in a right-hand sidebar, and it’s OK, but I still get confused now and then. (Opera doesn’t have the ability to show thumbnails in your tabs, though.)

I’ve been using Shiira’s Page Dock today instead of tabs, and I’m amazed at how much I like it! As I say, I’ve never been able to use OmniWeb’s left- or right-hand graphical tabs, and on one level, Shiira’s Page Dock is simply OmniWeb’s tabs arranged at the bottom of the browser window instead of along the side. So what distinguishes the two?

When I considered this question more closely and aimed my mental magnifying glass at the two sets of thumbnails, it turns out that there are some clear reasons why I find Shiira’s thumbnail tabs to be better than OmniWeb’s. In comparing the two, I arranged both browser windows to be the same overall width and height (1220 pixels wide, 1000 pixels high), not counting OmniWeb’s sidebar, which adds another 160 pixels to that browser’s total screen width. I constrained the size of the PageDock (in Shiira) and the Sidebar (in OmniWeb) so that each had thumbnails that were 124 pixels wide. Here are a few interesting things I noticed:

• Shiira’s design makes it much easier to tell which tab is active. It does this by using a much darker background color for the active tab. Compare that with the relatively weak contrast used in OmniWeb (Note that both screenshots present the exact same web pages in the tabs). In addition, OmniWeb draws a rounded rectangle with a slightly darker background color around each thumbnail icon even when it’s not highlighted. Shiira does not.

• Shiira puts the page title above each thumbnail rather than below it, and sets the title in a boldface font instead of regular. The “above or below” option is probably my preference rather than an objectively “better” approach, but having the titles above each thumbnail and in bold definitely helps me distinguish each page.
• Shiira seems to do a better job at capturing the actual thumbnail, at least in the limited tests I did. For example, the thumbnail of Musings from Mars in OmniWeb ignores the background graphic on one of the layers, so the whole thumbnail has a monotone light olive-green rather than the contrasting center that I’m used to associating, visually, with the page.
• Shiira uses Apple’s standard “close” icon rather than OmniWeb’s simple “x” … I don’t know what effect this actually has, but it makes for a much cleaner look, and the “close” icon stands out better. Again, I note that Shiira’s icon is at the top rather than the bottom of its associated thumbnail graphic.
• OmniWeb’s sidebar has a background color that provides no contrast with the rest of the browser window, whereas Shiira’s entire Page Dock has a distinct background color that allows even thumbnails of pages with white backgrounds to stand out better.
• Besides taking up more screen real estate, OmniWeb’s sidebar can’t hold as many icons as Shiira’s, simply because it’s limited by the geometry of monitor screens. Whereas OmniWeb’s thumbnail-tab bar holds only 7 1/2 124-pixel-wide icons (at the previously stated test browser size), Shiira’s can hold 9. OmniWeb’s total is also stunted because their icons are taller than Shiira’s, though this additional height doesn’t make them easier to distinguish.



• Though more compact, Shiira’s thumbnails use all of their alloted space for the “thumb-print.” In another example of how the quality of thumbnails can influence usability, take a look at the difference between the two sets of icons in the accompanying screenshots. OmniWeb seems to match unhelpful white space in drawing the thumbnails, whereas Shiira seems to crop it out. Note that, as a result, Shiira’s thumbnails appear larger even though they have smaller dimensions.
• Because they are enclosed in Apple’s standard drawer UI “widget,” OmniWeb’s thumbnails are surrounded by some distracting “chrome” that competes with the thumbnail icons for the user’s attention. It’s hard to tell how big a factor this is, but I did notice that Shiira’s thumbnail-icon bar has far less dark and light contrasting pixels in its enclosing frame.
• Last, but not least… Having the tab bar at the bottom of the window puts it a bit closer to the center of the user’s focus than it is at either side. For me, this makes the whole bar easier to keep an eye on and refer to as the need arises. It provides a symmetry of design that’s more usable, and given the geometry of the browser window, the longest distance between a bottom icon and any point in the browser’s content window is shorter than it is for an icon in the sidebar… especially in a case like OmniWeb, where the sidebar is a drawer that adds width to the window rather than being “build-in” as it is in Firefox, Safari (via plugins), and similar implementations.

All of these little details seem to add up to a thumbnail-based tab bar that I have already grown to like in Shiira, and which is demonstrably more intuitive and usable than its more mature relative in OmniWeb.

The mind teaser

This will seem totally anticlimactic after Shiira’s amazing rethinking of tabs, but on a practical level it will be of similar importance to web developers.

Since the dawn of the web, one of its most amazing features has been the total transparency of the underlying programming code of web pages. (Well, you’ve gotta be a geek to even think along those lines… I’m sure it’s never occurred to my wife—or to billions of other humans—to peek at a web page’s source code!) And since web pages are typically a collection of numerous file system resources (images, scripts, style sheets, movies, etc.), browser makers have attempted to provide access to these resources that’s similarly transparent. That task has become more difficult as web page complexity has increased. Now, with the advent of Ajax techniques and the resurgence of DOM scripting, page resources also include remote content that gets embedded in and asynchronously loaded by discrete parts of an Ajax-powered page.

In my quick tour of Shiira 2.0, a third impressive feature is the new browser’s implementation of this venerable “Page Info” function. Other browsers have done great things with this—OmniWeb 5.5 (beta) in particular, but also Firefox through some of its amazing extensions. Safari itself is weak here, though the SafariStand plugin improves Safari’s native “Page Info” chops greatly.

But in Shiira 2.0, the developers have hit upon a nice, compact interface that gives you all the info you need on (almost) all of a web page’s myriad components, with as little fuss as possible. Its approach is similar to the way WebKit’s Web Inspector handles the DOM… and that’s a high compliment!

The mind meld

Even though I had read a good “visual preview” of Shiira a couple of weeks ago, the actual product caught me by surprise. At this point, I’ve used Shiira for about 3 days off and on, and all I can say to the developers is: “Hurry Up! You’re so close to greatness… just a few more all-nighters and you’re there!” Already I try to make Shiira my default browser, picking it over WebKit and Safari because it seems faster, is gorgeous, and is a real joy to use. There are some missing pieces, as I mentioned before, that keep it from being 100% web-ready. For example:

• JavaScript quirks. Very few, but troublesome nonetheless. For example, my standard JavaScript tree navigation widget at http://www.classic45s.com doesn’t work. On Mars, the URL’s for JavaScript windows open in new tabs rather than in the windows.
• Empty bookmarks. Functions for managing bookmarks are mostly missing. I was able to coax Shiira to put my main bookmarks and folders in its bookmark bar, but I don’t want to have to do that again.
• The Web search form doesn’t work most of the time, and you can’t customize it yet.
• A fair number of Preferences aren’t implemented yet.
• Sometimes the Tabs Expose function goes cuckoo, and I get blank preview pages that refuse to switch me to my page of choice.
• Quite a few smaller bugs remain

I also miss Shiira’s theme-ability, but I’m actually fine with the default theme in its current form.

Will I ever switch to Shiira as my main browser for Mac OS X? Impossible to say, and it doesn’t really matter. What matters to me is that developers keep coming up with truly useful enhancements to the browsing experience on Mac OS X. An exciting day for me is when a minor-league web browser like Shiira or OmniWeb suddenly makes a user-interface leap or two that breaks whatever mold had previously defined the genre. And that’s precisely what Shiira’s new implementation of Tabs Exposé, the Page Dock, and Page Info have done.

I’m sure Shiira’s advances will soon inspire some other talented programmers to come up with more crazy new ideas, and for me, as a dedicated Software Addict, that’s what it’s all about!

Postlude

If any reader wishes to hear me ramble on even more about Shiira, while demonstrating a few of the features discussed here in the article, by all means have a listen/look-see to the accompanying screencast.