XUL prefwindow大小问题

Question

我有一个带有<prefwindow>的Firefox插件来控制我的插件的首选项。 它包含2个独立的<description>标签，以便在某些地方提供更多信息（见下文）。 我在对话框加载时运行了一些JavaScript，根据用户屏幕的尺寸设置CSS max-height和max-width （我发现这是必要的，因为否则对话框将水平扩展超过屏幕边缘一个<description> （其中包含CSS word-wrap: break-word set - 强制描述小部件包装 ）适合一行）。

但是，当Firefox（v3.6和v4.0）显示prefwindow时，它只会将描述视为设置max-width和max-height后的一行，所以即使有空间也有滚动条对于垂直扩展的对话框（我有overflow: auto设置在最顶层的vbox上，所以如果没有滚动条，东西就不会被切断）。

基本上，我想要的是<description>标签的内容包装，因此对话框不长于用户的屏幕，然后对话框水平调整大小，所以没有滚动条。

<?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 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>

这是prefwindow的截图： http ：//i.stack.imgur.com/L3JOm.png

Answer 1

涉及溢出时，大小约束不会正确传播。 不幸的是，prefwindow和prefpane元素都包含溢出，因此描述将始终声明一行的高度，并且稍后才会发现它需要更多高度。

可能的解决方法可能是删除vbox上的溢出，然后将vbox的高度显式设置为其内容高度。 您需要在设置最大宽度后执行此操作，以便第一次调用sizeToContent将获得正确的宽度; 然后第二个将获得正确的高度。

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

...

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