Category: Mozilla

Posted on

Fennec – Mobile Optimzed Web Pages

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.

Posted on

Fennec – Localization Update

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.

fennec-language

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.

Posted on

Fennec – Add-ons and Image Sizes

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 potential performance issues 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.

Posted on

Fennec 1.0 Beta 4 for Maemo

maemo_beta4_horizontal
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 add-ons options in the Add-on Manager
  • Support for updating add-ons
  • 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.

Posted on

Fennec – Let’s Build Some Add-ons

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.

Fennec for Maemo and Fennec for Windows Mobile both support add-ons. In fact, the same add-on could be used on both platforms. So get out there are start building.

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 🙂

Posted on

Fennec – Handling Add-on Options

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.

Chrome Manifest

Add-ons use the chrome manifest to selectively override XUL, and other resources, between different applications using the application flags


override chrome://myaddon/content/options.xul chrome://myaddon/content/fennec-options.xul application={a23983c0-fd0e-11dc-95ff-0800200c9a66}

This will tell Mozilla to use fennec-options.xul anytime the options.xul resource is requested.

Options XUL

As I said, the XUL allowed for the Fennec options system is limited to a few new tags. Here is an example of a Fennec options dialog:







  
  
    Profiling can affect the performance of the application

Note that we don’t have any