1405624 - Seach result tooltip overlaps other parts of the UI

Status: VERIFIED FIXED

(Firefox :: Settings UI, defect, P3)

Description

[Jens]

Attachment: Login_tooltip_makes_field_unreadable.png

STR:
====
Go to preferences and type into the search input "Login" (or just "Log"). FWIW, I tried to find "Saved Logins" to copy a password.

AR:
===
The "Login" tooltip overlaps other parts of the UI which cannot be read anymore. See screenshot.

ER:
===
Dunno, but the tooltip should help the user and not make it harder to find what I am looking for.

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

Note that the tooltip does fade out when you mouseover it. But I agree it would take someone to mouse over the tooltip, as well if someone tries clicking on the tooltip the clicks don't go through the tooltip to the button behind it.

Evan / Tina, can you make sure UX takes a look at this. I know it is implemented as designed but this is making usability harder.

Comment 2

[Evan Tseng [:evanxd]]

Attachment: set-opacity-of-tooltip.png

Sure, I will discuss the better UX design with Tina when she is back (currently she is on PTO).

I'm not sure, but maybe making the opacity of tooltips as 0.5 by default could be a simple solution. Just like the "set-opacity-of-tooltip.png" attachment.

Comment 3

[Ricky Chien [:rickychien] (inactive)]

Attachment: Bug 1405624 - Add opacity to Preferences seach result tooltip

Review commit: https://reviewboard.mozilla.org/r/186744/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/186744/

Comment 4

[Helen Huang [:HHuang]]

Add opacity to tooltips by default should work. From the visual perspective, I suggest setting the default opacity to maybe 0.85, so the readability of the text in the tooltip will be okay and still stand out.

Comment 5

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8915523 [details]
Bug 1405624 - Add opacity to Preferences seach result tooltip

https://reviewboard.mozilla.org/r/186744/#review191792

::: browser/themes/shared/incontentprefs/preferences.inc.css
(Diff revision 1)
>    bottom: 36px;
> +  opacity: .85;
>  }
>  
> -.search-tooltip:hover,
> +.search-tooltip:hover {
> -.search-tooltip:hover::before {

Removed .search-tooltip:hover::before since it is useless.

Comment 6

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8915523 [details]
Bug 1405624 - Add opacity to Preferences seach result tooltip

https://reviewboard.mozilla.org/r/186744/#review191868

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/876b36faeae2
Add opacity to Preferences seach result tooltip r=jaws

Comment 8

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8915523 [details]
Bug 1405624 - Add opacity to Preferences seach result tooltip

Approval Request Comment
[Feature/Bug causing the regression]:
[User impact if declined]: minor, search-tooltip UI polish when using search in Preferences
[Is this code covered by automated tests?]: no
[Has the fix been verified in Nightly?]: no
[Needs manual test from QE? If yes, steps to reproduce]:  see description
[List of other uplifts needed for the feature/fix]: no
[Is the change risky?]: minor 
[Why is the change risky/not risky?]: UI polish
[String changes made/needed]: none

Comment 9

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Comment on attachment 8915523 [details]
Bug 1405624 - Add opacity to Preferences seach result tooltip

Photon polish, Beta57+

Comment 10

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/178de8c0b3e4

Comment 11

[Ricky Chien [:rickychien] (inactive)]

Base on comment 7 and comment 10, patches have been landed in fx57 and fx58.

Comment 12

[Ricky Chien [:rickychien] (inactive)]

Comment 7 is autoland, let's wait for autoland merges into m-c.

Comment 13

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

https://hg.mozilla.org/mozilla-central/rev/876b36faeae2

Comment 14

[Hani Yacoub, Desktop QA]

Build ID: 20171009220104
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0

Verified as fixed on Firefox Nightly 58.0a1 and on Firefox Beta 57.0b7 on Windows 10 x 64, Windows 7 x32, Mac OS X 10.12 and Ubuntu 16.04 x64.