Make new options page compatible with edge

skin/desktop-options.css

Index: skin/desktop-options.css
===================================================================
--- a/skin/desktop-options.css
+++ b/skin/desktop-options.css
@@ -225,15 +225,13 @@
 .side-controls button
 {
   margin: 0rem;
-  -moz-margin-start: 1rem;
-  -webkit-margin-start: 1rem;
+  margin-left: 1rem;

[Thomas Greiner, 2018/01/18 16:20:46]

We intentionally avoided using properties such as "left", "right",
"margin-left", "margin-right", etc. since those refer to the incorrect sides
when the UI is shown for right-to-left languages such as arabic or hebrew.

Therefore we've been using properties such as "margin-start" or "margin-end"
which are independent of the text direction or, in case there is no such
workaround, we write additional rules such as `body[dir="rtl"] .side-controls
button` to explicitly state the behavior for such languages.

[a.giammarchi, 2018/01/19 17:02:28]

Done.

 }
 
 .side-controls.wrap button
 {
   margin: 0.6rem 0rem;
-  -moz-margin-start: auto;
-  -webkit-margin-start: auto;
+  margin-left: auto;
 }
 
 /*
@@ -544,7 +542,7 @@
 
 #sidebar
 {
-  flex-shrink: 0; 
+  flex-shrink: 0;
 }
 
 #sidebar .fixed
@@ -615,11 +613,9 @@
   display: flex;
   margin-top: -1px;
   padding: 1rem 0.8rem;
-  -moz-margin-end: -1px;
-  -webkit-margin-end: -1px;
-  -moz-margin-start: -1px;
-  -webkit-margin-start: -1px;
-  border-color: #CDCDCD transparent;
+  margin-left: -1px;
+  margin-right: -1px;
+  border-color: transparent;

[Thomas Greiner, 2018/01/18 16:20:46]

Why did you remove the second value for the border color?

   border-style: solid;
   border-width: 1px;
   text-decoration: none;
@@ -629,8 +625,7 @@
 
 li a[role="tab"][aria-selected]
 {
-  -moz-border-start-color: #CDCDCD;
-  -webkit-border-start-color: #CDCDCD;
+  border-color: #CDCDCD transparent #CDCDCD #CDCDCD;

[Thomas Greiner, 2018/01/18 16:20:46]

This is the same issue as in the comment regarding using "margin-left" but here
it's a bit less obvious since the second value always refers to the right side
and the fourth value always refers to the left side.

[a.giammarchi, 2018/01/19 11:16:48]

I was sure there were reasons for using those (unusual accordingly to Microsoft
which indeed does not support them) -prefixed-margin-start/end selectors but I
didn't know beside text even the UI was changing direction ... which is pretty
awesome, and something I need to keep in mind when testing (adding the dir="rtl"
part to the body)

I'll change all the things to reflect the right direction and double check these
are shown properly.

Apologies I should've asked right away about -prefix-margin-xxx benefits

[Thomas Greiner, 2018/01/19 13:55:16]

No need to apologize because there's also no explanation for it in the code. We
could add inline comments to the spots where we use them to clarify why we need
to resort to using non-standard properties, if you think that would've helped.

[a.giammarchi, 2018/01/19 14:16:28]

Yes, it would've helped indeed. I am adding here and there few comments too when
I think is appropriate, I would definitively add comments when using prefixed
stuff.

Problem is, now that we want to support Edge too same Chrome/Firefox way, all
prefixed stuff should probably be refactored.

I'll have a look in here and see if I can suggest changes in other related CSS
too, if needed (or urgent).

[Thomas Greiner, 2018/01/22 13:06:38]

That's fine with me.

   font-weight: 700;
   background-color: #FFF;
 }
@@ -735,8 +730,7 @@
 section.cols > *:first-child
 {
   flex: 1;
-  -moz-margin-end: 2rem;
-  -webkit-margin-end: 2rem;
+  margin-right: 2rem;
 }
 
 section.cols > *:last-child
@@ -811,8 +805,7 @@
 {
   font-weight: 700;
   font-size: 1rem;
-  -moz-margin-end: 0.5rem;
-  -webkit-margin-end: 0.5rem;
+  margin-right: 0.5rem;
 }
 
 #dnt
@@ -976,10 +969,8 @@
 .table .col5:nth-of-type(5)
 {
   flex: 1;
-  -moz-margin-start: 0;
-  -webkit-margin-start: 0;
-  -moz-margin-end: 1.8rem;
-  -webkit-margin-end: 1.8rem;
+  margin-left: 0;
+  margin-right: 1.8rem;
 }
 
 .table.cols > span
@@ -994,8 +985,7 @@
 
 .table.cols .state
 {
-  -moz-margin-start: 1rem;
-  -webkit-margin-start: 1rem;
+  margin-left: 1rem;
 }
 
 .table.cols .gear
@@ -1052,8 +1042,7 @@
 {
   position: relative;
   margin: 0rem;
-  -moz-margin-end: 1rem;
-  -webkit-margin-end: 1rem;
+  margin-right: 1rem;
   line-height: 1.5rem;
   text-decoration: none;
   cursor: help;
@@ -1112,8 +1101,7 @@
 
 #content-whitelist form button
 {
-  -moz-margin-start: 0.7rem;
-  -webkit-margin-start: 0.7rem;
+  margin-left: 0.7rem;
 }
 
 #whitelisting-table li
@@ -1346,8 +1334,7 @@
 #social ul li
 {
   display: inline-block;
-  -moz-margin-end: 1rem;
-  -webkit-margin-end: 1rem;
+  margin-right: 1rem;
 }
 
 #social ul li a