How do I persuade an icon in a listcell to be sized to 16x16

I'm going slightly demented with an old(ish) firefox extension I am trying to clean up. It creates a list of web sites and their favicon. And it displays the list either as a pop up menu or as a list, depending on what you ask for.

And I cannot get the icons to display correctly (it's an issue that this extension has had for a long time). On the menu, no icon displays until you make a selection. Then it displays the icon, but there's one page where the favicon is 256x256 and that looks pretty awful. Similarly in the list view.

As far as I can see, the menus are all constructed with menuitem-iconic and the lists with listcell-iconic/listitem-iconic but even if I add a menuitem-iconic override to the extensions css (which affects all other menu icons fine), I cannot get it to be recognised.

If you put this into xul explorer, you'll see what I mean

<?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>

I am rather at a loss here as to what could be going on. The max height of the list item is working fine, resulting in a wide but very short icon on the row in question, but I'd like it just to be 16x16.

The menu has no such restriction and displays the selected image in its full 256x256 pixel glory.

You can accomplish this by adding CSS to style the width and height of the <image> element that is displaying the image. The <image> is part of the XBL for a <listcell class="listitem-iconic"> which is implicitly created by your <listitem class="listitem-iconic">. You can see what elements each explicitly included element is composed of by either looking in the XBL for the element, or using the DOM Inspector and showing anonymous content.

You can similarly style image.menulist-icon for the displayed menulist icon.

Your issue is somewhat complicated by not having a separate CSS file. However, you can include CSS directly in the XUL by using a data URI.

So to get:

You can use:

<?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>