Closed Bug 1269334 Opened 5 years ago Closed 3 years ago

Content of HTML buttons overflows for larger font sizes

Categories

(WebExtensions :: Frontend, defect, P3)

defect

Tracking

(firefox46 unaffected, firefox47 unaffected, firefox48 fix-optional, firefox49 fix-optional)

RESOLVED WORKSFORME
Tracking Status
firefox46 --- unaffected
firefox47 --- unaffected
firefox48 --- fix-optional
firefox49 --- fix-optional

People

(Reporter: ecfbugzilla, Unassigned)

References

Details

(Keywords: regression, Whiteboard: triaged)

Attachments

(1 file, 1 obsolete file)

599 bytes, application/x-xpinstall
Details
Attached file Minimal test extension (obsolete) —
Steps to reproduce:

1. Download attached extension.
2. Go to about:config and set xpinstall.signatures.required to false.
3. Open Add-ons Manager and install the extension from file.
4. Click the extension's icon in the toolbar (generic puzzle icon).

Expected results:

The pop-up shows up and the button looks correct (button text within button border). That's what you see in Chrome.

Actual results:

The button contents overflow the border. This is a regression from bug 1225633, button height has been fixed to 24px - if the contents are larger they will overflow. If the idea is setting a minimal size for buttons then min-height property should be used rather than height.
Assignee: nobody → bwinton
Whiteboard: triaged
Flags: qe-verify+
Keywords: regression
OS: Unspecified → All
QA Contact: vasilica.mihasca
Hardware: Unspecified → All
Attached file Minimal test extension
With bug 1269081 fixed this issue only affects extensions that opt in by specifying the browser_style flag. I updated the proof of concept extension accordingly.
Attachment #8747686 - Attachment is obsolete: true
I'm fairly obviously not working on this, so I'm unassigning myself.
I also kinda think that if you want really tall buttons you're kinda going off the default browser styles, and so maybe you should be writing your own CSS to handle that case (which would make this a WONTFIX), but I'll defer to shorlander's opinion there…
Assignee: bwinton → nobody
Flags: needinfo?(shorlander)
(In reply to Blake Winton (:bwinton) (:☕️) from comment #2)
> I'm fairly obviously not working on this, so I'm unassigning myself.
> I also kinda think that if you want really tall buttons you're kinda going
> off the default browser styles, and so maybe you should be writing your own
> CSS to handle that case (which would make this a WONTFIX), but I'll defer to
> shorlander's opinion there…

We should make sure it looks good with the suggested default sizes, but I don't see why the button shouldn't be able to scale.
Flags: needinfo?(shorlander)
The typical issue won't be the font size, it will be translations wrapping to two lines. While this isn't nice, extensions generally don't usually do much QA for their translations and I don't see why it should cause the button to overflow.
(In reply to Wladimir Palant from comment #4)
> The typical issue won't be the font size, it will be translations wrapping
> to two lines. While this isn't nice, extensions generally don't usually do
> much QA for their translations and I don't see why it should cause the
> button to overflow.

Wrapping text in buttons or other elements seems like it could cause all kinds of layout issues. For example some buttons wrapping to two lines and some not. Although that's hardly worse than text overflowing the button :) 

An alternative is setting text-overflow: ellipsis. But that is independent of the button height not scaling with font-size.
Component: WebExtensions: Untriaged → WebExtensions: Frontend
Priority: -- → P3
unable to reproduce, button looks correct to me.
Status: NEW → RESOLVED
Closed: 3 years ago
Resolution: --- → WORKSFORME
Product: Toolkit → WebExtensions
You need to log in before you can comment on or make changes to this bug.