Styling Panels of a Firefox Addon

So I created a Widget that the user clicks on and it opens up a Panel, I have a couple of Questions about the panel. How Do I style the Panels borders, background color, etc..? I'm including an HTML file in it's contentURL, can I add CSS to alter it? If so how do I select it via CSS?

I also want to add a Close Button and keep the panel open always unless they click the close button.

On second thought, for the Add-on i'm trying to program it might be better if I make a window, is a window pretty stylable so I c开发者_JAVA百科an make it look cooler?

Thanks for any help.

---

I don't think you can style panel borders. The panel border styles depend on the operating system and you cannot touch them. You can only really influence the inner area of the panel, effectively you get an iframe inside the panel that you can play with. E.g. to change the background your panel can contain:

<style type="text/css">
  html
  {
    background-color: red;
  }
</style>

---

You cannot, the panel is not a real HTML object, but a XUL window with an iframe or HTML inside.

I believe since Firefox 30 you can access to this object, you can read:

Avoid panel to autoHide in Firefox extension

Of course it's a kind of hack, looks like Mozilla is not really "open" ^^

---

I was able to modify the border of the panel:

/*run this first*/
var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var screen = Services.appShell.hiddenDOMWindow.screen;
var props = {
    noautohide: true,
    noautofocus: false,
    level: 'top',
    style: 'padding:15px; margin:0; width:150px; height:200px; background-color:steelblue;border-radius:15px'
}
for (var p in props) {
    panel.setAttribute(p, props[p]);
}


win.document.querySelector('#mainPopupSet').appendChild(panel);


panel.addEventListener('dblclick', function () {
    panel.parentNode.removeChild(panel)
}, false);
panel.openPopup(null, 'overlap', screen.availLeft, screen.availTop);

So if you know the panel of your id just do this:

var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);

var css = '';
css += '#YourPanelIdHere { border-radius:15px; opacity:.5; border:1px solid red; }';
var cssEnc = encodeURIComponent(css);
    var newURIParam = {
        aURL: 'data:text/css,' + cssEnc,
        aOriginCharset: null,
        aBaseURI: null
}
var cssUri = Services.io.newURI(newURIParam.aURL, newURIParam.aOriginCharset, newURIParam.aBaseURI);
sss.loadAndRegisterSheet(cssUri, sss.USER_SHEET);
    //sss.unregisterSheet(cssUri, sss.USER_SHEET);

That will style your panel. You don't have to use panel id in the style sheet, just anything that target your panel will do.