How to use oncommand in options.xul in order to call function at bootstrap.js?

Question

I am trying to call changePassword() method from bootstrap.js file but I cannot figure out how.. Bootstrap.js is located a the root of the project folder and options.xul is in ./chrome/content/

<setting type="control" title="&passwordBtn;">
<button label="&passwordBtn;" oncommand="changePassword();"/>
</setting>

Thanks in advance! :)

Answer 1

First, change your options.xul add an id attribute for later select, it doesn't need oncommand attribute, so we can remove it.

<setting type="control" title="&passwordBtn;">
    <button id="password" label="&passwordBtn;" />
</setting>

Then listen the preferences panel open and add the clicked event listener to the button manually. Below is example bootstrap.js

const log = function() { dump(Array.slice(arguments).join(' ') + '\n'); }

const {classes: Cc, interfaces: Ci} = Components;
const OBS = Cc['@mozilla.org/observer-service;1']
              .getService(Ci.nsIObserverService);

const myAddonId = 'my_addon_id' // same as install.rdf "<em:id>" tag value

let optionObserver = {
    observe: function(subject, topic, data) {
        if (topic !== 'addon-options-displayed' || data !== myAddonId) {
            return;
        }
        let document = subject.QueryInterface(Ci.nsIDOMDocument);
        let button = document.getElementById('password');
        button.addEventListener('command', this.changePassword);
    },
    changePassword: function(event) {
        log('password button clicked!');
        // do your stuff...
    }
}

let install = function(data, reason) {};
let uninstall = function(data, reason) {};

let startup = function(data, reason) {
    OBS.addObserver(optionObserver, 'addon-options-displayed', false);
};

let shutdown = function(data, reason) {
    OBS.removeObserver(optionObserver, 'addon-options-displayed', false);
};