Browser

Please check the status of this specification in Launchpad before editing it. If it is Approved, contact the Assignee or another knowledgeable person before making changes.

Summary

The Mobile Internet Browser for UME will be a finger-navigable browser based on Mozilla. We will start with a recent version of the Mozilla libraries using a recent Firefox 2.0+ tag. The browser will be re-chromed to match the look and feel of other UME applications according to the UI Style Guide

Rationale

A xul-based browser with high-standards compliance and a strong community is desireable. Mozilla is the most obvious choice. The only concern with a Mozilla-based solution is the performance on a resource-constrained device.

Goals for the browser include the following:

  • xul-based (nice to have, not a hard requirement)
    • Allows support for firefox extensions - allows to tap a large development community
  • strong community
  • strong adherence to standards
  • standard for all mobile internet devices
  • supports plugins
  • supports extensions
  • finger-navigable user interface
  • based on best-of-breed existing solution (Firefox)
  • create mid browser extension community site for developers

Minimo was investigated but after discussions with the maintainer (Doug Turner) we agreed that a Firefox-Mozilla base would be appropriate given our constraints and device characteristics.

The Mobile Internet Browser will be based on Gecko 1.8+. Mozilla will release a new version based on Gecko (1.9) in the late part of the year (Oct or November). At that time we can consider the steps to move the browser to this base.

Mozilla engineers have suggested that there may be some form of "Mozilla Mobile" solution down the road. This will be interesting to track, contribute to, and leverage.

Mozilla can not offer engineering help on the browser work but they are supportive of the effort.

Ideally we would get a solution that would be embraced by the Mozilla community and eventually adopted as the "Firefox Mobile" solution. However, Firefox brand sharing is not something that happens in the short term.

Use Cases

1. A user wants to browse the internet on the go without using his 2" screen cell phone or his beautiful large laptop. He pulls out the mobile device and launches the Mobile Internet Browser. He browses with joy.

2. A developer/user wants to add a cool extension to the browser. They can and do.

3. A user browses to a music website. They click on a streaming music link. Music begins to play via the multimedia-plugin.

4. A user browses to YouTube and watches flash videos via the flash plugin.

Scope

The project encompasses all of the tasks needed to get a Mozilla-based browser ported to the Hildon framework and included in Ubuntu-mobile distribution.

Design

Browser design is a mix of existing Firefox features, Hildon application framework constraints, and UI Style Guide recommendations. The browser user interface will be redesigned to accomodate finger navigation and the small mobile device screen (800x480 to 1024x600). Design wireframes include the following. These are recommendations. Actual implementation can vary somewhat and also be progressive -- changing and improving in time.

mid_browser_gestures_wireframe.jpg mid_browser_menu_wireframe.jpg mid_browser_tabs_wireframe.jpg

Implementation

The following are the steps to completion of the mobile browser:

  • Selecting a branch of the Mozilla tree to use as the base browser. (Firefox 2.0.0.5 selected)
  • Build the project.
  • Re-brand and re-theme the browser, removing all reference to Firefox and all copyright material (e.g. help files). Make sure that we are legally compliant with Mozilla guidelines.
  • Get the newly-named browser into Ubuntu-gutsy. (see Outstanding Issues below)
  • Begin porting to Hildon
    • Menu ported to top-left menu (replace Gtk calls)
    • Top-level window uses Hildon classes
    • Status bars and tabs at the bottom of the screen (hard task)
    • re-chrome other features
    • improve scrolling feature to be like wireframes with large thumb track

There is a lot of opportunity to divide and conquer the browser. We welcome help from any experts.

Screen Shot

Here is a screen shot of the latest mobile browser in action (taken on 09/24/2007).

midbrowser_09242007.jpg

Outstanding Issues

Need to decide how to package new browser for gutsy. Should we try to leverage the existing Firefox debian package to build two browsers, or just import another pristine Firefox-2.0.0.5 set of files in a separate package?

BoF agenda and discussion


CategorySpec

  • Full internet experience
  • Smaller/faster
  • Switch to webkit?
  • Finger friendly - follow UI guidelines
  • Be able to use firefox extensions
  • Memory concerns: some websites take 50MB, device may have 256 total
  • Theming: midbrowser drop-down menu is not themed like other hildon apps. Menu is xul-based and not using the hildon menu classes. Theme can (probably) accomodate this exceptional case.

Midbrowser issues

  • buttons are too small on save/restore session dialog (probably a hildon theme issue)
  • toolbar buttons too small and too close together
  • links on webpages are hard to hit with fingers (iphone allows you to zoom into areas by double-clicking)
  • scrollbar is hard to use => panning

  • default widgets on page (like buttons, scrollbar) are too small
  • how to handle text selection vs touch and scroll
    • text selection is difficult in any case.
  • zooming support only possible via keystroke - possibly add zoom to toolbar but not ideal
  • Find toolbar very difficult to dismiss
  • no bookmark toolbar. nice: have a page with icons of bookmarks. Could just be link to bookmarks page
  • bookmarks toolbar never gets displayed even though you can add bookmarks to it
  • scrollbars can get removed once panning is implemented
  • what to do about the download manager?
    • directly open applications _after_ download?
    • or store the downloaded file in the appropriate application to be opened later
  • maybe extend the bookmarks page (see above) to be a more general places page that
    • provides easy access to download folder
  • Keyboard focus issues - hard to tell what element has focus
    • possibly add icon in url field to trigger the onscreen keyboard
  • Add send link button to send links to contacts via email/im

MobileAndEmbedded/Browser (last edited 2008-08-06 16:24:35 by localhost)