Gaia/Browser

The Browser app delivers a competitive browsing experience on a Mobile device.

Status

Feature Name: Gaia Browser App
Stage: Development
Release Target: M3 Alpha

Use Cases

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

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

Gaia v2

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

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.
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...
wireframes v4 - A quick exploration on the location of the Refresh button.
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.
wireframes v2 - toolbar, awesomebar, tabs concepts
wireframes v1 - FX for Gaia toolbar concepts

User Tasks

Platform Dependencies

Development is dependent on a new Browser API on the platform - Tracking bug: bug 693515

~~mozbrowser{loadstart,loadend,locationchange} events for <iframe mozbrowser> bug 710231>~~
~~titlechange event bug 719459~~
~~iframe scrolling~~
~~Window.top should stop at the iFrame to prevent parent navigation & frame busting~~ (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?
Pinch to zoom for iframes
Smart viewport to fit content on a mobile screen

Development

Source code on Github