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		IMPLEMENTED

Methods
Name	Priority	Bug	Status
go	P2		NOT STARTED
stop	P1	bug 709759	NOT STARTED
reload	P2	bug 741717	NOT STARTED
goBack	P2		NOT STARTED
goForward	P2		NOT STARTED
canGoBack	P2	bug 741755	NOT STARTED
canGoForward	P2	bug 741755	NOT STARTED
getScreenshot	P1		COMPLETE
getContentDimensions		bug 757859	IN PROGRESS
setVisible		bug 702880	COMPLETE

Events
Name	Priority	Bug	Status
loadstart	P1		IMPLEMENTED
loadend	P1		IMPLEMENTED
loadprogress	P3		NOT STARTED
locationchange	P1		IMPLEMENTED
titlechange	P1		IMPLEMENTED
iconchange	P1	bug 719461	IMPLEMENTED
alert	P1	bug 741587	IN PROGRESS
confirm	P1	bug 741587	IN PROGRESS
prompt	P1	bug 741587	IN PROGRESS
open	P1	bug 742944	IN PROGRESS
close	P1	bug 757182	IMPLEMENTED
securitychange	P1		NOT STARTED
resize		bug 757859	NOT STARTED

Other Features
Name	Priority	Bug	Status
Process separation	P1	bug 714861	IMPLEMENTED
Framebusting protection	P1		IN PROGRESS (implemented but needs improvement)
Touch pan & zoom	P1		IN PROGRESS
Viewport	P2		NOT STARTED
Hyperlink targets	P2		NOT STARTED
Context menu	P1		IN PROGRESS
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.

getWidth(callback)

Gets the width of the current browser content, returned as an integer in the provided callback.

getHeight(callback)

Gets the height of the current browser content, returned as an integer in the provided callback.

Events

Events which are fired by a browser element.

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.

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.

Viewport

Should support viewport meta tags to allow web sites to define how they want to be displayed on screens with different pixel densities.

Hyperlink targets

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

Context menu

Some method of providing a context menu ("open in new tab" etc.), e.g. with a long press.

Permissions prompts

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

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

Contents