The Bookmark Button Extension Introduction

Glaxstar and Radiant Core, whose team members met at the Firefox Summit 2006, have decided to start a casual collaboration to advance their shared love of Firefox and to help Mozilla Labs along in its goal to encourage third party developers to jump in and explore. This is, hopefully, the first of many such collaborations between the firms, with Radiant Core taking the Visual Design/Usability Lead and Glaxstar bringing in the heavy Development Cavalry.

The Bookmark Button Extension, to be more cleverly renamed at a later date, was originally suggest by Ian from Glaxstar during the initial, heady days of his email exchange with Jay from Radiant Core. He said:

I have an idea for some new bookmarking UI I want to try out:
* upon URL loading the new arrow button changes to an add "+" symbol
* if a URL loads that is already in the bookmarks we show a delete / minus "-" symbol instead, clicking this takes url out of bookmark list.

and the Bookmark Button Extension was born. Jay and Ian further fleshed it out a Skype conversation on November 22nd, leading to this spec. The rest will be history, shortly after we complete it.

Bookmark Button: The Spec

All good software attempts to solve a pain point for its users - the bigger the pain point, the better the software. The BBE is cleverly designed to massage your most strained bookmark pains away into nothingness, while lulling you into a calm, restful state with our beautiful icon work. It's really not a big deal, but it's the little things that count and there's plenty of space to expand into later.

General Description

The BBE will provide a quick mechanism for interacting with bookmarks in the local store without having to open the bookmarks window or menu. The UI will largely consist of a replacement Bookmarks icon on a toolbar button which can be added and removed from any of the toolbars with a Customize command. The icon will have several states:

1. Normal: the icon looks just like the current Bookmarks button. So much so, in fact, that they just might be identical twins separated at birth.
2. Add: when the currently loaded page is not in the local store, the icon shows a + symbol to indicate that clicking on it will add a new bookmark for this page.
3. Delete: when the currently loaded page is in the local store, the icon shows a - symbol to indicate that clicking on it will delete the stored bookmark.
4. Other Pages: in addition to being in Add or Delete mode, the BBE can also indicate that there are other pages in the local store from the same site, and provide a mechanism to view them.

There's not much more to it, but will go into detail anyway. That's how we roll in this fresh new Labs Collab crew.

Use Cases

It's pretty simple, really, but here are some use cases because they're so much fun to write!

Use Case: Nothing!

Jane has just sat down in front of Firefox and there's nothing loaded in her page. She opens a new tab. Still nothing! The BBE responds in kind, sitting there in the Toolbar in its Normal state, doing nothing.

Use Case: Add!

Jane gets tired of doing all this nothing, so she starts browsing a site about medieval basket weaving, a favourite hobby of hers. It's actually a pretty good site and really stands out in the field of general dreck that is the iBasket online community, so she decides she wants to bookmark it. Using the handy BBE button on her toolbar, she can see that she hasn't already bookmarked this page because The BBE is in Add mode (icon shows a + symbol). She clicks on The BBE and Firefox shows her the New Bookmark dialog (or sheet if she's on a Mac), just like it would have if she had typed ctrl/cmd-d or selected Bookmark This Page... from the Bookmarks menu. Let's hear it for consistency!

After Jane has entered the details for the page, The BBE changes to Delete mode as the page is now in the local store.

Use Case: Delete!

The new page bookmarked, Jane moves on to some other basket weaving sites, focused on the more (but very popular) niche of the Romanian Nomadic Style, woven originally between during Charlemagne's rule in the late 800's. It's a shame that there aren't more pages about the RNS, especially since the one Jane has just found is particularly horrendous. She's surprised to note that The BBE is in Delete mode (icon shows a - sign) - she's previously bookmarked this blasphemy! She wastes no time in wasting the 'mark, clicking with a single and sure click on The BBE which, being ever so polite, pops up a confirmation dialog ("Are you sure you want to Delete the RNS Rawks! bookmark?"). A quick hit of the Enter key and the world is once again safe.

After Jane has deleted the bookmark, The BBE changes to Add mode as the page is now in the local store.

Use Case: Other Pages!

Jane has gone off to the basement where her weaving supplies are kept, and her father, Rudolph, has taken her place at the family computer. He doesn't care much for basket weaving, but he is a big fan of rugby and likes to keep an eye on some discussion boards on itsrugby.co.uk. He's always been a Bedford Blues man, so he uses the Bookmarks menu to jump straight to their page. Since it's already in his local store, The BBE helpfully offers him a - sign icon to show that he could remove it. Heavens no! Rudolph would never remove the Bedford Blues, but he is curious to see how the Titans are making out since they often oppose his boys. The BBE to the rescue! Since Rudolph has previously bookmarked the Titans' page on itsrugby.co.uk, The BBE is also helpfully showing him the Other Pages state, represented as a dropmark to the right of the icon. When Rudolph clicks on the dropmark, a menu opens with a list of the bookmark titles of the other pages he has bookmarked on this site (in this case, just "Titans (suck!)"), sorted in ascending alphabetical order. He clicks on the Titans (suck!) bookmark and the page loads in his Firefox window.

As soon as The BBE detects Other Pages in the local store, the dropmark is enabled. We may want to use the glow effect from the Search Bar's detection of new engines to highlight the activation, though perhaps it should come on and then fade away so as not to distract.

Future Thoughts

The BBE is really intended to be a quick project in the spirit of the Labs project (and of the spirits consumed during the Summit, natch). That said, there are, of course, lots of other things we can add later, including del.icio.us Support (once the framework is in place for us to check the local store for bookmarks, it's an obvious extension to include non-local bookmark stores). We're not setting out to recreate Places, but the idea is to start off slow and add stuff on if people like it.