firefox - 在 Firefox 中创建面板

Question

在我的 xul 文件中:

<!DOCTYPE overlay >
<overlay id="custombutton-overlay"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script src="browserOverlay.js"/>

<!-- Firefox -->
<toolbarpalette id="BrowserToolbarPalette">
  <toolbarbutton id="custom-button-1"/>
</toolbarpalette>


<!-- button details -->
<toolbarbutton id="custom-button-1"
  label="Custom"
  tooltiptext="My custom toolbar button"
  oncommand="xyz.showPanel()"
  class="toolbarbutton-1 chromeclass-toolbar-additional custombutton"
/>

<panel id="thepanel">
  <hbox align="start">
    <image src="warning.png"/>
    <vbox>
      <description value="You have 6 new messages."/>
      <hbox>
        <button label="Read Mail"/>
        <button label="New Message"/>
      </hbox>
    </vbox>
  </hbox>
</panel>

</overlay>

当调用函数“xyz.showPanel()”时，其代码如下:

var xyz = {
    showPanel: function (e)
    {
        var button = document.getElementById('custom-button-1');
        var panel = document.getElementById('thepanel');
        panel.openPopup(button, 'after_start', 0, 0, false, false);

    }
}

它在错误控制台中给了我错误:

Error: TypeError: panel is null

我想在 Firefox 中显示一个类似“下载”工具栏按钮的面板

我是 Firefox 插件的新手，

那么如何在单击工具栏按钮时显示面板？

Answer 1

在覆盖中，第一层嵌套元素必须引用 DOM 中已有的内容(元素内容将被添加到其中)，否则这些元素将被忽略。 (该规则有一些异常(exception)，例如 <script> 。)

您的面板定义基本上说明(与您想要的相反)

• 查找现有 panel ID 为“thepanel”
• 如果找到，请添加 hbox及其子面板
• 如果不是，则忽略该子树。

您需要更改 XUL 以为面板提供容器，例如#mainPopupSet ，就像您对 #BrowserToolbarPalette 所做的那样为您toolbarbutton .

<overlay ...>
...
<popupset id="mainPopupSet">
  <panel id="thepanel">
    ...
  </panel>
</popupset>
</overlay>