Personal tools

WebAPI/BrowserAPI

From MozillaWiki

Jump to: navigation, search

Contents

Browser Element & API

This is a proposal for a 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 complete
reload P2 bug 741717 complete
go{Back,Forward}, canGo{Back,Forward} P2 bug 741755 complete
getScreenshot P1 bug 753595 complete
getContentDimensions bug 757859 in progress
setVisible bug 702880 complete, needs follow-up, bug 762939, in progress
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 complete
error:fatal bug 766437 not started
scroll P1 bug 770847 in progress
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 in progress
target=_blank/_top P2 bug 769254 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

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