1286523 - Fix devtools-autocomplete-popup position in RTL locales

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P1)

Description

[magicp]

Attachment: fix-devtools-autocomplete-listbox-position-in-rtl.png

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
Build ID: 20160712030234

Steps to reproduce:

1. Start Nightly in RTL locales (e.g. Arabic)
2. Go to any sites (e.g. about:home)
3. Open DevTools > Inspector
4. Type "i" in inspector-searchbox


Actual results:

devtools-autocomplete-popup will be popped up at the left(end) side.


Expected results:

devtools-autocomplete-popup should be popped up at the right(start) side.

Comment 1

[magicp]

Regression range:
https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=679118259e91f40d4a8f968f03ec4cff066cdb5b&tochange=1de829f2f1f03e23ca0159bee473d36b9989e62b

Comment 2

[Julian Descottes [:jdescottes]]

Attachment: Bug 1286523 - fix HTML autocomplete overflow issue;

When the autocomplete popup has a scrollbar, the rightmost part
of the suggestions is hidden when using RTL locale.

XUL autocompletes (using the richlistbox) were always displaying the
suggestions using LTR. I couldn't find any CSS rule enforcing this, so
I assume this was a default behavior of the richlist box.
This patch restores the same behavior as before.

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

Comment 3

[Julian Descottes [:jdescottes]]

Attachment: Bug 1286523 - fix autocomplete popup position in RTL locales;

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

Comment 4

[Julian Descottes [:jdescottes]]

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

Comment 5

[Brian Grinstead [:bgrins]]

Comment on attachment 8770951 [details]
Bug 1286523 - fix HTML autocomplete overflow issue;

https://reviewboard.mozilla.org/r/64244/#review61374

Comment 6

[Brian Grinstead [:bgrins]]

Comment on attachment 8770952 [details]
Bug 1286523 - fix autocomplete popup position in RTL locales;

https://reviewboard.mozilla.org/r/64246/#review61376

Just some comments on the test

::: devtools/client/shared/test/browser_html_tooltip_rtl.js:65
(Diff revision 1)
> +  yield showTooltip(tooltip, box1, {position: "bottom"});
> +
> +  let panelRect = tooltip.container.getBoundingClientRect();
> +  let anchorRect = box1.getBoundingClientRect();
> +
> +  // Tooltip will be displayed below box1, but is too wide to be aligned with the anchor.

Please elaborate on why it won't be aligned with the anchor.  I ran the test manually and paused it here which made it more clear, but something about how this element is against the left side of the window and is more narrow than the tooltip would be helpful

::: devtools/client/shared/test/browser_html_tooltip_rtl.js:92
(Diff revision 1)
> +  yield showTooltip(tooltip, box3, {position: "bottom"});
> +
> +  let panelRect = tooltip.container.getBoundingClientRect();
> +  let anchorRect = box3.getBoundingClientRect();
> +
> +  // Tooltip will be displayed below box3, but is too wide to be aligned with the anchor.

Are this comment and the one on 103 backwards?  The expectation here is that in LTR it will anchor to the left side, so this one anchoring to the left is 'normal' and the next one anchors to the right because it's too wide

Comment 7

[Julian Descottes [:jdescottes]]

Comment on attachment 8770951 [details]
Bug 1286523 - fix HTML autocomplete overflow issue;

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

Comment 8

[Julian Descottes [:jdescottes]]

Comment on attachment 8770952 [details]
Bug 1286523 - fix autocomplete popup position in RTL locales;

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

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/fx-team/rev/124641c7e85d
fix HTML autocomplete overflow issue;r=bgrins
https://hg.mozilla.org/integration/fx-team/rev/bc547f508f58
fix autocomplete popup position in RTL locales;r=bgrins

Comment 10

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/124641c7e85d
https://hg.mozilla.org/mozilla-central/rev/bc547f508f58

Comment 11

[Ada [:adalucinet]]

Reproduced with 50.0a1 ar build from 2016-07-13 under Windows 10 64-bit.
Verified fixed with latest Nightly 50.0a1 ar and en-US (with 'intl.uidirection.en' pref set to 'rtl' in about:config) builds, under Windows 10 64-bit, Ubuntu 16.04 64-bit and Mac OS X 10.9.5