The Nokia N900 has about 100MB of free space in the root file system partition. It doesn’t take installing many applications before it fills up. Nokia recommends installing applications to the /opt folder, which has about 1GB of space.
Fennec installs itself to the root file system in the /usr folder. Although this is fine for the N810, it would never work for the N900. We had originally planned to move the install location for Beta 4, but we found a bug that kept Fennec from launching from the /opt folder. The bug has been fixed and Fennec now installs to /opt in nightly versions.
A nice side effect of /opt installation: startup time is ~1 second faster!
That’s right. We turned on official branding for beta 5. “Fennec” is the codename for Firefox on mobile platforms. We also use “Fennec” as the unofficial branding (name and images) in our nightly versions. Using a codename helps cut down on confusion when talking to other Mozilla developers 🙂
Don’t worry, the lovable little fennec isn’t going away.
Firefox for Maemo (Fennec) beta 5 has been released! This release packs in a lot of good stuff. I’ve been trying to highlight a few of the new features. This time, I want to tell you about some web form features.
Entering data into web forms using a small keyboard on a small screen can be painful. This release of Fennec has a Form Assistant to make it easier to fill in forms. Whenever you tap on an input or select field, Fennec will attempt to zoom in on the element and also display a small UI ribbon for moving between other input fields. If the input field has an associated label, we try to make sure the label is visible too. Context is important when entering text and other data into a form.
Beta 5 also has a new Gecko feature, enabled for mobile platforms – Password Echo. Entering a password can be a tedious task on a mobile device. One common solution is for the system to show the last character you type as plain-text and after a short delay, convert it to a hidden password character. Echoing the last character really helps reduce errors when entering passwords.
Back when MTV still played videos, the Internet was full of web pages designed to work in desktop browsers. Life was good – so were the videos. Fast forward to today. The Web is still full of “best viewed in a desktop browser” web pages, however, you can also find lots of “made for mobile” web pages too.
Mobile optimized web pages can range from boring, bare-bones pages designed for featurephones to visually pleasing, full-featured pages designed for touchscreen smartphones. Web designers have a few techniques they can use to tell a web browser that a web page is optimized for a mobile device. Learn the Mobile Web has a nice post summarizing these DOCTYPEs and meta tags. Web browsers can look for these hints and adjust how the page is displayed, making the site easier to use.
Mobile Firefox is built to display all kinds of pages. In the upcoming release of Beta 5 for Maemo, we added support for a variety for mobile optimization techniques. We support the DOCTYPE approach as well as the “HandheldFriendly” and “viewport” meta tags.
We could definitely use help testing these features, especially “viewport” since we don’t have a complete implementation of it yet.
Mobile Firefox for Maemo Beta 5 will have lots of improvements. One of those will be support for multiple locales. The install package will include several locales. The application will detect the locale of the device and try to find the corresponding Mozilla locale. If the system works as designed, the Firefox UI will automagically appear in the device’s locale.
Since this is our first localized release, we don’t quite have as many locales translated as we’d like. But have no fear, the Mozilla L10N communities are working hard to get as many locales supported as possible for the final release. We might not have support for all Maemo device languages, but we’ll certainly do our best.
On the other hand, the Mozilla L10N community consists of languages not supported by Maemo. We have a built-in locale switcher to allow users to choose a non-device locale as well. In addition to the multi-locale install package, we intend to support single locale install packages. You will be able to pick the install package for a specific language from a web page and it will automatically be installed by the Maemo Application Manager.
A huge thanks to the L10N and RelEng teams for tackling the locale work. Please help us test our multi-locale support by trying Firefox for Maemo beta 5 when it’s released.
Building an add-on for Fennec (mobile Firefox) can be a bit tedious. We release desktop versions of Fennec that allow developers to test and play with their add-ons without the need for a mobile device. However, there are a few things that the desktop versions of Fennec do not expose: Performance characteristics of running on a mobile device; and the affect of small screens and high DPI.
I have blogged before about the potentialperformanceissues and we have created some documents to help developers watch out for problems. I’ve blogged about mobile screen sizes before – about how you can use CSS to handle different sizes and orientations. This time I wanted to make the point about images sizes and the effect of DPI on fixed sized images.
On the desktop version of Firefox, 16px images are used for many of the UI elements. The trend in mobile device screens is big screens and high DPI. The DPI on desktop monitors has been below 100 for many years. Recently, we are finding monitors and laptops with higher DPIs. However, mobile devices can have displays with above 200 DPI, some even hit 300 DPI. Even the crappy iPhone display has 160 DPI. Using a 16px image on a 200 DPI (or greater) display will look tiny. It also has usability problems if the image is part of a touchable element. Fennec tries to keep touchable UI elements at ~ 6mm.
With the DPI issue in mind, add-on developers should really never use 16px images unless you are sure Fennec is running on a low DPI device. The Fennec UI uses 32px images for all favicons, list images and button images on high resolution screens. You can use the same CSS media queries I blogged about to control the images used in your UI:
/* high-res screens */
@media all and (min-device-width: 401px) {
#myimage {
list-style-image: url(chrome://myaddon/skin/images/cool-image-32.png);
}
}
/* low-res screens */
@media all and (max-device-width: 400px) {
#myimage {
list-style-image: url(chrome://myaddon/skin/images/cool-image-16.png);
}
}
You should not hard-code image URLs in XUL. This is considered bad practice:
Also note that the Fennec CSS is designed to stretch some element images to 32px. If you use 16px images for things like favicons or search providers, the result will be a pixelated mess.
The Mozilla Mobile Team is happy to announce the release of Fennec 1.0 beta 4 for Maemo. As promised, we have been working hard on user experience and UI polish. Here’s a few changes you’ll find in this release:
Improved touch-friendly theme
Improved panning and zooming performance and behavior
Add search providers from the site identity panel
Manage search providers from the Add-ons Manager
Simplified the Download Manager (removed searching and find file on disk)
Streamlined the bookmarking process
Simplified the bookmark management
Popup notification when background tabs open
Bookmark list now displays the URL and tags associated with a bookmark
Added a product information page (about:fennec or use the button in Preferences)
Support for the HandheldFriendly meta-tag (support for the viewport meta-tag is coming)
In addition to the changes, there are plenty of bug fixes and enhancements going on under the hood. The tile system we implemented for beta 3 is still providing benefits and areas where we can increase performance.
Speaking of new things, Nokia released Maemo 5 and the very cool N900 device. We have spent some time making sure Fennec runs well on the N900. Some of the changes include adding task and close buttons to the Fennec URLbar when in fullscreen and making some theme changes to handle the default N900 themes.
If viewing on your N900 or N810, install from here. In addition to Maemo build, you can also download desktop builds for Windows, Mac, and Linux.
We’re in the last weeks of development before releasing Fennec 1.0 to the world. There has been a lot of great testing and feedback. I think we have a well defined set of things to work on for 1.0 and a good idea of what we want to look at for 1.0+.
However, there is one area I think we haven’t had enough testing and feedback – add-on development in Fennec. Add-on developers are a tricky bunch. They can make you re-think your architecture, brainstorm many new features and find lot’s of hidden bugs. We need more developers working on Fennec add-ons.
We have a small, but growing collection of Fennec-specific add-on developer resources. If you’re interested in building add-ons for Fennec, here’s a list of resources you might find helpful:
The documents have been, and will continue to be updated. Feel free to give feedback on any of the documents. What information or snippets are missing? Use comments, IRC channels (#mobile) or even file some bugs.
Oh, one thing I wanted to ask before you go. What features of a mobile device would make building mobile add-ons really kick ass? Support for geo-location? Accessing the camera? Making calls or sending SMS? Leave comments and please go into detail 🙂
The add-on (extension) mechanism built into the Mozilla platform is very powerful. One of the optional features is support for options (preferences) dialogs. As discussed in my last post, Fennec doesn’t like dialogs. In addition, Fennec has a simple, clean preference system. While designing the Fennec Add-ons Manager, we discussed how we would support add-on options. We didn’t want popup dialogs of random and complicated XUL.
After brainstorming a few ideas, we settled on a simple idea. Fennec uses special XUL tags to create it’s list of preferences. Add-ons would be forced to use the same tags. The options would be merged into the Fennec Add-on Manager, not displayed as a popup dialog. Of course, add-ons can support more than one application, so we needed to make sure that the options XUL for Fennec could coexist with the options XUL for other applications. Let’s take a look at how this all works:
Install Manifest
Add-ons use install.rdf to identify the XUL used for displaying the preferences. This is optional.
chrome://myaddon/content/options.xul
This is needed for any add-on that wants to use an options dialog.
