Set resize of XUL panel to auto

Question

I am developing an add on for Firefox on the Addon SDK (v.1.11).

My addon uses a toolbar button to display a XUL panel. This panel contains buttons that dynamically (using jQuery's slideToggle(500)) expand / collapse divs, modifying the overall dimensions of the panel.

Problem

The resizing is done smoothly, and the containing HTML elements are resized automatically since their height/width is set to 'auto'. However, the panel itself does not take height/width 'auto' values, only integers. This forces me to manually call a function to resize the panel when a collapse/expand motion has finished. This creates a very unpleasant effect. Is there a way to allow the panel to resize to its content automatically?

Bryan Clark Bryan Clark · Accepted Answer · 2012-12-03T20:32:32

The system isn't ideal right now so I've been connecting the content and panel via a resize port event that handles the auto-resize of the panel. Here's how it works.

In your Panel or main.js code listen for resize events.

Panel.port.on("resize", function (sizes) {
  Panel.resize(sizes.width, sizes.height);
});

Then in your Content Panel code use something like the following (when the DOM is ready):

$(window).bind('resize', function () {
   self.port.emit("resize", { "width" :  $("body").width(),
                              "height" : $("body").height() });
});

This will send a resize event through the panel ports system every time you content window size changes from an expand or collapse.

(update)

If you're not getting a $(window).resize() event from your DOM then you'll have to hook something up more manual to your slideToggle function. Try hooking up a callback function to every slideToggle call you make. Here's an example:

function emitResize() {
       self.port.emit("resize", { "width" :  $("body").width(),
                                  "height" : $("body").height() });

}

$('#yourid').slideToggle('fast', emitResize);

This will trigger the resize event after every slideToggle animation when the size of your page has finished changign. You might want to alter the $("body").width() and $("body").height() calls to use a containing div if you've set a static width or height for your document.

Set resize of XUL panel to auto

1 Answers