XUL problèmes de taille prefwindow

Question

J'ai un add-on Firefox avec un <prefwindow> pour contrôler les préférences de mon add-on. Il contient 2 balises <description> distinctes pour fournir plus d'informations à certains endroits (voir ci-dessous). J'ai un peu de JavaScript que je cours lorsque les charges de dialogue pour définir un CSS max-height et max-width en fonction des dimensions de l'écran de l'utilisateur (je trouve cela nécessaire, car sinon le dialogue se développerait horizontalement au-delà des bords de l'écran juste pour que celui <description> (qui a mis en CSS word-wrap: break-word-Forcing a description widget to wrap) s'inscrit sur une ligne). Cependant, lorsque Firefox (v3.6 et v4.0) affiche la préfwindow, il ne prend en compte que les descriptions comme s'il s'agissait d'une ligne après avoir défini les max-width et max-height, il y a donc une barre de défilement même s'il y a de la place pour la boîte de dialogue d'étendre verticalement (je overflow: auto ensemble sur la plus haute Vbox tellement des choses ne se couper sans une barre de défilement). Fondamentalement, ce que je veux, c'est que le contenu des balises <description> s'enroule de sorte que la boîte de dialogue ne soit pas plus longue que l'écran de l'utilisateur, puis que la boîte de dialogue soit également redimensionnée horizontalement pour qu'il n'y ait pas de barre de défilement.

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

Voici une capture d'écran du prefwindow: http://i.stack.imgur.com/L3JOm.png

Answer 1

contraintes de taille ne se propagent pas correctement lorsque le débordement est impliqué. Malheureusement, les prefwindow et les éléments prefpane comprennent tous deux trop-plein de sorte que la description d'une hauteur toujours prétendre d'une ligne et que plus tard il va savoir qu'il a besoin de plus hauteur.

Une solution possible pourrait être d'éliminer le trop-plein sur la Vbox puis définir explicitement la hauteur de la vbox à sa hauteur de contenu. Vous devez le faire après avoir défini la largeur maximale, de sorte que le premier appel à sizeToContent obtiendra la largeur correcte; la seconde aura alors la hauteur correcte.

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

...

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