Closed Bug 1399955 Opened 7 years ago Closed 7 years ago

onboarding tour menu item and button are overlaps each other in ja locale build

Categories

(Firefox :: Tours, defect, P3)

57 Branch
Unspecified
Windows 10
defect

Tracking

()

VERIFIED FIXED
Firefox 57
Tracking Status
firefox-esr52 --- unaffected
firefox55 --- unaffected
firefox56 --- unaffected
firefox57 + verified

People

(Reporter: alice0775, Assigned: gasolin)

References

Details

(Keywords: regression, Whiteboard: [photon-onboarding])

Attachments

(5 files)

Attached image screenshot
[Tracking Requested - why for this release]:

See attached screen shot

Reproducible: always

Steps To Reproduce:
1. Open Nightly ja locale build
   OR
   Click Home toolbutton
   OR
   Click [+] New Tab button
2. Click logo at the left-top so that onboarding tour will pop up


Actual Results:
onboarding tour menu item and button are overlaps each other
Whiteboard: [photon-visual] → [photon-visual] [triage]
Whiteboard: [photon-visual] [triage] → [photon-visual] [triage][photon-onboarding]
Whiteboard: [photon-visual] [triage][photon-onboarding] → [photon-onboarding]
Whiteboard: [photon-onboarding] → [photon-onboarding][triage]
Checked transvision the jp translation seems the longest

https://transvision.mozfr.org/?recherche=Library&repo=central&sourcelocale=en-US&locale=fr&search_type=strings
FR: Bibliothèque

https://transvision.mozfr.org/?recherche=library&repo=central&sourcelocale=en-US&locale=de&search_type=strings
GE: Bibliothek

https://transvision.mozfr.org/?recherche=library&repo=central&sourcelocale=en-US&locale=ja&search_type=strings
JA: ブラウジングライブラリー (Browsing Library)

If there's no other locale get the same problem, we'd suggest change the navbar string to shorter ja string(ex: ライブラリー library) if possible. 
If there's other locale get the same problem, we'd fix that anyway...
Flags: needinfo?(francesco.lodolo)
I can't answer about changing the translation itself, that would be a bug for the Japanese team. 

Having said that, I really suggest to fix the layout: you're looking at one button, but you don't know the combined effect of all strings in other languages in the whole panel.

If a language like Japanese breaks, it's almost impossible that the layout is not broken in other more verbose languages.
Flags: needinfo?(francesco.lodolo)
Michael, could you help provide the right layout when the nav item is too long?
Flags: needinfo?(mverdi)
Flags: needinfo?(bmao)
Bryant, verdi is in PTO, could you help on the layout decision?
Flod, Bryant suggest to make the nav item font size smaller in japan(JA) locale.

And for bug 1388813, Aaron also suggest only adjust the notification bar height in franch(FR) locale.

Though we can do so in CSS (:lang(ja)) and the mockup looks good, per language treatment seems more error prone. I wonder if we have ever did that in any other place?


Or could you help ni japan team to see if its possible to change the string?
Forget add flag, Please read comment 5, thanks.
Flags: needinfo?(francesco.lodolo)
CSS rules per locale simply don't scale, unless you plan to test 90 languages on 3 platforms. A design that can't fit longer translations is broken, especially on desktop, and it should be fixed without having to take compromises on the language side.

@marsf
Any chance the Japanese translation can be shortened in the meantime?
Flags: needinfo?(francesco.lodolo) → needinfo?(chimantaea_mirabilis)
(In reply to Francesco Lodolo [:flod] from comment #7)
> CSS rules per locale simply don't scale, unless you plan to test 90
> languages on 3 platforms. A design that can't fit longer translations is
> broken, especially on desktop, and it should be fixed without having to take
> compromises on the language side.

Agree, good design should be scalable regardless language differences. In this case, I suggest we dynamically adjust the overlay height if some nav items flood to more lines, while keeping the copy short as we want to make the navigation looks neat. 

However, the works seems takes more efforts and might affect to other parts of the overlay so I'm not sure if it's a good idea for this moment.
Flags: needinfo?(mverdi)
Flags: needinfo?(bmao)
(In reply to Francesco Lodolo [:flod] from comment #7)
> @marsf
> Any chance the Japanese translation can be shortened in the meantime?

At l10n side, we didn't use the term "Library" at all before Firefox 57.0.
I have just introduced this as "Browsing library" few weeks ago, so ja users may not be understood the "Library" if it is shortened.
Flags: needinfo?(chimantaea_mirabilis)
If we can have line break, "ブラウジング\nライブラリー" is ok.
Here's an alternative approach that just apply `max-height:54px` to the right overlay. Therefore each nav item won't expand it's height too much when the nav item has 2 lines (normal height is 48px + 9 margin-bottom). 
Does it acceptable from UX perspective?
Flags: needinfo?(bmao)
Comment on attachment 8910110 [details]
Bug 1399955 - set menu item max height to show 2 lines properly;

Looks fine to me but let's wait for UX's opinion.
Attachment #8910110 - Flags: review?(rexboy) → review+
Comment on attachment 8910110 [details]
Bug 1399955 - set menu item max height to show 2 lines properly;

https://reviewboard.mozilla.org/r/181590/#review187016
Comment on attachment 8910111 [details]
Bug 1399955 - set notification-body max height to show more description;

https://reviewboard.mozilla.org/r/181592/#review187018
Attachment #8910111 - Flags: review?(rexboy) → review+
(In reply to Fred Lin [:gasolin] from comment #11)
> Created attachment 8910073 [details]
> apply max-height on nav item
> 
> Here's an alternative approach that just apply `max-height:54px` to the
> right overlay. Therefore each nav item won't expand it's height too much
> when the nav item has 2 lines (normal height is 48px + 9 margin-bottom). 
> Does it acceptable from UX perspective?

The solution looks viable for now as I assume any language should hardly make 4 or more nav items exceed two lines. But I think we should still do it dynamically in the long run.
Flags: needinfo?(bmao)
Assignee: nobody → gasolin
Status: NEW → ASSIGNED
Pushed by flin@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/ac48d6f6f4d2
set menu item max height to show 2 lines properly;r=rexboy
https://hg.mozilla.org/integration/autoland/rev/437aef38f07e
set notification-body max height to show more description;r=rexboy
Depends on: 1388813
https://hg.mozilla.org/mozilla-central/rev/ac48d6f6f4d2
https://hg.mozilla.org/mozilla-central/rev/437aef38f07e
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 57
Hi, please help verify according to this bug's description and the bug 1388813's description
Flags: qe-verify+
Flags: needinfo?(jwilliams)
I have verified that this is fixed on today's nightly. The skip tour button no longer covers the last element in the overlay.
Status: RESOLVED → VERIFIED
Flags: needinfo?(jwilliams)
I reproduced this issue using Fx57.0a1 (2017-09-14) ja version, on Windows 10 x64. I can confirm this issue is fixed, I verified using Fx 57.0b8 (ja), on Windows 10 x64.
Flags: qe-verify+
Priority: -- → P3
Whiteboard: [photon-onboarding][triage] → [photon-onboarding]
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: