892700 - [settings] Show developer/debug options on two lines if necessary (wrap text)

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::Settings, defect)

Description

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

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).

Comment 1

[Stephany Wilkes]

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

Comment 2

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

Attachment: screenshot of issue (language used: German)

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.

Comment 3

[Stephany Wilkes]

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.

Comment 4

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

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.

Comment 5

[Axel Hecht [:Pike]]

(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.

Comment 6

[Stephany Wilkes]

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!

Comment 7

[Francesco Lodolo [:flod]]

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.

Comment 8

[Stephany Wilkes]

Flagging Eric to advise.

Comment 9

[Eric Pang [:epang] UX]

(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!

Comment 10

[Francesco Lodolo [:flod]]

Attachment: Test patched

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;
}

Comment 24

[Théo Chevalier]

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

Comment 27

[Francesco Lodolo [:flod]]

Attachment: Pull request on Github

Comment 28

[Francesco Lodolo [:flod]]

Attachment: comparison.psd

Comparison between old (left) and patched.

Comment 29

[Francesco Lodolo [:flod]]

Attachment: Comparison

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

Comment 30

[Evelyn Hung]

Comment on attachment 8455260 [details] [review]
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!

Comment 31

[Francesco Lodolo [:flod]]

(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.

Comment 32

[Eric Pang [:epang] UX]

Comment on attachment 8455260 [details] [review]
Pull request on Github

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

Comment 33

[Carol Huang [:Carol]]

Comment on attachment 8455260 [details] [review]
Pull request on Github

Helen will take care of this ui review

Comment 34

[Helen Huang [:HHuang]]

Comment on attachment 8455260 [details] [review]
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.

Comment 35

[Helen Huang [:HHuang]]

Attachment: VD Feedback.jpg

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

Comment 36

[Francesco Lodolo [:flod]]

Attachment: Updated comparison

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.

Comment 37

[Francesco Lodolo [:flod]]

Comment on attachment 8455260 [details] [review]
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.

Comment 38

[Helen Huang [:HHuang]]

Comment on attachment 8455260 [details] [review]
Pull request on Github

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

Comment 39

[Francesco Lodolo [:flod]]

Comment on attachment 8455260 [details] [review]
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).

Comment 40

[Evelyn Hung]

Comment on attachment 8455260 [details] [review]
Pull request on Github

Thanks, awesome!

Comment 41

[Francesco Lodolo [:flod]]

Great, setting checkin-needed.

Comment 42

[Ryan VanderMeulen [:RyanVM]]

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

Comment 47

[Francesco Lodolo [:flod]]

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