From ba1f03bb2fe72073e970de3bd6f5022b5daa588d Mon Sep 17 00:00:00 2001
From: Aditya Bharti <adibhar97@gmail.com>
Date: Thu, 16 Nov 2017 00:05:09 +0530
Subject: [PATCH] bug 1407562 - Fix in-content HTML selects and about:telemetry
 "Raw JSON" element for RTL locales r=chutten

The arrow icon in about:telemetry's process <select> overlapped the text in RTL.
It turns out that this was also a problem in a couple of other places in the UI,
including the Add New Credit Card and And New Address dialogs for form autofill.
Now, those are fixed too.

On the about:telemetry page, the "Raw JSON" element is in the appropriate place now.
Earlier it was on the left in RTL locales.
---
 toolkit/content/aboutTelemetry.css              | 4 ++++
 toolkit/themes/shared/in-content/common.inc.css | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/toolkit/content/aboutTelemetry.css b/toolkit/content/aboutTelemetry.css
index 1219230000b5..fbb3db156da5 100644
--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@@ -39,6 +39,10 @@ body {
   left: 0;
 }
 
+body[dir=rtl] #category-raw{
+  right: 0;
+}
+
 .heading {
   display: flex;
   flex-direction: column;
diff --git a/toolkit/themes/shared/in-content/common.inc.css b/toolkit/themes/shared/in-content/common.inc.css
index e63831ac4e06..5fdeae113eb0 100644
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -215,6 +215,10 @@ html|select:not([size]):not([multiple]) {
   text-overflow: ellipsis;
 }
 
+html|select:not([size]):not([multiple]):dir(rtl){
+  background-position: left 3px center;
+}
+
 html|button:enabled:hover,
 html|select:not([size]):not([multiple]):enabled:hover,
 xul|button:not([disabled="true"]):hover,