1277207 - HTML Tooltip arrow is mis-positioned when using RTL direction

Status: VERIFIED FIXED

(DevTools :: Framework, defect, P1)

Description

[Julian Descottes [:jdescottes]]

Attachment: html-tooltip-arrow-rtl.png

The HTML Tooltip arrow is not correctly aligned with its anchor when using the RTL direction (tested with the forceRTL addon: https://addons.mozilla.org/en-US/firefox/addon/force-rtl/)

STRs:
- enable Tools "Force RTL direction"
- go to https://www.mozilla.org/en-US/
- open inspector 
- hover an img tag in the markup view
- wait for the image preview tooltip to be displayed

ER: The tooltip arrow should be visible and should match the anchor
AR: The tooltip arrow is sometimes hidden, and when visible, it is not aligned with the tooltip's anchor

Comment 2

[Brian Grinstead [:bgrins]]

Attachment: Bug 1277207 - Show tooltip arrow in rtl locales;

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

Comment 3

[Brian Grinstead [:bgrins]]

I don't fully understand why this is needed, position:absolute flex children seem to behave a little oddly.  I saw this post recently and wonder if it's related https://developers.google.com/web/updates/2016/06/absolute-positioned-children:

"A previous version of the CSS Flexible Box Layout specification set the static position of absolute-positioned children as though they were a 0x0 flex item. The latest version of the spec takes them fully out of flow and sets the static position based on align and justify properties. At the time of this writing, Edge and Opera 39 for desktop and Android already support this."

Comment 4

[Julian Descottes [:jdescottes]]

(In reply to Brian Grinstead [:bgrins] from comment #3)
> I don't fully understand why this is needed, position:absolute flex children
> seem to behave a little oddly.  

I think this is because by default items are aligned to "flex-start", which is the "right" edge in RTL. To position the arrow a "left" offset is applied on the element. In RTL, this just pushes the arrow further outside of the container. With your patch the arrow element is aligned to the left even in RTL, so using a left offset works. 

Alternatively, we could align the tooltips to the right edge of the anchor in RTL and then we could offset the arrow element using margin-inline-start instead of left. (FWIW, today our XUL based tooltips are aligned to the left in LTR and RTL directions). 

I think your solution is the best for now because of the low footprint, given that the HTML tooltip implementation is still changing.

Comment 5

[Julian Descottes [:jdescottes]]

Comment on attachment 8764446 [details]
Bug 1277207 - Show tooltip arrow in rtl locales;

https://reviewboard.mozilla.org/r/60336/#review57212

Looks good to me, thanks!

::: devtools/client/themes/tooltips.css:163
(Diff revision 1)
>    overflow: hidden;
>    pointer-events: all;
>    flex-shrink: 0;
>  }
>  
> +.tooltip-arrow:-moz-locale-dir(rtl) {

(if you agree with my analysis in my previous comment) we could add a comment here to explain this is to compensate for the fact that we position the arrow using "left" which does not respect the orientation.

Comment 6

[Brian Grinstead [:bgrins]]

(In reply to Julian Descottes [:jdescottes] from comment #5)
> Comment on attachment 8764446 [details]
> Bug 1277207 - Show tooltip arrow in rtl locales;
> 
> https://reviewboard.mozilla.org/r/60336/#review57212
> 
> Looks good to me, thanks!
> 
> ::: devtools/client/themes/tooltips.css:163
> (Diff revision 1)
> >    overflow: hidden;
> >    pointer-events: all;
> >    flex-shrink: 0;
> >  }
> >  
> > +.tooltip-arrow:-moz-locale-dir(rtl) {
> 
> (if you agree with my analysis in my previous comment) we could add a
> comment here to explain this is to compensate for the fact that we position
> the arrow using "left" which does not respect the orientation.

Yeah, that sounds right.  Added a comment in the patch

Comment 7

[Brian Grinstead [:bgrins]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=af06e4cec74f

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/fx-team/rev/b3a0f1a9ede7
Show tooltip arrow in rtl locales. r=jdescottes

Comment 9

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

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

Comment 10

[Julian Descottes [:jdescottes]]

It turns out FF49 was not affected. The markup containing the arrow changed at the beginning of FF50, when migrating the event details tooltip. This made the RTL fix necessary.

Comment 11

[Ada [:adalucinet]]

Confirming that everything looks as intended with latest Nightly 50.0a1, across platforms [1]. Although, logged bug 1285540 - Windows specific and present only on RTL builds. Marking here accordingly.

[1] Windows 10 64-bit, Mac OS X 10.9.5, Ubuntu 14.04 x86