Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout) Reporter
	Description • 11 years ago

Unagi with Gaia 1.1.0.0-prerelease 20130711070209

With some non-English languages like German, some texts in Settings > Device Information > More Information > Developer are cropped, e.g. flash new paint and slow animation logging. These labels have to be shown on two lines to fit (or a different solution be found).

	Stephany Wilkes
	Comment 1 • 11 years ago

Is there a screenshot of this one? If so, please attach. Thanks!

	Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout) Reporter
	Comment 2 • 11 years ago

This is a screenshot of the issue with German as UI language. It also affects other languages.

Label(s) too long, get(s) cropped:
Arab
Chinese traditional
Croatian
Dutch
German
Greek
Romanian
Serbian
Slovakian
Turkish

Words abbreviated with full-stop/dot by localizer:
French
Russian

Maybe some of the passing localizations had to shorten the texts, making them more ambiguous.

	Stephany Wilkes
	Comment 3 • 11 years ago

Please let me know if the recommended LabelBeginning...LabelEnd ellipsis method (see https://docs.google.com/a/mozilla.com/document/d/19XbHvtThAUCwzyx_TXJHY7ZX8t99MxhZnZamWUcB158/edit) might work here. If it will not work, UX can advise on UI adjustment.

	Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout) Reporter
	Comment 4 • 11 years ago

We are told by l10n staff not use that. And at least in German, I am not sure it would always work (including understand by users), e.g. "Log slow animations" is "Langsame Animationen protokollieren" with "Langs. Anim. prot." as shortest way to do it with abbreviations, ellipsis in the middle won't work at all for this string.

	Axel Hecht [:Pike]
	Comment 5 • 11 years ago

(In reply to Stephany Wilkes from comment #3)
> Please let me know if the recommended LabelBeginning...LabelEnd ellipsis
> method (see
> https://docs.google.com/a/mozilla.com/document/d/
> 19XbHvtThAUCwzyx_TXJHY7ZX8t99MxhZnZamWUcB158/edit) might work here. If it
> will not work, UX can advise on UI adjustment.

Stephany, I'm strictly against doing that. It's turning l10n working patterns into really bad state. We'll breaking translation memories, spellcheckers, whatnot. It's the wrong thing to do.

	Stephany Wilkes
	Comment 6 • 11 years ago

Then it shouldn't be a suggested pattern, shouldn't have remained in the document, and shouldn't be suggested. I'll update it accordingly.

We'll need to come up with something different for flexible UI in the long term, since UX does not have team capacity to address each bug as a one-off. We'll do what we can on these in the meantime, though!

	Francesco Lodolo [:flod] Assignee
	Comment 7 • 11 years ago

The problem is still there and getting much worse in 1.2 (longer labels). Any plan to fix this? I'm running out of abbreviations.

	Stephany Wilkes
	Comment 8 • 11 years ago

Flagging Eric to advise.

	Eric Pang [:epang] UX
	Comment 9 • 11 years ago

(In reply to Stephany Wilkes from comment #8)
> Flagging Eric to advise.

Hi, I've opened the bug 908309 to allow two lines in settings when truncation exist to address situations like this. Thanks!

	Francesco Lodolo [:flod] Assignee
	Comment 10 • 11 years ago

Since bug 908309 doesn't seem to get any traction, is there any chance to fix this with override rules only for section#developers?

I count 5 truncated labels in English at the moment.

For example, from a quick/incomplete test this code would keep one-line labels as they are, and let labels span on multiple lines if necessary

#developer #label.pack-checkbox input ~ span:after {
  background-position: center 0;
}

#developer ul li > label > span {
  overflow: visible;
  white-space: normal;
  min-height: 6rem;
  height: auto;
  line-height: 2.5rem;
  padding: 1.7rem 4rem 1rem 3rem;
}

	Théo Chevalier [:tchevalier]
	Comment 24 • 11 years ago

Can this bug fix options in HUD panel, too?
We have truncation bugs for a bunch of locales in this panel as well

	Francesco Lodolo [:flod] Assignee
	Comment 28 • 10 years ago

Comparison between old (left) and patched.

	Francesco Lodolo [:flod] Assignee
	Comment 29 • 10 years ago

Comparison between current (left) and patched (right).

	Evelyn Hung
	Comment 30 • 10 years ago

Comment on attachment 8455260 [details]
Pull request on Github

Thank you for the patch. It looks good to me, but I think we need ui-review.

Hi Eric, this patch do more than fixing two lines issue, there are a few visual changes e.g. size and position of the color box to make it look balanced. I think visual team would like to take a look. Thanks!

	Francesco Lodolo [:flod] Assignee
	Comment 31 • 10 years ago

(In reply to Evelyn Hung [:evelyn] from comment #30)
> Thank you for the patch. It looks good to me, but I think we need ui-review.

Thanks, I absolutely agree.

	Eric Pang [:epang] UX
	Comment 32 • 10 years ago

Comment on attachment 8455260 [details]
Pull request on Github

redirecting review to Carol since she now owns the visuals of the settings app.  Thanks!

	Carol Huang [:Carol]
	Comment 33 • 10 years ago

Comment on attachment 8455260 [details]
Pull request on Github

Helen will take care of this ui review

	Helen Huang [:HHuang]
	Comment 34 • 10 years ago

Comment on attachment 8455260 [details]
Pull request on Github

I’ve checked the patch, showing two lines works for me, thanks for the implement. Just want to make sure it's vertical center alignment.

I also noticed that there are some layout problems in Developer > Developer HUD. The margin of color-box looks squished in fixed version, it is suppose to keep the same width. Some color-box are smaller than the others, but I think all of them should be the same size (2x2 rem). Besides, I found some dividers are disappeared, please help to fix them.

Thank you.

	Helen Huang [:HHuang]
	Comment 35 • 10 years ago

I have notes on the screenshot, please take a look.

	Francesco Lodolo [:flod] Assignee
	Comment 36 • 10 years ago

I think I've addressed all the requests.

Some notes on the separators: HUD section is using <ul> and <li> in a peculiar way, and I tried to change the markup as little as possible.

That means adding an extra class to the two elements that need a top border: removing the rule to hide border on last child would cause a border on top of the header element. Also moved the memory elements in separate list items.

Also fixed RTL, which I didn't think about in the first version.

	Francesco Lodolo [:flod] Assignee
	Comment 37 • 10 years ago

Comment on attachment 8455260 [details]
Pull request on Github

Helen, can you check the new screenshots?

I'll have to go back to the review after ui-review since I've changed part of the markup.

	Helen Huang [:HHuang]
	Comment 38 • 10 years ago

Comment on attachment 8455260 [details]
Pull request on Github

It's awesome! Thanks for your great help :)

	Francesco Lodolo [:flod] Assignee
	Comment 39 • 10 years ago

Comment on attachment 8455260 [details]
Pull request on Github

Evelyn, can you check again the patch?

To address ui-review, I had to do some changes to the existing markup (see also comment 36).

	Evelyn Hung
	Comment 40 • 10 years ago

Comment on attachment 8455260 [details]
Pull request on Github

Thanks, awesome!

	Francesco Lodolo [:flod] Assignee
	Comment 41 • 10 years ago

Great, setting checkin-needed.

	Ryan VanderMeulen [:RyanVM]
	Comment 42 • 10 years ago

Master: https://github.com/mozilla-b2g/gaia/commit/abd7658ab35a2945e13e03c79130868048074d0e

	Francesco Lodolo [:flod] Assignee
	Comment 47 • 10 years ago

Verified on flame

Gaia      c8511217183ade630f5afa7698c04efef5c6806b
Gecko     https://hg.mozilla.org/mozilla-central/rev/a4dcfbebcb58
BuildID   20140728040209
Version   34.0a1
ro.build.version.incremental=110
ro.build.date=Fri Jun 27 15:57:58 CST 2014