javascript - How to show 2 sdk/panels at the same time in Firefox Add-on SDK?

Question

I know how to show a panel with position:button. But, when I try to show() an additional panel, the previous panel disappears. I don't want to disable auto hide. But I want to show 2 panels at the same time.

So how do I show both at the same time?

Code:

function handleChange(state) {
    if (state.checked) {
        panelf.show({
            position: {
                bottom: 20
            }
        });
        panel.show({
            position: button
        });
    }
}

Answer 1

The Add-on SDK prevents more than one sdk/panel from being open at a time:
You can not do exactly what you are wanting to do. The sdk/panel API specifically prevents more than one sdk/panel from showing at a time. That is one sdk/panel open at a time across all Add-on SDK based extensions loaded in that profile. In other words, if some other Add-on SDK based extension opens a panel, yours will close. There is no way to disable this using stock Add-on SDK code. This is explicitly stated in the sdk/panel documentation (part of the last paragraph in the Usage section):

Opening a panel will close an already opened panel.

To make it more clear that this restriction is across all Add-on SDK extensions, I have updated the text to be:

Opening a panel will close any panel created by the Panel() constructor that is already open, even if that panel was opened by a different Add-on SDK based extension.

When you create a panel using the Panel() constructor a listener is attached to the panel using a call to a private function, setupAutoHide(this);. In part, the setupAutoHide() is [permanent links for those in this paragraph to the code as it was when this answer was written: Panel(), setupAutoHide(this); setupAutoHide().]:

// Utility function takes `panel` instance and makes sure it will be
// automatically hidden as soon as other panel is shown.
var setupAutoHide = new function() {
  let refs = new WeakMap();

  return function setupAutoHide(panel) {
    // Create system event listener that reacts to any panel showing and
    // hides given `panel` if it's not the one being shown.

As you should be able to tell from the comments in this code, it is specifically designed to prevent what you desire to do (showing more than one sdk/panel at a time).

Alternate methods to show content:
To provide detailed suggestions as to how to accomplish what you desire for your user interface, we are going to need more information as to what you are wanting to do with the two sdk/panels.

Given that you have not described the reason you desire to have more than one sdk/panel open at one time, I have to guess. One reason that you might want to leave an sdk/panel open while using another as a drop-down panel to a sdk/ui/button/toggle is that you are using the first one as a semi-permanent display of information or a dialog. In such case, you should be using a different UI methodology to display that information. There are multiple possibilities of how to do that depending on what you want your UI to look like. One possibility is to implement a ui/frame.

Another possibility is to use openDialog() (or open()) from window/utils to open a dialog window. These dialog windows are completely separate windows which can exist as long as you desire. If desired, it could be styled to be nearly identical in appearance to an sdk/panel. How tightly coupled it is with the current page or window depends on the programming that you do.

The Add-on SDK implements sdk/panels as XUL popups. There is no restriction within Firefox on displaying more than one XUL popup at a time. You could create these yourself within the primary Firefox DOM rather than using the Panel() constructor.

Yet other possibilities include: implementing your first sdk/panel as a different portion of either the main window UI or as part of the content page; alternately, the drop-down sdk/panel could be implemented as a an actual drop-down menu, a <menupopup>, which can either be an actual menu, or have arbitrary content using a <panel>. If you really desired, you could code it to display exactly as if you had used the Panel() constructor. However, those latter possibilities go around the Add-on SDK and will potentially result in your add-on requiring more on-going maintenance if the underlying structure of Firefox is changed.

There are way too many possibilities as to how to implement what you might desire for your UI to cover here. This is particularly the case because we do not know what the goals are of what you are attempting to implement with your UI.