1028828 - "g" of character encoding and of forget button is clipped in the customization palette

Status: VERIFIED FIXED

(Firefox :: Toolbars and Customization, defect)

Description

[u428464]

Attachment: Customization palette on Windows 7

Follow-up of bug 987792. On Windows 7 at least the bottom part of the letter "g" in character encoding is still cut off when it's in the customization palette.

Comment 1

[u428464]

Can this be nominated for the backlog ?

Comment 2

[u428464]

Can reproduce for the new forget button.

Comment 5

[:Gijs (he/him)]

This is happening because:

0) the toolbarpalleteitem has overflow: hidden
1) the toolbarpalleteitem is set to height: calc(40px + 2em)
2) the contents on OS X look like this:

- wrapper (no margin/padding)
-- toolbarbutton (46 pixels high, 32 for image, 4 + 4 = 8 for its margins, 3+3 for padding)
- label (14 pixels high, line-height of 13.5, font-size 11, 2px top and bottom margin each)

the contents on Windows look like this:
- wrapper (no margin/padding)
-- toolbarbutton (48 pixels high, 32 for image, 4 + 4 = 8 for its margins, 3+3 for padding and 1+1 for borders)
- label (17 pixels high, line-height of 17, font-size 12, margin-top: 1px, margin-bottom: 2px)

so the different font-size gives 2px of extra space (2 * the 1px difference, so the total item is 64 vs. 62px), but it should be giving 48-46 + 17-14 + 1 - 2 = 4px of extra space.



While we could go and try really hard to make things match the different toolbar styles on each OS (despite there being different types of toolbarbuttons, so this likely not working perfectly either), it seems to me like we should just fix this by increasing the 40px thing to 48px, and change the 2em thing to a 1.5em or something similar.

Comment 6

[:Gijs (he/him)]

Attachment: fix cut-off descenders on Windows in toolbarpalette,

See comment 5 for background.

Comment 7

[Mike Conley (:mconley) (:⚙️)]

Comment on attachment 8549240 [details] [diff] [review]
fix cut-off descenders on Windows in toolbarpalette,

Review of attachment 8549240 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/base/content/browser.css
@@ +1170,5 @@
>  toolbarpaletteitem[place="palette"] {
>    width: 10em;
> +  /* icon (32) + margin (2 * 4) + button padding/border (2 * 4) + label margin (~2) + label
> +   * line-height (1.5em): */
> +  height: calc(50px + 1.5em);

This sort of thing kinda kills me. Something tells me we're side-stepping something that layout should just magically provide for us.

But yes, let's go with this for now to make things look better.

Comment 8

[:Gijs (he/him)]

remote:   https://hg.mozilla.org/integration/fx-team/rev/f9e9b2862a50

Comment 9

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/f9e9b2862a50

Comment 10

[Cornel Ionce [:noni] [Hubs QA]]

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0

The "g" character is now correctly displayed on latest Nightly, build ID: 20150125030202.