{"id":2335,"date":"2013-02-12T22:14:33","date_gmt":"2013-02-13T03:14:33","guid":{"rendered":"http:\/\/mikeconley.ca\/blog\/?p=2335"},"modified":"2023-12-20T16:25:12","modified_gmt":"2023-12-20T21:25:12","slug":"making-australis-tab-animations-faster","status":"publish","type":"post","link":"https:\/\/mikeconley.ca\/blog\/2013\/02\/12\/making-australis-tab-animations-faster\/","title":{"rendered":"Making Australis Tab Animations Faster"},"content":{"rendered":"

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

I can tell you right now, it’s going to be a fantastic <\/em>year for Firefox.<\/p>\n

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

\"An<\/a>

Mmmmm…that’s the stuff.<\/p><\/div>\n

That’s what I’m talking about, right there.<\/p>\n

These curvy-tabs are already available for Windows in the UX Nightly builds<\/a>, and I’ve been using them for a few weeks. And they feel great.<\/em> 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.<\/p>\n

Even Chrome’s 45\u00b0 angle tabs feel just a little too machine-like and impersonal in comparison, in my opinion.<\/p>\n

\"A<\/a>

Chrome’s 45\u00b0 tabs<\/p><\/div>\n

Having a more fluid and minimal tab strip in Firefox is great, but it’s only great if it performs well. <\/em>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.<\/p>\n

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 <\/em>to improve performance, and it doesn’t deliver. Or, even worse, it causes performance to be poorer. <\/em>That’s usually a very surprising result.<\/p>\n

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<\/a> function, and the Graphics Team told us that using a tiled background-image<\/a> with some opacity (like a PNG) would improve performance.<\/p>\n

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<\/a>, 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.<\/p>\n

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.<\/p>\n

Fluid is good, but fluid and fast is the best. We’re getting there.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[874,861],"tags":[1041,1043,125,35,1044,1042],"class_list":["post-2335","post","type-post","status-publish","format-standard","hentry","category-firefox-mozilla-2","category-mozilla-2","tag-australis","tag-curvy","tag-firefox","tag-mozilla","tag-performance","tag-tabs"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/prmTy-BF","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/posts\/2335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/comments?post=2335"}],"version-history":[{"count":7,"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/posts\/2335\/revisions"}],"predecessor-version":[{"id":2344,"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/posts\/2335\/revisions\/2344"}],"wp:attachment":[{"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/media?parent=2335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/categories?post=2335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/tags?post=2335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}