Gaia/Browser: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 14: Line 14:


== Issues & Risks ==
== Issues & Risks ==
* <strike>[https://github.com/andreasgal/gaia/issues/25 Browser content doesn't scroll with touch events]</strike>
 
* Need to make popup windows (e.g. alert, authentication and window.open) work {{bug|716664}}
** window.open should now work {{bug|721777}}
* 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 ==
== Definition ==
=== User Stories ===
=== User Stories ===
[https://docs.google.com/spreadsheet/ccc?key=0AiNX8SgRPhbjdF9uUnh6cnFrT1pObEdkZ3YzLXNxeFE User stories (draft)]
==== M2 - Demo Phone ====
==== M2 - Demo Phone ====
* <strike>[https://github.com/andreasgal/gaia/issues/61 Navigate to URL]</strike>
* <strike>[https://github.com/andreasgal/gaia/issues/61 Navigate to URL]</strike>
* [https://github.com/andreasgal/gaia/issues/62 Back & Forward]
* <strike>[https://github.com/andreasgal/gaia/issues/62 Back & Forward]</strike>
* [https://github.com/andreasgal/gaia/issues/63 Reload]
* <strike>[https://github.com/andreasgal/gaia/issues/63 Reload]</strike>
* <strike>[https://github.com/andreasgal/gaia/issues/288 Browser Title & URL Update on Navigate]</strike>
* <strike>[https://github.com/andreasgal/gaia/issues/288 Browser URL Update on Navigate]</strike>


==== M3 - Product ====
==== M3 - Product ====
* [https://github.com/andreasgal/gaia/issues/181 Stop]
* [https://github.com/andreasgal/gaia/issues/66 New Tab]
* [https://github.com/andreasgal/gaia/issues/67 Switch Tab]
* [https://github.com/andreasgal/gaia/issues/287 Close Tab]
==== UX ====
[https://docs.google.com/spreadsheet/ccc?key=0AiNX8SgRPhbjdF9uUnh6cnFrT1pObEdkZ3YzLXNxeFE User stories (draft)]
=== Dependencies ===
Largely dependent on a new Browser API {{bug|693515}}
==== M2 - Demo Phone ====
* <strike>mozbrowser{loadstart,loadend,locationchange} events for <iframe mozbrowser> {{bug|710231}}></strike>
* <strike>titlechange event {{bug|719459}}</strike>
* iconchange event {{bug|719461}}
==== M3 - Product Phone ====
* stop method {{bug|709759}}
== 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   


---------------------<br>
---------------------<br>
Line 69: Line 35:
---------------------
---------------------


===Features===
=====Basic Browser Functions=====
====Basic Browser Functions====


[P1] URL Bar<br>
[P1] URL Bar<br>
Line 81: Line 46:
[P1] Back / Forward buttons [currently Back is handled by the Android OS]<br>
[P1] Back / Forward buttons [currently Back is handled by the Android OS]<br>
[P1] Refresh<br>
[P1] Refresh<br>
[P1] Stop<br>
[P1] [https://github.com/andreasgal/gaia/issues/181 Stop]<br>
[P2] Add / Remove Bookmark<br>
[P2] Add / Remove Bookmark<br>
[P3] Edit Bookmark
[P3] Edit Bookmark
Line 92: Line 57:
[P?] Add-ons<br>
[P?] Add-ons<br>


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


====Gestures====
=====Gestures=====
[P1] one-fingered dragging to scroll pages<br>
[P1] one-fingered dragging to scroll pages<br>
[P1] double tap to zoom / unzoom<br>
[P1] double tap to zoom / unzoom<br>
Line 107: Line 72:
[P3] pull down on content to reveal home screen / awesomebar
[P3] pull down on content to reveal home screen / awesomebar


====[P1] Awesome Screen====
=====[P1] Awesome Screen=====
[P1] frecency algorithm applied to Top Sites / Search filter<br>
[P1] frecency algorithm applied to Top Sites / Search filter<br>
[P1] top visited sites<br>
[P1] top visited sites<br>
Line 115: Line 80:
[P2] folders (used for synced desktop bookmarks folders)<br>
[P2] folders (used for synced desktop bookmarks folders)<br>


====[P1] Tabs====
=====[P1] Tabs=====
A way to access tabs:
A way to access tabs:
*close tabs
* [https://github.com/andreasgal/gaia/issues/66 New tab]
* [https://github.com/andreasgal/gaia/issues/67 Switch Tab]
* [https://github.com/andreasgal/gaia/issues/287 Close Tab]
*navigate through many tabs
*navigate through many tabs
            
            
====[P2] Start Page====
=====[P2] Start Page=====
Visually rich page that displays:
Visually rich page that displays:
*top visited sites
*top visited sites
*recent tabs (Session History)
*recent tabs (Session History)
        
        
====[P?] Persona====
======[P?] Persona======
Ability to sync bookmarks, history with desktop and all other platforms<br>
Ability to sync bookmarks, history with desktop and all other platforms<br>
^ If we do this we should try for remote tabs as well
^ If we do this we should try for remote tabs as well


====[P?] Add Ons====
=====[P?] Add Ons=====
Support for installing 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] Settings [currently this is handled by the Android OS, probably will be moved to the global Settings]=====
[P3] General
[P3] General
*About Nightly
*About Nightly
Line 148: Line 115:
*Send Performance Data
*Send Performance Data
*Use Master Password
*Use Master Password
=== Dependencies ===
Largely dependent on a new Browser API {{bug|693515}}
==== M2 - Demo Phone ====
* <strike>mozbrowser{loadstart,loadend,locationchange} events for <iframe mozbrowser> {{bug|710231}}></strike>
* <strike>titlechange event {{bug|719459}}</strike>
* <strike>[https://github.com/andreasgal/gaia/issues/25 iframe scrolling]</strike>
* <strike>Window.top should stop at the iFrame to prevent parent navigation & frame busting</strike> ({{bug|704037}})
==== M3 - Product Phone ====
* stop method {{bug|709759}}
* iconchange event {{bug|719461}}
* Need to make popup windows (e.g. alert, authentication and window.open) work {{bug|716664}}
** window.open should now work {{bug|721777}}
* 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}})
* Better solution for setting a window.top boundary on browser elements, using process separation


====OS Dependencies  (On Android)====
====OS Dependencies  (On Android)====
Line 156: Line 140:
* Download Manager
* Download Manager
* Copy and Paste  
* 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   


== 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 12:02, 29 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

Definition

User Stories

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
  • iconchange event bug 719461
  • 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)
  • Better solution for setting a window.top boundary on browser elements, using process separation

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


Development

Source code on Github

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