1142485 - [l10n] End of call message is not displayed entirely with long localizations

Status: VERIFIED FIXED

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

Description

[Francesco Lodolo [:flod]]

Attachment: Screenshots end of call

The screenshot is from Italian 2.2: I could shorten the string, but it really doesn't make sense considering the amount of available space in the callscreen.

Other locales should have the same issue (e.g. pt-BR)
http://transvision.mozfr.org/string/?entity=apps/communications/dialer/dialer.properties:callEnded&repo=gaia

Comment 1

[Delphine Lebédel [:delphine - Use needinfo]]

ASking UX to look into this as per Description of this bug. Happens in multiple locales, can't shorten the string more.
nominating for 2.2 also, since this looks pretty bad and is happening on a very often used screen.

Comment 2

[Delphine Lebédel [:delphine - Use needinfo]]

Attachment: 2015-03-12-16-02-12.png

Also reproduces on today's latest master (see screenshot)
Gaia-Rev        0c4e8b0b330757e261b031b7e7f326ef419c9808
Gecko-Rev       https://hg.mozilla.org/mozilla-central/rev/5334d2bead3e
Build-ID        20150312010235
Version         39.0a1
Device-Name     flame
FW-Release      4.4.2
FW-Incremental  39
FW-Date         Thu Oct 16 18:19:14 CST 2014
Bootloader      L1TC00011880

Comment 3

[Wesley Huang [:wesley_huang] (EPM) (NI me)]

triage: the truncation is ugly, let's block.
ni to Carrie for providing UX input

Comment 5

[Carrie Wang [New account: [e-mail]]]

Hey Fang, 

Can we do some visual tweak to fix the problem? Thanks!

Comment 6

[Stephany Wilkes]

Clearing the flag for UX since Fang is on this already.

Comment 7

[Fang Shih [:fang]]

Ni? Dialer visual Carol, Thanks!

Comment 8

[Carol Huang [:Carol]]

Attachment: Bug 1142485_spec.jpg

Hi Doug,
Could you help revising the UI?
The attachment is the update UI spec for Call Ended screen. Thanks!:)

Comment 9

[Doug Sherk (:drs) (inactive)]

I'd rather not do dynamic font resizing this late in a release as it is risky. Would you be opposed to making the font-size always 1.7rem and ellipsizing it if necessary?

Comment 10

[Gabriele Svelto [:gsvelto]]

I agree with Doug here, we've got utilities for doing dynamic font resizing but it introduces more risk than it's worth IMHO.

Comment 11

[Carol Huang [:Carol]]

Hi Doug,
I didn't want to do dynamic font resizing either.
Please shrink the font size to 2 rem as the new spec(not just in Italian) and ellipsizing it if necessary. Thanks!

Comment 12

[Doug Sherk (:drs) (inactive)]

Ok, I think we're clear on what to do then. This assigned to Gabriele, so I'll leave it to him.

Comment 13

[GitHub Autolander Bot]

Attachment: [gaia] gabrielesvelto:bug-1142485-resize-call-ended-message > mozilla-b2g:master

Comment 14

[Gabriele Svelto [:gsvelto]]

Comment on attachment 8582268 [details] [review]
[gaia] gabrielesvelto:bug-1142485-resize-call-ended-message > mozilla-b2g:master

A couple of notes on the change. I have tried the offending locales (Italian, Russian) and none of them needs the ellipsis. I haven't added the text-overflow: ellipsis to the directive because it won't work as we're using a span for that piece of text so to make it work we'll need to use a div but that changes the formatting significantly and it would be worth doing it in a follow up since it carries a high risk of regression. I also didn't shrink the space above the string to 2.6rem as in the attached design because it would alter the position of the string and duration compared to the one shown during the call. Shifting everything up to align to the new position puts the big duration timer very close to the top bar and I think that's not what we want. I'll attach a screenshot for the UI review.

Comment 15

[Gabriele Svelto [:gsvelto]]

Attachment: Review screenshot

Comment 16

[Carol Huang [:Carol]]

Comment on attachment 8582268 [details] [review]
[gaia] gabrielesvelto:bug-1142485-resize-call-ended-message > mozilla-b2g:master

Hey Gabriele,
Thanks for letting me know these changes.
The UI looks good.

Comment 17

[Doug Sherk (:drs) (inactive)]

Comment on attachment 8582268 [details] [review]
[gaia] gabrielesvelto:bug-1142485-resize-call-ended-message > mozilla-b2g:master

As discussed, we're going to check if we can ellipsize this element.

Comment 18

[Gabriele Svelto [:gsvelto]]

Comment on attachment 8582268 [details] [review]
[gaia] gabrielesvelto:bug-1142485-resize-call-ended-message > mozilla-b2g:master

Here's the result of my tinkering. display:inline-block + max-width did the trick but I had to explicitly add vertical-align: bottom to preserve the alignment of the text with the other elements. We probably want to change this into a flexbox in the future to cut down on the CSS.

I accidentally noticed that the long-string issue was also present in the minimized statusbar view so I've addressed it there too. Note that I didn't need to change the display property there because the element is already part of a flexbox.

I'll attach a screenshot with the result of both changes.

Comment 19

[Gabriele Svelto [:gsvelto]]

Attachment: Review screenshot 2

Additional screenshot for the review displaying the text ellipsis. Note that in the left picture I've deliberately used a longer string to make the ellipsis visible while the right picture is the current state of the app after my changes. Before the long string would be wrapped on two lines making it almost unreadable. My change is not optimal as only part of the string is visible but I wouldn't spend more time improving it since this is only visible for a 1-2s at the end of a call when the user is outside of the callscreen. A rare situation to say the least.

Comment 20

[Doug Sherk (:drs) (inactive)]

Comment on attachment 8582268 [details] [review]
[gaia] gabrielesvelto:bug-1142485-resize-call-ended-message > mozilla-b2g:master

Looks good. Thanks for the followup investigation.

Comment 21

[Gabriele Svelto [:gsvelto]]

Thanks for the review!

Comment 22

[GitHub Autolander Bot]

http://docs.taskcluster.net/tools/task-graph-inspector/#QldHp4RIQW6bj2a9oCHXTQ

The pull request failed to pass integration tests. It could not be landed, please try again.

Comment 23

[Gabriele Svelto [:gsvelto]]

Gaia is closed, I'll wait until tomorrow before trying to reland.

Comment 24

[Gabriele Svelto [:gsvelto]]

Gaia is open again, let's try to land.

Comment 25

[GitHub Autolander Bot]

Pull request has landed in master: https://github.com/mozilla-b2g/gaia/commit/9db90f94b29779be08bedcf178fdaa32c0e6a118

Comment 26

[Gabriele Svelto [:gsvelto]]

Comment on attachment 8582268 [details] [review]
[gaia] gabrielesvelto:bug-1142485-resize-call-ended-message > mozilla-b2g:master

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): Long strings in certain locales where not accounted for when the callscreen layout was first designed
[User impact] if declined: In certain locales (Italian and Russian for example) the "call ended" string is so long that it causes the call duration and icon to be misplaced, significantly breaking the layout. A similar problem appears when the callscreen is minimized in the statusbar.
[Testing completed]: Tested on a device and on the emulator with two different resolutions and two different locales
[Risk to taking this patch] (and alternatives if risky): Minimal risks, this is only a small layout change with no logic involved.
[String changes made]: None

Comment 27

[Ryan VanderMeulen [:RyanVM]]

v2.2: https://github.com/mozilla-b2g/gaia/commit/1a8c3b10ba0895efeb1bd06d8c61650bff0dc3ed

Comment 28

[Yeojin Chung [:YeojinC]]

This issue is verified fixed on Flame Master and 2.2.

Result: The font is reduced, and the string fits within the screen properly. I sampled 10 languages: Italian, Russian, Portuguese, Indonesian, Turkish, Swahili, and Arabic fits within the screen; Malay, Tamil, and Bosnian are truncated.

Environmental Variables:
Device: Flame 3.0 (KK, 319mb, full flash)
Build ID: 20150417010203
Gaia: 3cd0a9facce26c2acc7be3755a17131a6358e33f
Gecko: 51e3cb11a258
Gonk: b83fc73de7b64594cd74b33e498bf08332b5d87b
Version: 40.0a1 (3.0)
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:40.0) Gecko/40.0 Firefox/40.0

Environmental Variables:
Device: Flame 2.2 (KK, 319mb, full flash)
Build ID: 20150417002504
Gaia: d50b8a3919a7b4d8d289f150d3b9bed704ebafa9
Gecko: 5ebf32030512
Gonk: ebad7da532429a6f5efadc00bf6ad8a41288a429
Version: 37.0 (2.2)
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0

Comment 29

[Yeojin Chung [:YeojinC]]

Regarding the truncation issue mentioned in Comment 28, I filed a new bug 1155901.