Older blog entries for lucasr (starting at number 279)

Revamped UI in Firefox for Android

We have just landed the biggest UI change in Firefox for Android since our first native release back in June last year. It took us about 3 months, 147 fixed bugs, and 250 changesets. Not bad!

We have completely redesigned and rewritten the Awesomescreen—where you search bookmarks and browsing history when you tap on the URL toolbar—and the Start Page—the one you see when you start the app. In terms of interaction, we’re essentially merging the Awesomescreen and the Start Page into a single UI with swipable pages. This means the UI you’ll see on startup is the same that you’ll see when you tap on the URL bar.

I really enjoyed working on this feature for a few reasons. First of all, it was a team effort. Everyone in the mobile front-end team (staff and volunteers) contributed something to it.

Second, it was a nice opportunity to modernize and cleanup a large part of our code base. Third, the new design feels more streamlined, cleaner, and lighter throughout.

Last but not least, I really liked the way we approached the implementation through a focused, gradual, and steady process using a separate repository until we felt it was ready to merge. Implementing large features in a rolling release process with relatively short development cycles can be quite challenging.

The new UI is now available in our Nightly builds. Download, install, and let us know what you think. There are definitely some rough edges here and there. In the next few weeks, we’ll be focused on getting it ready for Firefox 26. Enjoy!

Syndicated 2013-08-21 15:42:48 from Lucas Rocha

FISL 14

FISL has always been a special conference to me. I attended it for the first time about 9 years ago while I was still a grad student. And I continued to attend it until I moved abroad in 2006. It was a period when the Free Software movement was starting to take shape in Brazil and it was definitely one of the first conferences that gave me a clearer sense of what it means to be part of a community.

For this reason, I was thrilled to be invited to speak at FISL this year. I gave two talks—both in Portuguese. The first one was called Reflections on a Career in Open Source (video, 83.3MB, CC-BY-SA) and the second one was called Firefox for Android: Past, Present, and Future (video, 69.5MB, CC-BY-SA).

This was also a great opportunity to meet a lot of people from the Mozilla community in Brazil. Mozilla had a solid presence at the conference because of their hard work. Besides all the talks covering different Mozilla initiatives, there was a Firefox OS apps hackathon and a few SUMO sprints—both had pretty good attendance.

Attending FISL this year has been a rather nostalgic experience. Just crossing the main entrance brought up some vivid memories from my first FISLs. A lot has changed in the conference: new faces, new projects, larger audience, etc. But the atmosphere is still the same: thousands of people sharing their passion for software freedom.

I really hope I can attend FISL next year.

Syndicated 2013-07-09 14:02:45 from Lucas Rocha

Introducing The Layout

As engineers, I believe the way we approach a problem is as important as the code we write. This is especially relevant in the context of UI engineering where design is such a vital element.

Unfortunately, it seems quite hard to find good content about everything that happens around us and inside our heads when we are building user interfaces. This is what The Layout is about.

My intent is to create a space for high quality content discussing the principles, mindset, and practices that I believe shape the craft of UI engineering. It is meant to be a shared space with many voices—so, expect some awesome guest authors.

I’ve just posted the very first article, Mind the Gap. My plan is to publish a new article every other week-ish. For now, subscribe to the RSS feed or simply follow The Layout on Twitter or Google+ to get future updates.

I really hope you enjoy it!

Syndicated 2013-05-17 05:28:00 from Lucas Rocha

UI polishing in Firefox for Android

Last week, we did our very first topic-oriented hackathon focused on UI polishing bugs. The UI changes we’ve done will make a substantial difference in the experience of using Firefox on Android. Here are some of my favourite fixes and improvements.

Tabs

Details in the tabs UI can make a big difference UX-wise. We changed the tabs button icon (see image) to provide better affordance. The new icon also features a much cooler animation when tabs are added or removed.

Last but not least, we added a subtle parallax effect when you the open/close the tabs panel giving it a more fluid feel.

Address bar

As Wes has already reported, you now have the option to show URLs instead of page titles in the address bar. The domain highlight (see image) is a nice touch and gives us feature parity with Firefox on desktop.

The reader and stop buttons now have properly sized hit areas to avoid tapping other parts of the toolbar by mistake—a long overdue issue.

That’s not all

Reader Mode will get some nice style updates for serif fonts, doorhanger notifications now have a more polished animation, text selection handles have a more consistent style, favicons in the awesomescreen will look fancier, some visual glitches in the awesomescreen and toolbar were fixed, and more.

Not all these changes are in Nightly just yet but they will show up in the next days. Firefox 23 has everything to be my favourite release ever. Download and install our Nightly build on your Android and let us know what you think.

Syndicated 2013-04-29 14:15:05 from Lucas Rocha

Multi-part items in Smoothie

Smoothie makes it really easy to load ListView/GridView items asynchronously, off the UI thread. It handles all the complexity from gestures, threads, scrolling state, preloading, and view recycling behind a simple API.

Up until now, one of the biggest limitations of the Smoothie API has been the lack of proper support for multi-part items. What is a multi-part item? It’s a ListView/GridView item composed by multiple parts that have to be loaded asynchronously with different priorities as you scroll.

Classic example: a list of photos with items composed by the photo image and the author’s avatar—both loaded from the cloud. With the existing API,  Smoothie would force you to load the whole content of each item in one go. This means you were forced to load both the main photo image and the avatar image for each item before loading the next item in the list.

What if you wanted to start loading the main photo image of all visible items before loading their respective avatars? The photos are probably the content your users are actually interested in after all. That’s what the multi-part item support is about. It allows you to split the loading of each item into multiple asynchronous operations with different global priorities.

So, how would you implement the above example assigning higher priority to the main photo image over the avatar using Smoothie? Assuming you’re already familiar with Smoothie’s API, just follow these steps:

  1. Override the getItemPartCount() method from ItemLoader. Return the number of parts the item in the given Adapter position has.
  2. Handle the new itemPart argument accordingly in loadItemPartFromMemory(), loadItemPart(), and displayItemPart(). These methods will be called once for each item part.

The item parts will have indexes starting from zero. e.g. for items with 2 parts, the part indexes will be 0 and 1. The indexes also define the relative priority between parts. Smoothie will load the part with index 0 for all visible items before loading part with index 1.

Important note: I had to break the API backwards compatibility. If you don’t really need multi-part items, the only change you’ll have to make in your code is to subclass from SimpleItemLoader instead of ItemLoader. SimpleItemLoader is an ItemLoader specialized in single-part items that hides all the part-related bits from the API.

The updated documentation contains code samples and a more detailed overview of the new API. Grab the latest code while it’s hot. Feedback, bug reports, and patches are all very welcome as usual.

Syndicated 2013-04-22 11:51:24 from Lucas Rocha

Firefox for Android’s UI polishing Hackathon

We’ve been discussing the idea of doing periodic topic-oriented hackathons in the front-end team. The idea is simple: pick a topic—a specific part or aspect of the product—and have the whole team focused on it for a couple days. The goal is to bring substantial and fast improvements on specific areas.

As an initial experiment, we’ll be doing the first hackathon this week from Wednesday to Friday and we’re going to focus on UI polishing bugs—those UI papercuts that are not so prominent in isolation but, when fixed en masse, make a whole lot of difference.

It’s important to have a good list of bugs before we begin. So, you can start nominating Fennec bugs for the hackathon now by tagging them with “ui-hackathon”. We’ll cleanup this list and maybe prioritize them a bit during the planning session on the first day of the hackathon.

As usual, everyone is welcome to participate. You can help us by tagging bugs, or better yet, fixing them. Have a look at the wiki page for more details on the agenda.

Syndicated 2013-04-22 09:51:49 from Lucas Rocha

UI improvements in Firefox for Android

Now that we’ve landed all the major changes for our next UI iteration, it’s probably a good time to spread the word about it and get some more feedback.

The goals with these changes are: keeping a clear distinction between different types of tabs; making better use of the screen real estate on different form-factors and orientations; and being more compliant with Android’s design language. So, what’s new?

Tab types

With the introduction of private browsing support in Firefox 21—now in Aurora—came the need for a clear distinction between regular and private tabs. We’ve done two UI changes to accomplish that.

First of all, the tabs tray is now divided into sections for each type of tab—regular, private, and remote—so that you always keep things separate and organized. Furthermore, once you select a private tab, the main toolbar becomes dark as a clear sign that you’re in a different browsing mode.

Two-way tabs tray

We now use a horizontal scrolling tabs tray whenever it improves our use of the screen space. This is achieved with a TwoWayViewannounced a few days ago.

On phones, the tabs tray is vertical in portrait mode and horizontal in landscape mode. On tablets, the tabs tray is a vertical scrolling side bar in landscape mode and a horizontal strip in portrait mode. Small tablets (7″ or so) now share the exact same tabs UI than large tablets.

Holo-ish

The Firefox UX team has been working on streamlining the Firefox UI across all platforms—both on desktop and mobile. The idea is that Firefox should feel like the same product wherever you use it. Finding the right balance between cross-platform design consistency and native platform compliance can be tricky but I think we’re getting there.

We’ve recently landed a new skin for Firefox for Android that is more aligned with Android’s Holo design language. Almost all textures and gradients were replaced by flat colors giving a much lighter feel to the browser. I love it!

All these UI changes are now available in the Nightly build. Give it a try and let us know what you think—ideally in form of bug reports!

Syndicated 2013-02-25 18:46:52 from Lucas Rocha

Introducing TwoWayView

We’ve been working hard on a new iteration of the tabs UI for Firefox for Android. The new UI includes a horizontal scrolling tabs tray to make better use of the screen real estate on phones and tablets in different orientations.

Unfortunately, the Android platform doesn’t provide any AdapterView with horizontal scrolling support nor could I find any non-naive open source implementation out there.  Enter TwoWayView.

TwoWayView is an AdapterView that can be scrolled either vertically or horizontally. Just set the orientation of the view and it will do the right thing for you. In its current state, it supports all the usual AdapterView APIs (selection handling, adapter, item click and long click listener, etc), view recycling, list selector, choice mode (single and multiple), edge glow, and scrollbars. Have a look at the sample app to see it in action.

The code is based on various bits and pieces of Android’s AdapterView, AbsListView, and ListView. It uses the necessary wrappers from Android’s Support Library in order to keep backwards compatibility.

The big missing features right now are focus handling, keyboard navigation, and accessibility. I’ll be working on those in the next few weeks besides all the necessary bug fixes—I don’t recommend using TwoWayView on production code just yet.

For now, feedback, bug reports, and patches are very welcome! Enjoy!

Syndicated 2013-02-21 14:47:33 from Lucas Rocha

Firefox for Android Talk in London

Chris and I will be giving a talk about Firefox for Android next Friday on the 22nd of February at the London Mozilla Space. Join us to learn a bit more about the current state of Firefox for Android and our plans for 2013.

We’ll talk in detail about how we run Gecko on Android, the past and future UI iterations, our graphics/rendering platform, and more!

The schedule is pretty simple. The doors will be open at 18h30 and we’ll start at 19h. The talk will be followed by free drinks and pizza in our community space. Interested? Register now at the event page. Hope to see you next week!

Syndicated 2013-02-15 17:13:13 from Lucas Rocha

New Blog Design

New year, time for a long overdue design refresh on my blog! The new WordPress theme that I’ve been slowly working on is now live. Here are some quick notes about the making of it.

Design

The main goal of the new design is to bring focus to the content, nothing else. My main source of inspiration was definitely Opoloo’s Squirel Park blog. You’ll notice quite a few similarities in terms of content structure. Other relevant sources: Signal vs. Noise, Simon Foster, and Ian Storm Taylor.

Typography

The new theme uses FF Tisa Web Pro, FF Tisa Sans Web Pro, and Futura PT. Tisa has a subtle modern character without getting on the way. I love it. The fonts are served by Typekit. Their Personal plan is not that expensive and I got to choose the fonts from a fairly large library.

Implementation

My previous WordPress theme had some serious issues: it was full of weird hacks, looked broken on certain browsers, and wasn’t responsive at all. The new theme is based on Bootstrap and adapts the content for different screen sizes nicely. Responsive images are implemented using picturefill. Some DB caching is done on the front page using WordPress’ Transient API. I’m using the Hypercache plugin for an extra performance boost.

Comments

I decided to disable comments as part of the switch to the new theme. I usually don’t get a lot of value from them anyway. Also, I don’t feel like spending any time moderating comments anymore. You can always find me on Twitter and Google+ if you got something to add or discuss.

The source code of the new theme is available on Github. Enjoy!

Syndicated 2013-01-25 12:18:18 from Lucas Rocha

270 older entries...

New Advogato Features

New HTML Parser: The long-awaited libxml2 based HTML parser code is live. It needs further work but already handles most markup better than the original parser.

Keep up with the latest Advogato features by reading the Advogato status blog.

If you're a C programmer with some spare time, take a look at the mod_virgule project page and help us with one of the tasks on the ToDo list!