<prefwindow> sizing itself to the wrong tab when browser.preferences.animateFadeIn == true - firefox-addon

Question

I've run into (yet another) bug with the preferences screen of my extension. When browser.preferences.animateFadeIn is set to true (as it is on Mac), the window size should change to fit the content exactly on switching panes. Instead it is sized to the largest pane when the window is opened, but it changes by as much as it should when switching panes. If that's not too clear, here is a screencast: http://files.droplr.com/files/22337488/4IVT.ScreenFlow.mov
Even after removing all <script> elements, and most of the panes, the error still happens:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css" type="text/css"?>
<?xml-stylesheet href="chrome://nextplease/skin/nextpleasePreferences.css" type="text/css"?>
<!DOCTYPE window SYSTEM "chrome://nextplease/locale/nextplease.dtd">
<prefwindow id="nextpleaseprefs" title="&options.title;"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<prefpane id="nextplease.images" label="&options.images.title;" image="chrome://nextplease/skin/Image.png">
<preferences>
<preference id="nextimages" name="nextplease.nextimage.expr0" type="unichar"/>
<preference id="previmages" name="nextplease.previmage.expr0" type="unichar"/>
<preference id="firstimages" name="nextplease.firstimage.expr0" type="unichar"/>
<preference id="lastimages" name="nextplease.lastimage.expr0" type="unichar"/>
</preferences>
<hbox flex="1">
<listbox width="80" onselect="nextplease.selectedPanelChanged(this);">
<listitem label="&options.next;" selected="true"/>
<listitem label="&options.prev;"/>
<listitem label="&options.first;"/>
<listitem label="&options.last;"/>
</listbox>
<separator class="groove" orient="vertical" style="opacity: 0.5; margin-top: 5px; margin-bottom: 5px;"/>
<vbox flex="1">
<deck flex="1">
<listbox id="Next_Image_list" seltype="multiple" flex="1"
onkeypress="nextplease.removeSelectedOnDelete(event, this);" onselect="nextplease.enableDisableRemoveButton(this);" onchange="nextplease.syncListboxToPref(this);"/>
<listbox id="Prev_Image_list" seltype="multiple" flex="1"
onkeypress="nextplease.removeSelectedOnDelete(event, this);" onselect="nextplease.enableDisableRemoveButton(this);" onchange="nextplease.syncListboxToPref(this);"/>
<listbox id="First_Image_list" seltype="multiple" flex="1"
onkeypress="nextplease.removeSelectedOnDelete(event, this);" onselect="nextplease.enableDisableRemoveButton(this);" onchange="nextplease.syncListboxToPref(this);"/>
<listbox id="Last_Image_list" seltype="multiple" flex="1"
onkeypress="nextplease.removeSelectedOnDelete(event, this);" onselect="nextplease.enableDisableRemoveButton(this);" onchange="nextplease.syncListboxToPref(this);"/>
</deck>
<hbox id="images_dummy_texts" collapsed="true">
<textbox id="Next_Image_dummy_text" preference="nextimages" onchange="nextplease.syncPrefToListbox(this);"/>
<textbox id="Prev_Image_dummy_text" preference="previmages" onchange="nextplease.syncPrefToListbox(this);"/>
<textbox id="First_Image_dummy_text" preference="firstimages" onchange="nextplease.syncPrefToListbox(this);"/>
<textbox id="Last_Image_dummy_text" preference="lastimages" onchange="nextplease.syncPrefToListbox(this);"/>
</hbox>
<separator class="thin"/>
<hbox align="stretch">
<textbox type="text" maxlength="256" onkeypress="nextplease.addOnReturn(event, this);"/>
<button label="&options.add;" style="margin-left: 0"
oncommand="nextplease.addToListbox(this);"/>
<spacer flex="1" minwidth="15"/>
<button label="&options.removeSelected;" disabled="true" style="margin-right: 2px"
oncommand="nextplease.removeSelectedFromListbox(this);"/>
<spacer flex="1" minwidth="40"/>
<button label="&options.restoreDefault;"
oncommand="nextplease.restoreDefaultListbox(this);"/>
</hbox>
</vbox>
</hbox>
</prefpane>
<prefpane id="nextplease.debug" label="&options.debug.title;" image="chrome://nextplease/skin/Settings.png">
<preferences>
<preference id="log" name="nextplease.log" type="bool"/>
<preference id="log.detailed" name="nextplease.log.detailed" type="bool"/>
<preference id="log.file" name="nextplease.log.file" type="bool"/>
<preference id="highlight" name="nextplease.highlight" type="bool"/>
<preference id="highlight.color" name="nextplease.highlight.color" type="string"/>
<preference id="highlight.prefetched" name="nextplease.highlight.prefetched" type="bool"/>
<preference id="highlight.prefetched.color" name="nextplease.highlight.prefetched.color" type="string"/>
</preferences>
<vbox>
<checkbox label="&options.log.normal;" preference="log"/>
<checkbox label="&options.log.detailed;" preference="log.detailed"/>
<!--<checkbox id="nextplease.log.file" label="&options.log.file;" preference="log.file/>-->
<separator/>
<hbox>
<checkbox label="&options.highlight;"
preference="highlight"
oncommand="nextplease.enableDisableHighlightColorPickers();"/>
<colorpicker type="button" preference="highlight.color"/>
</hbox>
<hbox>
<checkbox label="&options.highlight.prefetched;"
preference="highlight.prefetched"
oncommand="nextplease.enableDisableHighlightColorPickers();"/>
<colorpicker type="button" preference="highlight.prefetched.color"/>
</hbox>
</vbox>
</prefpane>
</prefwindow>

Answer 1

Yes, I'd agree that it's a bug. When the first pane loads, the prefwindow sizes itself to its content. In your case, this includes several "background" panes. Unfortunately the code to detect this gets bypassed in the animating case. The current code looks something like this:
if (animation) {
if (switching)
animate();
} else {
if (panes > 1)
fixHeight();
}
It should instead look something like this:
if (animation && switching)
animate();
else if (panes > 1)
fixHeight();
This would fix the height of the first pane even when animation was enabled. (If there is only one pane then there is nothing to do of course.)