Labs/Jetpack/JEP/16

	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: Edward Lee <edilee at mozilla dot com>
• Status: Implementing
• Type: API Track
• Created: 17 June 2009
• Reference Implementation: jetpack.future.import("slideBar")
• JEP Index

Introduction and Rationale

SlideBar is a reinvention of the old sidebar feature of browsers. They allow quick access to a wide range of both temporary and permanent information at the side of your browser window.

When a SlideBar feature is selected, its contents will be revealed from behind the current web page.

Proposal

Add new SlideBar features: jetpack.slideBar.append(options)

Where options is a property hash:

• icon - icon to show in the SlideBar
• html - html content for the feature
• url - url to load content for the feature
• width - width of the content area and default size to slide to
• persist - default slide behavior when being selected
• onClick - callback when the icon is clicked
• onSelect - callback when the feature is selected
• onReady - callback when the feature is loaded

The callbacks are passed a property hash:

• icon - node representing the icon in the SlideBar
• doc - document element of the content area
• reset() - reset the icon and content to the original values
• close() - slide close the SlideBar

The object passed to the callback is actually a function, slide(options), where options is a property hash:

• size - number of pixels to slide
• persist - true to keep the SlideBar open

Example

Show mozilla.com in the SlideBar and change the icon when clicked.

jetpack.slideBar.append({
  url: "http://www.mozilla.com/",
  width: 300,
  onClick: function(slide) {
    slide.icon.src = "chrome://branding/content/icon48.png";
  }
});