Custom widget problem on 2nd Firefox window

[garywill]

I'm having problems with CustomizableUI.createWidget({ type: "custom" } ) .

When I was using Firefox 128 with xiaoxiaoflood's uc loader, it worked fine.
Recently I upgraded to Firefox 140 and migrated to your uc loader.

I found this code has problem:

console.debug("cusotom_widget.uc.js");

function funcA() {
    console.log('funcA()');
    console.log('123');
}
function funcB() {
    console.log('funcB()');
    console.log('456');
}
function funcC() {
    console.log('funcC()');
    console.log('789');
}

ChromeUtils.importESModule("resource:///modules/CustomizableUI.sys.mjs")

CustomizableUI.createWidget({
    type: "custom",
    id: "abcd", // button id
    defaultArea: CustomizableUI.AREA_NAVBAR,
    removable: true,
    onBuild: function (doc) {
        let btn = doc.createXULElement('toolbarbutton');
        btn.id = 'abcd';
        btn.label = 'btn abcd';
        btn.tooltipText = 'btn abcd';
        btn.type = 'menu';
        btn.style.width = '20px';
        btn.style.height = '20px';
        btn.onclick = funcA;

        let mp = doc.createXULElement("menupopup");
        mp.addEventListener('popupshowing', funcB);

        let menuitem = doc.createXULElement("menuitem");
        menuitem.label = "menu item text";
        menuitem.onclick = funcC;

        mp.appendChild(menuitem);

        btn.appendChild(mp);

        return btn;
    },
});

Steps to reproduce:

1. Run Firefox. Open Browser Toolbox (ctrl+shift+alt+I)
2. Click the custom widget created by above uc.js code. Menu pops up. Click the menu item. funcA() ~ funcC() logs can appear in console. Events can trigger.
3. Close Browser Toolbox
4. Firefox Menu -> New Window. Open a 2nd window.
5. Close the 1st window.
6. Open Browser Toolbox from the 2nd window
7. Try step 2 again. Now no logs can appear. Events funcA() ~ funcC() can't trigger

It seems that when the 1st window is closed, events or functions funcA() ~ funcC() are destroyed. (If keep 2 Firefox main windows open, events can trigget on both windows)

I need to use type: custom when creating custom widget, so I can't use onCommand like general widget.

Any solutions?

[MrOtherGuy]

I'm not entirely sure what prevents the button onclick handler from running in this case, but yes it's probably something to do with the function belonging to the particular window.

However, calling CustomizableUI.createWidget() in window scoped scripts (which happens if you simply created a .uc.js file) is somewhat weird, because the first call already "defines" the widget, which Firefox will then create and use in all existing and future windows as well. Thus, you might rather want to run that script as "system module" - simply change the file extension to .sys.mjs. Doing so will make the loader run it once on startup, and it will remain "live" for the whole duration that the Firefox process exists, which also happens to solve the problem you described.

Note that system module scripts do not have reference to any particular window, and thus properties of the window global - such as CustomizableUI are also not available. So you need to actually import CustomizableUI, otherwise you'll see an error like CustomizableUI is not defined:

...
function funcC() {
    console.log('funcC()');
    console.log('789');
}

const { CustomizableUI } = ChromeUtils.importESModule("resource:///modules/CustomizableUI.sys.mjs");

CustomizableUI.createWidget({
// rest of your code