mozilla

Revision 90121 of The add-on bar

  • Revision slug: The_add-on_bar
  • Revision title: The add-on bar
  • Revision id: 90121
  • Created:
  • Creator: Dao
  • Is current revision? No
  • Comment TODO: Need to explain how to do this only once and then persist the item on restarts (while letting users move and remove the item).; 28 words added

Revision Content

{{ fx_minversion_header("4") }}{{ draft() }}

Firefox 4 eliminates the status bar from the bottom of the browser window in favor of a new toolbar located at the bottom of the window. This new toolbar, with the ID "addon-bar", is a standard XUL {{ XULElem("toolbar") }}; add-ons can insert content into it, and the user can drag buttons into it while customizing their toolbars. This is the primary difference between the add-on bar and the old status bar; you can now put any XUL element into it, since it's a standard toolbar.

Note: For the time being, there is a status bar shim included so that add-ons that expect the status bar to be present will still work.

Adding an element to the add-on bar

The add-on bar is a XUL toolbar with the ID "addon-bar". The code below locates the most-recently used window and adds a new item to the add-on bar that simply displays the text "Hello world!" using a XUL {{ XULElem("label") }} element.

// Find the most recently used window

var mediator = Components.classes['@mozilla.org/appshell/window-mediator;1']
                  .getService(Components.interfaces.nsIWindowMediator);
var doc = mediator.getMostRecentWindow("navigator:browser").document;

// Get the add-on bar for that window

var addonBar = doc.getElementById("addon-bar");

// Construct the new toolbar item

var newItem = doc.createElement("toolbaritem");
var itemLabel = doc.createElement("label");

// Add the item to the toolbar and set its text label

newItem.appendChild(itemLabel);
addonBar.appendChild(newItem);
itemLabel.value = "Hello world!";
TODO: Need to explain how to do this only once and then persist the item on restarts (while letting users move and remove the item).

Appearance differences

  • Since the browser no longer occupies a large percentage of the bar with status information, the entire area is available for add-ons to use.
  • The add-on bar is empty and hidden by default; the user must elect to make it visible.
  • If an add-on installs itself to the add-on bar directly and the bar is not already visible, the bar becomes visible automatically.
  • If uninstalling an add-on makes the number of items in the add-on bar become zero, the bar is hidden automatically.

See also

Revision Source

<p>{{ fx_minversion_header("4") }}{{ draft() }}</p>
<p>Firefox 4 eliminates the status bar from the bottom of the browser window in favor of a new toolbar located at the bottom of the window. This new toolbar, with the ID "addon-bar", is a standard XUL {{ XULElem("toolbar") }}; add-ons can insert content into it, and the user can drag buttons into it while customizing their toolbars. This is the primary difference between the add-on bar and the old status bar; you can now put any XUL element into it, since it's a standard toolbar.</p>
<div class="note"><strong>Note:</strong> For the time being, there is a status bar shim included so that add-ons that expect the status bar to be present will still work.</div>
<h2>Adding an element to the add-on bar</h2>
<p>The add-on bar is a XUL toolbar with the ID "addon-bar". The code below locates the most-recently used window and adds a new item to the add-on bar that simply displays the text "Hello world!" using a XUL {{ XULElem("label") }} element.</p>
<pre class="brush: js">// Find the most recently used window

var mediator = Components.classes['@mozilla.org/appshell/window-mediator;1']
                  .getService(Components.interfaces.nsIWindowMediator);
var doc = mediator.getMostRecentWindow("navigator:browser").document;

// Get the add-on bar for that window

var addonBar = doc.getElementById("addon-bar");

// Construct the new toolbar item

var newItem = doc.createElement("toolbaritem");
var itemLabel = doc.createElement("label");

// Add the item to the toolbar and set its text label

newItem.appendChild(itemLabel);
addonBar.appendChild(newItem);
itemLabel.value = "Hello world!";
</pre>
<div class="note"><strong>TODO:</strong> Need to explain how to do this only once and then persist the item on restarts (while letting users move and remove the item).</div>
<h2>Appearance differences</h2>
<ul> <li>Since the browser no longer occupies a large percentage of the bar with status information, the entire area is available for add-ons to use.</li> <li>The add-on bar is empty and hidden by default; the user must elect to make it visible.</li> <li>If an add-on installs itself to the add-on bar directly and the bar is not already visible, the bar becomes visible automatically.</li> <li>If uninstalling an add-on makes the number of items in the add-on bar become zero, the bar is hidden automatically.</li>
</ul>
<h2>See also</h2>
<ul> <li>The <a class=" external" href="http://mike.kaply.com/2011/01/25/the-firefox-4-add-on-bar-for-developers" title="http://mike.kaply.com/2011/01/25/the-firefox-4-add-on-bar-for-developers">Firefox 4 add-on bar for developers</a>, by Mike Kaply</li>
</ul>
Revert to this revision