{"id":6973,"date":"2014-03-06T13:32:09","date_gmt":"2014-03-06T21:32:09","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=6973"},"modified":"2014-03-12T09:37:30","modified_gmt":"2014-03-12T16:37:30","slug":"australis-for-add-on-developers-2","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2014\/03\/06\/australis-for-add-on-developers-2\/","title":{"rendered":"Australis for Add-on Developers \u2013 Part 2: CustomizableUI"},"content":{"rendered":"

In the previous Australis post<\/a>, I covered what you would need to change in your extension to adapt to the new toolbars in the Australis theme. In this installment I’ll cover a very exciting addition that facilitates the creation of toolbar widgets: the CustomizableUI module<\/strong><\/a>.<\/p>\n

While the size of the module and its docs may seem overwhelming, in reality it’s very easy to use if you just intend to add a button to one of the customizable areas in Firefox. I made a couple of simple extensions to try it out and demonstrate how it works.<\/p>\n

The demos only work on Australis, so to try them out you need Firefox 29 (currently on Aurora<\/a>) or Firefox 30 (Nightly<\/a>).<\/p>\n

1. Hello Demo<\/h3>\n

XPI<\/a>. Code on Github<\/a>.<\/strong><\/p>\n

For the first demo I went with the classic “Hello World” example. I also wanted to make it a restartless extension, and this is where I think CustomizableUI really shines. Creating a restartless add-on that adds a button to the toolbar has never been this easy.<\/p>\n

First you need to import the module, of course:<\/p>\n

Cu.import(\"resource:\/\/\/modules\/CustomizableUI.jsm\");<\/pre>\n
Then you create the widget in your startup process using the create widget<\/a> function:<\/p>\n
CustomizableUI.createWidget(\r\n  { id : \"aus-hello-button\",\r\n    defaultArea : CustomizableUI.AREA_NAVBAR,\r\n    label : \"Hello Button\",\r\n    tooltiptext : \"Hello!\",\r\n    onCommand : function(aEvent) {\r\n      let win = aEvent.target.ownerDocument.defaultView;\r\n\r\n      win.alert(\"Hello!\");\r\n    }\r\n  });<\/pre>\n
The ID of the widget is the same ID that the button will have in the DOM. The default area is where the widget will be added, in this case the main toolbar. The list of possible areas<\/a> can be found in the doc. You’ll usually want either AREA_NAVBAR or AREA_PANEL for the menu panel.<\/p>\n
The command code is straightforward: use the event parameter to get to the browser window and then show a simple alert.<\/p>\n
And then of course you want to clean it up in the shutdown process:<\/p>\n
CustomizableUI.destroyWidget(\"aus-hello-button\");<\/pre>\n
With only this you already have a functional toolbar button add-on. The button can be customized and moved around, and its position will be remembered. It works wherever you put it. But it’s missing all CSS, so it doesn’t have an icon yet (it’s also missing localization, but that can be added with a string bundle).<\/p>\n
For a regular add-on that requires a restart, adding the styles is simple enough. Create a chrome.manifest file, declare a skin and then a style<\/a> that applies to browser.xul:<\/p>\n
style chrome:\/\/browser\/content\/browser.xul chrome:\/\/aus-hello\/skin\/toolbar.css<\/pre>\n
For a restartless add-on this is a little trickier because style manifest declarations aren’t supported. You still need the manifest and the skin, but the style needs to be injected, in this case using the stylesheet service:<\/p>\n
let io =\r\n  Cc[\"@mozilla.org\/network\/io-service;1\"].\r\n    getService(Ci.nsIIOService);\r\n\r\nthis._ss =\r\n  Cc[\"@mozilla.org\/content\/style-sheet-service;1\"].\r\n    getService(Ci.nsIStyleSheetService);\r\nthis._uri = io.newURI(\"chrome:\/\/aus-hello\/skin\/toolbar.css\", null, null);\r\nthis._ss.loadAndRegisterSheet(this._uri, this._ss.USER_SHEET);<\/pre>\n
This loads the stylesheet for all documents, so it’s prudent to limit the styles to the document we want in the CSS file:<\/p>\n
@-moz-document url(\"chrome:\/\/browser\/content\/browser.xul\") {\r\n\/* Code goes here*\/\r\n}<\/pre>\n
And then clean everything up:<\/p>\n
if (this._ss.sheetRegistered(this._uri, this._ss.USER_SHEET)) {\r\n  this._ss.unregisterSheet(this._uri, this._ss.USER_SHEET);\r\n}<\/pre>\n
Note: <\/strong>loading the stylesheet this way is inefficient. The second demo takes a better approach using the loadSheet<\/code> function, but it would have required too much additional code for this example.<\/p>\n
That’s it! With the 16×16 and 32×32 icons as recommended in part 1<\/a>, you should have a functional Hello World add-on.<\/p>\n
2. View Demo<\/h3>\n
XPI<\/a>. Code on Github<\/a>.<\/strong><\/p>\n
Another type of widget you can create is a view<\/em>. This is a button with a popup panel when in the toolbar, and a side panel when in the menu panel. The Bookmarks and History widgets in Australis versions are this type of widget.<\/p>\n
To create the widget, the code is only slightly different:<\/p>\n
CustomizableUI.createWidget(\r\n  { id : \"aus-view-button\",\r\n    type : \"view\",\r\n    viewId : \"aus-view-panel\",\r\n    defaultArea : CustomizableUI.AREA_NAVBAR,\r\n    label : \"Hello Button\",\r\n    tooltiptext : \"Hello!\",\r\n    onViewShowing : function (aEvent) {\r\n      \/\/ initialize code\r\n    },\r\n    onViewHiding : function (aEvent) {\r\n      \/\/ cleanup code\r\n    }\r\n  });<\/pre>\n
The differences are the type (which defaults to button<\/code>), the viewId<\/code> and the onViewShowing<\/code> and onViewHiding<\/code> events.<\/p>\n
viewId<\/code> is the ID of a <panelview><\/code> that must exist in the browser window DOM. This is very easy to do in a regular extension where you can just create an overlay with the view and whatever content you want in it. For a restartless extension you’ll need a window listener and inject the view and its contents into the DOM for all windows. To make things simple, I decided to use a XUL iframe<\/code> as the only child element, so I don’t have to build everything dynamically.<\/p>\n
let panel = doc.createElement(\"panelview\");\r\nlet iframe = doc.createElement(\"iframe\");\r\n\r\npanel.setAttribute(\"id\", \"aus-view-panel\");\r\niframe.setAttribute(\"id\", \"aus-view-iframe\");\r\niframe.setAttribute(\"type\", \"content\");\r\niframe.setAttribute(\"src\", \"chrome:\/\/aus-view\/content\/player.html\");\r\n\r\npanel.appendChild(iframe);\r\ndoc.getElementById(\"PanelUI-multiView\").appendChild(panel);<\/pre>\n
The onViewShowing<\/code> and onViewHiding<\/code> events should be used to set up the view before it appears, and to clean it up after it disappears.<\/p>\n
This demo is meant to detect links to MP3 or OGG files on web pages and use the <audio><\/code> element to play them. So, the code in onViewShowing<\/code> should scan the currently active page for these links and pass the paths of the audio files to the player inside the iframe<\/code>. Should be easy, right?<\/p>\n
There’s a small problem. When the view is shown, the view node is moved from where you put it to a different part of the DOM. This extraction and reinsertion resets the elements inside the panel. On top of that, this happens after<\/em>\u00a0onViewShowing<\/code> is called. So, manipulating the\u00a0iframe<\/code> in\u00a0onViewShowing<\/code> is not going to work because all changes will be reset when the view is actually shown. There are a couple of ways of solving this:<\/p>\n
    \n
  1. Instead of depending on onViewShowing<\/code>, the code inside the\u00a0iframe<\/code> can detect when it is loaded and run the code itself. However, that also means stepping out of that document to obtain the links in the active tab, so it takes a lot of extra code.<\/li>\n
  2. Add a timeout to the\u00a0onViewShowing<\/code> code so it runs slightly later and when the iframe is available for modifications. This is a hacky solution, but also the simplest, so I went with this one since it’s only a demo.<\/li>\n<\/ol>\n
    With that little hack in, the extension works well. You can try it out on Web Archive pages like this one<\/a>.<\/p>\n
    \"Australis<\/a><\/p>\n
    SDK Add-ons<\/h3>\n
    SDK add-ons developers can use this module<\/a>, which encapsulates what CustomizableUI does for the rest.<\/p>\n
    References<\/h3>\n