1288341 - Don't overlap layout-expander in RTL Locales

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P2)

Description

[magicp]

Attachment: do-not-overlap-layout-expander-in-layout-header-with-rtl.png

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

Steps to reproduce:

1. Start Nightly in RTL locales
2. Go to https://bugzulla.mozilla.org
3. Open DevTools > Inspector > Computed


Actual results:

layout-expander is overlapping with other element and has wrong direction and margin.

Regression range:
https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=e2ddf53209916302a81ca331f88b4df8df0ca7c7&tochange=48d51227912b8ec3600758d59a995521e2fbea1c


Expected results:

Apply correct margin and direction.

Comment 1

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).

Comment 2

[Steve Chung [:steveck]]

Attachment: Bug 1288341 - Don't overlap layout-expander in RTL Locales.

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

Comment 3

[Steve Chung [:steveck]]

Seems all the expander arrows need to be adjusted to proper place. I replace the margin left to inline start, applied a proper padding to property viewer and mirrored the arrow while in rtl scenario.

Comment 4

[Tim Nguyen :ntim]

Comment on attachment 8777647 [details]
Bug 1288341 - Don't overlap layout-expander in RTL Locales.

https://reviewboard.mozilla.org/r/69160/#review66260

::: devtools/client/themes/computed.css:140
(Diff revision 1)
>    visibility: hidden;
> -  margin-left: -12px !important;
> +  margin-inline-start: -12px !important;
> +}
> +
> +.expander:dir(rtl) {
> +  transform: scaleX(-1);

This part doesn't seem to work when testing locally.
Maybe :-moz-locale-dir(rtl) will ?

Comment 5

[Tim Nguyen :ntim]

To test RTL locally, you can use the Force RTL add-on: https://addons.mozilla.org/en-us/firefox/addon/force-rtl/

When you have the add-on installed, on the menu bar, click `Tools` then click `Force RTL direction`.

Comment 6

[Steve Chung [:steveck]]

Comment on attachment 8777647 [details]
Bug 1288341 - Don't overlap layout-expander in RTL Locales.

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

Comment 7

[Steve Chung [:steveck]]

https://reviewboard.mozilla.org/r/69160/#review66260

> This part doesn't seem to work when testing locally.
> Maybe :-moz-locale-dir(rtl) will ?

I might use wrong way to trigger the RTL case, thanks for sharing the addon. BTW I saw lots of places applied both(-moz-locale-dir/dir). is it because of the mixing of xul/html architecture?

Comment 8

[Tim Nguyen :ntim]

(In reply to Steve Chung [:steveck] from comment #7)
> https://reviewboard.mozilla.org/r/69160/#review66260
> 
> > This part doesn't seem to work when testing locally.
> > Maybe :-moz-locale-dir(rtl) will ?
> 
> I might use wrong way to trigger the RTL case, thanks for sharing the addon.
> BTW I saw lots of places applied both(-moz-locale-dir/dir). is it because of
> the mixing of xul/html architecture?

Yeah, :dir is used if the document containing the element is HTML and :-moz-locale-dir is used if the document containing the element is XUL. Eventually, when we'll switch everything to HTML in the long run, :dir will be used everywhere.

Comment 9

[Tim Nguyen :ntim]

Comment on attachment 8777647 [details]
Bug 1288341 - Don't overlap layout-expander in RTL Locales.

https://reviewboard.mozilla.org/r/69160/#review66366

Works fine, thanks!

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/fx-team/rev/c92d40e69176
Don't overlap layout-expander in RTL Locales. r=ntim

Comment 11

[Carsten Book [:Tomcat]]

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

Comment 12

[Saddam Hossain]

I have reproduced this Bug on Nightly 50.0a1 (2016-07-21)  on Windows 10, 64 Bit!

The bug's fix is now verified on latest  Nightly 51.0a1

Nightly  51.0a1:
Build ID	   : 20160816030459
User Agent 	   : Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:51.0) Gecko/20100101 Firefox/51.0

[bugday-20160817]

Comment 13

[Farhadur Reja Fahim]

I have reproduced this bug with Nightly 50.0a1 (2016-07-21) on Ubuntu 14.04, 64 bit!

The bug's fix is now verified on latest Nightly 51.0a1.

Beta 51.0a1:
Build ID 	20160818030226
User Agent 	Mozilla/5.0 (X11; Linux x86_64; rv:51.0) Gecko/20100101 Firefox/51.0


[bugday-20160817]