XUL prefwindow size problems

I have a Firefox add-on with a <prefwindow> to control the preferences for my add-on. It contains 2 separate <description> tags to provide more info at certain places (see below). I have some JavaScript that I run when the dialog loads to set a CSS max-height and max-width based on the dimensions of the user's screen (I found this necessary because otherwise the dialog would expand horizontally past the edges of the screen just so the one <description> (which has CSS word-wrap: break-word set - Forcing a description widget to wrap) fits on one line).

However, when Firefox (v3.6 and v4.0) displays the prefwindow, it only accounts for the descriptions as if they are one line after setting the max-width and max-height, so there is a scrollbar even though there is room for the dialog to expand vertically (I have overflow: auto set on the topmost vbox just so stuff wouldn't get cut off without a scrollbar).

Basically, what I want is for the contents of the <description> tags to wrap so the dialog isn't longer than the user's screen and then for the dialog to resize horizontally also so there isn't a scrollbar.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%;" sizemode="maximized">
    <prefpane>
        <script type="application/x-javascript"><![CDATA[
        window.addEventListener("DOMContentLoaded", function (event) {
            // Initialize size
            document.documentElement.style.maxWidth = ((screen.availWidth || screen.width) - 100) + "px";
            document.documentElement.style.maxHeight = ((screen.availHeight || screen.height) - 100) + "px";
        }, false);

        function showExample(n) {
            // Not important...
        }
        ]]></script>
        <preferences><!-- ... --></preferences>
        <!-- Just trying everything with this vbox here... -->
        <vbox flex="1" style="overflow: auto; width: 100%; height: 100%;">
            <groupbox>
                <caption label="Inline Reference Links" />
                <description style="word-wrap: break-word;">Inline reference links are 开发者_Go百科the tiny "superscript" numbers that appear inside [special name here] and link to a reference at the bottom. <button oncommand="showExample(1)" label="Show Example" style="vertical-align: middle;" /></description>
                <radiogroup preference="pref_mode">
                    <radio value="0" label="Show all inline reference links by default" />
                    <radio value="1" label="Hide all inline reference links by default" />
                    <radio value="2" label="Only show inline reference links when hovering over containing paragraph" />
                </radiogroup>
                <hbox>
                    <checkbox preference="pref_hideOtherTags" label="Hide other bracketed tags" />
                    <button oncommand="showExample(2)" label="Show Example" style="vertical-align: middle;" />
                </hbox>
                <checkbox preference="pref_useVisibility" label="Make inline reference links invisible instead of removing them*" />
                <description style="word-wrap: break-word; height: auto;">*When the inline reference links are invisible, they cannot be seen, but they still take up space on the page. When we are set to show inline reference links when hovering over the containing paragraph, this option can be useful to prevent shifting when the reference links are shown.</description>
            </groupbox>
        </vbox>
    </prefpane>
</prefwindow>

Here is a screenshot of the prefwindow: http://i.stack.imgur.com/L3JOm.png

Size constraints don't propagate correctly when overflow is involved. Unfortunately the prefwindow and prefpane elements both include overflow so the description will always claim a height of one line and only later will it find out that it needs more height.

A possible workaround might be to remove the overflow on the vbox and then explicitly set the vbox's height to its content height. You need to do this after setting the maximum width, so that the first call to sizeToContent will get the width right; the second will then get the height right.

sizeToContent();
var vbox = document.getElementById('vbox');
vbox.height = vbox.boxObject.height;
sizeToContent();

...

<vbox id="vbox" flex="1">