Labs/Jetpack/JEP/33

	THIS PAGE IS A WORKING DRAFT
	The page may be difficult to navigate, and some information on its subject might be incomplete and/or evolving rapidly. If you have any questions or ideas, please add them as a new topic on the discussion page.

JEP 16 - SlideBar

• Champion: Daniel Buchner <daniel@mozilla.com>
• Status: Concept
• Type: API Track
• Created: 2 Dec 2009
• Reference Implementation: jetpack.addElement('window')
• JEP Index

Introduction and Rationale

Window for Jetpack is a crucial API enhancement that allows developers using the Jetpack extension development platform to extend both functional and presentational capabilities of their Jetpacks. Window abilities are the gateway to a large, uncharted mass of applications that can be developed in concert with the other useful tools provided by Jetpack.

Proposal

A new Window instantiation: jetpack.addElement('window', {options})

Where options is a property hash:

• icon uri - icon to show in the Title section of the window
• html text/xml - html content for the feature
• url uri - url to load content for the feature
• width num - initial width of the Window (320 - standard smartphone width resolution)
• height num - initial height of the Window (480 - standard smartphone height resolution)
• persist bool - will the Window stay open when a user closes the browser instance?
• onFocus func - event triggered when the Window is focused
• onBlur func - event triggered when the Window losses focus
• onReady func - event triggered when the Window's content is loaded and ready for manipulation.

All events are passed the following property hash:

• icon - node representing the icon in the SlideBar
  • icon.default() - reload icon to original icon
• contentDocument - document element of the content area
• position - an object that includes the Window's position on the screen: {x: 400, y: 500}
• location - the URL of the window, http://, chrome://

Example

Show mozilla.com in a Window and change the background color of the document when clicked.

jetpack.addElement('window',
    url: "http://www.mozilla.com/",
    width: 300,
    onFocus: function(window) {
        window.contentDocument.defaultView.window.document.body.style.background = '#ffffff';
    },
    onBlur: function(){
        window.contentDocument.defaultView.window.document.body.style.background = '#ff0000';
    }
});