Category Archives: Mozilla

Making Australis Tab Animations Faster

The Firefox desktop team gathered in Toronto a few weeks back to hack together, and to discuss how we’re going to tackle 2013.

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.

An Australis tabs mockup

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.

A screenshot of Google Chrome's tabstrip on OSX

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.

Contact Service Connector Interface Proposal Draft

Thunderbird’s new address book will not exist in a vacuum. From the get-go, I’d like to bake-in the notion that contacts can exist outside of Thunderbird, and can be sync’d with.

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?

Another update to the Ensemble UI Mockup

First of all, thanks for the great feedback on my mock-up from last week.

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.

 

Answering some questions about Ensemble

I keep getting great feedback from the Mozilla community, and I also get some pretty great questions.

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.

Update to my address book mock-up

Update: I also added “instant” style searching a few minutes ago. I thought it was cool enough that I’d update my mock-up right away.

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.

The contact search, category selector, and list have been updated.

 

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.