WebAPI/BrowserAPI

Browser Element & API

This is a proposal for a Browser API and a new HTML element called "<browser>" or "<webview>", 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-api).

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			not started
stop	P1	bug 709759	complete
reload	P2	bug 741717	complete
go{Back,Forward}, canGo{Back,Forward}	P2	bug 741755	complete
getScreenshot	P1	bug 753595	complete
getContentDimensions		bug 757859	complete
setVisible		bug 702880, bug 762939	complete

Events

Name	Priority	Bug	Status
loadstart	P1		complete
loadend	P1		complete
loadprogress			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	complete
error:fatal		bug 766437	complete
scroll	P1	bug 770847	complete

Other Related Features (not all necessarily part of Browser API)

Name	Priority	Bug	Status
Process separation	P1	bug 714861	complete
Framebusting protection	P1	bug 771273	complete
Touch pan & zoom	P1	bug 745136	complete
<meta name="viewport"> tags	P2	bug 746502	complete
target=_blank/_top	P2	bug 769254	complete
Permissions prompts	P1		complete
Clear private data	P1		complete
Turn cookies on/off			not started
<select> popups	P1	bug 759511	complete

Example implementation

This is a minimal implementation of a browser. When it's complete, it will exercise the full surface area of the API.

This code is completely untested at the moment.

HTML

 <div><span id='location-bar'></span> <button onclick='go_button_clicked()'>Go</button></div>
 <div id='load-status'></div>
 <div id='security-status'></div>
 <img id='favicon'>
 <div id='title'></div>
 <iframe mozbrowser id='browser'></iframe>

JS

 function $(id) {
   return document.getElementById(id);
 }
 
 let iframe = $('browser');
 
 iframe.addEventListener('mozbrowserloadstart', function(e) {
   $('load-status').innerText = 'loading...';
 });
 
 iframe.addEventListener('mozbrowserloadend', function(e) {
   $('load-status').innerText = 'done loading';
 });
 
 iframe.addEventListener('mozbrowserlocationchange', function(e) {
   $('location-bar').innerText = e.detail;
 });
 
 iframe.addEventListener('mozbrowsertitlechange', function(e) {
   $('title').innerText = e.detail;
 });
 
 iframe.addEventListener('mozbrowsericonchange', function(e) {
   $('favicon').src = e.detail;
 });
 
 iframe.addEventListener('mozbrowsersecuritychange', function(e) {
   // 'secure', 'insecure', or 'broken'.  'broken' indicates mixed content.
   $('security-status').innerText = e.detail.state;
   
   // There's also e.detail.extendedValidation (boolean), but this will be
   // false until bug 764496 is fixed.
 });
 
 iframe.addEventListener('mozbrowsercontextmenu', function(e) {
   // TODO
 });
 
 iframe.addEventListener('mozbrowsererror', function(e) {
   switch (e.detail.type) {
   case 'other':
     // Something has gone wrong -- we're probably displaying a Gecko error
     // page, e.g. "no network connection" or "invalid SSL cert".  You
     // probably don't need to do anything here.
     break;
   case 'fatal':
     // The tab crashed.  Not implemented yet; see bug 766437.
     break;
   }
 });
 
 iframe.addEventListener('mozbrowserkeyevent', function(e) {
   // TODO.  You probably don't care about this event.
 });
 
 iframe.addEventListener('mozbrowsershowmodalprompt', function(e) {
   // TODO
 });
 
 iframe.addEventListener('mozbrowseropenwindow', function(e) {
   // TODO
 });
 
 iframe.addEventListener('mozbrowserclose', function() {
   // This is really only meaningful for popup windows.
   document.body.removeChild(iframe);
 });
 
 function go_button_clicked() {
   iframe.src = $('location-bar').value;
 }
 
 // TODO:
 //   * getCanGoBack
 //   * getCanGoForward
 //   * goBack
 //   * goForward
 //   * setVisible
 //   * getScreenshot