Firefox Addon - UI Creation

Question

I wanted to create a firefox add-on, which will display a form to user.

I am started with SDK isntallaion and documentation. I am able to create a toggle button which will open a panel to user.

var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require('sdk/panel');
var self = require('sdk/self');

var button = ToggleButton({
    id: 'btn-sc',
    label: 'Test Addon',
    icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onChange: handleChange
});

var panel = panels.Panel({  
    contentURL : self.data.url("./panel.html"),
    onHide : handleHide
});

function handleChange(state){
    if(state.checked){
        panel.show({
            position: button
        });
    }
}

function handleHide(){
    button.state('window', {checked:false});    
}

How do I add more buttons and textbox to this panel?

Answer 1

Create them with HTML in panel.html. If you don't have a panel.html file yet, place it in the data folder. Style with CSS, listen for clicks with JS. It's just a normal webpage.