WebAPI/BrowserAPI

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
getThumbnail	P1		NOT STARTED
getFavicon	P2		NOT STARTED

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	NOT STARTED
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 742944	IN PROGRESS

Other Features

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

getThumbnail(callback)

Generates a thumbnail of the content currently displayed in the browser element. The thumbnail 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.

getFavicon(callback)

Gets the favicon associated with the content currently loaded inside the browser element. The favicon should be returned to the callback as a binary blob (or alternatively just a URL pointing to the file) in addition to the URL of the page it corresponds to. This could be used by a browser app to save icons for use in history, boomkarks or tab switching. We may not need this feature if we have an iconchange event.

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?

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.

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.

Other Comments

Other features that could be required in the future:

• Find in page
• Download manager
• View source