Browser Element & API

This is a proposal for Browser API and a new HTML element called "<browser>", which is similar to an iframe but allows the implementation of a fully featured web browser as a web app.

This feature is being tracked by the meta-bug bug 693515 (alias browser-as-webapp).

This is similar to the XUL browser element.

Summary

New HTML tag name "<browser>" bug 738172

Attributes
Name	Priority	Bug	Status
src	P1		complete

Methods
Name	Priority	Bug	Status
go	P2		not started
stop	P1	bug 709759	not started
reload	P2	bug 741717	not started
go{Back,Forward}, canGo{Back,Forward}	P2	bug 741755	complete
getScreenshot	P1	bug 753595	complete
getContentDimensions		bug 757859	in progress
setVisible		bug 702880	complete

Events
Name	Priority	Bug	Status
loadstart	P1		complete
loadend	P1		complete
loadprogress	P3		not started
locationchange	P1		complete
titlechange	P1		complete
iconchange	P1	bug 719461	complete
alert/prompt/confirm	P1	bug 741587	complete
open	P1	bug 742944	complete
close	P1	bug 757182	complete
securitychange	P1	bug 763694	complete
contextmenu	P1	bug 756371	complete
error		bug 768842	in progress
fail		bug 766437	in progress (perhaps part of onerror)
scroll	P1		not started

Other Related Features (not all necessarily part of Browser API)
Name	Priority	Bug	Status
Process separation	P1	bug 714861	complete
Framebusting protection	P1		complete
Touch pan & zoom	P1	bug 745136	in progress
<meta name="viewport"> tags	P2	bug 746502	not started
Hyperlink targets	P2		not started
Permissions prompts	P1		not started
Clear private data	P1		not started
Turn cookies on/off	P1		not started
<select> popups	P1	bug 759511	not started

Attributes

src

The URI of the content to appear in the element.

Methods

go(URI)

Navigate to the URI provided.

stop()

Stop the content from loading. Used by a stop button in a browser app.

reload()

Reload the content in the browser. Used by a refresh button in a browser app. We may in future need other versions of this method (e.g. to bypass the browser cache and do a hard reload).

goBack()

Navigates back one step in the session history. Could have success/failure reported in a callback but this isn't essential. Used by a back button in a browser app.

goForward()

Navigates forward one step in the session history. Could have success/failure reported in a callback but this isn't essential. Used by a forward button in a browser app.

canGoBack(callback)

Tells the app whether there is a history item in the session history to navigate back to. Should return a boolean true or false in a callback. Used by a browser app to decide whether to display a back button.

canGoForward(callback)

Tells the app whether there is a history item in the session history to navigate forward to. Should return a boolean true or false in a callback. Used by a browser app to decide whether to display a forward button.

getScreenshot(callback)

Generates a screenshot of the content currently displayed in the browser element. The screenshot should be returned to the callback as a binary blob, in addition to the URL it corresponds to. This could be used by a browser app to save visual bookmark or history information or as visual information to help in switching between tabs.

getContentDimensions(callback)

Gets the dimensions of the current browser content, returned as integers in the provided callback.

setVisible

Events

Events which are fired by a browser element. This section is a bit out of date.

loadstart

Indicates that the element started loading content. Used by a browser app to show a loading indicator.

loadend

Indicates that the element finished loading content. Used by a browser app to hide a loading indicator.

loadprogress

Provides an estimate of the percentage of a page loaded. This is tricky but is better for browser apps to provide a determinate rather than indeterminate progress indicator.

locationchange

Indicates that the URI changed, the URI is included as a string in the event payload.

titlechange

Indicates that the title of the page changed, the title is included as a string in the event payload.

iconchange

Indicates the favicon URL of the page changed, the URL of the favicon is included as a string in the event payload.

alert

Indicates that the content requested an alert dialog to be displayed. Used by a browser app to display alerts.

confirm

Indicates that the content requested a confirmation dialog to be displayed. Used by a browser app to display confirmation dialogs.

prompt

Indicates that the content requested a prompt dialog to be displayed. Used by a browser app to display prompt dialogs.

open

Indicates that the content requested a new window to be opened. Used by a browser app to open a new window/tab.

close

Indicates that the content requested the current window to be closed. Used by a browser app to close a window/tab.

securitychange

Indicates that the security status (secure or not) of a web page changed. Not sure how this should work, should we provide all the security details (e.g. SSL or not, certificate) in the event payload or add a getSecurityInfo() method for this?

resize

Indicates that the browser was resized. Not sure what data should be included in the event payload.

contextmenu

Indicates that the browser should display a contextual menu and execute callbacks in the scope of the child frame when the user selects one of the options in the menu.

error

fail

scroll

Other Features

Process separation

Each browser element should be capable of running in its own system process.

Framebusting protection

A browser element should ignore X-Frame-Options HTTP headers and act as a window.top boundary in order to prevent web sites from frame-busting. We already have a pref to disable X-Frame-Options system-wide but we need a way to just disable this for <browser> elements.

Touch pan & zoom

Users of touch-based devices should be able to zoom with pinch to zoom, zoom in on an element by double-tapping it and pan around the page by dragging their finger across the screen.

<meta name="viewport"> tags

Support for the de-facto standard of the viewport meta tag which allows web pages to be viewed at a readable physical size at different pixel densities.

Hyperlink targets

Open <a target="_top"> and <a target="_blank"> in a new window.

Permissions prompts

Some method of showing/wrapping permissions prompts for e.g. geolocation, indexedDB and fullscreen

Clear private data

Some method of clearing private data, specifically for one app. Not sure if this should be part of the browser API, or another API. This should include the ability to clear cookies & cache for one particular app. Download history, saved form data, saved passwords and offline website data (indexedDB, localStorage, appcache etc.) may also need to be cleared in future.

Turn cookies on/off

Some method of turning cookies on and off specifically for one app. Not sure if this should be part of the browser API or some other API.

WebAPI/BrowserAPI