Older blog entries for lucasr (starting at number 281)

Firefox for Android in 2013

Since our big rewrite last year, we’ve released new features of all sizes and shapes in Firefox for Android—as well as tons of bug fixes, of course. The feedback has been amazingly positive.

This was a year of consolidation for us, and I think we’ve succeeded in getting Firefox for Android in a much better place in the mobile browser space. We’ve gone from an (embarrassing) 3.5 average rating on Google Play to a solid 4.4 in just over a year (!). And we’re wrapping up 2013 as a pre-installed browser in a few devices—hopefully the first of many!

We’ve just released Firefox for Android 26 today, our last release this year. This is my favourite release by a mile. Besides bringing a much better UX, the new Home screen lays the ground for some of the most exciting stuff we’ll be releasing next year.

A lot of what we do in Firefox for Android is so incremental that it’s sometimes hard to see how all the releases add up. If you haven’t tried Firefox for Android yet, here is my personal list of things that I believe sets it apart from the crowd.

All your stuff, one tap

The new Home in Firefox for Android 26 gives you instant access to all your data (history, bookmarks, reading list, top sites) through a fluid set of swipable pages. They are easily accessible at any time—when the app starts, when you create a new tab, or when you tap on the location bar.

You can always search your browsing data by tapping on the location bar. As an extra help, we also show search suggestions from your default search engine as well as auto-completing domains you’ve visited before. You’ll usually find what you’re looking for by just typing a couple of letters.

Great for reading

Firefox for Android does a couple of special things for readers. Every time you access a page with long-form content—such as a news article or an essay—we offer you an option to switch to Reader Mode.

Reader Mode removes all the visual clutter from the original page and presents the content in a distraction-free UI—where you can set your own text size and color scheme for comfortable reading. This is especially useful on mobile browsers as there are still many websites that don’t provide a mobile-friendly layout.

Secondly, we bundle nice default fonts for web content. This makes a subtle yet noticeable difference on a lot of websites.

Last but not least, we make it very easy to save content to read later—either by adding pages to Firefox’s reading list or by using our quickshare feature to save it to your favourite app, such as Pocket or Evernote.

Make it yours

Add-ons are big in desktop Firefox. And we want Firefox for Android to be no different. We provide several JavaScript APIs that allow developers to extend the browser with new features. As a user, you can benefit from add-ons like Adblock Plus and Lastpass.

If you’re into blingy UIs, you can install some lightweight themes. Furthermore, you can install and use any web search engine of your choice.

Smooth panning and zooming

An all-new panning and zooming framework was built as part of the big native rewrite last year. The main focus areas were performance and reliability. The (mobile) graphics team has released major improvements since then and some of this framework is going to be shared across most (if not all) platforms soon.

From a user perspective, this means you get consistently smooth panning and zooming in Firefox for Android.

Fast-paced development

We develop Firefox for Android through a series of fast-paced 6-week development cycles. In each cycle, we try to keep a balance between general housekeeping (bug fixes and polishing) and new features. This means you get a better browser every 6 weeks.

Open and transparent

Firefox for Android is the only truly open-source mobile browser. There, I said it. We’re a community of paid staff and volunteers. We’re always mentoring new contributors. Our roadmap is public. Everything we’re working on is being proposed, reviewed, and discussed in Bugzilla and our mailing list. Let us know if you’d like to get involved by the way :-)

---

That’s it. I hope this post got you curious enough to try Firefox for Android today. Do we still have work to do? Hell yeah. While 2013 was a year of consolidation, I expect 2014 to be the year of excitement and expansion for Firefox on Android. This means we’ll have to set an even higher bar in terms of quality and, at the same time, make sure we’re always working on features our users actually care about.

2014 will be awesome. Can’t wait! In the meantime, install Firefox for Android and let us know what you think!

Syndicated 2013-12-10 17:15:43 from Lucas Rocha

“Mozilla on Android” talks in London

Mark Finkle and Margaret Leibovic are flying to London next week to attend Droidcon and the Mozilla Festival. So we thought it would be a good opportunity to give a series of tech talks on the present and future of Mozilla products and web platform on Android in our London MozSpace.

We’ll be talking about Firefox for Android, our beloved mobile browser; GeckoView, the upcoming API for embedding Gecko in Android apps; the latest add-on APIs to extend Firefox for Android; as well as some cool demos of Mozilla’s runtime platform and developer tools for Open Web apps on Android.

The talks will be followed by free drinks and pizzas in our community space. Interested? Register now at the event page.

And by the way, if you’re attending Droidcon this year, I’ll be giving a talk covering some of the most interesting technical details behind Firefox for Android.

Hope to see you next week!

Syndicated 2013-10-14 13:20:09 from Lucas Rocha

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 TwoWayView—announced 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