2046300 - Move explanation/reason/rationale strings to the right side of the row and show bookmarked dates too

Status: VERIFIED FIXED

(Firefox :: Address Bar, task, P2)

Description

[Drew Willcoxon :adw]

Follow-up to bug 2019167. We should implement the final UX for rationale/reason strings. We're blocked on a final design right now AFAIK.

I'm marking this as blocking the Nova follow-ups metabug rather than the initial Nova metabug because I don't think we have enough time to finish it for the Nova release. We might be able to squeeze it in still when we're not working on higher priority bugs.

Comment 1

[Drew Willcoxon :adw]

Let's scope this bug to cover updating the row DOM and related CSS. There are new designs in Paul's Figma that show the explanation string on the right side of the row.

We also need to do some other related things. I've filed a metabug for this feature; see the dependency tree for the others: https://bugzilla.mozilla.org/showdependencytree.cgi?id=2046637&maxdepth=0&hide_resolved=0

Comment 2

[Daisuke Akatsuka (:daisuke)]

Attachment: Bug 2046300 - Don't replace the URL with the explanation on hover/selection

Comment 3

[Drew Willcoxon :adw]

Pasting a Slack message from Paul so it's recorded somewhere:

---

Please try this out yourself to see the full demo, you can install the S&S UX sandbox extension and then select Suggestion Explanations from the prototypes list.

I'm interested to hear your feedback around if this feels fine to use.

The prototype simulates the suggestions panel in the page.

• drag the sides to resize it.
• click one of the Firefox Suggest rows to stick it in the hover state on that row (i.e. to show the suggestion explanation so when you mouse off the panel it's still visible so that you can resize it while it's in the hover state).
• if you paste a URL into the text box at the bottom it will replace your selected row with that URL's page title and URL, so you can test it with varying lengths and types of content.

Notes on the UI and how the truncation interactions work:

• The explanation text strings are shorter (new content doc).
• The last item in the demo has both the last visited and the bookmarked explanations..
• The explanations are right aligned, next to the ••• menu.
• As you narrow the view, a divider bullet appears when the explanations get close to the URL.
• Keep narrowing the view, and both the URL and the page title start truncating at the same time.
• The URL truncates at a faster rate than the page title (the page title is more important to preserve for longer).
• That said, the domain part of the URL is protected agains truncation (once only the domain remains visible, all truncation happens within the page title).
• Once it narrows to 650px, it wraps the URL and explanation onto the second line.
• If it narrows so far that there's not enough space for the domain and explanations, it removes the bookmarked explanation and if it's even narrower then it removes the viewed explanation.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/8ccbd2f6c5ab
https://hg.mozilla.org/integration/autoland/rev/49a07953c7c8
Don't replace the URL with the explanation on hover/selection r=desktop-theme-reviewers,urlbar-reviewers,adw,dao

Comment 5

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

https://hg.mozilla.org/mozilla-central/rev/49a07953c7c8

Comment 6

[Drew Willcoxon :adw]

Resummarizing to reflect what actually landed.

Comment 7

[Drew Willcoxon :adw]

For QA, summary of changes:

• Moved the explanation strings to the right side of the row
• Bookmarked dates are shown too
• Explanations no longer replace URLs
• When you hover/select a row, both the explanation and URL should be visible. Explanations should take priority so that they are always shown completely; URLs and titles may be truncated with the usual fade-out effect
• In extremely narrow windows, after URLs wrap, explanations will stop being shown

Please also note:

• These changes only apply to Nova. You can still enable explanations on Proton but we've stopped trying to support them on Proton.
• There are some related known bugs: https://bugzilla.mozilla.org/showdependencytree.cgi?id=2046637&maxdepth=0&hide_resolved=1
• As a reminder, to enable explanations set browser.urlbar.resultExplanations.featureGate

Comment 8

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Verified as fixed on Firefox Nightly 154.0a1 on Windows 11, macOS 13.

Results correspond to the summary in Comment 7:

• Explanation strings for both Bookmarks and History are now shown to the right side of the row.
• On Hover/Selection, both explanation strings and urls are visible, with the explanation strings being fully visible.
• Explanations string for both Bookmarks and History do not replace the url anymore.
• In very narrow browser windows, after URLs wrap, explanations will stop being shown.

Additional testing/coverage will be done during the upcoming feature testing rounds.

Please let us know if there's anything else we should take into account.

Thank you!