How to smoothly open panes across tabs in Firefox extension?

Question

Our Firefox extension displays the top 25 Bing results in a side pane whenever someone searches from Google. The results are scrubbed for duplicates.

The side pane is closed by default. Only when someone views a Google results page does the side pane open. The side pane automatically closes again when someone opens a non-Google page.

Unfortunately, the opening and closing of the pane is clunky. The side pane is implemented as a vbox, and we set its collapsed property to "true" or "false" depending on the URL.

Steps to reproduce:

1) Download the extension: https://addons.mozilla.org/en-US/firefox/addon/66587.

2) Search for "shoes" from Google.com or from the Firefox search bar.

3) Click one of the search results displayed in the Panabee side pane. This opens the result in a new tab.

4) Click back and forth between the two tabs. The opening/closing of the pane is clumsy.

Any suggestions on how to smooth the opening/closing of the pane? Should we use something besides the collapsed property? We tinkered with the hidden property, but it was no smoother.

Answer 1

If you write the add on using Jetpack, it automatically comes with jquery. Since you are probably doing it sans Jetpack, I would include jquery with the add on and use the timing effects built in, such as animate() or toggle(). Firefox uses XUL, so you can use any javascript framework to script things like the sidepane, since they are all part of the DOM.