{"id":7033,"date":"2014-03-13T20:49:22","date_gmt":"2014-03-14T03:49:22","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=7033"},"modified":"2014-03-18T14:03:58","modified_gmt":"2014-03-18T21:03:58","slug":"new-add-on-sdk-australis-ui-features-in-firefox-29","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/","title":{"rendered":"New Add-on SDK Australis UI features in Firefox 29"},"content":{"rendered":"

Update: the ability to attach a panel to a button, and the ability to include buttons in toolbars, are not included in Firefox 29 (the current Beta release). Both these features are in Firefox 30 (the current Aurora release). Note that it is still possible to add frames to toolbars in Firefox 29.<\/strong><\/p>\n\n

With Australis entering Beta, I’m pleased to introduce four new APIs for building your add-on’s user interface: the action button<\/a>, the toggle button<\/a>, the toolbar<\/a>, and the frame<\/a>.<\/p>\n

Buttons, buttons everywhere<\/h3>\n

First up, we have two APIs for adding buttons to Firefox: action buttons<\/strong> and toggle buttons<\/strong>.<\/p>\n

You give action buttons an icon, a label, and a click handler:<\/p>\n

var ui = require(\"sdk\/ui\");\r\n\r\nvar action_button = ui.ActionButton({\r\n\u00a0 id: \"my-button\",\r\n\u00a0 label: \"Action Button!\",\r\n\u00a0 icon: \".\/icon.png\",\r\n\u00a0 onClick: function(state) {\r\n\u00a0\u00a0\u00a0 console.log(\"You clicked '\" + state.label + \"'\");\r\n\u00a0 }\r\n});<\/pre>\n
Unless you add them to a toolbar of your own, they appear in the toolbar at the top right of the browser window:<\/p>\n
\"action-button-toolbar\"<\/a><\/p>\n
Toggle buttons are just the same, except they’re meant to represent an on\/off state, like a checkbox. So they have a “checked” property which is toggled when the user clicks the button, and the icon gets a “pressed” look when the button is checked:<\/p>\n
var ui = require(\"sdk\/ui\");\r\n\r\nvar toggle_button = ui.ToggleButton({\r\n  id: \"my-button\",\r\n  label: \"my button\",\r\n  icon: \".\/icon.png\",\r\n  onChange: function(state) {\r\n    console.log(state.label + \" checked state: \" + state.checked);\r\n  }\r\n});<\/pre>\n
You can also attach panels to toggle buttons<\/a>, by passing the button into the panel’s constructor or its show()<\/code> method.<\/p>\n
\"panel-attach\"<\/a><\/p>\n
Toolbars and frames<\/h3>\n
The toolbar API lets you create more complex persistent user interfaces. You can add buttons to a toolbar, and can also add frames, which are essentially iframes with message passing between page scripts and your main add-on code. You create a frame by specifying the local HTML content to load into it.<\/p>\n
Here’s an example that defines a toolbar with a single frame and three action buttons:<\/p>\n
var ui = require('sdk\/ui');\r\n\r\nvar previous = ui.ActionButton({\r\n\u00a0 id: \"previous\",\r\n\u00a0 label: \"previous\",\r\n\u00a0 icon: \".\/icons\/16-back.png\"\r\n});\r\n\r\nvar next = ui.ActionButton({\r\n\u00a0 id: \"next\",\r\n\u00a0 label: \"next\",\r\n\u00a0 icon: \".\/icons\/16-next.png\"\r\n});\r\n\r\nvar play = ui.ActionButton({\r\n\u00a0 id: \"play\",\r\n\u00a0 label: \"play\",\r\n\u00a0 icon: \".\/icons\/16-play.png\"\r\n});\r\n\r\nvar frame = ui.Frame({\r\n\u00a0 url: \".\/frame-player.html\"\r\n});\r\n\r\nvar toolbar = ui.Toolbar({\r\n\u00a0 title: \"Player\",\r\n\u00a0 items: [previous, next, play, frame]\r\n});<\/pre>\n
Toolbars occupy a complete strip of the browser window, just above the content window:<\/p>\n
\"toolbar2\"<\/a><\/p>\n
Learning more<\/h3>\n
There’s full reference documentation on all these APIs on MDN<\/a>, and I’ve created an example add-on<\/a> to check out.<\/p>\n","protected":false},"excerpt":{"rendered":"
Update: the ability to attach a panel to a button, and the ability to include buttons in toolbars, are not included in Firefox 29 (the current Beta release). Both these … Read more<\/a><\/p>\n","protected":false},"author":316,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,295,121,588,742],"tags":[],"yoast_head":"\nNew Add-on SDK Australis UI features in Firefox 29  - Mozilla Add-ons Community Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeff Griffiths\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/\",\"name\":\"New Add-on SDK Australis UI features in Firefox 29 - Mozilla Add-ons Community Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2014\/03\/action-button-toolbar.png\",\"datePublished\":\"2014-03-14T03:49:22+00:00\",\"dateModified\":\"2014-03-18T21:03:58+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/e2f4c71eb45392ea29162432c3f1d433\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/#primaryimage\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/files\/2014\/03\/action-button-toolbar.png\",\"contentUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2014\/03\/action-button-toolbar.png\",\"width\":381,\"height\":201},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/addons\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New Add-on SDK Australis UI features in Firefox 29\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/\",\"name\":\"Mozilla Add-ons Community Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/e2f4c71eb45392ea29162432c3f1d433\",\"name\":\"Jeff Griffiths\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b07ae75dd1a5414bf30d7f773ccfc894?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b07ae75dd1a5414bf30d7f773ccfc894?s=96&d=mm&r=g\",\"caption\":\"Jeff Griffiths\"},\"description\":\"Jeff is Product Manager for the Firefox Developer Tools and occasional Open Web hacker, based in Vancouver, BC.\",\"sameAs\":[\"http:\/\/canuckistani.ca\/\",\"https:\/\/x.com\/canuckistani\"],\"url\":\"https:\/\/blog.mozilla.org\/addons\/author\/jgriffithsmozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"New Add-on SDK Australis UI features in Firefox 29  - Mozilla Add-ons Community Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/","twitter_misc":{"Written by":"Jeff Griffiths","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/","url":"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/","name":"New Add-on SDK Australis UI features in Firefox 29 - Mozilla Add-ons Community Blog","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/addons\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2014\/03\/action-button-toolbar.png","datePublished":"2014-03-14T03:49:22+00:00","dateModified":"2014-03-18T21:03:58+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/e2f4c71eb45392ea29162432c3f1d433"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/#primaryimage","url":"https:\/\/blog.mozilla.org\/addons\/files\/2014\/03\/action-button-toolbar.png","contentUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2014\/03\/action-button-toolbar.png","width":381,"height":201},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/addons\/2014\/03\/13\/new-add-on-sdk-australis-ui-features-in-firefox-29\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/addons\/"},{"@type":"ListItem","position":2,"name":"New Add-on SDK Australis UI features in Firefox 29"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/addons\/#website","url":"https:\/\/blog.mozilla.org\/addons\/","name":"Mozilla Add-ons Community Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/e2f4c71eb45392ea29162432c3f1d433","name":"Jeff Griffiths","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b07ae75dd1a5414bf30d7f773ccfc894?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b07ae75dd1a5414bf30d7f773ccfc894?s=96&d=mm&r=g","caption":"Jeff Griffiths"},"description":"Jeff is Product Manager for the Firefox Developer Tools and occasional Open Web hacker, based in Vancouver, BC.","sameAs":["http:\/\/canuckistani.ca\/","https:\/\/x.com\/canuckistani"],"url":"https:\/\/blog.mozilla.org\/addons\/author\/jgriffithsmozilla-com\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/7033"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/users\/316"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/comments?post=7033"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/7033\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media?parent=7033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/categories?post=7033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/tags?post=7033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}