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

Question

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.

Please provide a complete [mcve]. As it is there is quite a bit of additional code that would need to be generated in order to duplicate this problem. At a minimum, this would be the complete XUL for a [``](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/listbox). That would at least permit copying the code and dropping it in XUL Explorer for testing. — Makyen, Jan 15 '17 at 19:09
Is there a CSS file associated with where this is displayed, or does all styling need to be inline? — Makyen, Jan 15 '17 at 19:13
Added - you can see clearly the huge width of the darken entry. Copied from XUL explorer window — Tom Tanner, Jan 15 '17 at 19:22
I don't think there's a css file. I found out by fiddling with the css in the extension I could make the menu popup appear with icons but other problems were still there. — Tom Tanner, Jan 15 '17 at 19:23
This shows exactly the same in XULRunner as it does in the browser. — Tom Tanner, Jan 15 '17 at 21:27

Makyen · Accepted Answer · 2017-01-17T01:18:11.160

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>

That looks great. given that I do have a css file for this extension, what'd I put in it to make it work, as presumably this would affect every menu similarly? — Tom Tanner, Jan 15 '17 at 22:14
It will affect all ` and ``. I can't say how it will affect "every menu", because I don't know if you use the same elements to create such menus. But, it will affect all those that are created similarly. — Makyen, Jan 15 '17 at 22:19
well, I did fiddle add ".menu-iconic-icon { width: 32px; height: 16px; }" to the extension css as an experiment and that affected *all* of the browsers menus, producing strangely distorted menus. Actually, I think I've worked out how to alleviate that. Many thanks — Tom Tanner, Jan 15 '17 at 22:41
In passing - why on earth do I have to specify this? Shouldn't it ahve been done automatically? — Tom Tanner, Jan 16 '17 at 09:20
Well, yes and no. While it might be reasonable for there to be a default (more for the `menulist` than the `listcell`), it is also reasonable to be able to define the sizes for whatever interface you, or someone else, is designing. For the `` there are multiple CSS files where the [size of the icon is defined for various themes](https://dxr.mozilla.org/mozilla-central/search?q=menulist-icon&redirect=false). — Makyen, Jan 16 '17 at 16:14
yes, but these are both -icon variants. I can appreciate in general it wouldn't be a good idea, but I thought these 2 specific ones were, well, specifically for this — Tom Tanner, Jan 16 '17 at 19:46

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

1 Answers1