1397737 - Entering very long strings in the search field will result in cutting the top of the tooltip

Status: VERIFIED FIXED

(Firefox :: Preferences, defect, P3)

Description

[Bogdan Maris [:bogdan_maris], Release Desktop QA]

Attachment: Screenshot showing the issue

[Affected versions]:
- Firefox beta 56.0b9
- latest Nightly 57.0a1

[Affected platforms]:
- Windows 10 64bit
- macOS 10.12.6
- Ubuntu 16.04 32bit

[Steps to reproduce]:
1. Start Firefox
2. Go to about:preferences
3. Search for "Web pages are sometimes offered in more than one language. Choose languages for displaying these web pages, in order of preference"

[Expected result]:
- The string inside the tooltip is displayed nicely.

[Actual result]:
- The tooltip is cut from the top.

[Regression range]:
- This is not a regression since this is reproducible since the feature was first enabled by default (old nightly from 2017-06-16) even though the tooltip was misplaced using that build so it was not good from the start.

[Additional notes]:
- Screenshot of the issue is attached.
- This is kind of an edge case, I don't really know who would search for sentences this long, that's why I maked this bug as minor.

Comment 1

[Evan Tseng [:evanxd]]

Attachment: show-all-keywords.png

Hi Helen,

What do you think if we do something like the "show-all-keywords.png" attachment?

Comment 2

[Helen Huang [:HHuang]]

Attachment: Long string in a tooltip.png

In this case, to show the whole sentence doesn't make sense to me. The tooltip here is to point out the location of functions, so just show the beginning of the sentence should be enough for the users to get the information. 

I suggest setting the maximum width of the tooltips, maybe 150px, which is as wide as the most of the buttons. Please see the attached.

Comment 3

[Evan Tseng [:evanxd]]

Attachment: Bug 1397737 - Show a "…" ellipsis if the width of search tooltip is over 150px to match visual design spec.

The visual design suggestion is from https://bugzilla.mozilla.org/show_bug.cgi?id=1397737#c2.

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

Comment 4

[Evan Tseng [:evanxd]]

Hi Mike,

Could you help review the patch? The suggestion of the visual design change is from Helen (Comment 2).

Thank you.

Comment 5

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8913092 [details]
Bug 1397737 - Show a "…" ellipsis if the width of search tooltip is over 150px to match visual design spec.

https://reviewboard.mozilla.org/r/184508/#review190004

::: browser/themes/shared/incontentprefs/preferences.inc.css:682
(Diff revision 1)
>    font-size: 1.25rem;
>    position: absolute;
>    padding: 0 10px;
>    background-color: #ffe900;
>    border: 1px solid #d7b600;
>    -moz-user-select: none;

If you like to introduce a secondary span to contain the query text, please move `-moz-user-select: none` to the secondary span, otherwise the cursor will be shown as a text selected effect which is wrong.

Comment 6

[Evan Tseng [:evanxd]]

Comment on attachment 8913092 [details]
Bug 1397737 - Show a "…" ellipsis if the width of search tooltip is over 150px to match visual design spec.

https://reviewboard.mozilla.org/r/184508/#review190062

::: browser/themes/shared/incontentprefs/preferences.inc.css:682
(Diff revision 1)
>    font-size: 1.25rem;
>    position: absolute;
>    padding: 0 10px;
>    background-color: #ffe900;
>    border: 1px solid #d7b600;
>    -moz-user-select: none;

Sure, let's fix it.

Comment 7

[Evan Tseng [:evanxd]]

Comment on attachment 8913092 [details]
Bug 1397737 - Show a "…" ellipsis if the width of search tooltip is over 150px to match visual design spec.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/184508/diff/1-2/

Comment 8

[Mike Conley (:mconley) (:⚙️) (PTO: May 24 - June 2nd)]

Comment on attachment 8913092 [details]
Bug 1397737 - Show a "…" ellipsis if the width of search tooltip is over 150px to match visual design spec.

https://reviewboard.mozilla.org/r/184508/#review191152

Thanks!

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f2b67f97ef41
Show a "…" ellipsis if the width of search tooltip is over 150px to match visual design spec. r=mconley

Comment 10

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/f2b67f97ef41

Comment 11

[Evan Tseng [:evanxd]]

Comment on attachment 8913092 [details]
Bug 1397737 - Show a "…" ellipsis if the width of search tooltip is over 150px to match visual design spec.

Approval Request Comment
[Feature/Bug causing the regression]: It is not a regression.

[User impact if declined]: Search keyword on tooltip might not be displayed all to user if it is too long. Check the screenshot. https://bug1397737.bmoattachments.org/attachment.cgi?id=8905492

[Is this code covered by automated tests?]: No.

[Has the fix been verified in Nightly?]: Not yet. But already set a qe-verify+ flag for it.

[Needs manual test from QE? If yes, steps to reproduce]: 
1. Start Firefox
2. Go to about:preferences
3. Search for "Web pages are sometimes offered in more than one language. Choose languages for displaying these web pages, in order of preference"

Expected result
See the tooltip shows a one line string "Web pages are s...".

[List of other uplifts needed for the feature/fix]: None.

[Is the change risky?]: No.

[Why is the change risky/not risky?]: The main change here is add a new css style to show "..." if the search keyword is too long.

[String changes made/needed]: No.

Comment 12

[Hani Yacoub]

Build ID: 20171005100211
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 on Windows 10 x 64, Windows 7 x32, Mac OS X 10.12 and Ubuntu 16.04 x64.

Comment 13

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

Comment on attachment 8913092 [details]
Bug 1397737 - Show a "…" ellipsis if the width of search tooltip is over 150px to match visual design spec.

Photon polish, very low risk, Beta57+

Comment 14

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/657033ffe651

Comment 15

[Hani Yacoub]

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

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