Question

所以我创建了一个用户点击的Widget，它打开了一个Panel，我对这个面板有几个问题。如何设置面板边框，背景颜色等样式。？我在其中包含了一个HTML文件的contentURL，我可以添加CSS来改变它吗？如果是这样，我如何通过CSS选择它？

我还想添加一个关闭按钮并始终打开面板，除非他们单击关闭按钮。

第二个想法，对于附加组件我试图编程它可能会更好，如果我做一个窗口，是一个漂亮的窗口，所以我可以使它看起来更酷？

感谢您的帮助。

Answer 1

我认为你不能设置面板边框的样式。面板边框样式取决于操作系统，您无法触摸它们。您只能真正影响面板的内部区域，实际上您可以在面板内部获得iframe。例如。更改面板可以包含的背景：

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

Answer 2

你不能，面板不是真正的HTML对象，而是一个内部有iframe或HTML的XUL窗口。

我相信自从Firefox 30你可以访问这个对象，你可以阅读：

Avoid panel to autoHide in Firefox extension

当然它是一种黑客攻击，看起来像Mozilla并不是真的＆＃34;开放＆＃34; ^^

Answer 3

我能够修改面板的边框：

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

因此，如果您知道您的ID的面板，请执行此操作：

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

这将为您的面板设计风格。您不必在样式表中使用面板ID，只需面向面板的任何内容即可。

Firefox插件的样式面板

3 个答案: