How can a tree change its 'rows' attribute automatically?

Hi,

In my XPI for Firefox, I've got a tree, whole created in Javascript via DOM (not via a data-based view; the only method I customise in the view is setCellText; the rest of view methods just forward to the original view).

I'd like the tree to use the whole height available within its parent container. When the user resizes the window, I'd like the tree to change its height automatically. Can that be done and how?

But it seems that 'rows' attribute only accepts numbers. Is there any way around it? If I have to calculate and update 'rows' attribute on window resize, then please
- what's the window resize event name
- how do I get the height of a tree row? (So I can calculate the value of 'rows')

Thank you in advance.

var tree= document.createElementNS( XUL_NS, 'tree' );
    tree.setAttribute( 'id', 'settingsTree');
    tree.setAttribute( 'editable', ''+(targetFolder===null) );
    tree.setAttribute( 'seltype', 'single' );
    tree.setAttribute( 'hidecolumnpicker', 'true');
    tree.setAttribute( 'hidevscroll', 'false');
    tree.setAttribute( 'class', 'tree');
    tree.setAttribute( 'onblur', 'onTreeBlur()' );
    tree.setAttribute( 'flex', '1');
    tree.setAttribute( 'rows', '25');
    
    var settingsBox= document.getElementById('SeSettingsBox'); // This is a vbox in my tree.xul file
    settingsBox.appendChild( tree );
    
tree.xul:

<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml">
<vbox id="SeSettingsBox"></vbox>
</window>