Firefox 插件的样式面板答案

【问题标题】：Styling Panels of a Firefox AddonFirefox 插件的样式面板
【发布时间】：2011-08-03 20:33:45
【问题描述】：

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

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

再想一想，对于我正在尝试编程的附加组件，如果我制作一个窗口可能会更好，一个窗口的样式是否很漂亮，所以我可以让它看起来更酷？

感谢您的帮助。

【问题讨论】：

标签： firefox-addon

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

相信从 Firefox 30 起你就可以访问这个对象了，你可以阅读：

Avoid panel to autoHide in Firefox extension

当然是一种hack，看来Mozilla并不是真的“开放”^^

【讨论】：

Mozilla 是开放的，但 SDK 已被制成 Google Chrome 的风格，因此它是开放的，但不是“免费的”。你必须破解它来完成很多事情。谷歌浏览器实际上并没有真正打开第二个。

【解决方案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，只要以您的面板为目标的任何东西都可以。

【讨论】：