Gaia/Browser: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
Line 156: Line 156:
* Download Manager
* Download Manager
* Copy and Paste  
* Copy and Paste  
== Visual Design (Old > For MWC Demo) ==
The following are the designs provided by UX for Milestone 2 - Demo Phone:
[[Image:gaia_browser_mockup-m2.png]]
<br />
[[Image:gaia_browser_menu_mockup-m2.png]]
Some open questions for the browser design post-M2:
* Whether to implement bookmarks at the browser level or at the homescreen level
* Whether to move tab management to the homescreen level
* Whether there should be an "awesomescreen" at the browser level or the homescreen level [https://wiki.mozilla.org/B2G/UI#Ben.27s_Gaia_Concept here]


== Development ==
== Development ==
[https://github.com/andreasgal/gaia/tree/master/apps/browser Source code on Github]
[https://github.com/andreasgal/gaia/tree/master/apps/browser Source code on Github]

Revision as of 13:17, 28 March 2012

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

  • Browser content doesn't scroll with touch events
  • Need to make popup windows (e.g. alert, authentication and window.open) work bug 716664
  • Need a better solution for ignoring X-Frame-Options headers for <iframe mozbrowser> elements (B2G currently just has a pref which disables them for whitelisted domains)
  • Find a way to use the iframe's window.history instead of having to re-implement the history API inside the app. (some discussion in bug 708179)
  • Window.top should stop at the iFrame to prevent parent navigation & frame busting (bug 704037)
  • Some UX Unknowns (see Design section)

Definition

User Stories

M2 - Demo Phone

M3 - Product

UX

User stories (draft)

Dependencies

Largely dependent on a new Browser API bug 693515

M2 - Demo Phone

M3 - Product Phone

UX

Characteristics that make FireFox

Character

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


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

Features

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:

  • close tabs
  • navigate through many 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

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

Development

Source code on Github

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