430608 - xul:button with constrained width looks bad (label overflows aqua button border)

Status: NEW

(Core :: XUL, defect)

Description

[Jesse Ruderman]

Attachment: testcase

The text "Why was this site blocked?" goes outside of the button.  The button appearance should expand to accommodate the text that insists on not wrapping.

This bug affects phishing-protection pages in frames, e.g.:

data:text/html,<iframe src="http://www.mozilla.com/firefox/its-a-trap.html"></iframe>

Comment 1

[Boris Zbarsky [:bzbarsky]]

Not a form controls issue; this thing doesn't use any of the form controls code.

That said, this is a regression from 1.8; probably from the reflow branch.

Comment 2

[Boris Zbarsky [:bzbarsky]]

I suppose we could throw a "min-width: -moz-max-content" on this thing, at least if it's not ever supposed to wrap....  That said, if it's not supposed to wrap, I'd think that "min-width: -moz-min-content" would also work, but that seems to use the longest word.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Alternately, we could have nsButtonBoxFrame implement a better GetMinWidth/GetPrefWidth.

Comment 4

[[e-mail]]

Offhand I'm not sure either of those solutions would work; you can put your own <label>wrapped text goes here</label> inside a button if you wish, and buttons aren't the only controls using button frames.

Comment 5

[[e-mail]]

The problem here is that the div wants to follow HTML layout rules whereby it sets the size of the button, while the label wants to follow XUL layout rules whereby the label sets the size of the button, and never the twain shall meet.

For cropped or wrapped text in a button you have to provide your own explicit label e.g. <button><label flex="1" crop="right" value="Why was this site blocked?"></button> <button><label>Why was this site blocked?</label><button>

Comment 6

[Boris Zbarsky [:bzbarsky]]

The button can decide that it'll always let its children set its size.  That's basically what both of the solutions I suggested are all about.

Comment 7

[[e-mail]]

In that case I'd apply min-width: -moz-max-content; to that specific button.

Comment 8

[Boris Zbarsky [:bzbarsky]]

You mean in the error page styles?  That would make a lot of sense to me.