User:Dietrich/Scratchpad: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(Replaced content with "Snappy bugs changed in the last week. <bugzilla> { "product": "Firefox,Toolkit", "whiteboard": "snappy", "changed_after": "1w" } </bugzilla>")
Line 1: Line 1:
*** DRAFT *** DRAFT ***
Snappy bugs changed in the last week.
 
<bugzilla>
=Migrating Add-ons from the Status Bar to the Add-on Bar=
{
 
"product": "Firefox,Toolkit",
The statusbar in Firefox is a [XUL <statusbar> element]. The benefits of this are that developers can add items to it using only overlays, and the DOM, with no specialized APIs. The downside is that add-ons in the statusbar are not customizable by the user, the way that toolbars and toolbar buttons are. In Firefox 4, the statusbar has been replaced with a [XUL <toolbar> element], and renamed the Add-on Bar. The Add-on Bar is hidden by default, and becomes visible when add-ons are installed there. Add-ons that currently add themselves to the statusbar will not work automatically in this new system, and will need to make some changes to their code in order to be visible in Firefox 4.
"whiteboard": "snappy",
 
"changed_after": "1w"
Several migration methods are detailed below.
}
 
</bugzilla>
== Traditional Add-on Development Method ==
 
Here's how to add your add-on to the Add-on bar using the traditional development model. The Add-on bar is a XUL <toolbar> element, so if you've ever made a toolbar or added a toolbar button to Firefox, this will look familiar. An example add-on using this approach is available [http://people.mozilla.com/~dietrich/addonbar-example.xpi here], if you'd like to see it all put together.
 
Your overlay XUL looks something like this now:
 
  <statusbar id="status-bar">
    <hbox id="myBox">
      ...
    </hbox>
  </statusbar>
 
Modify it to look like this:
 
  <toolbarpalette id="BrowserToolbarPalette">
    <toolbaritem id="myAddonItem">
      <hbox id="myBox">
        ...
      </hbox>
    </toolbaritem>
  </toolbarpalette>
 
To make your add-on show up in the Add-on Bar, add the code below to your overlay script, and execute it the first time your add-on runs. This gets you the same behavior and placement that your old statusbar add-on had, while 1) making the placement of your add-on customizable by the user and 2) respecting the user's preference for your add-on's placement and the visibility of the Add-on Bar. Using a pref (and toggling it when this runs) is probably the easiest way to determine first-run.
 
  if (firstRun) {
    let addonBar = document.getElementById("addon-bar");
    let currentSet = addonBar.currentSet;
    if (currentSet.indexOf("myAddonItem") == -1) {
      addonBar.currentSet += ",myAddonItem";
      addonBar.setAttribute("currentset", addonBar.currentSet);
      document.persist("addon-bar", "currentset");
      addonBar.collapsed = false;
    }
  }
 
== Widgets in Firefox Add-on SDK ==
 
The Firefox Add-on SDK, code-named Jetpack, has an API for easily adding items to the Add-on Bar. Example code:
 
  let self = require("self");
  let widgets = require("widget");
  let myWidget = widgets.Widget({
    label: "My Add-on",
    image: self.data.URL("logo.png"),
    onClick: function() {
      // Open a panel, modify the current page, whatnot.
    }
  });
 
The Add-on SDK handles the DOM calls for adding to the toolbar item for your, so you only need to work with JavaScript.
 
If you want to use the Widget API without migrating all your existing code to Jetpack, read about [how to use the SDK APIs in your existing add-on]. While the approach described at that link eases migration, you don't get SDK benefits such as memory tracking, and your add-on not requiring a restart by default.
 
==Resources==
* [https://developer.mozilla.org/en/Creating_toolbar_buttons Creating toolbar buttons tutorial on MDC]
* [https://developer.mozilla.org/en/Custom_Toolbar_Button Custom toolbar button tutorial on MDC]
* [http://forums.mozillazine.org/viewtopic.php?t=220220 Mozillazine thread on positioning toolbar button labels]
* [http://kb.mozillazine.org/Toolbar_customization_-_Firefox Mozillazine page on general toolbar customization]
* [https://developer.mozilla.org/en/XUL/Property/currentSet toolbar.currentSet property] and the toolbar element's [https://developer.mozilla.org/en/XUL/Attribute/currentset currentset attribute]

Revision as of 23:42, 15 March 2012

Snappy bugs changed in the last week.

No results.

0 Total; 0 Open (0%); 0 Resolved (0%); 0 Verified (0%);

Retrieved from "https://wiki.mozilla.org/index.php?title=User:Dietrich/Scratchpad&oldid=408335"