Firefox 29 (“Australis”) includes significant design and customization improvements, and we’re challenging you to create add-ons that look and feel great in it.

Between March 11 – April 15, 2014, create add-ons that take full advantage of the new design, which opens up new customization opportunities and streamlines the add-on experience in your browser. A panel of judges will pick one winner and two runners-up from each prize category.

All winners will receive Firefox OS phones, and the first-prize winners in each category will also receive a collection of Mozilla gear.

The Categories

• Best overall add-on – an add-on that best makes use of the new Australis features, like the new toolbar widgets and tab appearance.
• Best complete theme – a complete theme that most creatively alters the look and feel of Australis.
• Best bookmark add-on – an innovative bookmarking add-on that works well with the Australis theme.

Add-ons in Australis

In order to create great entries for this contest you will need to know what’s new in Australis. Following is a quick summary of what we’ve been publishing in the Add-ons Blog.

Changes

The toolbars have changed significantly in Australis. The Add-on Bar at the bottom has been removed, and instead there is a new menu panel that extends the toolbar with buttons and widgets. It is activated by clicking on the button at the right end of the main toolbar. All the items in this new menu are customizable and it’s possible to add add-on buttons and widgets to it as well.

The icons in the main toolbar are 18×18 pixels. However, a 1px padding is expected, so the 16×16 pixel icons you should be using for the main toolbar in modern versions of Firefox will work without any changes. Icons are 32×32 pixels in the menu panel and also during customization. So, if you have an add-on that adds a toolbar button to the main toolbar using the usual guidelines of overlaying the button to the palette and then adding it to the toolbar using JS on first run, everything should work the same and you should only change your CSS to something like this:

/* Original CSS */
#my-button {
  list-style-image: url(“chrome://my-extension/skin/icon16.png”);
}

/* Added for Australis support */
#my-button[cui-areatype="menu-panel"],
  toolbarpaletteitem[place="palette"] > #my-button {
  list-style-image: url(“chrome://my-extension/skin/icon32.png”);
}

Note that buttons in the Australis theme have the cui-areatype attribute set when placed in in the UI. The possible values are menu-panel and toolbar. You can use the toolbar value to have different style for the button in Australis and non-Australis themes.

Australis for Add-on Developers: Part 1 contains more details.

New Customization API

Another exciting addition to Australis is the ability to create toolbar widgets using the CustomizableUI module. You will be able to easily create simple buttons and more interesting widgets with very little code, both for restartless and more conventional add-ons. Here’s a sample:

CustomizableUI.createWidget({
    id : "aus-hello-button",
    defaultArea : CustomizableUI.AREA_NAVBAR,
    label : "Hello Button",
    tooltiptext : "Hello!",
    onCommand : function(aEvent) {
      let win = aEvent.target.ownerDocument.defaultView;

      win.alert("Hello!");
    }
});

Australis for Add-on Developers: Part 2 demonstrates how to leverage this API with two demos and plenty of code to play with.

Get Started!

• Get the full details on the contest
• Download Australis on the Aurora Channel
• Add-on Developer Documentation
• Add-on Developer Hub on AMO
• Australis docs for add-on developers:
  • CustomizableUI.jsm
  • Australis and add-on compatibility