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

VERIFIED FIXED in Firefox 57

Status

()

Firefox
Tours
P3
normal
VERIFIED FIXED
10 months ago
8 months ago

People

(Reporter: Alice0775 White, Assigned: gasolin@mozilla.com)

Tracking

({regression})

57 Branch
Firefox 57
Unspecified
Windows 10
regression
Points:
---

Firefox Tracking Flags

(firefox-esr52 unaffected, firefox55 unaffected, firefox56 unaffected, firefox57+ verified)

Details

(Whiteboard: [photon-onboarding])

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(5 attachments)

(Reporter)

Description

10 months ago
Created attachment 8908253 [details]
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
(Reporter)

Updated

10 months ago
status-firefox-esr52: ? → unaffected
tracking-firefox57: ? → +

Updated

10 months ago
Whiteboard: [photon-visual] → [photon-visual] [triage]
(Assignee)

Updated

10 months ago
Whiteboard: [photon-visual] [triage] → [photon-visual] [triage][photon-onboarding]

Updated

10 months ago
Whiteboard: [photon-visual] [triage][photon-onboarding] → [photon-onboarding]

Updated

10 months ago
Whiteboard: [photon-onboarding] → [photon-onboarding][triage]
(Assignee)

Comment 1

10 months ago
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)
(Assignee)

Comment 3

10 months ago
Michael, could you help provide the right layout when the nav item is too long?
Flags: needinfo?(mverdi)
(Assignee)

Updated

10 months ago
Flags: needinfo?(bmao)
(Assignee)

Comment 4

10 months ago
Bryant, verdi is in PTO, could you help on the layout decision?
(Assignee)

Comment 5

10 months ago
Created attachment 8909617 [details]
mockup to downsize 3px for navitem and header

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?
(Assignee)

Comment 6

10 months ago
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)

Comment 8

10 months ago
(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.
(Assignee)

Comment 11

10 months ago
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?
Flags: needinfo?(bmao)
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
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 15

10 months ago
mozreview-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 16

10 months ago
mozreview-review
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)

Updated

10 months ago
Assignee: nobody → gasolin
Status: NEW → ASSIGNED

Comment 18

10 months ago
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
(Assignee)

Updated

10 months ago
Depends on: 1388813

Comment 19

10 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/ac48d6f6f4d2
https://hg.mozilla.org/mozilla-central/rev/437aef38f07e
Status: ASSIGNED → RESOLVED
Last Resolved: 10 months ago
status-firefox57: affected → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 57
(Assignee)

Comment 20

10 months ago
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.
status-firefox57: fixed → verified
Flags: qe-verify+

Updated

8 months ago
Priority: -- → P3
Whiteboard: [photon-onboarding][triage] → [photon-onboarding]
You need to log in before you can comment on or make changes to this bug.