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

VERIFIED FIXED in Firefox OS v2.1

Status

Firefox OS
Gaia::Settings
VERIFIED FIXED
5 years ago
3 years ago

People

(Reporter: aryx, Assigned: flod)

Tracking

(Depends on: 1 bug, Blocks: 1 bug, {l12y})

unspecified
2.1 S1 (1aug)
ARM
Gonk (Firefox OS)
Dependency tree / graph

Firefox Tracking Flags

(b2g-v2.1 verified)

Details

(Whiteboard: LocRun2.0)

Attachments

(4 attachments, 3 obsolete attachments)

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).
Blocks: 892075
Flags: needinfo?(firefoxos-ux-bugzilla)

Comment 1

5 years ago
Is there a screenshot of this one? If so, please attach. Thanks!
Created attachment 779803 [details]
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

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

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

Comment 6

5 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!
Flags: needinfo?(firefoxos-ux-bugzilla)
(Assignee)

Comment 7

4 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.
Flags: needinfo?(firefoxos-ux-bugzilla)

Comment 8

4 years ago
Flagging Eric to advise.
Flags: needinfo?(firefoxos-ux-bugzilla) → needinfo?(epang)
(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!
Depends on: 908309
Flags: needinfo?(epang)
(Assignee)

Updated

4 years ago
Blocks: 930786
(Assignee)

Comment 10

4 years ago
Created attachment 8395615 [details]
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;
}
Duplicate of this bug: 1006033
Duplicate of this bug: 1006080
Duplicate of this bug: 940516
Duplicate of this bug: 1000339
Duplicate of this bug: 1000597
Duplicate of this bug: 1001193
Duplicate of this bug: 1002801
Duplicate of this bug: 1005402
Duplicate of this bug: 1006783
Duplicate of this bug: 1001027
Duplicate of this bug: 1001041
Duplicate of this bug: 999772
Duplicate of this bug: 1000298
Can this bug fix options in HUD panel, too?
We have truncation bugs for a bunch of locales in this panel as well
Whiteboard: LocRun2.0
Duplicate of this bug: 1035489

Updated

4 years ago
Duplicate of this bug: 1000570
(Assignee)

Comment 27

4 years ago
Created attachment 8455260 [details] [review]
Pull request on Github
Attachment #8455260 - Flags: review?(ehung)
(Assignee)

Comment 28

4 years ago
Created attachment 8455262 [details]
comparison.psd

Comparison between old (left) and patched.
Attachment #8395615 - Attachment is obsolete: true
(Assignee)

Comment 29

4 years ago
Created attachment 8455263 [details]
Comparison

Comparison between current (left) and patched (right).
Attachment #8455262 - Attachment is obsolete: true

Comment 30

4 years ago
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!
Attachment #8455260 - Flags: ui-review?(epang)
Attachment #8455260 - Flags: review?(ehung)
Attachment #8455260 - Flags: review+
(Assignee)

Comment 31

4 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.
Assignee: nobody → francesco.lodolo
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!
Attachment #8455260 - Flags: ui-review?(epang) → ui-review?(chuang)
Comment on attachment 8455260 [details] [review]
Pull request on Github

Helen will take care of this ui review
Attachment #8455260 - Flags: ui-review?(chuang) → ui-review?(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.
Attachment #8455260 - Flags: ui-review?(hhuang) → ui-review-
Created attachment 8460044 [details]
VD Feedback.jpg

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

Comment 36

4 years ago
Created attachment 8460108 [details]
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.
Attachment #8455263 - Attachment is obsolete: true
(Assignee)

Comment 37

4 years ago
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.
Attachment #8455260 - Flags: ui-review- → ui-review?(hhuang)
Comment on attachment 8455260 [details] [review]
Pull request on Github

It's awesome! Thanks for your great help :)
Attachment #8455260 - Flags: ui-review?(hhuang) → ui-review+
(Assignee)

Comment 39

4 years ago
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).
Attachment #8455260 - Flags: review+ → review?(ehung)

Comment 40

4 years ago
Comment on attachment 8455260 [details] [review]
Pull request on Github

Thanks, awesome!
Attachment #8455260 - Flags: review?(ehung) → review+
(Assignee)

Comment 41

4 years ago
Great, setting checkin-needed.
Status: NEW → ASSIGNED
Keywords: checkin-needed
Master: https://github.com/mozilla-b2g/gaia/commit/abd7658ab35a2945e13e03c79130868048074d0e
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
status-b2g-v2.1: --- → fixed
Keywords: checkin-needed
Resolution: --- → FIXED
Target Milestone: --- → 2.1 S1 (1aug)
(Assignee)

Updated

4 years ago
Duplicate of this bug: 1007282
(Assignee)

Updated

4 years ago
Duplicate of this bug: 1005343
(Assignee)

Updated

4 years ago
Duplicate of this bug: 931606
(Assignee)

Updated

4 years ago
Duplicate of this bug: 1033571
(Assignee)

Comment 47

4 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
Status: RESOLVED → VERIFIED

Updated

3 years ago
status-b2g-v2.1: fixed → verified
You need to log in before you can comment on or make changes to this bug.