JEP HTMLView

Proposal

HTMLView is meant to be an Abstraction class from which UI classes can all sub-class.

Use Cases

Many SDK modules provide UI real estate which can be filled with HTML content, such as widget, panel, sidebar, toolbar, and addon-page. In the past one would typically need to use a content script in order to pass messages between the HTML content and the add-on. Since the requirement of a content script means the developer must use a new file or create a string with code in it..

With HTMLViews a developer will be able to communicate back to the add-on via an addon global provided to it, bypassing the need for any content script and standardizing some common events these UI modules have in common.

Implementation

Since each implementation of an HTMLView will involve using windows which will be available at different points in time.

API

Constructor

• options
  • url

Methods

• on/off/once

Events

• attach
• show/hide

Examples

lib/main.js

const { HTMLView } = require('sdk/ui/html-view');
let view = HTMLView({ url: require('self').data.url('index.html') });
view.on('attach', function(worker) {
  worker.port.on('message', function(msg) {
    console.log(msg) // logs hi world!
  })
  worker.postMessage('hi ')
})

data/index.html

worker.onMessage(function(msg) {
  worker.port.emit('message', msg + 'world!')
});

Dependencies & Requirements

• content/worker: the content worker will be used to create the addon global and the enable the message passing.
• Some window will need to be provided in order to load the url provided to the constructor.

Prior Art

• sdk/page-mod
• sdk/content/worker
• sdk/panel

Comments