1358428 - Help button does not scale with longer translations

Status: VERIFIED FIXED

(Toolkit :: Themes, defect)

Description

[Michal Stanke (Mozilla.cz) [:mstanke][:MikkCZ]]

Attachment: Screen Shot 2017-04-20 at 13.59.03.png

The help button on various places in preferences (e.g. font color or preferred language settings, ...) on Mac OS X does not scale with the length of the translated string. I do not check the preferences in Mac OS version very often so I am not sure, in which version this actually occurred. But I can confirm there is no such issue in Firefox for Linux or Windows.

Comment 1

[Michal Stanke (Mozilla.cz) [:mstanke][:MikkCZ]]

Jared, what can we do to fix this? Maybe it can be solved as part of the preferences redesign? Or if there is some guidance, I may try to work on this myself, but currently I know nothing about Firefox code.

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

I don't have a Mac readily available right now, so I can't answer specifically why you're seeing this.

However, you should be able to use the Inspector tool to find out why the text is being pushed outside of the box like that. On your Mac, press Cmd+Shift+K to open the developer tools, then click on the Inspector and select the help button using the "mouse cursor" button at the far left of the tools. Once you've selected the help button, you can see the computed values for the box by clicking on the Computed tab on the right side. Look at the box for the button as well as the inner box that is around the label. It looks like there is some padding at the beginning of one of those boxes, as well as a max-width on the button. The max-width shouldn't exist, and the padding should be the same on both sides.

I hope that helps, please tag me for needinfo again if you still want some more help. I should be back at a Mac by Tuesday May 2nd at the latest.

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

Also, this bug should be really easy to fix if you use mozregression [1] to find out when this bug was introduced.

[1] http://mozilla.github.io/mozregression/

Comment 4

[Francesco Lodolo [:flod]]

Uh, I thought I commented in this bug, but I did it in the mailing list.

It looks like setting a width: 100% on the xul:button fixes the border, but I have no idea what other issues that could create (I guess it could be mitigated with a max-width).

There's no max-width set on the element, there's a width on button[dlgtype="help"] and a min-width on button, but they don't seem to have any effect if removed. I can't reproduce on Linux, but I can't figure out why it works either.

Comment 5

[Francesco Lodolo [:flod]]

On a side note: I can reproduce this on 54.0b3 (64 bit), so it's been there for a while. Not sure how helpful it would be to track down when it was introduced, it might date back to the introduction of in-product prefs.

Comment 6

[Michal Stanke (Mozilla.cz) [:mstanke][:MikkCZ]]

I have been playing with the devtools on Firefox Beta on Mac for a while and I have realized, the problem is probably a combination of CSS and some misbehaving rendering.

For the xul:button element, I have noticed, that devtools render the element borders differently, than the button border itself is rendered. Looking at the CSS, I haven't found any rule, that would shift the borders anyhow, but found the rule, that sets the button width to 20px (button.css:82). When I toggle this off, nothing happens until I also toggle border CSS from common.css:156 off and on. Then the border is rendered OK. Enabling the width and toggling the border off and on again shows it broken.

Looking at the button.css file for all platforms, the special rule for help buttons is there for osx only, not Linux nor Windows. The last change of the mentioned lines was in this commit https://hg.mozilla.org/mozilla-central/annotate/c483fb963fe1/toolkit/themes/osx/global/button.css#l67 (bug 970079).

:stefanh, do you remember what was the reason to hardcode the 20px width and if it could be safely omitted or replaced by 100% suggested by :flod?

Comment 7

[Michal Stanke (Mozilla.cz) [:mstanke][:MikkCZ]]

Attachment: help button borders in DevTools

Comment 8

[Stefan [:stefanh]]

The "-moz-appearance: -moz-mac-help-button;" rule in button.css creates a native help button without a label. IIRC the native mac help button doesn't scale, so that's why I hardcoded the width. Since you don't use the help button that ships with the widget, I'd just override the width in one of the in-content/common.css files (either the cross-platform one or the one in toolkit/themes/osx/global/in-content/common.css (button[dlgtype="help"] { width: 100%; } should work there).

Comment 9

[Stefan [:stefanh]]

> width: 100%; } should work there).

Actually, "width: auto;" is probably better.

Comment 10

[Stefan [:stefanh]]

Attachment: in-content dialogs: Set mac help button width to auto so there’s always room for the label text

As it happens, I tested this and made a patch. Jared isn't available for review atm, but maybe Gijs can look at this.

Comment 11

[Stefan [:stefanh]]

Attachment: in-content dialogs: Set mac help button width to auto so there’s always room for the label text

Whoops, wrong commit msg.

Comment 12

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8865166 [details] [diff] [review]
in-content dialogs: Set mac help button width to auto so there’s always room for the label text

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

::: toolkit/themes/osx/global/in-content/common.css
@@ +28,5 @@
>    margin-right: 4px;
>  }
>  
> +xul|button[dlgtype="help"] {
> +  width: auto;

Should this also have -moz-appearance: none; too?

Comment 13

[Stefan [:stefanh]]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #12)
.
.
. 
> > +xul|button[dlgtype="help"] {
> > +  width: auto;
> 
> Should this also have -moz-appearance: none; too?

Yes, I guess that would be better. Especially since I don't understand why it works without it. The only 'moz-appearance: none;' rule I can find is the one in https://dxr.mozilla.org/mozilla-central/rev/81977c96c6ff49e4b70f88a55f38d47f5e54a08b/toolkit/themes/shared/in-content/common.inc.css#186 and 'button[dlgtype="help"]' looks more specific to me.

Comment 14

[Stefan [:stefanh]]

Attachment: in-content dialogs: Set mac help button width to auto so there’s always room for the label text

Now with '-moz-appearance: none;'. See my previous comment about the weirdness (I must be missing something).

Comment 15

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8865582 [details] [diff] [review]
in-content dialogs: Set mac help button width to auto so there’s always room for the label text

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

It most likely works without the -moz-appearance:none; because we are setting another CSS property that implicitly sets -moz-appearance:none. Usually this only needs background-color or border-width to get set to change -moz-appearance to none.

I'm fine with this patch as it's more explicit.

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/eddbaec59217
in-content dialogs: Set mac help button width to auto so there’s always room for the label text. r=jaws.

Comment 17

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

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

Comment 18

[Michal Stanke (Mozilla.cz) [:mstanke][:MikkCZ]]

Works for me.