Older blog entries for lucasr (starting at number 273)

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

Featured bug #2 in Firefox for Android

Before bringing up the next featured bug, it’s probably a good time for a quick update on the state of Firefox for Android’s coding community. Long story short: we have never had as many coding contributors as we have now! Here’s what some of them have been working on.

Sriram Raghuraman implemented a “set wallpaper” context menu option for images in web content. Greg Roodt added mouse wheel scrolling support. Mark Capella fixed a handful of bugs in different parts of our UI. Alex Nagacevschi implemented preliminary support for RTL content in Reader Mode. Ian Patterson fixed some weirdness in how downloaded images are named. Ravisankar Sivasubramaniam fixed  a bug on our input handling when switching tabs. And the list continues!

Want to have your name on this list? Here you go: bug 807990 is our second featured bug. It’s about a small but very useful feature in Reader Mode: adding a double-tap gesture to scroll the article a “screenful” distance. You’ll be mentored by yours truly. I’ve just added some background information to the bug report to get you started. Comment on the bug to take it!

I strongly recommend joining us on IRC (irc.mozilla.org #mobile) to get some support on setting up your development environment.

Syndicated 2013-01-23 21:34:34 from Lucas Rocha

Introducing Smoothie

A big part of Pattrn’s UI is about scrolling through lists of images from the cloud. So I spent a quite some time tuning it to ensure that the scrolling experience is as smooth as possible. In the past few weeks, I’ve been working on factoring out this code into a tiny library called Smoothie.

Smoothie provides a simple API to load ListView/GridView items asynchronously, off the UI thread. It does all the obvious things you’d expect—loading items as they become visible, cancelling item requests for recycled views, etc. But it does a bit more than that.

Smoothie is gesture-aware: it will avoid wasting item requests after a fling gesture and enable incremental item loading while you scroll the list with finger down. Furthermore, it supports offscreen item preloading to reduce the number of placeholder-type items as you scroll. Under the hood, Smoothie uses a thread pool executor backed by blocking queue with dynamic priorities. Offscreen item requests will dynamically get higher priority as they become visible on screen while scrolling.

So, how do you use it? It’s easy:

  1. Add an AsyncListView or AsyncGridView to your layout. They only add one extra setter method to their respective parent classes.
  2. Implement an ItemLoader with your app-specific logic for loading and displaying items. You’ll have to override four methods: getItemParams(), loadItem(), loadItemFromMemory(), and displayItem().
  3. Build an ItemManager with your ItemLoader and set it on the target AsyncListView or AsyncGridView.

Think of Smoothie as a slim backbone for your ListView/GridView‘s asynchronous loading. You can easily hook up your own image loading/caching framework in it. For instance. one of the sample apps implements an ItemLoader backed by Android-BitmapCache with a simple fade-in animation to display images.

Besides the API docs in the code, have a look at the sample apps to get a better idea of how to use the library. Keep in mind that the API is not final yet. Feedback is very welcome! Enjoy!

Syndicated 2013-01-06 23:48:43 from lucasr.org

Featured bug #1 in Firefox for Android

Keeping a list of good first bugs for new contributors is a common practice in some large open source projects. e.g. the Mozilla community marks these bugs with “good first bug” and the GNOME folks tag them with “gnome-love” in Bugzilla. The problem with these lists is that they tend to grow very quickly and become overwhelming to go through­—which kind of kills their original purpose of helping new contributors to find a task to get started.

I’d like to start a little experiment. What if we feature only one good first bug every other week? Featured bugs will have an assigned mentor and some initial overview of what has to be done. The effort to decide if you’re up for the task then gets much smaller, right? And if you don’t have time to work on the current featured bug, you can wait for the next one, no problem!

So, here we go: the first featured bug is bug 774309, mentored by Brian Nicholson (bnicholson). This bug is about adding support for Android’s voice search in Firefox. Brian has provided some initial code pointers in the bug. Interested? Just add a comment to the bug to take it. I strongly recommend joining us on IRC (irc.mozilla.org #mobile) to get some support on setting up your development environment.

Syndicated 2012-12-07 19:30:10 from lucasr.org

Humanufaturas

Tiago Rocha, my brother, has just released his first album, Humanufaturas! Humanufaturas is a delightful album. It’s sophisticated without sounding complicated.

You can download (and listen to) the complete album for free on the website. Spread the word about it! And while at it, why not donate any amount to help the project move forward? Go!

Syndicated 2012-12-05 14:13:26 from lucasr.org

Almost like a phone, more like a tablet

Designing apps for 7-inch devices can be a bit tricky due to the fuzzy nature of this form-factor. The Nexus 7 gave a big boost on the “small tablet” market for Android so it’s important to design your apps with these devices in mind.

What’s is unique about the Nexus 7 form-factor is that it behaves quite differently in each orientation. Yes, the same could be said about 10-inch tablets and phones, of course. But they still generally provide a “lot of space” and “not much space”, respectively, in both landscape and portrait.

On the other hand, the Nexus 7 behaves “almost” like a phone in portrait and “more like” a tablet in landscape. Therefore, UIs for 7-inch devices will likely end up blending elements from both phone and 10-inch tablet layouts.

Click to see full image

For example, in Pattrn, the UI for 7-inch devices blends the flat list of patterns from phones with the sidebar from 10-inch tablets when in portrait mode; while in landscape it uses the sidebar and a two-column grid, which is more like the 10-inch tablet UI. Also, on 7-inch tablets, the search entry is iconified by default in portrait and expanded by default in landscape to maintain visual balance in each orientation.

Click to see full image

Firefox for Android is another example of this blend. Firefox’s UI for 7-inch devices adopts the more powerful toolbar with forward/back buttons from 10-inch tablets but uses the same vertical fly-in tabs tray from phones.

Designing for 7-inch tablets is about finding the perfect blend between the phone and the larger tablet UIs.

Syndicated 2012-11-07 23:10:39 from lucasr.org

Snappier Awesome Screen and Start Page

As part of my effort to make the Firefox for Android smoother, I’ve spent the last week or so improving the performance of the Start Page and the Awesome Screen. So, what’s the issue I’m trying fix here? In one word: latency.

Our telemetry data shows that Firefox for Android is taking several seconds—up to 10!—to show the top sites in the Start Page. This means our users are staring at a blank page for several seconds on startup. We’ve been getting similar reports about the time to show the initial list of sites on the Awesome Screen. Both the Start Page and Awesome Screen use the same frecency query.

After some investigation, it seems that one of the main reasons for the frecency query to be so slow right now is that we fetch images (favicons or thumbnails) in the query itself. i.e. we’re reading lots of binary blobs from the disk as part of the query. This can be very slow on mobile devices—especially with thumbnails which are much larger images than favicons.

To address that, I’ve recently landed patches that change the Start Page and the Awesome Screen to first fetch the list of sites (URL and title) then load their respective images asynchronously. So, how much faster did they get?

The results of my local (non-scientific) benchmarks look very promising! With these patches, the Start Page takes about 33% less time to show top sites and the Awesome Screen takes 36% less time to show the initial list of sites—in a medium-size history and bookmarks database.

The corresponding telemetry data is already trending towards saner performance results but I’ll have to wait for a larger data sample from users on the latest Nightly to see how much we’re actually improving. I’m keen to hear how much difference these patches made on your Nightly experience. Feedback is welcome!

Syndicated 2012-11-05 17:25:02 from lucasr.org

264 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!