XUL 预窗口大小问题

Question

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

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

基本上，我想要的是 标签的内容换行，这样对话框就不会比用户的屏幕长，然后对话框也可以水平调整大小，这样就没有一个滚动条。

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

以下是预窗口的屏幕截图： https://i.sstatic.net/L3JOm.png

Answer 1

当涉及溢出时，大小约束无法正确传播。不幸的是 prefwindow 和 prefpane 元素都包含溢出，因此描述总是声称一行的高度，直到后来才发现它需要更多的高度。

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

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

...

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