1638332 - Move tail suggestions prefix to the other side when typing in a language with a direction counter to the UI (RTL / LTR)

Status: NEW

(Firefox :: Address Bar, defect, P3)

Description

[Harry Twyford]

Attachment: rtl_tails.png

As Marco points out here, tail suggestions do not look good in RTL. We should either fix their appearance or disable tail suggestions in RTL locales.

It's not immediate clear how to fix this: Chrome has a simiar layout bug (they at least move the ellipses to the left side of the tail). We should ask UX and also reach out to Google.

Comment 1

[Harry Twyford]

This works fine when typing in a RTL language in a RTL UI. The only issue is typing in a LTR language in a RTL UI (as in the screenshot). We spoke to UX and we should just switch the ellipses to the other side in that case.

Comment 2

[Harry Twyford]

This one requires some tricky layout. Right now we style tail suggestions with this DOM (simplified):

urlbarView-row-inner
    urlbarView-tail-prefix
        urlbarView-tail-prefix-string
        urlbarView-tail-prefix-char
    urlbarView-title

For tail suggestions, urlbarView-title is the tail returned by Google and urlbarView-tail-prefix-string is the part of the suggestion not included in the tail. For example, for the query/tail pair hobbit holes for sale i/in ontario, urlbarView-title is in ontario; urlbarView-tail-prefix-char is …, and urlbarView-tail-prefix-string is hobbit holes for sale.

We achieve the effect of the tail lining up with the typed part of the string by hiding urlbarView-tail-prefix-string, aligning urlbarView-tail-prefix-char to the end of urlbarView-tail-prefix, and having it overlap using absolute positioning:

.urlbarView-tail-prefix {
  display: none;
  justify-content: flex-end;
  white-space: pre;
}

.urlbarView-row[tail-suggestion] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-tail-prefix {
  display: inline-flex;
}

.urlbarView-tail-prefix > .urlbarView-tail-prefix-string {
  visibility: hidden;
}

.urlbarView-tail-prefix > .urlbarView-tail-prefix-char {
  position: absolute;
}

The issue is that the ellipses are never actually a part of urlbarView-title. When the UI flips in RTL, urlbarView-tail-prefix-char is now on the wrong side of urlbarView-title. To solve this bug, we'd have to make the ellipses part of urlbarView-title: like … in ontario.

I'm stumped on ways to achieve the tail suggestion visual effect without needing to reflow the layoyt while also including the ellipses in the actual tail string. We'd need some way of setting a negative margin-inline-start on urlbarView-title with the width of … after rendering so that it overlaps urlbarView-tail-prefix-string by the necessary amount.

Dao, do you have any ideas on how we could achieve this? Sorry for the wall of text, lmk if you need clarification.

Comment 3

[Marco Bonardo [:mak]]

just as a side note, you can use window.windowUtils.getDirectionFromText() if you want to special handle the 2 cases. For example you could probably use the css order rule, if the suggestion is ltr and ui is rtl, or viceversa, to invert those boxes. Not sure how clean that'd be though. You coul also wrap title AND tail in a box and set that box direction depending on the suggestion direction.

Comment 5

[Itiel]

(In reply to Harry Twyford [:harry] from comment #1)

This works fine when typing in a RTL language in a RTL UI. The only issue is typing in a LTR language in a RTL UI (as in the screenshot).

Note that the same is reproducible with RTL text in LTR UI (see the dupe for screenshots and STR).

We spoke to UX and we should just switch the ellipses to the other side in that case.

I'd suggest to just drop the tail suggestion logic altogether when this happens, because you'll lose the direction of reading the text. Personally I find it very confusing.
Another option could be to change this rule so it won't match if a) the UI is LTR and b) the text is RTL (and vice versa), and move the ellipses to the other side. Though this, of course, will lose the nice alignment of the end of the typed text to the suggestions, and make the UX different based on entered text...

Comment 6

[Marco Bonardo [:mak]]

just adding some words to make the title easier to find.