How do I scale an icon in status bar Topic is solved

[thosrtanner]

I have an icon on the statusbar (or toolbar) in my extension (inforss reloaded), which can come other from a 16x16 file in the extension, or from an image on the web. It is meant to be scaled to 16x16 pix. However, I'm struggling to make it behave.

Without any scaling, things behave as expected if I overwrite the src attribute with the new icon. If it's 16x16 all is OK. If it's not, the status bar becomes huge.

If I try setting the max-width and max-height styles to 16px, the icon is set to 16px x 16px but the icon is only scaled vertically. It is not scaled horizontally, resulting in a rather squashed looking icon. The other thing that happens is that the rest of the status bar drops 1 pixel, so matching icons don't line up.

To get round the scaling, the code currently uses getAnonymousNodes to get the actual icon (<xul: image>) and applies the max width and height to that however it still gets the 1 pixel drop of the rest of the toolbar.

I'm a bit lost as to why all this is needed and how to get rid of the 1 pixel drop

[JustOff]

Please provide steps to reproduce this issue.

[thosrtanner]

Well the easiest way to do this is to install inforss, preferably from the branch on

Go to inforss options, advanced, and set 'Synchronise main icon with current group/feed' to on.

Select BBC - you'll see the bbc icon in the menu is slightly higher than the icon on the scrolling bar. and the 'x' icons are slightly lower than the x icon on the row of buttons at the left

Select 'all together' feed, clear the option and restart the browser, and the x buttons will line up again.

This may be windows specific as I don't see the issue on my linux firefox esr 52.something at work

The xul code I have for the button is

Code: Select all

        <statusbarpanel id="inforss-icon"
                        type="menu"
                        flex="0"
                        class="statusbarpanel-menu-iconic"
                        style="border-style: none"
                        tooltip="inforss.popup.mainicon"
                        onmousedown="inforssDisplayOption(event);"
                        ondragover="icon_observer.on_drag_over(event)"
                        ondrop="icon_observer.on_drop(event)"
                        src="chrome://inforss/skin/inforss.png">
          <menupopup oncommand="inforssCommand(this, event);"
                     onmouseup="inforssMouseUp(this, event);"
                     id="inforss-menupopup"
                     ignorekeys="false">
            <menuitem image="chrome://inforss/skin/inforss-trash.gif"
                      label="&inforss.menu.trash;"
                      data="trash"
                      class="menuitem-iconic"
                      draggable="false"
                      ondragstart="return false"
                      ondragover="trash_observer.on_drag_over(event)"
                      ondrop="trash_observer.on_drop(event)"
                      tooltiptext="&inforss.menu.trash;"
                            />
            <menuseparator/>
          </menupopup>
        </statusbarpanel>

and the javascript does this:

Code: Select all

    this._icon = document.getElementById('inforss-icon');
    //and much later once things are displayed
    this._icon_pic = this._document.getAnonymousNodes(this._icon)[0];
    //when updating the icon with the feed favicon
    this._icon_pic.setAttribute("src", icon);
    this._icon_pic.style.maxWidth = "16px";
    this._icon_pic.style.maxHeight = "16px";
    this._icon_pic.style.minWidth = "16px";
    this._icon_pic.style.minHeight = "16px";

[JustOff]

Select BBC - you'll see the bbc icon in the menu is slightly higher than the icon on the scrolling bar. and the 'x' icons are slightly lower than the x icon on the row of buttons at the left

Select 'all together' feed, clear the option and restart the browser, and the x buttons will line up again.

Sorry, but without screenshots, I can't understand exactly what elements you mean.

[thosrtanner]

Here we go then. Some screenshots of the toolbar. The 1st icon (the little blue globe thing) is a 16x16 button, you click on it to get the menu button - that's what the xul posted above is for.

Pic 1: 16x16 icon with no scaling.

Capture-5.PNG

Pic 2: Same icon, now with the max and min width and height set to 16px as in the code snippet above

Capture-3.PNG

Notice the headlines to the right are visibly lower, though the buttons to the extreme right appear to have maintained their place

Pic 3: Just for a laugh, setting the image to point to the BBC favicon, which is 32x32, but with the scaling set in the xul rather then the code, using

Code: Select all

style="border-style: none; max-width: 16px; max-height: 16px"

Capture-4.PNG

You can see that the icon has been correctly scaled vertically but not scaled horizontally at all.

[JustOff]

Pic 2: Same icon, now with the max and min width and height set to 16px as in the code snippet above

Well, this looks quite correct for me. Or am I missing something?

To get round the scaling, the code currently uses getAnonymousNodes to get the actual icon (<xul: image>) and applies the max width and height to that however it still gets the 1 pixel drop of the rest of the toolbar.

Unfortunately, I can neither reproduce it nor see it on your screenshots.

[thosrtanner]

Pic 2: Same icon, now with the max and min width and height set to 16px as in the code snippet above

Well, this looks quite correct for me. Or am I missing something?

Look at the descenders of the p and the g - in pic1 they're clearly above the bottom of the bottom of the toolbar. in pic2 they've been clipped short.

[thosrtanner]

Pic 2: Same icon, now with the max and min width and height set to 16px as in the code snippet above

Well, this looks quite correct for me. Or am I missing something?

Look at the descenders of the p and the g - in pic1 they're clearly above the bottom of the bottom of the toolbar. in pic2 they've been clipped short.

In answer to your 2nd point - the getAynonymousNodes code snippet is what is needed to make the bbc icon come out the right size.

[thosrtanner]

Further investigation shows that fiddling with the size of the icon affects the whole of the rest of the status bar. for instance if I set the icon to 8x8 the entire bottom half of the text disappears

[thosrtanner]

Well, I've discovered what the issue is. Toolbar icons aren't 16x16. They are in fact 19x19 with padding at top and bottom (on windows anyway. the documentation I could find suggested the padding needs to be different on every platform...)