如何在 Firefox Add-on SDK 中同时显示 2 个 sdk/面板？

Question

我知道如何用position:button 显示panel。但是，当我尝试show() 另一个面板时，前一个面板消失了。 我不想禁用自动隐藏。但我想同时显示 2 个面板。

那么如何同时显示两者呢？

代码：

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

Answer 1

插件 SDK 可防止同时打开多个 sdk/panel：
你不能完全按照自己的意愿去做。 sdk/panel API 专门防止一次显示多个 sdk/panel。这是在该配置文件中加载的所有基于附加 SDK 的扩展中一次打开一个 sdk/面板。换句话说，如果其他一些基于附加 SDK 的扩展打开一个面板，你的将关闭。无法使用库存附加 SDK 代码禁用此功能。这在sdk/panel documentation（使用部分最后一段的一部分）中明确说明：

打开一个面板将关闭一个已经打开的面板。

为了更清楚地表明此限制适用于所有 Add-on SDK 扩展，我已将文本更新为：

打开面板将关闭由 Panel() 构造函数创建且已打开的任何面板，即使该面板是由其他基于附加 SDK 的扩展程序打开的。

当您使用Panel() 构造函数创建面板时，会使用对私有函数setupAutoHide(this); 的调用将侦听器附加到面板。在某种程度上，setupAutoHide() 是[本段中的人与编写此答案时代码的永久链接：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.

您应该能够从这段代码中的 cmets 看出，它专门用于防止您想要做的事情（一次显示多个 sdk/面板）。

显示内容的其他方法：
为了提供有关如何实现您对用户界面的期望的详细建议，我们将需要更多信息来说明您希望对这两个 sdk/panels 做什么。

鉴于您没有描述您希望一次打开多个 sdk/面板的原因，我不得不猜测。您可能希望在将另一个 sdk/面板用作sdk/ui/button/toggle 的下拉面板时保持打开状态的一个原因是您将第一个用作信息或对话框的半永久显示。在这种情况下，您应该使用不同的 UI 方法来显示该信息。如何做到这一点有多种可能性，具体取决于您希望 UI 的外观。一种可能性是实现ui/frame。

另一种可能性是使用window/utils 中的openDialog()（或open()）打开一个对话窗口。这些对话窗口是完全独立的窗口，可以根据需要存在。如果需要，它可以被设计成在外观上与 sdk/面板几乎相同。它与当前页面或窗口的耦合程度取决于您所做的编程。

插件 SDK 将 sdk/panels 实现为 XUL popups。 Firefox 对一次显示多个 XUL 弹出窗口没有任何限制。您可以在主 Firefox DOM 中自己创建这些，而不是使用 Panel() 构造函数。

还有其他可能性包括：将您的第一个 sdk/面板作为主窗口 UI 的不同部分或作为内容页面的一部分；或者，下拉 sdk/面板可以实现为实际的下拉菜单，<menupopup>，它可以是实际菜单，也可以使用<panel> 具有任意内容。如果您真的需要，您可以对其进行编码以完全像使用 Panel() 构造函数一样显示。但是，后一种可能性会绕过 Add-on SDK，如果 Firefox 的底层结构发生变化，可能会导致您的插件需要更多的持续维护。

关于如何实现您可能希望您的 UI 在这里涵盖的内容，有太多的可能性。情况尤其如此，因为我们不知道您尝试使用 UI 实现的目标是什么。