Gaia/Browser

From MozillaWiki
< Gaia
Revision as of 09:50, 3 April 2012 by Benfrancis (talk | contribs)
Jump to navigation Jump to search

The Gaia Browser app is a web browser implemented as a web app, for the front end of B2G

Status

Team

  • Front End: Ben Francis
  • DOM API: Justin Lebar
  • UX: Patryk Adamczyk, Ian Barlow, Larissa Co
  • Product Manager: Chris Lee
  • Tech Lead: Chris Jones
  • Reviewers: Olli Pettay (back end), Vivien Nicolas (front end)

Issues & Risks

  • Development is dependent on a new Browser API on the platform (see Dependencies)

Definition

User Stories

User Stories, in priority sequence!

User stories (draft)

M2 - Demo Phone

M3 - Product


[P1] Must Have
[P2] Nice to Have
[P3] Not crucial for first release

Basic Browser Functions

[P1] URL Bar
[P1] url input field
[P3] favicon
[P1] Loading spinner / progress bar
[P1] Title / URL
[P2] Site ID (Larry Menu)
[P2] EV / SSL indicator
[P1] Back / Forward buttons [currently Back is handled by the Android OS]
[P1] Refresh
[P1] Stop
[P2] Add / Remove Bookmark
[P3] Edit Bookmark

  • Move Bookmark
  • Tag Bookmark
  • Add Bookmark to Home Screen

[P3] Share
[P3] Add to Reading List / Switch to Reader Mode http://mzl.la/x9E94w
[P3] Site Settings
[P?] Add-ons

Addons Manager (AMO)

[P?] Downloads [currently this is handled by the Android OS]
[P3] Network error pages http://bit.ly/zyDSWm
Note - we need to try to get the right browser UA string so we get the best mobile optimized content that's available

Gestures

[P1] one-fingered dragging to scroll pages
[P1] double tap to zoom / unzoom
[P1] pinch to zoom
[P1] long press links for context menu (open in new tab, etc)
[P2] long press text to activate text selection mode
[P3] two-fingered side to side dragging for back / forward controls
[P2] pull down on header to reveal tabs tray
[P3] pull down on content to reveal home screen / awesomebar

[P1] Awesome Screen

[P1] frecency algorithm applied to Top Sites / Search filter
[P1] top visited sites
[P1] bookmarks
[P1] history: Today, Yesterday, This Week, Last Week
[P3] web search suggest http://bit.ly/w5Usqp
[P2] folders (used for synced desktop bookmarks folders)

[P1] Tabs

A way to access tabs:

[P2] Start Page

Visually rich page that displays:

  • top visited sites
  • recent tabs (Session History)
[P?] Persona

Ability to sync bookmarks, history with desktop and all other platforms
^ If we do this we should try for remote tabs as well

[P?] Add Ons

Support for installing add ons

[P3] Settings [currently this is handled by the Android OS, probably will be moved to the global Settings]

[P3] General

  • About Nightly
  • Sync

[P3] Content

  • Character Encoding
  • Plugins
  • Text Size

[P3] Privacy / Security

  • Clear History
  • Clear Private Data
  • Do Not Track
  • Remember Passwords
  • Enable Cookies
  • Send Performance Data
  • Use Master Password

Dependencies

Largely dependent on a new Browser API bug 693515

M2 - Demo Phone

M3 - Product Phone

  • stop method bug 709759
  • reload method bug 741717
  • iconchange event bug 719461
  • window.{alert,prompt,confirm} bug 741587
  • window.open bug 721777
  • Session history isolation between browser / browsee
  • Wrapping prompts for e.g. geolocation, indexeddb.
  • Need a better solution for ignoring X-Frame-Options headers for <iframe mozbrowser> elements (B2G currently globally ignores X-Frame-Options)

OS Dependencies (On Android)

We would need to know how these areas are handled on Gaia / B2G in order to design an appropriate browser UI

  • Back Button
  • Menu (contains secondary browser controls / settings)
  • Settings
  • Download Manager
  • Copy and Paste

Design

UX: Visual Design

  • forms: curved tabbed shape
  • colour: blue, gray field colours and firefox orange as accents
  • styling: textures, drop shadow = sense of touchable UI elements
  • iconographic metaphors: use established icon metaphors

UX: Interaction

  • layout: access to key features is located in common spots (close parallels to android fennec)
  • content is king metaphor: content is the main focus point, UI elements are secondary and hidden unless invoked by the user
  • design documents (Most recent document is always on top. Works-in-progress will be posted here, so please check with UX team before implementing):
    • First release wireframes coming soon
    • wireframes v2 - toolbar, awesomebar, tabs concepts
    • wireframes v1 - FX for Gaia toolbar concepts

Development

Source code on Github

Retrieved from "https://wiki.mozilla.org/index.php?title=Gaia/Browser&oldid=415519"