|
|
| (35 intermediate revisions by 9 users not shown) |
| Line 1: |
Line 1: |
| The Browser app delivers a competitive browsing experience on a Mobile device.
| | == Design Specs== |
| | For the latest UX specifications, please visit: |
| | https://mozilla.box.com/applications |
|
| |
|
| == Status == | | == Features == |
| * Feature Name: Gaia Browser App
| |
| * Stage: Development
| |
| * Release Target: M3 Alpha
| |
|
| |
|
| == Use Cases ==
| | 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]. |
| *Tom loves using his mobile web browser for accessing websites where a Web App doesn't exist or to quickly look something up
| |
| *Launching the browser app, Tom sees an address bar, a back button and a menu button
| |
| *Tom taps on the address bar and is able to enter a URL and navigate to a particular website
| |
| *Tom visits www.nytimes.com and is able to view the entire website clearly and can zoom/pan around and catch up on today's news stories
| |
| *Tom clicks on a story and realizes it's not what he wants and taps the back arrow button.
| |
| **Just like the desktop browser, Tom's browser history is stored and he's able to easily navigate back and forth between webpages.
| |
| *Clicking on the menu button, Tom is able to bookmark his favorite sites and manage his browser Settings
| |
| *Security is very important to Tom, so he's comforted to know certain sensitive websites he visits like his online banking service visually show him a 'lock' like icon.
| |
| *Tom also knows that the address bar is also much smarter and keeps a history of his top sites
| |
| **By typing just a few letters, Tom see suggestions of his favorite/bookmarked sites
| |
| *The address bar is also a search bar and after typing in the query, Tom is able to select the search engine he wants to search from
| |
| *Tom loves multitasking and has the ability to open a new tab on top of the existing website he's viewing
| |
| **The browser UI allows Tom to easily and quickly jump between his tabs
| |
| **Tom can easily dismiss one of the tabs if he's done with it
| |
| **Tom can easily create a new tab by tapping
| |
| *In addition to bookmarking a site and saving it to the browser app, Tom has the ability to bookmark a site and save it to his home screen
| |
| **The home screen icon will intelligently create an icon on the home screen and uses the favicon as a base for the icon
| |
| **Clicking on the bookmark on the home screen takes Tom to the website in the Browser app
| |
| **If the Browser app is always running the background, it creates a new tab for Tom
| |
| *While surfing the web, Tom has the ability to share a given link at any time via:
| |
| **Email
| |
| **SMS
| |
| **3rd party app
| |
| *Because Tom is logged into his B2G phone using his Persona account, he has the ability to access his desktop browser data.
| |
| *Tom enjoys using his Firefox browser and knows it's all about user choice. Under the settings menu, Tom has the ability to manage the following:
| |
| **Clear History
| |
| **Clear Cookies and Data
| |
| **Do Not Track (this is tied to the main Settings app and permissions model)
| |
| **Enable Cookies
| |
| **Send Performance Data
| |
| **User Master Password
| |
| **Remember Passwords
| |
|
| |
|
| == Requirements == | | == Bugs == |
| === Gaia v1 ===
| |
| *The Browser app features can be broken down into a few categories:
| |
| **Core functionality:
| |
| ***User launches the browser app and has the ability to quickly and easily enter a URL in the address bar
| |
| ***User has the ability to navigate back and forward when applicable
| |
| ***User can refresh the page at any time when a page has completed loading
| |
| ***User can stop the loading of a page at any time
| |
| ***User is informed of the progress of the the page load with a visual indicator
| |
| ***When scrolling down a page, the content should be maximized by moving the top bar off the screen
| |
| ***User has the ability to bookmark a website and store that data within the browser app
| |
| ****User has the option to edit the name of a bookmark that has been saved
| |
| ****User can delete a bookmark
| |
| ***User has the ability to view certain document types:
| |
| ****.pdf (leverage pdf.js?)
| |
| ***Related to system UI, the user is informed when network connectivity isn't available
| |
| ***User is informed that a site is encrypted or secure with a visual 'lock' like indicator
| |
| **Gestures:
| |
| ***User has the ability to scroll the contents of a page using a gesture
| |
| ***User has the ability to zoom in and out on any object/section of a web page (exception may be mobile-optimized sites)
| |
| ****Text box/image/section: double-tap
| |
| ****General area of web page: pinch-to-zoom
| |
| ****User has the ability to hide/reveal the Tabs tray using a gesture
| |
| ****When hidden, user has the ability to reveal the Awesome screen with a gesture
| |
| **Tabs:
| |
| ***User has the ability to create a new tab
| |
| ***User has the ability to quickly jump between open tabs
| |
| ***User has the ability to dismiss/close any open tab
| |
| **AwesomeScreen:
| |
| ***When typing in the address bar, the user is provided suggestions of top sites they have visited
| |
| ***Without typing, the user is offered the top sites they have visited
| |
| ***Selecting 'Bookmarks', the user is offered the list of bookmarks
| |
| ***Selecting 'History', the user is displayed a list of websites they visited sorted by recency
| |
| **Settings:
| |
| ***Clear History
| |
| ***Clear Cookies and Data
| |
| ***Do Not Track (this is tied to the main Settings app and permissions model)
| |
| ***Enable Cookies
| |
| ***Send Performance Data
| |
| *The start page should be a visual page offering functionality from the AwesomeScreen
| |
| **Similar to Fennec's start page, it offers a 'speed dial' like experience
| |
| *The address bar offers search functional from multiple sources
| |
| **BD deals/agreements required to finalize the set of service providers
| |
|
| |
|
| === Gaia v2 ===
| | 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 has the ability to add a bookmark as an app icon on the home screen
| |
| *User can share the link of a website via certain apps:
| |
| **Email
| |
| **SMS
| |
| **3rd party app (i.e. social apps)
| |
| *User has the ability to view certain document types:
| |
| **.doc
| |
| **.xls
| |
| **.ppt
| |
| *Gestures:
| |
| **User has the ability to bring up a page/object's context menu with a gesture
| |
| ***For example, bring up the context menu for an image could offer users the option to 'save image' to the Gallery app
| |
| **User has the ability to select text using a gesture
| |
| **User has the ability to navigate back/forward using a gesture
| |
| *AwesomeScreen:
| |
| **User is offered the option of 'search suggestions' from various sources
| |
| **User has the option to manage/organize their synced browser data with other clients
| |
| ***Bookmarks
| |
| ***Passwords
| |
| ***Forms
| |
| *Settings:
| |
| **User Master Password
| |
| **Remember Passwords
| |
| **Open Links in 'New Tab' or 'In Background'
| |
| **Private Browsing mode
| |
| | |
| == Design Specs ==
| |
| * [http://people.mozilla.com/~lco/FX_B2G/Release_1_Specs/ Release 1 Specs]
| |
| ** Individual specs will also be attached to specific stories on GitHub.
| |
| ** Still have to add specs for Long-press on Links, Tabs, Start Page, Additional Bookmark functionality, Secure Site Indicator.
| |
| * [http://people.mozilla.com/~lco/FX_B2G/Wireframes/B2G%20FX%20Wireframes%20v.6.pdf wireframes v6]
| |
| ** These wireframes reflect changes to the v1 requirements for Browser. In particular, they include Start Page, Tabs, & Secure Site Indicator
| |
| ** Once the team agrees with these wireframes, specs will be created and added to the Release 1 Specs.
| |
| ** No v.5 because I was working on it before I got the new requirements...
| |
| * [http://cl.ly/3h2n2b1m1b3r223F3m0B wireframes v4] - A quick exploration on the location of the Refresh button.
| |
| * [http://cl.ly/1T0U0X3E13122J0Z2g32 wireframes v3]
| |
| ** wireframes v3 is focused only on the features that will be included in the first browser release.
| |
| ** the only thing missing is the Settings Menu, which will be affected by design decisions that are going into v4 of this document.
| |
| * [http://cl.ly/3a1X3C1T2x2Z043A0O3A wireframes v2] - toolbar, awesomebar, tabs concepts
| |
| * [http://cl.ly/1l3t1j060d2m142R2d04 wireframes v1] - FX for Gaia toolbar concepts
| |
| | |
| === User Tasks ===
| |
| *[https://docs.google.com/spreadsheet/ccc?key=0Av1UnKL6lZaadDlPR3UwRXVNb2VMNWpKSTBsSWMxSUE#gid=0 User Stories, in priority sequence!]
| |
| *[https://docs.google.com/spreadsheet/ccc?key=0AiNX8SgRPhbjdF9uUnh6cnFrT1pObEdkZ3YzLXNxeFE User stories (draft)]
| |
|
| |
|
| == Platform Dependencies == | | == Platform Dependencies == |
| Development is dependent on a new [https://wiki.mozilla.org/WebAPI/EmbeddedBrowserAPI Browser API] on the platform - Tracking bug: {{bug|693515}}
| | The browser app is built on the [[WebAPI/BrowserAPI|Browser API]]. The tracking bug for this API is {{bug|693515}}. |
|
| |
|
| * <strike>mozbrowser{loadstart,loadend,locationchange} events for <iframe mozbrowser> {{bug|710231}}></strike>
| | == Source Code == |
| * <strike>titlechange event {{bug|719459}}</strike>
| | The source code lives [https://github.com/mozilla-b2g/gaia/ here]. |
| * <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}})
| |
| * 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)
| |
| * Listen for long-press context menu events
| |
| * Detect when the using a secure site (SSL etc.)
| |
| * Method to clear global history?
| |
| * Method to clear private data?
| |
| * Method to enable/disable cookies?
| |
|
| |
|
| == Development == | | == Security Review == |
| [https://github.com/andreasgal/gaia/tree/master/apps/browser Source code on Github] | | The Security Review of the Browser app can be found [[Security/Reviews/Gaia/browser|here]]. |