Firefox extension popup won't resize
<p>I'm working on porting an extension from Chrome to Firefox. The popup has several different sized elements which can be shown. The issue that I'm running into is when the elements are changed or the <code>body</code> is resized the 'window' that the popup is displayed in does not resize. </p>

<p>This issue doesn't seem to exist in chrome, does anyone know what I'm doing wrong or is this a bug in Firefox? I've included the code which changes the size of the body below, this works in chrome, but does not seem to work in Firefox.</p>

<pre><code>$('body').ready(function(){
  $('body').animate({
    'width':500,
    'height':500
  },500); 
});
</code></pre>

<p>I've also tried this with <code>$('body').css()</code> in case <code>animate()</code> was the issue, neither work.</p>

<p>Additionally, if I add a background to the <code>body</code> and shrink it, then the background can be seen changing size without the containing window changing size.</p>

<p><strong>Edit:</strong>
Adding more information to clarify the issue</p>

<p>The extension is a WebExtension add-on (<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions" rel="noreferrer">https://developer.mozilla.org/en-US/Add-ons/WebExtensions</a>)</p>

<h1>manifest.json</h1>

<pre><code>{
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "popup.htm"
  },
  "description": "Example extension",
  "icons": {
    "128": "example.png"
  },
  "name": "Example Extension",
  "version": "1",
  "applications":{
    "gecko":{
      "id":"example@example.com"
    }
  }
}
</code></pre>

<h1>popup.htm</h1>

<pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
    &lt;script type=text/javascript src="js/jquery.js"&gt;&lt;/script&gt;
    &lt;script type=text/javascript src="js/popup.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;style&gt;
body{
  width:200px;
  height:200px;

  border:1px solid black;
}
&lt;/style&gt;
&lt;body&gt;
  &lt;button id=reset type=button&gt;200x200px&lt;/button&gt;
  &lt;button id=shrink type=button&gt;100x100px&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<h1>js/popup.js</h1>

<pre class="lang-javascript prettyprint-override"><code>$('body').ready(function (){
  $('#reset').bind('click',function(){
    $('body').css({
      width:200,
      height:200
    });
  });
  $('#shrink').bind('click',function(){
    $('body').css({
      width:100,
      height:100
    });
  });
});
</code></pre>

<p>When the above extension is loaded, the popup shows correctly with its initial size (200x200). However, when the body is resized, the popup's size is not updated. This same extension works as expected (popup resizes) within Chrome.</p>