1849986 - [Enhancement] Consider wrapping the description text for suggestions after more than ~80ch per line

Status: NEW

(Firefox :: Address Bar, enhancement, P5)

Description

[Alexandru Bejenaru [:abejenaru], Ecosystem QA]

Attachment: Screenshot comparison.png

[Notes]:

• Due to the limitation in length being 2 lines for the description, combined with the fact that wrapping is being done at ~80ch this results in a restricted space where very little text can fit. This is especially noticeable when looking at the total amount of space that could be available if wrapping would be done at a higher ch count (with the current behavior the text is wrapped at approximately the half-length of the address bar, leaving the other half unused and empty);
• Looking at the Figma document for MDN suggestions, the wrapping is done at a higher ch count and we believe this looks much better;
• This was observed on 1792x1120 resolutions and higher (default resolution for MacBook Pro 16 inch 2019), also verified on a 1920x1080 resolution monitor. The lower the resolution the less observable this issue is;
• Behavior is applicable for both Pocket and MDN suggestions;
• Please observe the attached screenshots for a before and after the change comparison.

[Prerequisites]:
Required prefs to enable MDN results:

• browser.urlbar.mdn.featureGate = true.
• browser.urlbar.bestMatch.enabled = true.
• browser.urlbar.suggest.mdn = true.
• browser.search.region = “US”.

[Steps to reproduce]:

1. Open the browser and in the address bar input any search field that would trigger a suggestion with a description, such as MDN suggestions (eg: "cors").
2. Observe the behavior in the search results.

[Expected result]:

• The description text should start wrapping at more than 80-100ch due to the amount of space available left unused.

[Actual result]:

• The description text starts wrapping at around 80-100ch, effectively wrapping the text at around halfway of the address bar.

Comment 1

[Alexandru Bejenaru [:abejenaru], Ecosystem QA]

Attachment: screenshot new.png

Attached a new screenshot. Due to this behaviour there are certain cases (like the one in this example) where the last word is pushed to the second line, even though there would have been enough space to keep it on the first line.

Comment 2

[Drew Willcoxon :adw]

Thanks Alexandru, this requirement came from UX but we can give them this feedback. I'm not sure the Pocket Figma is up to date in this respect. UX introduced this requirement for MDN suggestions, which came after Pocket, and they requested we apply it to Pocket and older suggestion types too. The 80 char limit is supported by studies on the optimum line length for readability.

(In reply to Alexandru Bejenaru from comment #1)

Attached a new screenshot. Due to this behaviour there are certain cases (like the one in this example) where the last word is pushed to the second line, even though there would have been enough space to keep it on the first line.

Unfortunately there will always be cases like this, as long as we are wrapping the text at a certain line length. There's not much we can do except for copy editing individual strings so they do not wrap like this.