Maybe not as exciting as porting Unreal 3 to the web, but, well, I’m old-school.

UPDATED: Thanks everybody for alerting me to the broken link. Fixed it now.

Early 2000′s baby, yeah!

This new window would pop up, and you could use it to manage and monitor your downloads.

There are a few problems with this new window:

• You had to switch back and forth from it just to see how close your downloads were to being finished

• It was easy to lose track of this window, especially when you had lots of windows open

• The window listed every download you’d ever started, meaning that it got slower to render as the list got longer and longer.

This is just scratching the surface. Suffice it to say that the downloads window left much to be desired.

So, your friendly neighbourhood Firefox Desktop team have been working hard to make things a whole lot better.

The Downloads Button and Panel

Starting in Firefox 20 (released today!), a new button will be added to your toolbar:

BEHOLD!

This button serves a number of purposes. For one thing, it tells you how long it will be until all of your downloads complete:

2 minutes until all of my downloads finish.

This button also animates when a download completes, and changes colour when all of your downloads are done:

Downloads are done!

Clicking on the button will show you your latest downloads:

Well, hello there.

And from here you can open your downloads easily. Not too shabby!

Like most things in Firefox, the new button can be moved to wherever you’d like it. Simply right click on your toolbar, and choose “Customize”, and drag the buttonto someplace new. Or, if you don’t want the button, you can drag it into the customize window to remove it completely (although, clearly you won’t be notified of downloads progress this way).

Manage your downloads in the Library

The downloads panel is a lightweight way to check the progress of your downloads. This is all well and good, but it doesn’t give us nearly the same power of the old downloads window. That’s why we have moved the functionality from the old downloads window into a new view in the Library.

Getting a fresh copy of Ubuntu 12.10.

The new manager has similar functionality to the old one, so you can search your downloads, clear them and even leave this window open while closing any other browser windows to complete downloads in the background.

Since this unifies the concept of downloads and history, there is no more risk of clearing downloads for privacy reasons, only to find that your history had retained them!

You’ll also notice that with the new per-window Private Browsing feature, downloads are managed separately by each window – the downloads manager opens in a tab so that you can easily manage your private downloads.

Just some wholesome browsing going on here.

This way, we make absolutely sure that your private downloads do not show up in your history, while still giving you full control over those downloads. Engagement ring PDFs for everybody!

Some tips and tricks

There are some neat shortcuts from the old manager that some of you may have used. We tried to retain those and even make them better.

• Pasting a url into the panel or the Library downloads view with CTRL-v will start a new download

• You can drag downloads from the panel or the Library to the desktop or any other path

• Related to this, you can download a PDF, and then drag it to the browser window to preview it using our built-in PDF viewer!

• You can drag a link to the downloads button to start a new download

• CTRL+j opens the Library directly in the Downloads section

Help us make it even better

If you find a bug in the new downloads experience, or you have enhancement requests for it, please file a bug in the Firefox / Downloads Panel component. You can also discuss the feature or your improvements ideas in the new firefox-dev mailing list.

On behalf of the team that helped make this thing happen (and folks, it’s been a long time coming), we hope you enjoy your new downloads experience in Firefox 20!

Customizing Firefox’s UI has always been a little bit funky – you right click on a piece of chrome and choose Customize (or if you knew about it, go to View > Toolbars > Customize), and then a window pops up that lets you drag items to and from it. When this window is open, you are in the customizing state, so you can move buttons all over the place.

The new customization experience that the UX team has designed is quite a bit smoother. I can describe it, or, even better, I can show it to you.

Instructions:

1. Go here to see bwinton’s awesome prototype
2. Hide the main navigation bar for a more immersive experience (View > Toolbars > Navigation Toolbar)
3. Click on the menu button in the right corner, and choose “Customize”
4. WHOA
5. Now drag some items from the customize palette onto the toolbar, or into your menu.

Pretty snazzy, and it does away with that old customize window, which is excellent.

Blair McBride has been working on this feature for a little while, but due to health issues, the project has been handed to Jared Wein and myself. And I suppose when Blair is back at 100%, it’ll be all three of us hacking on it. Or something like that.

So, everything I just wrote above? That was for you, to let you know what I’m looking at during my day. Everything below the “Notes to self…” header are my notes as I browse through the customization code as it is. Just going to jot down notes and observations, etc. You might find this interesting, since it will show you my thought process as I go.

Or you might think it’s just a confused and bewildered miasma of incoherent rambling and nonsense. Well, we’ll see how it goes.

Notes to self…

Glossary:

• Panel – the thing that opens when I click on the three-line menu toolbar button (a.k.a “the hamburger” – sorry shorlander) in the nav-bar
• Widget – what used to be considered “toolbarbuttons”. It’s a thing that can be in the panel, in the customize palette, or in a customizable toolbar
• Customize palette - what used to be a new window is now an in-content selection of widgets you can chuck into the panel or customizable toolbars

So I know we’ve got ourselves a panel, and there’s a whole bunch of customization logic. There was also this API thing that Blair was working on so that add-ons could specify widgets through their chrome.manifests. And there also appears to be some work to be somewhat backwards compatible with the ol’ overlay approach to adding widgets.

The big mama seems to be browser/modules/CustomizableUI.jsm. This module seems to be responsible for a ton of stuff, including (but not limited to):

• Panel open / closed state
• Panel populating
• Menu button pressed / unpressed state
• Persisting and restoring customization settings
• Catching “I dun get it” notifications from the chrome.manifest parser to see if it’s a widget that’s in there
  • Reading JARs or uncompressed files from the manifest to create widgets
• Being the central hub of knowledge about where widgets are, and firing notifications when widgets are added, removed, moved or destroyed.
• Knowing about which widgets are not being used, which lets us populate the palette tab when we enter customization mode
• Allowing us to enter and exit the customization mode
  • That appears to be leftover cruft.  browser/modules/CustomizeMode.jsm seems to manage that now. I’ll remove the old cruft.

There’s this notion of “customizable areas” too. It looks like we’re constraining the customizable areas for now, and so we have an area between the URL bar and the menu button that we can drag and drop items to. The panel is also an area. When we enter customization mode…

Ok, this is pretty neat. When we enter customization mode, we suck out the panel, and drop it into a panel holder in the customization tab. That way, we can see the panel and add to it while customizing. Ok, I get that.

There was originally the idea of de-coupling the panel from the customization code. That might actually still be possible. I had tried that earlier, but was discouraged when I found out that the CustomizationUI.jsm was responsible for populating the contents of that menu panel too, meaning that the panel code itself was rather useless without the customization stuff. Maybe this needs more thought – because it would be nice to de-couple them a bit more.

Maybe I should work harder at de-coupling the menu stuff from the customization stuff – especially now that it looks like the panel is a little more complicated than just a widget drop point. Now widgets can have “subviews”, like the bookmarks widget. This means that stuff either slides out or moves over in the panel when clicking on a particular widget. Having all of that jammed up in CustomizableUI.jsm isn’t ideal – maybe I can split it out to help us separate our concerns a bit more.

Ok, I think I’ve convinced myself. I’m going to spend the rest of the afternoon trying to devise a strategy to de-couple these two.

Well, it looks like that work is finally paying off.

Our SVG usage seemed to be the big slow-poke, and switching to PNGs gave us the boost that we needed.

But enough squawking, let’s see some charts.

Before Optimizations

Let’s compare – here’s a chart showing the difference between pre-curves and post-curves, before our optimizations:

Here’s the before shot

Note: it’s been a while since I’ve done data visualization work. I think the last time I did this was in grad school. So there might be way better ways of visualizing this data, but I just chose the easiest chart I could manage with Google Docs. Just go with it.

Let me describe what you’re seeing here – we take samples every time a tab opens, and every time a tab closes*. What we’re measuring is the interval time (how long it takes before we start drawing the next frame), and the paint time (how long it takes to actually draw a frame).

The blue bars represent the performance measurements we took on a build using the default theme.  The red bars represent the performance measurements we took using the Australis curvy tabs.

This is where my graph could probably be clearer – in each group of four bars, the left two represent interval times, and the right two represent paint times.

So, hand-wavey interpretation – we regressed in terms of performance in both painting, and frame intervals, for tab opening and closing.

So that’s what we started with. And then we did our optimizations. So where did we get to?

After Optimizations

Here’s the after shot!

The red bars shrunk, meaning that we got faster for both interval and paint times. In fact, for tab close, we beat the old theme! And we’re really super-close for tab open.

Pretty good!

Curvy tabs for all

Last night, Matt landed our optimization patches, as well as preliminary curvy tab work for OSX* and Linux GTK on our UX branch. So, if you’re on the UX branch (and why aren’t you?), you should be receiving a build soon with some curvy tabs. They’re not perfect, not by a long shot, but we’re getting into the polish stage now, which is good.

* Some notes on our measuring methodology. All tests were performed on a low-powered Acer Aspire One netbook. Intel Atom n450 processor (1.66Ghz), 1GB of RAM, running Windows 7. The device has no graphics acceleration support. We also switched to the classic theme to avoid glass. Avi wrote a patch that opened and closed a tab 15 times, and averaging the frame intervals and paint times for each frame. Those were averaged over the 15 openings and closings. We then ran that test 4 times, giving the machine time to “relax” in between, and averaged our results.

* We don’t have hi-dpi support yet, so if you’re on a Mac with a Retina display, your curves might be fuzzy. We’re working on it.

I can tell you right now, it’s going to be a fantastic year for Firefox.

Asa Dotzler has a great high-level write-up of some of the stuff we talked about, but I want to focus in on something Matt Noorenberghe and I were working on: beautiful curvy tabs.

Mmmmm…that’s the stuff.

That’s what I’m talking about, right there.

These curvy-tabs are already available for Windows in the UX Nightly builds, and I’ve been using them for a few weeks. And they feel great. It’s actually painful to go back to the boxy, noisy, square tabs in the current default theme. Using the old boxy tabs feels like I’ve gone back in time – and not in a cool way.

Even Chrome’s 45° angle tabs feel just a little too machine-like and impersonal in comparison, in my opinion.

Chrome’s 45° tabs

Having a more fluid and minimal tab strip in Firefox is great, but it’s only great if it performs well. Fluid and fast is the name of the game, and that’s what Matt and I were looking at; we were trying to find ways of speeding up tab opening and closing animations.

We’ve been working with the Performance Team on this, and we’ve been gathering some really interesting data. Probably the most interesting stuff is when we make a change that we expect to improve performance, and it doesn’t deliver. Or, even worse, it causes performance to be poorer. That’s usually a very surprising result.

We ran into such a result late last week, when we tried changing how we put a gradient on top of the selected and hovered tabs. We had originally been using the CSS linear-gradient function, and the Graphics Team told us that using a tiled background-image with some opacity (like a PNG) would improve performance.

Well, we generated our gradient as a PNG, tossed it in, and did our measurements. Lo and behold, performance worsened somewhat, and we’re still not exactly sure why. I’ve filed a bug on this, and I’m hoping we can get it resolved soon. Switching to PNGs for gradients was supposed to be an easy win, and the Graphics Team was pretty surprised by our result.

Matt and I tried a bunch of different ideas to speed up tab animations, and slowly but surely, the needle started to move in our favour. We’re getting close to matching the performance of the current square tabs, but we’re going to see if we can push it over the edge and bank ourselves an overall performance win.

Fluid is good, but fluid and fast is the best. We’re getting there.

There are lots of different contact providers I’d like to support. Mainly, CardDAV (which got a big boost since Google’s announcement), LDAP, the System Address Book, and Facebook.

I’ve been working on an interface (the application-programming kind – not the user kind) for contact provider connectors. It’s not been easy trying to generalize across each of the different features and requirements of these contact providers, but I think I got somewhere.

Anyhow, here’s a draft of my interface proposal. Are there any glaring holes?

I’ve updated my mock-up again. Here are the highlights:

• The contact tag selector has been decoupled from the search input, and is now on its own
• Added widgets for sorting the contact list (currently only decorative)
• Search queries can be cleared by clicking “X” on the search input
• Support for semi-hierarchical tags
• The contact list has been made wider
• Moved the add / remove contact buttons

I’ve also updated the feedback form. Please give me feedback on this design. Once again, just to reiterate, at this point I’m primarily interested in how the mock-up lists contacts, and allows you to display that list. The view for individual contact details is of less interest to me right now.

Anyhow, check out the new mock-up here.

Usual disclaimer: The code is ugly as hell, and I haven’t tested outside of Firefox.

Note: Each tag should have some contacts. If you’re seeing empty tags (No search results for “”), try the following:

1. Go here, and click refresh
2. Then go here, and click refresh
3. Then go here, hold down shift, and click refresh.

Don’t ask me why this happens, or why the above works. I think people.mozilla.org is doing some caching, and sometimes doesn’t realize that I update my stuff. Or maybe I’m doing my rsync all wrong. I have no idea.

I took the questions from this post, and formed them into an FAQ for the Ensemble project site. Answers included!

As more questions roll in, I’m going to try to keep that FAQ updated.

Thanks so much for the great feedback this past week for my initial mock-up!

Today, I’ve decided to zoom in a little bit, and try to make some adjustments to the contact list, the category selector, and the search input.

Here’s a list of the things I’ve changed, in no particular order:

• “Instant” style searching.
• Names in the contact list are not bold unless selected
• The contact list is wider
• Names in the contact list are sorted alphabetically – regardless of accents. Accents are ignored.
• I’m using pinyin.js to help me sort the Japanese names. Hopefully the order they’re in makes some sense.
• The category selector toggle now exists outside (but adjacent to) the search input. It’s the grey button with the “tag” icon.
• Choosing a category puts the search query for that category into the search input, and then focuses the search input.
• Searching within a category is now possible, with searches like: “tag:clients guertin”
• The “Add X” items from the contact details view have been removed. I’ve got something less noisy in mind now – I’ll focus on that soon.

I got a lot of feedback about sorting during my last iteration. It sounds like sorting contacts is something people want to be able to do.

I’m curious if that’s true, and why sorting is so important. So I’ve updated my feedback form to hopefully give me some insight.

Note: If you used the old mock-up, you might need to flush your cache to view the changes. Press and hold SHIFT while reloading to flush your cache.

Another note: The same disclaimer about code quality and browser compatibility still applies.

Enough already, here’s the link to the updated mock-up.

And here’s a direct link to the feedback form.

The Mozilla community is really awesome.

I’ve organized the feedback into a few different sections – hopefully that all makes sense. I’ll respond to the feedback soon. Until then, this feedback is for pondering.

Feedback

The search input / tag selector:

Constructive criticism

“The mockup lets you limit the scope of the search by clicking the drop-down arrow. However the current scope is not visible without clicking on the drop-down arrow.”

“It’s a step in the right direction, but the Contacts group selector should definitely NOT be part of the search box.”

“…the drop-down to select groups in the search box is confusing, give it a separate place, possibly before the searchbox, to indicate that first one selects a group (or just use all contacts) and then search within that group.”

“I don’t like the way contact categories work: it is for instance never clear if I’m looking at the full list of contacts or only my sports team. It would be better if this were separate from the search bar.”

“It also might be nice to see a list of contact groups somewhere, but maybe they’re ok staying in the search drop-down menu.  They just seem kind of hidden there…”

“If you filter by tag / category, filtering contacts works fine. However, one does not see that a filter is applied.”

“Merging the search field and the “”tag filter”" could lead to confusion. The user is not aware that he could select to see only one group until he presses the field.”

“I expected the Contacts list to filter as I typed, not wait for me to press enter.”

“I really want to be able to filter as I type and not have to press enter”

“I’d rather have each category be separate tabs that I can switch back and forth between.”

“I don’t like that I have to search in every address book separately.”

“You could be consistent with Thunderbird global search (it defaults to global but lets you limit scope after the fact).
You could use a Google-style commands where selecting a scope from the drop-down menu actually adds a special command to the search box. Think of labels in Gmail or site-specific searches for the web. For Thunderbird contacts maybe something like:
group:toronto-office
You could list the groups on the side, similar to Thunderbird’s current address book.”

“If I have entered a search term, I expect there to be an ‘x’ button that cancels the search with one click (like TB’s Quick filter search bar).”

“When searching one contact, it’s better to give a dropdown list of suggested results.”

“Some shortcuts to categories of contact would be better.”

“The concept of to combine the search capacity with the grouping by address book is… weird, here. Other parts of Thunderbird doesn’t play in that idea.”

Enhancement requests

“Would be nice to have features like search folders, tag navigation, classic folder hierarchy on a side panel”

“Is there a way to search on when the contact has been added: in a professional environment, in searching contact situation, you don’t remember the name spelling, or much details but that it was in “sept 2009″ that you have been in touch with the contact.”

Praise

“Looking good overall. I like the quick responsiveness of the search and selecting groups from the drop down”

The contact list

Constructive criticism

“Accent of characters should be neglected for sorting. The “Á” is at the end of sorting rather than within “A”.”

“You ought to sort Chinese characters according to pinyin.”

“Having a grouping by the first letter of the name might be good”

“I would like to be able to decide whether the first or last name is displayed first”

“On the left side bar, make the pictures and font slightly larger without using bold.”

“Some preferences for sorting (first name, family name, stored name, …) would be great.”

“The simultaneous selection of many contacts don’t work, it’s ok, but at least I expected that it will available… for to let to get the similar capacity of the current Tb address book: see at one glance the main fields of information of many contacts.”

“Consider to let use the displayed name *or* the full name in the contacts’ list.”

“I tried to page through the list of All Contacts, the Page Up and Page Down buttons did not work. One needs to be able to do it from the keyboard as well as by using the slider.”

“I should be able to sort by first name OR last name”

“Sorting by any field is important.”

“Sorting by Client/ Contact is important.”

“It’s better to sort the Chinese characters in pinyin order.(though they are Japanese names)”

Praise

“Nice to have the photo thumbnails in the contact list!”

The contact detail viewer

 Constructive criticism

“I would put the “Add Contact” not above the person details panel, but somewhere above the contact list.”

“I think you have to come up with a multi column details view”

“The contact details should have some headings (e.g. Internet: Mail, IM, Website)”

“You have several “Add email” items in the list. You only need one. (Of course there should still be an “Add email” item regardless of the number of “completed” emails listed)”

“In your sample data the email is always listed as “Home”. Home should be a drop-down menu with choices for home, work, custom (and “custom” should let you type in anything).”

“The gap under the name (the big blue bar) due to the height of the photo seems like wasted space.  The big photo is good, I wonder if the other data could be moved up under the name in one consistent column?  And maybe getting rid of the blue stripe?  Or you could align the photo with the right side of the screen, or put it above the name? (if there is a photo?)”

“I don’t agree with the Cobooks way of showing the fields (the data items). They’re listed with no grouping at all, there’s a lot of horizontal rulers. Google Contacts’ way of using white spaces and grouping data: I think that is a better approaching.”

“I wouldn’t use “Contact is a company” for the cases of collective entities. I would rather say something like “Contact is an organization” (think about NGOs, political parties, etc.).”

“Two columns of phones and etc is better – no need to scroll!”

“The blue bar in my mind, takes too much space. I understand the need for a picture, but why not putting a few basic fields on the right hand side of the picture?”

“The actual Address Card (with all the contact info) is too large, that size isn’t necessary. But I think you’re on the right track.”

“You don’t have to repeat “”Add”" before every item. Just say “”Name,”" “”Email,”" etc.”

“Don’t print the names of each field in grey. They should be black for maximum visibility.”

“You have a space for a picture at the top but no field for adding a picture.”

“I don’t understand what the “”Home”" line at the top is about, because it’s obviously not a home address.”

“What happened to the Eudora convention of having one page for home information and one for work information?”

“You can use an icon to replace the “”add contact”".”

“In the contact detail view, maybe we can display the short descriptions of the contact right below the name of the contact. Currently  it is just blank below the name.”

Enhancement requests

“An interesting feature I’d like to see is a ‘share’ button that opens a windows with options: share files (music, photos, text, etc), contacts or anything. It’ll be another step in system integration.”

“Please add the possibility to attach a file to a contact. This would for example allow to attach a scan of a business card as pdf.”

“It would be nice to have an option to launch an external application for calling the contacts phone numbers.”

“I’d love to be able to attach arbitrary metadata to my contacts (or any other TB item, for what matters)”

“It would be perfect, something dreamed, if we could link persons’ contacts with organization’s contacts. Something like: “Carlos” (contact) works in “Mozilla” (link to its contact tab).”

The Cobook-style “Awesome Field”

Constructive criticism

“Your textbox labeled “Type in here to quickly add some contact information” seems out of place. It is difficult to give specific suggestions since there are so many directions this could take. I discourage having two different methods for entering contact details. Either this box becomes the default way to enter any details (in which case it would make sense to have it be a separator between the completed contact details and the uncompleted “add email, add phone, add …” items. Or you remove the box and the user has to click on “add email, add phone, add…” before they can enter text.”

“I have no idea how the ‘Type in here quickly to add contact information’ thingy is supposed to work. Apparently it does not do anything yet? More importantly, it is not at all clear how I would use this to, say, add a new telephone number to a contact. Maybe something like Rememberthemilk’s ‘smart add shortcuts’ could work?”

“I also don’t understand the line that says “”Type in here to add some contact information quickly”" (split infinitive removed). Why do I need it? I can just type in information on one of the lines below, right?”

Praise

“I like your approximation, the things you want to use from Cobook. I found the “quick add” bar awesome.”

Misc

Constructive criticism

“One annoyance that I have with almost every address book implementation is how difficult it is to copy an address from an email and paste it into the address book. You have to switch back and forth between the email and the address book, copying first the street, then the city, then the zip code, etc. I often end up retyping manually instead of using copy paste to save time (and frequently make typos). If the address book is moved to a tab instead of a window it makes it even more difficult to manually retype the address, because you can’t see the email while you are typing in the address book.”

“The UI does not show any integration with the email functionality of Thunderbird! The ability to select several people in the address book and send them all a email is one of the main purposes for having an address book in Thunderbird.”

“Why are we taking the whole width of the screen? When using an address book, I often want to see my mail behind..”

“The left margin is too large. Everything should be moved to the left.”

“Also the white space between lines is a bit too much. They could be squeezed vertically a little.”

“The setting button icon on right top corner looks like the setting button icon of the latest version of chrome. maybe can use something else to replace it.”

Enhancement requests

“Please, make the address book a bit more independent from Thunderbird as a mail client. I mean, it should me integrated nicely but also be useful if someone prefers another mail client.”

“I’d like a working import/export with Google mail and other mail programs.”

“Thunderbird-contacts-lens for Unity, please!”

“And I would like to have the same address book in FF and in TB: same layout but also same contents. Not another address book to maintain/sync/etc please.”

“What I really want is a contacts app that runs on my PC that can be synced with Google, Yahoo, Outlook Android Phones, iPhones, etc so that you only have to enter contact info one time in one place and that will then be updated on all your platforms. It is the syncing that is important.”

“I think the address book should be card dav compliant ! This is very important for me !”

“Connection with Google Contacts would make this my main go-to for contacts.  Also, being able to open empathy call or chat directly from address book would make ubuntu users happy.”

Praise

“Keep rolling ahead.  This is going to make Thunderbird so much better to use.  If I think of suggestions, I’ll send them in later.  But for now: Onwards!
Thanks so much for your hard work.”

“By the way, I love the simplicity of the layout! congratulations!”

“Looks great!”

“It’s a step in the right direction”
“Like it, go on!”

“Overall, I like the clean and spacious feel and I think you’re heading in a good direction. There’s still lots of work but I suppose you’re already aware of that ”

“Overall, it looks awesome.”

“Thanks for giving this a try. Really appreciate the effort!”

“Beautiful. Vastly superior to current address-book.”

“It seems very clear because it’s a large space and the print is big.”

“I think it is awesome.”

Questions

“Are you planning to do this in HTML or XUL?”

“How would you add more tags to a contact? I feel like that’ll be the most confusing aspect (and it isn’t mocked up, as far as I could tell). Also, there’s no list of tags for each contact?”

“Of course, the big question will be interoperability (android and zimbra in my case) and the capacity to merge.”

“Lot of empty space on side of contact photo & name. Will some information come there?”

“Will the categories be realized as tags somehow, so I can flag my contacts with something?”

“Will it be possible to customize some of the labels?”

“But What About if We wanted to Keep Our Address in Folders Like : Clients, Vendors, Hotels, Resorts, Production Houses, Event Managers, Casting Directors etc. etc.”

“Is the format of the address book something that can be exported easily as a text or even Excel file? One of the failures of Eudora was that it shuffled the fields when one did an export (for reasons best known to them).”