Toolbaritem with stack displayed separately

VERIFIED INVALID

Status

()

Firefox
Extension Compatibility
VERIFIED INVALID
5 years ago
4 years ago

People

(Reporter: Leszek Zyczkowski, Unassigned)

Tracking

29 Branch
x86
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [Australis:P-])

Attachments

(5 attachments)

(Reporter)

Description

5 years ago
Created attachment 8355875 [details]
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.
(Reporter)

Updated

5 years ago
Depends on: 942157

Comment 1

5 years ago
Can you provide a scratchpad or test link we can use to figure this out?
Blocks: 942157, 872617
No longer depends on: 942157
Flags: needinfo?(leszekz)
(Reporter)

Comment 2

5 years ago
(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.
Flags: needinfo?(leszekz)
(Reporter)

Comment 3

5 years ago
Created attachment 8380325 [details]
Screanshots from 29.0a2

Comment 4

5 years ago
(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.
Flags: needinfo?(leszekz)
(Reporter)

Comment 5

5 years ago
(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.
Flags: needinfo?(leszekz)
(Reporter)

Comment 6

5 years ago
Created attachment 8380741 [details]
xpi for show problem
Blocks: 976420
No longer blocks: 942157
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.
Blocks: 942157
No longer blocks: 872617, 976420
Whiteboard: [Australis:P-]
Created attachment 8386949 [details]
Screenshot of addon pre-Australis
(Reporter)

Comment 9

4 years ago
(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.
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
(Reporter)

Comment 10

4 years ago
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.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
(Reporter)

Comment 11

4 years ago
Created attachment 8398002 [details]
new_down_manager.xpi

xpi for tests issue

Comment 12

4 years ago
(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.
Status: REOPENED → RESOLVED
Last Resolved: 4 years ago4 years ago
Resolution: --- → FIXED
(Reporter)

Comment 13

4 years ago
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.
(Reporter)

Comment 14

4 years ago
I have to change to toolbatitem id also in the old mode, and now is OK.
Status: RESOLVED → VERIFIED

Comment 15

4 years ago
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. :-)
(Reporter)

Comment 16

4 years ago
I tested after changed to #downloadbar-ddnbr both and all displayed OK. Many thanks.
Resolution: FIXED → INVALID
You need to log in before you can comment on or make changes to this bug.