1

我正在尝试清理一个旧的（ish）firefox 扩展，这让我有些发狂。它创建一个网站列表及其网站图标。它会根据您的要求将列表显示为弹出菜单或列表。

而且我无法让图标正确显示（这是这个扩展长期以来一直存在的问题）。在您做出选择之前，不会在菜单上显示任何图标。然后它显示图标，但有一页的图标是 256x256，看起来很糟糕。同样在列表视图中。

据我所见，菜单都是用 menuitem-iconic 和 listcell-iconic/listitem-iconic 构建的，但即使我向扩展 css 添加了 menuitem-iconic 覆盖（这会影响所有其他菜单图标） ，我无法识别它。

如果你把它放到 xul explorer 中，你就会明白我的意思

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>


<!-- listbox showing large icon -->

<listbox>
<listitem label="Widdershins"
      class="listitem-iconic"
      image="http://www.widdershinscomic.com/favicon.ico"
      style="max-height: 18px;"
/>
<listitem label="Darken"
      class="listitem-iconic"
      image="http://darkencomic.com/wp-content/themes/inkblot/includes/images/icon.png"
      style="max-height: 18px;"
/>

</listbox>

<!-- menu shows no icons at all but when you select the 'darken' one you get a huge icon -->

<menulist label="label" accesskey="{accesskey}">
<menupopup>
<menuitem label="Widdershins"
      class="menuitem-iconic"
      image="http://www.widdershinscomic.com/favicon.ico"
      style="max-height: 18px;"
/>
<menuitem label="Darken"
      class="menuitem-iconic"
      image="http://darkencomic.com/wp-content/themes/inkblot/includes/images/icon.png"
      style="max-height: 18px;"
/>
</menupopup>
</menulist>
</window>

我对可能发生的事情感到不知所措。列表项的最大高度工作正常，导致相关行上有一个宽但非常短的图标，但我希望它只是 16x16。

菜单没有这样的限制，并以其完整的 256x256 像素荣耀显示所选图像。

4

1 回答 1

2

您可以通过添加 CSS 来设置显示图像的元素的width和样式来完成此操作。是 XBL 的一部分，它由您的. 您可以通过查看元素的 XBL 或使用 DOM Inspector 并显示匿名内容来查看每个显式包含的元素由哪些元素组成。height<image><image><listcell class="listitem-iconic"><listitem class="listitem-iconic">

您可以image.menulist-icon为显示的菜单列表图标设置类似的样式。

由于没有单独的 CSS 文件，您的问题有些复杂。但是，您可以使用数据 URI 将 CSS 直接包含在 XUL 中。

所以要得到：
具有 16x16 图像的列表框和菜单列表

您可以使用：

<?xml-stylesheet type="text/css" href="data:text/css,
    image.listcell-icon, image.menulist-icon {
        width: 16px;
        height: 16px;
    }"
?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <listbox>  <!-- listbox showing large icon -->
    <listitem label="Widdershins"
      class="listitem-iconic"
      image="http://www.widdershinscomic.com/favicon.ico"
      style="max-height: 18px;"
    />
    <listitem label="Darken"
      class="listitem-iconic"
      image="http://darkencomic.com/wp-content/themes/inkblot/includes/images/icon.png"
      style="max-height: 18px;"
    />
  </listbox>
<!-- menu shows no icons at all but when you select 'darken' then you get a huge icon -->
  <menulist label="label" accesskey="{accesskey}">
    <menupopup>
      <menuitem label="Widdershins"
        class="menuitem-iconic"
        image="http://www.widdershinscomic.com/favicon.ico"
        style="max-height: 18px;"
      />
      <menuitem label="Darken"
        class="menuitem-iconic"
        image="http://darkencomic.com/wp-content/themes/inkblot/includes/images/icon.png"
        style="max-height: 18px;"
      />
    </menupopup>
  </menulist>
</window>
于 2017-01-15T21:37:57.520 回答