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 uri - icon to show in the SlideBar
• html text/xml - html content for the feature
• url uri - url to load content for the feature
• width num - width of the content area and selected slide size
• persist bool - default slide behavior when being selected
• autoReload bool - automatically reload content on select
• onClick func - callback when the icon is clicked
• onSelect func - callback when the feature is selected
• onReady func - callback when the feature is loaded

The callbacks are passed a property hash:

• icon - node representing the icon in the SlideBar
  • icon.reload() - reload icon to original icon
• contentDocument - document element of the content area
  • contentDocument.reload() - reload content to original url/html
• close() - slide close the SlideBar
• notify() - slide open (if necessary) and animate icon in the SlideBar
• slide(num, { persist: bool }) - slide to the provided size and optionally persist the SlideBar

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";
  }
});