Closed Bug 1358428 Opened 3 years ago Closed 3 years ago

Help button does not scale with longer translations

Categories

(Toolkit :: Themes, defect)

53 Branch
x86_64
macOS
defect
Not set

Tracking

()

VERIFIED FIXED
mozilla55
Tracking Status
firefox55 --- fixed

People

(Reporter: mstanke, Assigned: stefanh)

References

Details

Attachments

(3 files, 2 obsolete files)

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.
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.
Flags: needinfo?(jaws)
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.
Flags: needinfo?(jaws)
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/
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.
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.
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?
Blocks: 970079
Flags: needinfo?(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).
Flags: needinfo?(stefanh)
> width: 100%; } should work there).

Actually, "width: auto;" is probably better.
As it happens, I tested this and made a patch. Jared isn't available for review atm, but maybe Gijs can look at this.
Assignee: nobody → stefanh
Status: NEW → ASSIGNED
Attachment #8865163 - Flags: review?(gijskruitbosch+bugs)
Whoops, wrong commit msg.
Attachment #8865163 - Attachment is obsolete: true
Attachment #8865163 - Flags: review?(gijskruitbosch+bugs)
Attachment #8865166 - Flags: review?(gijskruitbosch+bugs)
Attachment #8865166 - Flags: review?(gijskruitbosch+bugs) → review?(jaws)
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?
(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.
Now with '-moz-appearance: none;'. See my previous comment about the weirdness (I must be missing something).
Attachment #8865166 - Attachment is obsolete: true
Attachment #8865166 - Flags: review?(jaws)
Attachment #8865582 - Flags: review?(jaws)
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.
Attachment #8865582 - Flags: review?(jaws) → review+
Pushed by stefanh@inbox.com:
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.
Component: Preferences → Themes
Product: Firefox → Toolkit
https://hg.mozilla.org/mozilla-central/rev/eddbaec59217
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla55
Works for me.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.