956572 - Toolbaritem with stack displayed separately

Status: VERIFIED INVALID

(Firefox :: Extension Compatibility, defect)

Description

[Leszek Zyczkowski]

Attachment: screenshots.png

I added to toolbarpalette toolbaritem with stack (toolbarbutton+label) and these elements displayed separately. In the Firefox 26 all is OK. See attached screenshot.
This kind of toolbaritem should be displayed as in the Firefox 26.

Comment 1

[:Gijs (he/him)]

Can you provide a scratchpad or test link we can use to figure this out?

Comment 2

[Leszek Zyczkowski]

(In reply to :Gijs Kruitbosch from comment #1)
> Can you provide a scratchpad or test link we can use to figure this out?

Now (29.0a2) these elements are displayed together, but are some another problems. See attached screenshots.

Comment 3

[Leszek Zyczkowski]

Attachment: Screanshots from 29.0a2

Comment 4

[:Gijs (he/him)]

(In reply to Leszek Zyczkowski from comment #2)
> (In reply to :Gijs Kruitbosch from comment #1)
> > Can you provide a scratchpad or test link we can use to figure this out?
> 
> Now (29.0a2) these elements are displayed together, but are some another
> problems. See attached screenshots.

Unfortunately you haven't shown any markup, an XPI, or steps to reproduce, so I still can't debug or fix this. I also don't understand what the screenshot is meant to show is wrong with the label in the palette.

Comment 5

[Leszek Zyczkowski]

(In reply to :Gijs Kruitbosch from comment #4)
> Unfortunately you haven't shown any markup, an XPI, or steps to reproduce,
> so I still can't debug or fix this. I also don't understand what the
> screenshot is meant to show is wrong with the label in the palette.

My XPI is in the attachment. This button is displayed after choose "Download Panel" option in the options window. This XPI is still under development.

In the customize window label is displayed, but in the panel-based menu not.

Comment 6

[Leszek Zyczkowski]

Attachment: xpi for show problem

Comment 7

[Justin Dolske [:Dolske]]

After poking around with DOM Inspector, I don't think I see a Firefox/Australis problem here.

There are two problems described:

1) Missing label

This already manifests as a bug with pre-Australis Firefox, see screenshot of button in navbar, with "icons+text" enabled. The problem is that the |label| attribute is being set on the <toolbaritem> instead of the <toolbarbutton> within it. If I set a label attribute on the toolbarbutton, it's ok.

2) Counter label (number) offset

The problem here just seems to be that the label is positioned as <label top=4 right=-5/>, and the size of the toolbaritem/toolbarbutton is simply larger than it used to be (in customization mode or the menu panel). You'll need to update the styling to account for the changes.

Comment 8

[Justin Dolske [:Dolske]]

Attachment: Screenshot of addon pre-Australis

Comment 9

[Leszek Zyczkowski]

(In reply to Justin Dolske [:Dolske] from comment #7)
> 1) Missing label
> 
> This already manifests as a bug with pre-Australis Firefox, see screenshot
> of button in navbar, with "icons+text" enabled. The problem is that the
> |label| attribute is being set on the <toolbaritem> instead of the
> <toolbarbutton> within it. If I set a label attribute on the toolbarbutton,
> it's ok.

For proper display in the all places (customization mode, menu panel, and navbar) |label| attribute have to be set on the <toolbaritem> and> <toolbarbutton>.

> 
> 2) Counter label (number) offset
> 
> The problem here just seems to be that the label is positioned as <label
> top=4 right=-5/>, and the size of the toolbaritem/toolbarbutton is simply
> larger than it used to be (in customization mode or the menu panel). You'll
> need to update the styling to account for the changes.

Label is positioned depending on the button outline, so if outline is bigger, label going to specific position according to outline.

Comment 10

[Leszek Zyczkowski]

I still have problems with this button. I try add proper code for display 32x32 icon in the customization mode, and menu panel, but Australis not displayed 32x32 icon. My css code is:

#downloadbar-count {
  list-style-image:url('chrome://downloadbar/skin/dsbIcon_main.png');
}
#downloadbar-count[cui-areatype="menu-panel"],
toolbarpaletteitem[place="palette"] > #downloadbar-count {
  list-style-image: url('chrome://downloadbar/skin/ausicon.png');
}

dsbIcon_main.png is 16x16px icon
ausicon.png is 32x32px icon

Icon 32x32 isn't rendered. When I add toolbarbutton outside toolbaritem icon 32x32 is displayed.
I include xpi for tests.

Comment 11

[Leszek Zyczkowski]

Attachment: new_down_manager.xpi

xpi for tests issue

Comment 12

[:Gijs (he/him)]

(In reply to Leszek Zyczkowski from comment #10)
> I still have problems with this button. I try add proper code for display
> 32x32 icon in the customization mode, and menu panel, but Australis not
> displayed 32x32 icon. My css code is:
> 
> #downloadbar-count {
>   list-style-image:url('chrome://downloadbar/skin/dsbIcon_main.png');
> }
> #downloadbar-count[cui-areatype="menu-panel"],
> toolbarpaletteitem[place="palette"] > #downloadbar-count {
>   list-style-image: url('chrome://downloadbar/skin/ausicon.png');
> }
> 
> dsbIcon_main.png is 16x16px icon
> ausicon.png is 32x32px icon
> 
> Icon 32x32 isn't rendered. When I add toolbarbutton outside toolbaritem icon
> 32x32 is displayed.
> I include xpi for tests.

The [cui-areatype="menu-panel"] bit will be added on your toolbaritem, not on your toolbarbutton. You should use the toolbaritem's attribute to select the icon for the panel case.

Comment 13

[Leszek Zyczkowski]

I chnged to toolbaritem's id and still is the same. In the customization mode, and menu panel is displayed enlarged 16x16px image 32x32 instead.

Comment 14

[Leszek Zyczkowski]

I have to change to toolbatitem id also in the old mode, and now is OK.

Comment 15

[:Gijs (he/him)]

I was going to say, this CSS:

#downloadbar-ddnbr[cui-areatype="menu-panel"] #downloadbar-count,


WFM. You can probably improve it to use child selectors to include the stack, but I just needed to quickly test this. :-)

Comment 16

[Leszek Zyczkowski]

I tested after changed to #downloadbar-ddnbr both and all displayed OK. Many thanks.