This article needs a technical review. How you can help.

Content Panels

A service provider can use several types of panels within Firefox. Each panel is an HTML page delivered from the service provider's website. These panels have additional DOM APIs on navigator.mozSocial that provide enhanced UI capabilities.

If a service defines a Sidebar, the browser instantiates, on certain browser windows, a content region whose content is located at the sidebarURL defined in the manifest. These regions are not instantiated until the Worker has been fully loaded. The content in these regions has the additional API defined in the Service Content API reference.

Sidebars can be in a visible or hidden state.

  • When visible, they receive a vertical rectangle of screen space in which to render; this rectangle is stable across changes in tab focus and has an independent scrollbar from the scrollbar of tabbed browsing content.
  • When hidden, a sidebar is completely removed from the visual hierarchy. The user agent continues to deliver messages to it, and the sidebar may pre-render its DOM for later display.

Sidebar windows are instantiated only on browser windows that have a full tabbed-browsing interface; windows created with that do not have these interface elements do not get a sidebar.

When a tab that is rendered directly by the browser without a location bar is selected, the sidebar is automatically placed into the hidden state. When the user navigates away from that tab, the sidebar is made visible again. These tabs include the Add-ons management page, about:permissions, etc.

The minimized/maximized/hidden state of the sidebar widget is consistent across all browser windows. The most-recently-set state is remembered and used for new windows, and is persisted across browser restarts.


If a services provides a Sidebar, the Sidebar may open a Flyout panel. This panel can be populated with additional detail about an object referenced in the Sidebar. For example, if the Sidebar provides an Activity Stream, hovering over an item in the stream could produce a Flyout that shows the full Story from that stream entry.

Notification Panels

If a service uses a worker, the worker can define additional toolbar buttons for notifications. Each of these buttons has a Notification Panel attached to it. For more information on configuring Notification Panels, see the social.notification-create Worker API.

Chat Windows

Chat Windows are small windows that float over the content of the web pages that users view. They can be opened from the Sidebar, a Notification Panel, or the worker. You can open a chat window using navigator.mozSocial.openChatWindow or from the worker using the social.request-chat Worker API.

Share panel

In-Development for Firefox 23.

A service provider may define a Share Panel that will be grouped with other providers' Share Panels in the toolbar. Unlike other SocialAPI Panels which are only accessible when your provider is selected by the user, the Share Panel will display a selection of providers for the user to choose from. For instance, if the user has selected Provider-A as their primary provider, they can still share with Provider-B via the Share Panel. Provider-B will not have access to their worker in this example, so Share Panels must be designed to work without using navigator.mozSocial APIs. Users will have access to Share through a toolbar button and various context menus.

Technical Considerations for Panels

How to properly size your panel

Your panels are presented in a door hanger from the browser toolbar or sidebar. While they can be flexible in size, there is a minimum and a maximum size that the panel will allow. You also need to implement a couple of items to help the browser identify the size you need for your panel. There are a few ways you can define the proper size for your panel; here are some examples:

Styling the BODY element

By default the browser will look at the and, also taking into account the margin. It will try to size the panel to show your full page.

<body style="width: 300px; height: 400px">


Identifying a content element

In development, available starting Firefox 23 (verify later)

The browser will also look to see if you have defined a primary content element. If you have, then it will use the width and height styles from that element to size the panel. You will need to make sure that your content element is properly placed.

<body contentid="content">
<div id="content" style="width: 300px; height: 400px; top: 0; left: 0;"/>

Document Tags and Contributors

 Contributors to this page: Sheppy, kscarfone, Mixedpuppy, jswisher, ccarruitero
 Last updated by: Sheppy,