MozillaZine

Thumb images (list-image-style) not working in MENULIST

Talk about add-ons and extension development.
ToolDev
 
Posts: 67
Joined: June 17th, 2005, 7:47 pm

Post Posted August 27th, 2005, 11:48 am

Hi,

I'm trying to construct a dropdown listbox in my Firefox toolbar extension with thumb images on the left of the text of the dropdown list items. Unfortunately, FF doesn't like the idea, and does not display any images at the left side of the items. Is there any workaround for this problem?

I'm specifying 'menuitem-iconic' as the class of the MENUITEMs inside the MENULIST's MENUPOPUP, and using the 'list-style-image' attribute in the CSS file to specify the URL of the image to display. Everything goes fine when I use these settings for a a simple popup menu, but no images are displayed when I use them in the dropdown list of a MENULIST.

ToolDev
 
Posts: 67
Joined: June 17th, 2005, 7:47 pm

Post Posted August 27th, 2005, 12:29 pm

OK, I've found a "partial solution" (which is actually a no-solution for me): you can place an IMAGE and a LABEL tag/element inside the MENUITEMs, and FF will display them as desired above IN THE DROP DOWN LIST. (You should encapsulate the IMAGE and a LABEL in a HBOX, otherways, FF may not align them always in a single line, which looks pretty ugly.) However, even then FF will still use the MENUITEM's LABEL attribute for the display in the selector area itself (the area of the MENULIST control that's visible even when it's dropdown list is not visible, ie. the control is "closed up"), and will still not display any images there.

So, I'm still looking for a real solution to get the thumb images for the menuitems displayed in the selector area, too.

Lost User 9766
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted August 27th, 2005, 12:31 pm

You will need to use the image attribute <menuitem class="menuitem-iconic" id="myItem"/>

css:
#myItem {
image:url("chrome://whatever/myimage.png")
}

-mark

ToolDev
 
Posts: 67
Joined: June 17th, 2005, 7:47 pm

Post Posted September 6th, 2005, 1:08 am

buff wrote:You will need to use the image attribute <menuitem class="menuitem-iconic" id="myItem"/>

css:
#myItem {
image:url("chrome://whatever/myimage.png")
}

-mark

Thanks for your answer, Mark, but this doesn't work for me. Not in FF 1.0.4, nor in Deer Park alpha2. Using the inline attribute "image" also doesn't seem to affect anything (thumb images are still not shown in the list).

Note, that I'm trying to use this dropdown list in a browser toolbar, not in a popup XUL window/dialog (I don't know if this makes any difference).

ToolDev
 
Posts: 67
Joined: June 17th, 2005, 7:47 pm

Post Posted September 6th, 2005, 2:52 am

OK. I've found a final work-around for the problem. To display images in the drop-down list, you've to use the method I've described above (ie. the extra LABEL+IMAGE items encaspluated in a HBOX inside the MENUITEM tag). And to specify the image to display for the item in the always-visible selector area itself you've to use the SRC (!) attribute in the MENUITEM.

Example:

Code: Select all
        <menulist ..>
          <menupopup>
            <menuitem label="caption1" value="1" src="chrome://extension/skin/icon1.gif">
              <hbox>
                <image src="chrome://extension/skin/icon1.gif"/>
                <label value="caption1"/>
              </hbox>
            </menuitem>
            ...
          </menupopup>
        </menulist>


The code looks complex and ugly - but it works...

Old Greg S
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted September 6th, 2005, 5:30 pm

Can this be done just using .css? I know menuitems can each have their own icon and I know that menulist can be ID'd and have a menulist menulist-icon, but can the menuitem icon that is selected and presently visible in the menulist display the associated icon of the menuitem that is selected without having to individualize each menulist-icon with the same code as the menuitem icon?

ToolDev
 
Posts: 67
Joined: June 17th, 2005, 7:47 pm

Post Posted September 7th, 2005, 10:32 pm

For "normal" MENUITEMS you can use the "list-style-image" CSS attribute to specify the thumb image. But this property isn't working for MENUITEMs inside a MENULIST's MENUPOPUP (nor does the inline XUL attribute "image") - that's why we need the hack presented above originally. And I doubt there's a CSS attribute that maps to the XUL attribute SRC used above.

But there's an ugly hack I've already used in several HTML projects successfully to specify sources of images thru CSS. The solution is to specify an arbitrary sized (for ex. 1x1 pixel) transparent PNG or GIF image as the SRC of the image in the XUL/HTML source inline, and use the "width", "height", and "background-image" property in the CSS file to specify the actual dimensions and the picture itself you want to display in the IMAGE's frame. As the actual image itself inside this box is transparent, the user will only see the background image (which you can specify thru CSS, too, not like the SRC of the image). This way you can circumvent the limitation that there's no direct CSS attribute that maps to the IMAGE's SRC attribute.

Still, I don't know how to specify/emulate the MENUITEM's SRC attribute using CSS, so, using this technique images will appear only in the dropdown list area, but not in the always-visible portion of the MENULIST control. (May be you could experiment with background-image for the MENULIST itself with repeat-x and repeat-y disabled - to prevent using the background-image as a tile, instead of displaying just once -, and trying to indent/shift the text displayed in it somehow, but I really don't know if this work.)

Old Greg S
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted September 8th, 2005, 5:44 am

ToolDev wrote:For "normal" MENUITEMS you can use the "list-style-image" CSS attribute to specify the thumb image. But this property isn't working for MENUITEMs inside a MENULIST's MENUPOPUP


I can get the icon of the selected menuitem to show in the menulist but was wondering if there were a shorter way of doing it than having to double up the code. An example for doing this is
Code: Select all
menulist[label="Search in New Background Tab"] .menulist-icon,
menuitem[label="Search in New Background Tab"] {
  list-style-image: url("chrome://global/skin/subskin/icons/newtab_background.png") !important;
}

Image

AnonEmoose
 
Posts: 2031
Joined: February 6th, 2004, 11:59 am

Post Posted September 8th, 2005, 6:49 pm

Greg S wrote:
ToolDev wrote:For "normal" MENUITEMS you can use the "list-style-image" CSS attribute to specify the thumb image. But this property isn't working for MENUITEMs inside a MENULIST's MENUPOPUP


I can get the icon of the selected menuitem to show in the menulist but was wondering if there were a shorter way of doing it than having to double up the code. An example for doing this is
Code: Select all
menulist[label="Search in New Background Tab"] .menulist-icon,
menuitem[label="Search in New Background Tab"] {
  list-style-image: url("chrome://global/skin/subskin/icons/newtab_background.png") !important;
}

For non english locale compatibility you'll probably want to use a different identification then label="Search in New Background Tab"

Return to Extension Development


Who is online

Users browsing this forum: No registered users and 1 guest