Create Add-ons for Australis to Win a Firefox OS Phone

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!

About Jorge Villalobos

Jorge is the Add-ons Developer Relations Lead for Mozilla.

More articles by Jorge Villalobos…


6 comments

  1. Ya

    Is it possible to attach a panel to the new buttons using Add-on SDK or will it be soon?

    March 11th, 2014 at 12:29

    1. Jorge Villalobos

      Yes, SDK support should land very soon, before the move to beta next week.

      March 11th, 2014 at 12:33

    2. Jeff Griffiths

      Actually SDK support has already landed in Nightly for two types of buttons, ‘Action’ and Toggle’; you can see documentation here:

      https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action

      https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle

      As well, we’ve introduced a toolbar api:

      https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_toolbar

      We are going to ‘uplift’ these changes to Firefox 29 over the next few days, in time for them to make Beta. The apis are stable, feel free to use them in your add-on.

      March 12th, 2014 at 19:40

  2. Hugo

    What are the technologies used when doing Addon. Can we make addon in pure CSS+HTML+JS or do we have to use firefox specific UI language (XUL) and a specific language ?

    March 12th, 2014 at 04:43

  3. Jeff Griffiths

    Actually SDK support has already landed in Nightly for two types of buttons, ‘Action’ and Toggle’; you can see documentation here:

    https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action

    https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle

    As well, we’ve introduced a toolbar api:

    https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_toolbar

    We are going to ‘uplift’ these changes to Firefox 29 over the next few days, in time for them to make Beta. The apis are stable, feel free to use them in your add-on.

    March 12th, 2014 at 19:43

  4. SgtBrutalisk

    Addon ecosystem for Firefox has died a quiet death due to the rapid release schedule and this one contest won’t bring it back to life.

    March 26th, 2014 at 11:43

Comments are closed for this article.