How to create a tabpanel (xul) in Javascript

Question

i dev a Firefox extension and i try to add a tabpanel in a tabbox (xul).

The tabbox:

<tabbox id="tbDashboard" selectedIndex="0" >
        <tabs><!-- list of tabs -->
            <tab label="Overview"/> <!-- default tab -->
            <tab label="test"/>
        </tabs>

        <tabpanels><!-- list of contents -->
            <tabpanel ><!-- default tab's content -->
                <box orient="horizontal" flex="1">
                    <description style="font-size: 24pt;">overview</description>
                </box>
            </tabpanel>
            <tabpanel ><!-- test tab's content -->
                <box orient="horizontal" flex="1">
                    <description style="font-size: 24pt;">test</description>
                </box>
            </tabpanel>
        </tabpanel>
    </tabpanels>
</tabbox>

I can add a new tab in JS with:

document.getElementById("tbDashboard")["tabs"].appendItem("popo");

The tab is appears but the tab page is empty, i tried to:

1. use appendItem with a second parameter => don't work
2. document.getElementById("tbDashboard")["tabpanels"].appendItem(...) => fail

Someone have an idea to create the tab page (a tabpanel)??

thx

Answer 1

tabs.appendItem() is merely a convenient helper to create a tab element. It is essentially the same as:

var tabbox = document.getElementById("tbDashboard");
var tab = document.createElement("tab");
tab.textContent = "popo";
tabbox.tabs.appendChild(tab);

You can create and add a tabpanel element in the same way (here with a text box as only contents):

var panel = document.createElement("tabpanel");
panel.appendChild(document.createElement("textbox"));
tabbox.tabpanels.appendChild(panel);

For a tutorial on DOM manipulation see https://developer.mozilla.org/en/XUL_Tutorial/Modifying_a_XUL_Interface .

Answer 2

You'll need to create the panel using the DOM API and then append it to your XUL document, eg:

let newPanel = document.createElement("tabpanel");
let panelContent = document.createElement("hbox");
// Add more content here
newPanel.appendChild(panelContent);
document.getElementById("tbDashboard").tabPanels.appendChild(newPanel);