Yesterday Australis was released to the public with Firefox 29. Australis introduces panelview elements which are used for all the default buttons with panels. The difference between a panelview and a panel essentially are, that the panelview will open as a subview when its anchor (read: button) is in the menupanel.
Mozilla’s Add-on SDK doesn’t offer any way at this point to create such a panelview, it only supports panels. So I wrote a module to create panelviews. My module can’t replace the panel module from the SDK yet, as it can not display frames as its content. Instead it currently only allows you to add buttons and separators, so you can replace what previously were popup-menus, which would open from a button, with a fancy new panelview.
var { PanelView } = require("panelview");
PanelView({
id: "demo-panelview",
title: "Demo",
content: [
{
type: "button",
label: "Test Button",
onClick: function() {
console.info("Hello World!");
}
}
]
});
There are some additional benefits to a panelview: a panelview has a header and optionally a footer (non-SDK panels can have a footer too). The header is only displayed when the panelview is opened in the menu panel, so you know what it is. The footer allows you to add a highlighted action. In Firefox it is mainly used to open a complete view of what the menu summarizes, like the library window.
The module allows you to create special buttons too, like checkboxes or radio items, though I’m not sure you can define radio groups with the current implementation. Of course you can also add an icon and a click listener to your button.
{
type: "button",
actionType: "checkbox",
label: "I like trains",
onClick: function(event) {
// event is the event object from the onCommand event of the button
console.info("So you " + event.target.checked ? " " : "don't " + "like trains");
}
},
{
type: "separator"
},
{
type: "button",
icon: "./disabledButton.png",
disabled: true,
onClick: () => console.info("You shouldn't see this")
}
However it is currently not possible to modify the contents after the creation of the PanelView. I do plan on allowing that in the future, I’ll possibly even add support for frames.
It’s also worth mentioning, that you currently have to modify SDK buttons to work properly with the PaneView module as anchor. The buttons close the menu panel on click by default, which has to be changed. The module offers you an easy way to do so, however it currently isn’t working properly with windows opened after the fix is applied.
// open panelview anchored to the button when the button is clicked
button.on("click", () => panelview.open(button));
// patch the button so it doesn't close the menu panel when clicked
require("panelview/workaround").applyButtonFix(button);
The PanelView SDK Module is licensed under the MPL 2.0 and is available for download on GitHub. There is exact documentation of the API included in the module in the docs folder.
I want to note that there is not a lot of documentation apart from Firefox’s code on how to use panelviews. So this module might misbehave or do strange things. I have 52 unit tests, making sure everything works as intended. If you happen to come across bugs, please report them. If you have improvements, please feel free to post pull requests!