|
|
| (57 intermediate revisions by 10 users not shown) |
| Line 1: |
Line 1: |
| The Gaia Browser app is a web browser implemented as a web app, for the front end of [[B2G]]
| | == Design Specs== |
| | For the latest UX specifications, please visit: |
| | https://mozilla.box.com/applications |
|
| |
|
| == Status == | | == Features == |
| * Stage: Development
| |
| * Release target: [https://wiki.mozilla.org/B2G/Schedule_Roadmap#Milestone_3_.5BAlpha.5D B2G Milestone 3 [Alpha]], Q2 2012
| |
|
| |
|
| == Team == | | For progress on v1 features see the Browser tab of the [https://docs.google.com/a/tola.me.uk/spreadsheet/ccc?key=0AiBigu584YY7dGlNSlY0QzhJb3M5anRBa1gxalV0Y3c#gid=13 B2G Milestone Plan] and the [https://github.com/mozilla-b2g/gaia/issues?direction=asc&labels=blocking-basecamp%2B%2Cbrowser%2Cstory&page=1&sort=created&state=open browser label on Github]. |
| * 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 == | | == Bugs == |
| * Development is dependent on a new [https://wiki.mozilla.org/WebAPI/EmbeddedBrowserAPI Browser API] on the platform (see Dependencies)
| |
|
| |
|
| == Definition == | | For bugs, see the [https://bugzilla.mozilla.org/buglist.cgi?product=Boot2Gecko;component=Gaia%3A%3ABrowser;resolution=---;list_id=4610029 Gaia::Browser component on Bugzilla] |
|
| |
|
| === User Stories === | | == Platform Dependencies == |
| [https://docs.google.com/spreadsheet/ccc?key=0AiNX8SgRPhbjdF9uUnh6cnFrT1pObEdkZ3YzLXNxeFE User stories (draft)] | | The browser app is built on the [[WebAPI/BrowserAPI|Browser API]]. The tracking bug for this API is {{bug|693515}}. |
|
| |
|
| ==== M2 - Demo Phone ==== | | == Source Code == |
| * <strike>[https://github.com/andreasgal/gaia/issues/61 Navigate to URL]</strike>
| | The source code lives [https://github.com/mozilla-b2g/gaia/ here]. |
| * <strike>[https://github.com/andreasgal/gaia/issues/62 Back & Forward]</strike>
| |
| * <strike>[https://github.com/andreasgal/gaia/issues/63 Reload]</strike>
| |
| * <strike>[https://github.com/andreasgal/gaia/issues/288 Browser URL Update on Navigate]</strike>
| |
|
| |
|
| ==== M3 - Product ==== | | == Security Review == |
| | | The Security Review of the Browser app can be found [[Security/Reviews/Gaia/browser|here]]. |
| ---------------------<br>
| |
| [P1] Must Have<br>
| |
| [P2] Nice to Have<br>
| |
| [P3] Not crucial for first release<br>
| |
| ---------------------
| |
| | |
| =====Basic Browser Functions=====
| |
| | |
| [P1] URL Bar<br>
| |
| [P1] url input field<br>
| |
| [P3] favicon<br>
| |
| [P1] Loading spinner / progress bar<br>
| |
| [P1] Title / URL<br>
| |
| [P2] Site ID (Larry Menu)<br>
| |
| [P2] EV / SSL indicator<br>
| |
| [P1] Back / Forward buttons [currently Back is handled by the Android OS]<br>
| |
| [P1] Refresh<br>
| |
| [P1] [https://github.com/andreasgal/gaia/issues/181 Stop]<br>
| |
| [P2] Add / Remove Bookmark<br>
| |
| [P3] Edit Bookmark
| |
| *Move Bookmark<br>
| |
| *Tag Bookmark<br>
| |
| *Add Bookmark to Home Screen
| |
| [P3] Share<br>
| |
| [P3] Add to Reading List / Switch to Reader Mode http://mzl.la/x9E94w<br>
| |
| [P3] Site Settings<br>
| |
| [P?] Add-ons<br>
| |
| | |
| =====Addons Manager (AMO)=====
| |
| [P?] Downloads [currently this is handled by the Android OS]<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
| |
| | |
| =====Gestures=====
| |
| [P1] one-fingered dragging to scroll pages<br>
| |
| [P1] double tap to zoom / unzoom<br>
| |
| [P1] pinch to zoom<br>
| |
| [P1] long press links for context menu (open in new tab, etc)<br>
| |
| [P2] long press text to activate text selection mode<br>
| |
| [P3] two-fingered side to side dragging for back / forward controls<br>
| |
| [P2] pull down on header to reveal tabs tray<br>
| |
| [P3] pull down on content to reveal home screen / awesomebar
| |
| | |
| =====[P1] Awesome Screen=====
| |
| [P1] frecency algorithm applied to Top Sites / Search filter<br>
| |
| [P1] top visited sites<br>
| |
| [P1] bookmarks<br>
| |
| [P1] history: Today, Yesterday, This Week, Last Week<br>
| |
| [P3] web search suggest http://bit.ly/w5Usqp<br>
| |
| [P2] folders (used for synced desktop bookmarks folders)<br>
| |
| | |
| =====[P1] Tabs=====
| |
| A way to access 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
| |
|
| |
| =====[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<br>
| |
| ^ 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 ====
| |
| * <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}}
| |
| * window.{alert,prompt,confirm} {{bug|716664}}
| |
| * 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
| |
| ** [http://cl.ly/3a1X3C1T2x2Z043A0O3A wireframes v2] - toolbar, awesomebar, tabs concepts
| |
| ** [http://cl.ly/1l3t1j060d2m142R2d04 wireframes v1] - FX for Gaia toolbar concepts
| |
| | |
| == Development ==
| |
| [https://github.com/andreasgal/gaia/tree/master/apps/browser Source code on Github]
| |