|
|
| (21 intermediate revisions by 7 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 & Team == | | == Features == |
|
| |
|
| See: [https://docs.google.com/spreadsheet/ccc?key=0AiBigu584YY7dGlNSlY0QzhJb3M5anRBa1gxalV0Y3c#gid=0 B2G - Milestone 3 Plan]
| | 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]. |
|
| |
|
| == Use Cases == | | == Bugs == |
| *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 == | | 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] |
|
| |
|
| The progress against these requirements is being tracked at a high level on a [https://docs.google.com/spreadsheet/ccc?key=0Av1UnKL6lZaadDlPR3UwRXVNb2VMNWpKSTBsSWMxSUE spreadsheet] with [https://github.com/andreasgal/gaia/issues?labels=browser&page=1&state=open Github issues] corresponding to each item for more in depth discussion.
| | == Platform Dependencies == |
| | | The browser app is built on the [[WebAPI/BrowserAPI|Browser API]]. The tracking bug for this API is {{bug|693515}}. |
| === 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
| |
| **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
| |
| *User has the ability to add a bookmark as an app icon on the home screen
| |
| | |
| === Gaia v2 ===
| |
| *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] (Updated: May 11, 2012)
| |
| ** Specs are ready for implementation. Individual specs will also be attached to specific stories on GitHub.
| |
| ** Added a Tabs Spec
| |
| * [http://people.mozilla.com/~lco/FX_B2G/Wireframes/B2G%20FX%20Wireframes%20v.10.pdf wireframes v10] (Updated: May 4, 2012)
| |
| ** Updated the design of the bottom bar, tabs menu, and AwesomeScreen. Specs are slowly being updated as well.
| |
| * [http://people.mozilla.com/~lco/FX_B2G/Wireframes/B2G%20FX%20Wireframes%20v.8.pdf wireframes v8] (Apr 27, 2012)
| |
| ** Contains the FX UX team's approved interaction design and feature set that aligns with the rest of the Firefox product family.
| |
| ** Spec updates to come soon.
| |
| * [http://people.mozilla.com/~lco/FX_B2G/Wireframes/B2G%20FX%20Wireframes%20v.7.pdf wireframes v7]
| |
| ** An exploration of different tab drawers that are more closely aligned with Gaia system UI.
| |
| * [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 === | | == Source Code == |
| *[https://docs.google.com/spreadsheet/ccc?key=0Av1UnKL6lZaadDlPR3UwRXVNb2VMNWpKSTBsSWMxSUE#gid=0 User Stories, in priority sequence!]
| | The source code lives [https://github.com/mozilla-b2g/gaia/ here]. |
| *[https://docs.google.com/spreadsheet/ccc?key=0AiNX8SgRPhbjdF9uUnh6cnFrT1pObEdkZ3YzLXNxeFE User stories (draft)]
| |
| | |
| == Platform Dependencies ==
| |
| The browser app is built on the Browser API. See the [https://wiki.mozilla.org/WebAPI/EmbeddedBrowserAPI wiki] for detailed requirements and an overview of progress. The tracking bug for this API {{bug|693515}}.
| |
|
| |
|
| == 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]]. |