firefox-addon - XUL prefwindow 大小问题

Question

我有一个带有 <prefwindow> 的 Firefox 附加组件控制我的附加组件的首选项。它包含 2 个独立的 <description>标签以在某些地方提供更多信息(见下文)。我有一些 JavaScript 在加载对话框时运行以设置 CSS max-height和 max-width基于用户屏幕的尺寸(我发现这是必要的，因为否则对话框会水平扩展超过屏幕的边缘，所以 <description> (具有 CSS word-wrap: break-word 设置 - Forcing a description widget to wrap )适合一行).

但是，当 Firefox(v3.6 和 v4.0)显示 prefwindow 时，在设置 max-width 后，它只将描述视为一行。和 max-height , 因此即使对话框有垂直扩展的空间，也有一个滚动条(我在最顶部的 vbox 上设置了 overflow: auto，这样如果没有滚动条，内容就不会被切断)。

基本上，我想要的是 <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">