firefox - 如何正确设置 Jetpack 状态栏面板的样式？

Question

当我在Mozilla Jetpack中创建状态栏面板时，它看起来像一个无特色的灰色框，会“中断”状态栏，因为它缺少边框/阴影/等。这使它看起来像一个普通的状态栏面板。

我怎样才能让它看起来像其他状态栏面板？

Answer 1

有两个技巧。更重要的是将你的状态栏 HTML 包装在一对使用CSS 声明<div>样式的 s 中：-moz-appearance

<div style="-moz-appearance:statusbar">
    <div style="moz-appearance:statusbarpanel">
        Your content here
    </div>
</div>

这让我们接近了，但在实际状态栏的左侧有轻微的亮光，当应用于状态栏中间的状态栏面板时非常明显。您可以通过在外部左侧添加 50 像素填充和负边距来解决此问题<div>：

<div style="-moz-appearance:statusbar;margin-left:-50px;padding-left:50px">
    <div style="moz-appearance:statusbarpanel">
        Your content here
    </div>
</div>

瞧！与普通的无法区分的状态栏面板。如果您的内容都是 HTML，那么您就完成了。但是，如果您希望状态栏面板的文本也匹配，则可以应用一些其他样式。这是使用嵌入式样式表的完整 JavaScript 源代码：

jetpack.statusBar.append({
    html: (<><![CDATA[
        <style type="text/css">
            .statusbar {
                font-family: Tahoma;
                font-size: 11px;
                height: 22px;
                -moz-appearance: statusbar;
            }

            .statusbarpanel {
                height: 18px;
                line-height: 17px;
                -moz-appearance: statusbarpanel;
                padding-left: 4px;
                padding-right: 4px;
            }
        </style>

        <div class="statusbar">
            <div class="statusbarpanel">
                Your content here.
            </div>
        </div>
    ]]></>).toString()
});

（本示例还使用E4X 来模拟 JavaScript 中的多行字符串。）