From MozillaWiki
< Labs‎ | Jetpack‎ | JEP
Jump to: navigation, search
Draft-template-image.png THIS PAGE IS A WORKING DRAFT Pencil-emoji U270F-gray.png
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.


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


Show in the SlideBar and change the icon when clicked.

  url: "",
  width: 300,
  onClick: function(slide) {
    slide.icon.src = "chrome://branding/content/icon48.png";