Congratulating the IE10 team

Back when Firefox 2 was released (six years ago this week!), the Internet Explorer team started a friendly tradition of sending Mozilla a cake as congratulations. This continued for Firefox 3 and Firefox 4. After Firefox switched from major releases once or twice a year to incremental updates every six weeks, they sent us cupcakes for the next few updates instead. :)

Since IE10 for Windows 8 is shipping today, I thought it would be fun to revive the tradition by delivering a cake to congratulate the IE team. Here’s the cake right after I picked it up from Baked Custom Cakes, with the Firefox logo in painted fondant:

Fellow Mozilla developer Eitan Isaacson drove with my wife Sarah and me to Microsoft Building 50 in Redmond, where program manager Jacob Rossi helped us deliver the cake to a group of IE team members:

The IE team posted their thanks through their official Twitter account. (As you can see from their picture, the bottom border of the cake got sligthly restyled in transit, but it still looks quite edible.) Less than 30 minutes later, Microsoftie Michael Bolan tweeted that cake was already gone. (I hear that the sugary Firefox logo was also eaten shortly afterward.)

So congratulations to the Internet Explorer team on your latest release, and we hope you enjoyed the cake!

Syndicated 2012-10-26 21:38:00 from Matt Brubeck

Metro Firefox without Windows 8

A few weeks ago I started working on the Firefox “Metro UI” project, for Windows 8’s Metro (or Modern) touch-screen environment. While we’re still working on getting our first preview builds ready for Windows 8 users to try out, you can already check out the current source code from the elm branch and build it yourself if you want to get involved and help us fix some bugs.

What you might not know is that you can run “Metro” Firefox even if you don’t have Windows 8. It’s been possible for a while to build and run on older versions of Windows using the -metrodesktop flag. Today I landed a patch to make this work on other platforms too. To build the latest elm source code on Linux or Mac OS X, follow these instructions:

1. Clone the elm repo: hg clone http://hg.mozilla.org/projects/elm/
   (If you have already cloned mozilla-central or some other repo that shares with it, there’s a faster way to do this.)

2. Create a .mozconfig file with ac_add_options --enable-metro

3. Build Firefox as you normally would.

4. From your objdir, run dist/bin/firefox -metrodesktop (Linux)
   or dist/Nightly.app/Contents/MacOS/firefox -metrodesktop (Mac)

5. You can visit about:config and enable metro.debug.treatmouseastouch (then restart the browser) to simulate touch interaction with the mouse. Right-click to simulate the Windows 8 edge-swipe gesture, which displays the toolbars.

This is still experimental and mostly untested. Elm might accidentally break on non-Windows platforms from time to time (because of course we are doing all our main development and testing on Windows). While it’s not a perfect replacement for running in the real Windows 8 environment, I hope this is a useful option for adventurous Firefox contributors who want to experiment with the Metro code but don’t have convenient access to Windows 8.

Syndicated 2012-09-20 00:42:00 from Matt Brubeck

Mobile web developers: Your users hate it when you do this

Mobile Firefox beta releases include a “Feedback” add-on (like the one in Firefox 4 beta for desktop), which lets users tell us what they think about the new browser. Based on a sample of feedback from mobile beta testers, the most common complaints are about:

1. Speed
2. Fitting text to the screen when zoomed in
3. Mobile vs. desktop versions of web sites

The first two are straightforward, though not necessarily easy. We’re always working on performance, and we have experimental text reflow code (currently available in the Easy Reading add-on). But the last item is more complicated…

Browser detection pitfalls

Web sites can read the User-Agent header sent by your browser to see what browser and OS you are using. Some sites use that information to decide whether to send a “full” version of a web page, or a version formatted for mobile devices.

This can go wrong in several ways. If your browser or device is new, or wasn’t tested when a site was developed, that site has no way of knowing whether it is “mobile.” Users may also change their User-Agent to work around content restrictions or access different media formats. And some sites make incorrect assumptions, like that all browsers with “Android” in their User-Agent string are based on WebKit.

Even when the browser is known, readers and publishers might not agree about whether the mobile or desktop version is better. Based on our feedback, some users want to switch from full sites to mobile sites while others want just the opposite. And some devices, like large touch-screen tablets, combine aspects of handheld and desktop computers.

Solutions

Looking through these complaints, many people are under the mistaken impression that the browser, rather than the web site, decides whether to display mobile-formatted pages. Even the New York Times' David Pogue gets this wrong in his Galaxy Tab review:

When you visit sites like nytimes.com, CNBC.com and Amazon.com, the Galaxy’s browser shows the stripped-down, mobile versions of those sites. According to Samsung, there’s no way to turn that feature off and no way to visit the full-size sites. You can delete the little “m.” in the Web address until you’re blue in the browser, but the Galaxy always puts it right back.

Web developers: your readers are begging us to display your content in their preferred format. We want to help them, but we can’t do it alone.

(I wrote an add-on called Phony that lets mobile Firefox impersonate the User-Agent strings of other browsers. While this improves the experience on some sites, it breaks it on others. Masquerading as another browser can lead sites to serve non-standard markup that do not work in Firefox.)

Because browser detection is never perfect, web sites should let readers choose between mobile and full content. They can try to guess the right version by default, but please let users opt in or out.

Best practices for web developers

Here are some first steps typical mobile web sites can take to make their readers happier:

• When possible, serve the same content to all browsers. You can use stylesheets and scripts to customize your layout for different display sizes, as in this beautiful site by Jon Hicks.

• There are valid reasons to use User-Agent sniffing. But if you must use it, test in as many browsers and devices as possible and learn the correct way to detect various browsers. For example, you can detect Gecko-based browsers by looking for Gecko and rv:, and you can detect mobile Firefox by looking for Fennec/.

• If a “mobile” user requests a page that isn’t available on your mobile site, serve the full version to them anyway, rather than redirecting them to an unrelated mobile landing page.

• Let users switch from your mobile site to your full site and back. You may remember users' previous choices for convenience, but let them change their minds again.

Further reading

For much more comprehensive development advice, see Yiibu’s thoughtful and practical approach to building sites that work across many different browsers and mobile devices.

Coming from a different perspective, Andrea Trasatti (developer of the device-detection library WURFL) talks about problems in mobile User-Agent strings and how they could be more useful for device detection.

Syndicated 2010-11-19 15:15:00 from Matt Brubeck

What's different about Firefox for Android

I've been working for the last six months on Firefox for Android (also known as "Fennec"). Here are some thoughts about the challenges in building a mobile browser, and the particular choices we've made.

Along the way, I'll try to answer some frequently-asked questions, like "Why is Firefox so huge on Android?" and "Why should I care?"

Why

People often ask us why Android needs another web browser. These are a few things Firefox does that other Android browsers don't:

• Syncs bookmarks, tabs, history, passwords, and form data to and from your phone. Firefox Sync and the Firefox Awesomebar help you enter URLs and passwords with less typing, and move seamlessly between your desktop and your mobile phone.

• Allows extensions to customize every part of the user interface. Adblock Plus and NoScript are two mobile Firefox add-ons that take advantage of this deep extensibility. (Note: both are compatible with the last stable release of Firefox for Nokia Maemo; they'll need to be updated to support the pre-release Android versions.)

• Uses the Jaegermonkey JIT, which is getting faster all the time. It runs JavaScript much faster than the Android 2.1 browser, and is starting to overtake the Android 2.2 browser on the benchmarks in SunSpider and similar suites.

• Supports web technologies like SVG, ECMAScript 5, WebM, and HTTP Strict Transport Security. Firefox for Android currently scores 217 points plus 9 bonus points on html5test.com. (Warning: Those tests can be deceptive; use them as a starting point for comparison only.)

Another difference is that Firefox is built by Mozilla, a non-profit organization with a mission to promote openness, innovation, and opportunity on the web. We want our work on the mobile web to benefit everyone, not just Firefox users - just as Firefox on the desktop helped create a new era of innovation and standards for users of all web browsers.

Competition and choice

There are many other browsers for Android, but all of them use the built-in WebKit rendering engine (except Opera Mini, which uses a proxy server for rendering). The same is true for Apple iOS, which is also based on WebKit – as are the latest versions of BlackBerry, Symbian, and Palm webOS.

There's nothing wrong with WebKit. It's a great project. But a growing number of mobile sites work only on WebKit (or even just on iOS or Android). This is dangerously similar to the web ten years ago, when Internet Explorer had an overwhelming market share and many sites used IE-specific markup. This made it very hard for other browsers to compete, which killed the incentive for the dominant browser to keep improving.

Upcoming platforms like MeeGo and Windows Phone may give WebKit some real mobile competition - but many users still won't be able to choose new browser technology without buying new hardware (and often new service contracts). We think people should have a meaningful choice of browsers on their existing phones, just like they do on their computers.

Reusing vs. extending

Part of the point of Firefox is to provide an alternative to the built-in browser engine. Firefox for Android is built on the same Gecko engine as Firefox 4 for desktop. That's how it can add new capabilities like Sync, SVG, and ES5.

Many mobile platforms do not allow browsers to include low-level components like JIT compilers. On platforms like BlackBerry that support only "managed" languages like Java, this is true for technical reasons. On others like iOS, it is forbidden purely as a policy decision. Fortunately there are still platforms like Android, webOS, and Maemo that let apps bundle any libraries they want.

Although Android allows us to distribute our own rendering engine and JavaScript compiler, it really is not built with applications like Firefox in mind. Many Android phones were built with around 64 MB to 512 MB for apps. Users who think nothing of a 12 MB download to install Firefox or Chrome on a laptop will certainly think twice before installing it on one of these phones! Fortunately storage space is much larger on most new phones, but this is still an issue on existing hardware.

Android NDK packaging: Problems and solutions

Android's WebKit libraries are installed on the system partition, and are not part of any app. Firefox doesn't have that luxury; its must include the Gecko libraries in its APK file.

Due to a quirk of the Android NDK, apps' native libraries are saved in two places - compressed inside the APK, and extracted to a folder for loading. For apps like Firefox that are mostly native code, this more than doubles the installation size. Current pre-release versions of Firefox use 30 to 40 MB of storage. Other NDK apps like Google Earth pay the same double storage penalty.

To solve this problem, Mozilla's Michael Wu is writing a custom dynamic linker, so Firefox can load libraries directly from the APK without installing them to a folder. This cuts the installed size in half, but increases the startup time slightly. For newer phones with 1 GB or more of internal storage, we might choose to let Firefox take more space but start faster. On phones with less storage, we can use the custom linker to save space. We're also working on other ways to make startup faster.

System components have another advantage: They can be optimized for specific hardware. In contrast, apps usually come in a single flavor for all devices. Firefox for Android can use ARMv7 features like Thumb-2 and NEON to run as fast as possible on high-end Android phones - but when it's built with these optimizations it can't run at all on low-end hardware. To run optimally on all current hardware, we'd need different builds for different devices. For now, we are focusing on the current high-end phones, which will likely be next year's mainstream hardware.

Try it out

To check if your phone is compatible and download a test build, see the Firefox for Android web page. Our pre-beta nightly builds are already much faster than the alpha release from a few weeks ago. This is still pre-release software, and we aren't done stabilizing and optimizing it - but we are working hard. Let us know what you think!

If you don't want to mess with nightly builds, look for our first beta release very soon now. Beta 1 will include our first batch of speed and stability improvements. And beta 2 will include even more exciting changes like the new Android skin, reduced installation size, and OpenGL-accelerated compositing.

If Fennec doesn't work on your phone, you can also test it on other platforms. And we hope increased choice will encourage all browsers to innovate and learn from each other, so your mobile experience will improve no matter which browser you use.

Syndicated 2010-10-04 23:00:00 from Matt Brubeck