xul - 没有或错误的工具栏按钮图像

Question

就这个小事我花了一整天还是不行 使这项工作发挥作用。出现一个巨大的奇怪图像而不是我的图标。如果我取出工具栏按钮 1 类，则根本不会出现图像。以下是所有重要的内容：（这将是一篇非常长的文章...）

我的 XUL 仅包含工具栏上的一个工具栏按钮：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://ytweaks/skin/style.css" type="text/
css"?>
<overlay id="yTweaks" xmlns="http://www.mozilla.org/keymaster/
gatekeeper/there.is.only.xul">
    <script src="main.js" />
    <toolbarpalette id="BrowserToolbarPalette">
        <toolbarbutton id="ytweaks-main-button" class="toolbarbutton-1
chromeclass-toolbar-additional"
            type="menu"
            label="yTweaks"
            tooltiptext="yTweaks"
            state="enabled">
        </toolbarbutton>
    </toolbarpalette>
</overlay>

CSS 与 MDN 教程中的 CSS 相同：

#ytweaks-main-button {
  list-style-image: url("chrome://ytweaks/skin/icon.large.png");
}

toolbar[iconsize="small"] #ytweaks-main-button {
  list-style-image: url("chrome://ytweaks/skin/icon.small.png");
}

清单文件看起来像这样：

content ytweaks chrome/content/
overlay chrome://browser/content/browser.xul chrome://ytweaks/content/ui.xul

skin ytweaks classic/1.0 skin/classic/ytweaks/
style chrome://global/content/customizeToolbar.xul chrome://ytweaks/skin/style.css

文件夹结构：

chrome
|-- content
|   |-- ui.xul
|   |-- main.js
|-- skin
    |-- classic
        |-- ytweaks
            |-- icon.large.png
            |-- icon.small.png
            |-- style.css

最后，结果如下所示：

完全不是我制作的图标。这是我应该出现的图标（ 大的）：

---

另外，我如何调试这些东西？例如，我如何浏览 铬注册表。如果我在 Firefox 中输入 chrome URI，则什么也不会发生。 除了浏览器的主 XUL 文件加载另一个完整的 浏览器。

Answer 1

事实证明，这是由于此处的路径无效：

skin ytweaks classic/1.0 skin/classic/ytweaks/

..应该是：

skin ytweaks classic/1.0 chrome/skin/classic/ytweaks/

Re：调试。我会测试 3 件事：

• 使用您知道必须匹配的最简单的规则，然后使用 DOM 检查器检查相关元素的样式，看看您的规则是否匹配。如果没有，您的样式表由于某种原因不会被应用。
• 仔细查看应用样式表的行（在您的情况下，它是 chrome.manifest 中的 style 行）。我不知道你如何在这里调试拼写错误。
• 当您通过位置栏打开样式表时，检查样式​​表的 chrome:// URL 是否正常工作。它应该显示 css 文件的文本。
  • 如果您在错误控制台中收到 No chrome package Registered for chrome://aaa/skin/aaa.css 消息，则您在 chrome.manifest 中的 skin 声明并未生效未得到处理或“provider”名称（在上面的示例中为aaa）与“skin”后指定的“provider”名称不匹配
  • 如果您收到内容错误页面，提示找不到文件。 Firefox 在 chrome://aaa/skin/bbb.css 处找不到该文件（如您的情况），这意味着 skin 声明的路径部分不正确。它应该相对于 chrome.manifest（以及以 / 结尾的 iirc）

Answer 2

根据您上面提供的信息，如果这是您的路径 ytweaks/skin/icon.small.png 但您的文件夹结构是

 |-- ytweaks
     |-- icon.large.png
     |-- icon.small.png
     |-- style.css

那么在我看来您要么缺少 skin< /code> 子文件夹位于 ytweaks 中，否则您不应将其包含在图像路径中。