1224412 - Panels don't resize correctly when they contain a label with padding/margins or that wraps text

Status: RESOLVED WORKSFORME

(Core :: XUL, defect)

Description

[Mark Hammond [:markh] [:mhammond]]

Attachment: t.patch

In a panel I'm working on, the panel automatically resizes correctly and avoids a scroll-bar as DOM nodes are added - unless the nodes are <label> elements that either (a) have padding or a margin or (b) wrap their text. In that case the panel doesn't resize correctly and scrollbars are added to the panel.

The attached code demonstrates the problem. The panel has buttons that dynamically add new nodes. All buttons work as expected except for "Add a wrapping label" and "Add a non-wrapping label with padding", both of which add scrollbars.

(Note that this is using the CustomizableUI, but I'm semi-confident the issue is directly related to panels. The issue is only reproducible when the button is customized to the toolbar - when the button is in the hamburger menu the CustomizableUI code explicitly manages the size, which it seems to do correctly. CustomizableUI does no explicit size management for panels anchored to a button.)

To reproduce:
* Apply the patch and start Firefox.
* Hamburger -> Customize and drag the "scroll test" widget to the toolbar (note that it doesn't have an icon).
* Click the buttons on the panel - note the panel resizes correctly except when the 2 buttons mentioned above are used.

Enn, can you offer any insights here? It would be good to know why this happens, but ultimately I'd also be happy with a reasonable work-around (other than to avoid text wrap or padding ;) I can also reproduce something similar with <image> elements, but I haven't tried to repro that here - hopefully insights here will apply to that too.

Comment 1

[Mark Hammond [:markh] [:mhammond]]

Attachment: label-good.png

This is what the panel looks like after clicking each of the top 3 buttons 1 time - the new elements are appended to the panel and it correctly resized to reflect the newly added items.

Comment 2

[Mark Hammond [:markh] [:mhammond]]

Attachment: label-bad.png

This is when I hit the next button "Add a wrapping label". The new label wraps such that it takes up 4 lines, but the panel size adjusted as if it was only a single line then added a scrollbar to accomodate those extra lines. The same basic thing happens when you click the "Add a non-wrapping label with padding" - it adds enough space for a single line and a scrollbar.

Comment 3

[:Gijs (out for now; he/him)]

I'm fairly sure we ran into a similar issue with the panic/forget button. We initially added a whole bunch of hacks, and then found a way of removing them again... I don't really remember the details offhand. bug 1074520 is what removed the hack and added overflow: visible CSS, which might be affecting you here and/or influencing how/whether you can repro inside/outside the panel menu (and might mean that the issue *is* limited to CustomizableUI/PanelUI because of the styling and nesting we use...).

Comment 4

[Neil Deakin]

Could be related to bug 1130400; let's see if Timothy has any insight.

Comment 5

[Timothy Nikkel (:tnikkel)]

Hmm, I would expect bug 1130400 to only help. Nothing comes to mind immediately about this. Would probably have to dig into some old fashioned debugging to get any info of value here.

Comment 6

[Vasilica Tamas, QA [:vtamas]]

Based on my testing and Mark’s comment from https://bugzilla.mozilla.org/show_bug.cgi?id=1238566#c16  this issue still reproduces on Firefox 45 beta 7, Firefox 46.0a2 (2016-02-18) and Firefox 47.0a1 (2016-02-18).
See screenshot: http://i.imgur.com/21arjFi.png

Comment 7

[Neil Deakin]

This is caused by same underlying issue as 1293242, and fixed by the patch in that bug.

Comment 8

[:Paolo Amadini]

We implemented the descriptionHeightWorkaround for this issue, no need to track separately.