So Chris was already here last year, but we are more than happy. He has accepted to come again Chris is a Firefox for Android programmer A video game writer in his spare time. He is famous in the London office for calculating his weight in stones like hobbits

So Together they provide an overview of what happened with Firefox for Android in the past year What features did we add? What performance improvements did we achieve? What usability improvements we made and what entertaining stories we can tell from that experience?

Also, where did we fail? Well, because sometimes we fail Where are we still aiming to improve? So please welcome Chris and Giancarlo So hello everyone. I was just introduced. I'm Giancarlo Pascuto. This is Chris Lord

We're both Firefox platform engineers working mostly on Firefox for Android If you want to find us, we put Twitter very regularly and we hang out in a mobile channel on Mozilla IRC

So when I was preparing this talk I took last year's slides because I want to have some idea what to talk about and I noticed that actually last year we already gave quite an extensive presentation what we would do in the future

So I didn't have so much to talk about because we already covered it last year But I was a bit lazy and I just copy pasted the slides from last year And then I went through them and I sort of corrected what happened and what didn't happen So first thing the start page this is when you start up Firefox the first thing you see it's an important entry port

For the application, so it's important to get it, right Last year we were planning to redesign it with the top sites view nice Firefox logo and some ability to Edit stuff on there or like lock top sites in place

So what we ended up developing actually at some point It looked pretty much like the the thing you see on the right But we already iterated it once because as I said, it's the most important part of the application So we really want to get it, right So we we did something that's a bit more closer to the holo design guidelines from Android

We got rid of the Firefox logo because even though it looks pretty it's not actually doing anything and there's not all that much screen real estate on a phone and Asides from the top sites view we also have several, I'm not sure how to call them tabs, but Views where you can swipe in between and go between your top sites your bookmarks your history or your reading list

Okay, so that's a continuation You can edit and pin site like we foresaw but you also want to be able to like open tabs and open stuff in your private tabs Private browsing we planned this last year. We more or less implemented it exactly as designed. So the screenshot is still actual

In Firefox or Android the private browsing is per tab not like in desktop where it's a really separate window in terms of usability on a phone This this works a bit better whereas on desktop having a private window is a bit more clear New tabs UI so we we changed the way you navigate through tabs

this is a screenshot of a seven inch tablet actually where you have a horizontal strip with Thumbnails actually of the current sites that are loaded there One thing which we're still working on is you you can see the icons in the top on the top with the selection Left ones the regular tabs the middle ones the the private tabs and right one are the tabs that are synced from your other devices

We're still not entirely clear on this one We at some point you actually tried putting text in there to make it clearer what those different things are But if that turns out to be a real nightmare when you try to Internationalize it because some languages have like really long words and then it doesn't fit on the screen anymore

So we went back to icons, although I'm not saying this is the finished what we will keep doing So that's what we were planning to do. That's what we ended up doing as you can see that's a pretty close match On the phone it's a bit different again due to limitations of the

You mostly use a phone in portrait. For example, it's a generally smaller resolution So we actually use more room to to show you the different tabs and it's a vertical view On the tablet We actually postponed doing a lot of work for the tablet UI

Last year, we just redid the tablet UI as one of the latest things so we didn't think it was as needed We're fairly happy what we have on there I think only like the stuff for for private tabs was was added and tweaked a little bit But it's still generally more or less the same One thing we did was to make the tabs drawer slide open and close by automatically

But that turns out that not everyone likes that way So we still have to add like some way to lock that in place or to to make that customizable fonts So on the mobile device Well, most of that pages like specify why I don't have a serif font or a sound serif font some

specifically say that they want a specific font not all of them do and If a font has a just a generic request to use a server font there. There's some opportunities there We found that some mobile devices have are modified by the vendor to have a bit more Unicode support because they

Sell in more countries or they want to better support some countries and in some cases those phones have like broken phone metrics There's also a bit of a movement on the web to Like start including your own phones in your web page And we decided last year already that we wanted to bundle some some good phones with Firefox ran

There are really work well on the mobile device on a small high DPI screen And we were originally planning to use open songs, which is was made by Google for more or less that purpose But actually during the year Intel came out with their own font Which was clear songs and we evaluated them Carefully and our conclusion was that clear songs is actually better than open songs

So we didn't end up building open songs, but we ship clear songs It's probably not gonna be very clear on this projection because it's it's a very big view whereas these fonts are really optimized for small screens So I'm not sure if my slides will come out that well, but you can probably already see a bit here

That for example the open songs. They're there in increasing boldness I like the only difference you see really is that the last one is very bold and the other three have almost no differences We're some clear songs It's it's slightly better although I have to say on the projector it doesn't really come out as well either and another

Serif font that we added to a sherry SEL because we also found that was a really good font Which had a license that was usable for us? So for example, this is the Google homepage left is the default view right is the view with? Pure songs

Again it doesn't really come out that well on a projector But in reality if you would try this on your phone You would see that the right page is way more readable and in my opinion the font also is slightly more playful So this is reader mode Again here you can see the difference a little bit better

Here it's even better I think So the right view is a the new reader mode where you can actually now switch between the serif font and the sans-serif font Which we didn't allow before and left us how it used to look before So again on the phone, you should find that this is slightly more readable and looks slightly better

Open web apps. I think the last talk sort of went into this so we wanted to integrate Firefox marketplace into Firefox or Android here's how it looks right now So you can just click on there the applications are listed this is a free app so you could just click on message me install it and Then you get a real nice icon on your desktop, so you just click on your

Your phone home page, and you launch the web app seamlessly web RTC You might wonder why this is coming back because last year at FOSM somebody already demoed a web RTC call from the phone to the browser

But honestly there's some difference between a demo where you have like You know exactly which phone you're using your you know the application you're working with Whereas in reality we made web RTC So people could build everything and have it work on every possible phone So it was quite a bit for it to do to stabilize everything

We support web RTC on every phone where we support Firefox which means going back to Android 2.2 Reality is that Android didn't get all the right API's to make this work perfectly until Android 4.2

It's probably going to work quite well starting from ice cream sandwich, but Your experience may vary depending on the exact device you have Yeah, that's another slide So everybody is also still a bit of an evolving standard So this picture was taken when I was in Boston for a web RTC meeting I think the worst possible time because they got like the battle the worst snowstorm in 50 years, and I got stuck there

You might be wondering what's wrong with this picture Well as it turns out that you can actually capture the raw image data from an Android phone But all those phones or basically almost all phones have to have a camera rotated sideways and as it turns out

There's no way from within Android to rotate the image the right way So what every Android application does is they actually just swap it back on display But if you're you want to send the video image preferably without converting it 20 times to a remote Client which may be running Chrome. That's not really an option

So we had to fix this as well and what happened here is that Twitter apparently didn't do this and then this happens Web API so we had big plans to implement a lot of stuff That's somewhere where we I wouldn't say it completely failed But it didn't really go as planned we want to implement the gamepad API this didn't happen

I didn't really find any good reason why that didn't happen so my conclusion is that nobody at Mozilla likes games Or doesn't play games or anything Telephony we could have done that but the Android permissions model right now is that we must request every permission that we could possibly need at the moment you install your phone and

That really conflicts with Mozilla being a privacy conscious Company because if we would want to implement telephony API's then Firefox the moment you would have to install it would have to request like Basically every permission imaginable including quite a few that are that our user base would go nuts over I think it's really a bit bad with WebRTC that we ask for question to like take pictures and people are like

Why does Firefox have to take pictures? Push notifications. Yeah as it turns out. That's that's like more useful for I think Firefox OS Than it is on Android, and I think the specification also didn't finish in time

All right Chris your turn Hello, there we go cool So this is something I think I presented last year and said it was coming soon kind of thing and kind of One short year later and kind of 70 80 bugs, and we have it in which is a bit That was a fun time. This is a feature where as you can see kind of the UI gets out your way

it's meant to be a distraction free UI so lets you concentrate more on the the content of the page and We're now working on the feature to let you turn it off as well So that would be coming soon hopefully a bit sooner than it took to implement in the first place

So we now I think we presented this last year as well we had we were doing nightly builds for x86 devices We now that's trickled down into the Google Play Store now so you can run Firefox release on Kind of one of the two or three x86 Android devices that are available, so if you've kind of Mistakenly bought one of those then we've got your back

So for canvas we we kind of did a lot of we wanted to make it work well for games So we did a lot of optimization work so one of the big changes that we made last year was We switched from the back end renderer using Cairo to using skier which that alone was quite a speed up

But on top of that we now have Hardware selection so in kind of selected cases mostly in the kind of cases that games use You'll have a GL accelerated canvas as opposed to the software rendered canvas And that's kind of brings us closer at least to parity with say Chrome and other webkit based Android browsers

We also made some improvements with the way web GL gets to the screen It was in this given. It's quite a raw API There's not really much we can do to optimize it But I think now we should we should kind of be pretty much top of class when it comes to web GL apps in

Performance saying you basically at that point like we have the minimal Kind of get to screen route, and then then it's kind of down to JS performance where we're pretty good So low precision rendering was a feature mainly for low-end Android phones

So it gives us the option where basically if we fall behind on rendering say you have a slow phone There's a site that takes particularly slow path through our code or something We can temporarily sacrifice rendering resolution and Then get better rendering speed so the idea is that you're never going to see nothing when you scroll down the page

It's kind of you might see a low resolution rendering for a short period and then we quickly catch up and render it in high resolution That's but that's mainly for low-end devices ideally you'll never see this feature, but you probably will so this is I mean Maybe it shouldn't have had its own slide kind of thing, but we render now in high color by default I mean the Android

Ecosystem or the device ecosystem rather changed quite dramatically over the last year so whereas last year. It was pretty common for Androids I know kind of mid to low-end devices to have not so much RAM Maybe not such a great screen, so you might not even have a screen that can display 24-bit color

Never mind having enough RAM to actually render a page, but that's completely different now Most phones even the lowest end of phones now you have certainly you've got a high color screen You've got a pretty reasonable screen as well And you've got enough RAM that you can render in high color by default so when when hardware allows us to we do and

If you don't like that you can switch that back in about config as well So you can see the difference can well you can barely see the difference there But if you saw it on this screen, it's pretty dramatic like it can be quite dramatic in certain cases usually where there's color gradients

back to All right So Java add-ons so one problem. We have on mobile is that we don't support cool So like traditional desktop add-ons We choose to have a UI won't work on Firefox for Android because we use Java for Android UIs

We have a possibility now already to Include a Java class file with your add-on Unfortunately, we didn't really get to like defining API's to hook into our UI Which means if you would try to use this you would have to use reflection, and then probably everything would break

As soon as we change something in our UI so this is I would say largely unfinished You can use Java for some things, but I think we really have some work to do there until it's really usable Then some minor and less minor features we added H264 decoding using your devices decoder if you're unfortunate to use patented stuff

Application not responding reporter, but well if Firefox crashes we will know about it if Firefox hangs We didn't know about it So we built something that allows us to track if the browser just gets stuck instead of really crashing Firefox health reports Basically the idea the idea there is that we track some performance stuff, and then if we see something

That's a problem for our users Then we can respond to it or even like pop up a hint to our users that they They have a problem and that they can get a better performance by fixing it We finished all the back-end parts of that with UI of Firefox health report isn't finished This is actually really burning us right now because adblock plus is

Sort of broken on mobile and takes like 10 seconds to start up Everybody's starting to complain like why is Firefox or Android so slow? But it's actually adblock and if this would have been finished We would been able to tell those people, but it isn't so you have a bit of a problem there

reader mode improvements I Talk a little bit about that you have some more options you can change the fonts Search engine UI you can change the default search engine and stuff like that quick share I'll show a picture of that by polio support as MGS support on arm mixed content warnings blah blah blah Quick share, so if you will quickly want to share a web page

Or actually some text with someone else. There's the right button which allows you to select everything on your device It has a share intent and it remembers the last one so in my case I sent something to Dropbox and I got a Dropbox icon there That's browsing so you have a tablet and but you gather you have a friend at your home

And he quickly long wants to look something up so you can go in the menu book go to new guest session And hand it to them, and then they can browse all they want They don't have access to your history data and the moment they leave guest mode then also their stuff disappears Okay coming soon, so what's planned for next year, or what is sort of now arriving in the stable versions of Firefox?

The great favicon rewrite So for new contributors we tend to keep books apart Which you call good first box or mentored box which are we think are? Reasonably easy to tackle without in that understanding of how all of Firefox works

Where we also indicate like this is a person at Mozilla who can actively help you with this book And you need to know this in this language to work on it This was one of those books who started like that I think And we had an intern over the summer who took this as his first assignment

So the problem we had was that we noticed that sometimes you would get no favicon or really crappy looking favicon When browsing and because you use favicons a lot and they're quite prominent in ui that's a problem So this intern started looking at that and after a while he came back And it turns out technically the problem was that although android unofficially supports

.ico file decoding which is a majority of favicons out there It only supports some sub formats there and it only decodes the first one So that's the explanation why we would get the wrong favicon sometimes So this intern as part of his internship ended up writing an ico decoder in Java, which I think is a very nice

Thing you can do without having to know too much about Firefox Then when he was finished he came back to us and said you guys suck I looked at all the favicon code in Firefox 900 and it's a terrible mess like everything's Converting from one format to the other

I mean everybody just did ad hoc things while working on it and here we wrote all the favicon code So now it should work a lot better a lot faster Got nine high resolution icons if there's not a high resolution icon you like expand it by determining the dominant color I've been wondering at the slide like why is google having a small icon so we might still have some bugs there

Over scroll we used to if you like swipe very quickly while scrolling would like bounce on and back And well at some point we realized that's a pretty silly gimmick which is annoying after a while So we got rid of it and now there's just a small blue gradient that displays if you hit the page

Text selection. Yeah, we have a we clean up UI a bit Some more options also share and some small tweaks like if you would press in the white space at the bottom of the page Old versions of Firefox would just like randomly select some text on a different part of the page Whereas now we don't do anything. That's all small tweaks which make the application easier to use

Input type color. Yeah, some some HTML5 support where we display some UI now where we didn't do before Gecko view that's actually fairly important from the Mozilla perspective So at some point during Firefox development we gave up on making Gecko the rendering engine

Imbatable to be able to advance faster but this mentor was really really difficult for anyone but Mozilla to use Gecko in their project and Webkit came and gobbled up that entire market and also nobody But us is really able to make a Firefox UI right now, and this is a problem

on Android so we were doing a lot of effort to make a Gecko embeddable again We already did some of this work because our UI is completely separate from from the rendering parts And we hope that this first makes it easy for people to embed a modern HTML5 engine even on applications even if they're running on older Android phones But also to like experiment with some new UI stuff. We've been breathing a bit on like making a Firefox

That's more usable for for children and we know there's some parts of the community that would be interested in a Firefox That's like really privacy focused includes store by default I'm not saying we're gonna do this, but the hope is that Gecko view makes this more feasible for someone to actually do

Other features APK synthesis, so I showed you that web apps have this icon thing But if you would go into applications on your Android device You wouldn't see the web app because it's not a real Android application We made it so that Firefox actually generates an APK installs that and it's a completely seamless experience compared to a native app

Firefox accounts, that's the new sync stuff Basically change them somewhat complicated for most people sync accounts with a regular username password system tab streaming That's a WebRTC feature basically instead of using your camera You can also use a tab as a video short source and then show someone what you're looking at on your phone and

PDF.js because we currently don't have it on Firefox for Android So something the graphics team are working on at the moment is kind of consolidating all the rendering codes so some of the code that we introduced to make Android render faster like the

Tiled rendering and low precision rendering and so on we're trying to get that used in other platforms say Firefox OS and Windows and Part of that work is not just making the code work on those other platforms But tidying it up and optimizing it so androids going to benefit from that But we also have some Android specific work in the pipeline as well

So in Android KitKat, there are some new API is that let us let us render to texture faster So we're going to be using those and I know hopefully in a not too far future. You'll see some rendering speed-ups I've also recently made some page load Speed-ups mainly from

We had a quite inefficient Loading spinner renderer and we've replacing replace that with a loading bar Which is in some cases, especially for older devices quite dramatically improved page load speed Which is kind of surprising and we have these other features that we're we've done as well more gestures updated download manager better form filling and so on and

That's it and I think we're out of time as well, but maybe we've got we've got time for a question One question, so if anyone has a fantastic question now's the time Okay, there's a fantastic question over there

Well, we demoed it last year, so I would rather not do this again Also, the question was can we demo web RTC and I think the answer is not really right now And Maybe one more one more last one

So the question was how much Java code are we writing for it for the whole browser? so how Android dependent is like the new features New graphics features on at all

I mean I guess in terms of how it works is we have gecko which is all native code pretty much and then we Have an Android interface and then we have some callbacks that happen within gecko that we then implement in Java But those same callbacks are then implemented natively for other platforms Basically, the renderer isn't Android specific at all. Just the UI which is completely Android specific

Thanks a lot