1065384 - [fte] tutorial string tutorial-vertical-scroll-v2-tiny has insufficient space in some locales

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::First Time Experience, defect)

Description

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

Attachment: screenshot

Boot2Gecko 2.2.0.0-prerelease 20140909160207 on Flame

The first screen of the tutorial uses the string with the entity tutorial-vertical-scroll-v2-tiny and is "Swipe up and down to browse your apps and bookmarks. Tap and hold an icon to delete, move, or edit it."

Unfortunately, many locales have much longer translations for "swipe", "apps", "tap" etc., so the translation gets much longer and requires five lines of text in e.g. German (see attached screenshot). French dropped some of the text to fit in 4 lines.

Please provide space for a fifth line of text

Comment 1

[Sam Foster [:sfoster] (he/him)]

Jacqueline, Eric: we looked at these kind of issues when the tutorial videos first landed. We may be able to make a rule that just gives 5 lines of text to this screen, but the video will shrink accordingly. Unfortunately the strings are locked so I don't think we have any other options here?

Comment 2

[Eric Pang [:epang] UX]

(In reply to Sam Foster [:sfoster] from comment #1)
> Jacqueline, Eric: we looked at these kind of issues when the tutorial videos
> first landed. We may be able to make a rule that just gives 5 lines of text
> to this screen, but the video will shrink accordingly. Unfortunately the
> strings are locked so I don't think we have any other options here?

Hey Sam, would we be able to increase the space only when needed?  5 lines of space is alot, and I think will be to much on other locales (such as English).  If the video shrinks accordingly will it end up blurry?

Comment 3

[Sam Foster [:sfoster] (he/him)]

> Hey Sam, would we be able to increase the space only when needed?  5 lines
> of space is alot, and I think will be to much on other locales (such as
> English).  If the video shrinks accordingly will it end up blurry?

I'll have to try it and see. Yes we can measure text and adjust the space as needed. I had just hoped we could avoid that. I'm not too worried about degrading the quality of the video, its more an issue of layout and possibly performance.

Comment 4

[Jacqueline Savory [:jsavory] UX]

I agree with Eric that reducing the video size for all locales would look strange. I think adjusting it when necessary is the best solution for now. 

Sorry for the long string, I tried to add the bookmark information using as few words as possible.

Comment 5

[Sam Foster [:sfoster] (he/him)]

Attachment: ftu-l10n-many-lines.png

Comment 6

[Sam Foster [:sfoster] (he/him)]

Attachment: ftu-l10n-average-lines.png

Comment 7

[Sam Foster [:sfoster] (he/him)]

Attachment: ftu-l10n-single-line.png

These screenshots show the extreme cases. Note that in practice we never have less than 2 lines, and never more than 5. But the patch I'll attach should be flexible enough to ensure the text is visible and legible regardless. 

I've got a minimum height on there to stop the video from jumping around too much as you step through. Beyond 3-4 lines it will start to squish down the video to fit.

Comment 8

[Sam Foster [:sfoster] (he/him)]

Attachment: PR to use flexbox in tutorial caption/video layout

This patch changes the layout from using a fixed-height for the text that captions the tutorial videos, to using flexbox to scale the video area as necessary. I've run it through a few times on the flame, with various string lengths and its performed well. I don't currently have a smaller screen device to test it on though. 
As the text is currently clipped/incomplete in some languages, I assume we're looking at 2.1 uplift for this if possible.

Comment 9

[Eric Pang [:epang] UX]

(In reply to Sam Foster [:sfoster] from comment #7)
> Created attachment 8489723 [details]
> ftu-l10n-single-line.png
> 
> These screenshots show the extreme cases. Note that in practice we never
> have less than 2 lines, and never more than 5. But the patch I'll attach
> should be flexible enough to ensure the text is visible and legible
> regardless. 
> 
> I've got a minimum height on there to stop the video from jumping around too
> much as you step through. Beyond 3-4 lines it will start to squish down the
> video to fit.

Hey Sam, looking good, but before I review these I just have one quick question.  Can we vertically center the text above the video in the space between the status bar and video?

Comment 10

[Fernando Campo (:fcampo)]

Comment on attachment 8489726 [details] [review]
PR to use flexbox in tutorial caption/video layout

slowly using flex in all ftu :D thanks Sam

also, I'd say +1 to comment 9 about vertical centering, it'd look better when empty space is big.

Comment 11

[Sam Foster [:sfoster] (he/him)]

> Hey Sam, looking good, but before I review these I just have one quick
> question.  Can we vertically center the text above the video in the space
> between the status bar and video?

Of course, in fact I thought I had done that but I see the screenshot says otherwise.

Comment 12

[Sam Foster [:sfoster] (he/him)]

Attachment: ftu-l10n-average-lines.png

Updated with vertically-centered text

Comment 13

[Sam Foster [:sfoster] (he/him)]

Attachment: ftu-l10n-many-lines.png

Comment 14

[Sam Foster [:sfoster] (he/him)]

Attachment: ftu-l10n-single-line.png

All screenshots for ui-review updated with fixed vertical centering

Comment 15

[Sam Foster [:sfoster] (he/him)]

PR updated with fixed vertical-centering on tutorial step text.

Comment 16

[Eric Pang [:epang] UX]

Comment on attachment 8490118 [details]
ftu-l10n-average-lines.png

Looks good, thanks Sam!

Comment 17

[Eric Pang [:epang] UX]

Comment on attachment 8490120 [details]
ftu-l10n-many-lines.png

Looks good, thanks!

Comment 18

[Eric Pang [:epang] UX]

Comment on attachment 8490121 [details]
ftu-l10n-single-line.png

Thanks again R+

Comment 19

[Sam Foster [:sfoster] (he/him)]

Landed on master: https://github.com/mozilla-b2g/gaia/commit/d3510be2067ff39ce07e72268ae510279ee7688e
Commit: https://github.com/mozilla-b2g/gaia/commit/7a9d4ff1c77db0249a3c4a44942609883c7abba8

Comment 20

[Sam Foster [:sfoster] (he/him)]

Comment on attachment 8489726 [details] [review]
PR to use flexbox in tutorial caption/video layout

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): New, longer strings in bug 1054352
[User impact] if declined: Some captions for the tutorial videos will be incomplete in some locales 
[Testing completed]: Clean Gaia-Try, manual testing with existing strings and short and long extremes
[Risk to taking this patch] (and alternatives if risky): Low risk, FTU app CSS changes only
[String changes made]: None

Comment 21

[Sam Foster [:sfoster] (he/him)]

Resolving as this is fixed in master.

Comment 22

[Ryan VanderMeulen [:RyanVM]]

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

Comment 25

[Alissa（leave from Mozilla）]

Attachment: german.3gp

Comment 26

[Alissa（leave from Mozilla）]

Attachment: french.3gp

Comment 27

[Alissa（leave from Mozilla）]

This issue has been successfully verified on Flame 2.1, 2.2
See attachment:germen.3gp,french.3gp
Reproducing rate: 0/5

Flame 2.1 new build:
Gaia-Rev        ccb49abe412c978a4045f0c75abff534372716c4
Gecko-Rev       https://hg.mozilla.org/releases/mozilla-b2g34_v2_1/rev/18fb67530b22
Build-ID        20141202001201
Version         34.0
Flame 2.2 version:
Gaia-Rev        725685831f5336cf007e36d9a812aad689604695
Gecko-Rev       https://hg.mozilla.org/mozilla-central/rev/2c9781c3e9b5
Build-ID        20141202040207
Version         37.0a1