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

@@ -39,6 +39,10 @@ body {
   left: 0;
 }
 
+body[dir=rtl] #category-raw{
+  right: 0;
+}
+
 .heading {
   display: flex;
   flex-direction: column;

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,