CODEWITHSUNDEEP
firefoxfirefox-addonpanelxul
Ayman
Ayman

Reputation: 1463

Creating panel in firefox

in my xul file:

<!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>

when calling the function "xyz.showPanel()" which has the following code:

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);

    }
}

it gives me error in the error console that says:

Error: TypeError: panel is null

I want to show a panel like "Downloads" toolbar button in Firefox

I am new to Firefox addons,

so how to show a panel when clicking on toolbar button ??

Upvotes: 3

Views: 632

Answers (1)

nmaier
nmaier

Reputation: 33162

In overlays, the first level of nested elements must refer to something already in the DOM (the element stuff will be added to), or else these elements will be ignored. (Some exceptions to that rule, like <script>.)

Your panel definition basically says (contrary to what you want it to say)

  • Find an existing panel with id "thepanel"
  • If found, add a hbox and its children to the panel
  • If not, ignore the subtree.

You need to change your XUL to provide a container for your panel, e.g. #mainPopupSet, like you did with #BrowserToolbarPalette for your toolbarbutton.

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

Upvotes: 3

Related Questions