Closed Bug 1385123 Opened 7 years ago Closed 7 years ago

[Onboarding] Default browser list item has word wrapping when selected/hovered for some locales

Categories

(Firefox :: New Tab Page, defect, P3)

56 Branch
defect

Tracking

()

VERIFIED FIXED
Firefox 57
Tracking Status
firefox56 --- verified
firefox57 --- verified
firefox58 --- verified

People

(Reporter: rodrigo.mcunha, Assigned: rexboy)

References

Details

(Whiteboard: [photon-onboarding])

Attachments

(4 files)

This is due to the amount of characters in the pt_PT locale translation of "Default browser", but should be fixed nonetheless.
Attached image no word wrap.png
Attached image word wrap.png
Also, this isn't related to this bug, but in the Sync list item you can see the image on the side going through the footer.
Component: Untriaged → New Tab Page
The same happen in French
Blocks: 1354046
Summary: [Onboarding] Default browser list item has word wrapping when selected/hovered on pt_PT locale → [Onboarding] Default browser list item has word wrapping when selected/hovered for some locales
Whiteboard: [photon-onboarding][triage]
in bug 1377439 we introduced 1px padding for adding black boarder under high contrast mode. Seems the 1px padding causes the unexpected wrapping here.
I can propose that we use outline instead of border. The concern here may be outline may have other use for accessibility we want to bring in later. But I can give a patch now.
Depends on: 1377439
Sorry, should be "decreased 1px padding" rather than "introduced 1px padding".
Comment on attachment 8892279 [details]
Bug 1385123 - [Onboarding] Fix word wrapping when focusing on tour items under some languages.

https://reviewboard.mozilla.org/r/163214/#review168634

::: browser/extensions/onboarding/content/onboarding.css
(Diff revision 1)
>  #onboarding-tour-list > li:hover {
>    color: #0A84FF;
> -  /* With 1px transparent border, could see a border in the high-constrast mode */
> -  border: 1px solid transparent;
> +  /* With 1px transparent outline, could see a border in the high-constrast mode */
> +  outline: 1px solid transparent;
> -  /* Substract 1px for the 1px transparent or a 1px shift would happen */
> -  padding-inline-start: calc(var(--padding-inline-start) - 1px);

Please remove --padding-inline-start, --padding-top, --padding-bottom as well since no use of them
Attachment #8892279 - Flags: review?(fliu)
(In reply to KM Lee [:rexboy] from comment #5)
> in bug 1377439 we introduced 1px padding for adding black boarder under high
> contrast mode. Seems the 1px padding causes the unexpected wrapping here.
> I can propose that we use outline instead of border. The concern here may be
> outline may have other use for accessibility we want to bring in later. But
> I can give a patch now.
Would you provide the screenshot of the real look of this outline approach? I imagine that would be just like a black outline as the black border. Thank you.
Thanks Fischer. These variables has been cleaned up.
I found in bug 1377298 something similar is being done, but the conflict for setting outline should be easy to resolve.
Assignee: nobody → rexboy
Comment on attachment 8892279 [details]
Bug 1385123 - [Onboarding] Fix word wrapping when focusing on tour items under some languages.

https://reviewboard.mozilla.org/r/163214/#review168658
Attachment #8892279 - Flags: review?(fliu) → review+
Status: NEW → ASSIGNED
Flags: qe-verify+
QA Contact: jwilliams
Whiteboard: [photon-onboarding][triage] → [photon-onboarding]
Priority: -- → P1
Priority: P1 → P3
Comment on attachment 8892279 [details]
Bug 1385123 - [Onboarding] Fix word wrapping when focusing on tour items under some languages.

https://reviewboard.mozilla.org/r/163214/#review168838
Attachment #8892279 - Flags: review?(dtownsend) → review+
Thank you Mossop!

try server looks fine so let's check-in.
Keywords: checkin-needed
Pushed by ryanvm@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/a304408c275f
[Onboarding] Fix word wrapping when focusing on tour items under some languages. r=Fischer,mossop
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/a304408c275f
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 57
Comment on attachment 8892279 [details]
Bug 1385123 - [Onboarding] Fix word wrapping when focusing on tour items under some languages.

Approval Request Comment
[Feature/Bug causing the regression]: bug 1377439
[User impact if declined]: some locale user will experience word wrapping when selected tour items 
[Is this code covered by automated tests?]: N
[Has the fix been verified in Nightly?]: N
[Needs manual test from QE? If yes, steps to reproduce]: can uplift after QA varify
[List of other uplifts needed for the feature/fix]:
[Is the change risky?]: N
[Why is the change risky/not risky?]: CSS only change
[String changes made/needed]: N
Attachment #8892279 - Flags: approval-mozilla-beta?
Hi Brindusa, could you help find someone to verify if this issue was fixed as expected on a latest Nightly build? Thanks!
Flags: needinfo?(brindusa.tot)
Justin, could you please verify this bug on the latest Nightly build?
Flags: needinfo?(brindusa.tot) → needinfo?(jwilliams)
I have verified this fix on today's nightly.
Status: RESOLVED → VERIFIED
Flags: needinfo?(jwilliams)
Clarifying that 56.0b1 is affected, in case we want to request an uplift.
Comment on attachment 8892279 [details]
Bug 1385123 - [Onboarding] Fix word wrapping when focusing on tour items under some languages.

Minor css change, verified in nightly, let's uplift for beta 2.
Attachment #8892279 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
I have verified that the word wrapping no longer appears within the overlay for default browser on some locales on Win 10 x64, Win 7 x32, Ubuntu 16.04 x32, and Mac 10.12 with Firefox 58.
This issue is also fixed on Fx 57.0b7, I verified on Windows 10 x64 and mac OS X 10.12.6.
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.