Make new options page compatible with edge

skin/desktop-options.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 207 matching lines @@
 .side-controls:not(.wrap)
 {
   margin: 0.8rem 0rem;
   display: flex;
   justify-content: flex-end;
 }
 
 .side-controls button
 {
   margin: 0rem;
+}
+
+/*
+  Due to Edge adoption as new target browser
+  we cannot use -moz/webkit-margin-start
+  or -moz/webkit-margin-end because
+  these lack Edge support.
+  Yet we need to preserve html direction
+  and potential UI that might swap right to left.
+*/
+html:not([dir="rtl"]) .side-controls button
+{
   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.

 }
 
+html[dir="rtl"] .side-controls button
+{
+  margin-right: 1rem;
+}
+
 .side-controls.wrap button
 {
   margin: 0.6rem 0rem;
+}
+
+html:not([dir="rtl"]) .side-controls.wrap button
+{
   margin-left: auto;
+}
+
+html[dir="rtl"] .side-controls.wrap button
+{
+  margin-right: auto;
 }
 
 /*
   icons
  */
 
 .icon
 {
   border: 0px;
   padding: 0px;
@@ skipping 363 matching lines @@
   font-size: 1rem;
 }
 
 [role="tablist"] li a
 {
   display: flex;
   margin-top: -1px;
   padding: 1rem 0.8rem;
   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-color: #CDCDCD transparent;
   border-style: solid;
   border-width: 1px;
   text-decoration: none;
   color: inherit;
   cursor: pointer;
 }
 
 li a[role="tab"][aria-selected]
 {
-  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;
+}
+
+html:not([dir="rtl"]) li a[role="tab"][aria-selected]
+{
+  border-left-color: #CDCDCD;
+}
+
+html[dir="rtl"] li a[role="tab"][aria-selected]
+{
+  border-right-color: #CDCDCD;
 }
 
 #sidebar footer
 {
   width: 100%;
 }
 
 #sidebar footer p
 {
   display: flex;
@@ skipping 82 matching lines @@
 }
 
 section.cols
 {
   display: flex;
 }
 
 section.cols > *:first-child
 {
   flex: 1;
+}
+
+html:not([dir="rtl"]) section.cols > *:first-child
+{
   margin-right: 2rem;
+}
+
+html[dir="rtl"] section.cols > *:first-child
+{
+  margin-left: 2rem;
 }
 
 section.cols > *:last-child
 {
   flex: 3;
 }
 
 /*
   Acceptable ads
  */
@@ skipping 54 matching lines @@
 html[dir="rtl"] button
 {
   left: auto;
   right: 0rem;
 }
 
 #acceptable-ads label
 {
   font-weight: 700;
   font-size: 1rem;
+}
+
+html:not([dir="rtl"]) #acceptable-ads label
+{
   margin-right: 0.5rem;
+}
+
+html[dir="rtl"] #acceptable-ads label
+{
+  margin-left: 0.5rem;
 }
 
 #dnt
 {
   padding: 0.8rem;
   border: 1px solid #077CA6;
 }
 
 .new
 {
@@ skipping 143 matching lines @@
 .th .col5:nth-of-type(4),
 .table .col5:nth-of-type(4)
 {
   flex: 1;
 }
 
 .th .col5:nth-of-type(5),
 .table .col5:nth-of-type(5)
 {
   flex: 1;
+}
+
+html:not([dir="rtl"]) .th .col5:nth-of-type(5),
+html:not([dir="rtl"]) .table .col5:nth-of-type(5)
+{
   margin-left: 0;
   margin-right: 1.8rem;
 }
 
+html[dir="rtl"] .th .col5:nth-of-type(5),
+html[dir="rtl"] .table .col5:nth-of-type(5)
+{
+  margin-right: 0;
+  margin-left: 1.8rem;
+}
+
 .table.cols > span
 {
   margin: 0rem;
 }
 
 .table.cols li
 {
   padding: 0.5rem 0rem;
 }
 
-.table.cols .state
+html:not([dir="rtl"]) .table.cols .state
 {
   margin-left: 1rem;
+}
+
+html[dir="rtl"] .table.cols .state
+{
+  margin-right: 1rem;
 }
 
 .table.cols .gear
 {
   margin: 0rem 
 }
 
 #dialog .table.list li
 {
   display: block;
@@ skipping 36 matching lines @@
 }
 
 /*
   Tooltips
 */
 
 .tooltip
 {
   position: relative;
   margin: 0rem;
-  margin-right: 1rem;
   line-height: 1.5rem;
   text-decoration: none;
   cursor: help;
+}
+
+html:not([dir="rtl"]) .tooltip
+{
+  margin-right: 1rem;
+}
+
+html[dir="rtl"] .tooltip
+{
+  margin-left: 1rem;
 }
 
 /* 
   Used for translatable screen reader only content.
   e.g.: Use instead of aria-label to avoid complex attribute value translation
 */
 .sr-only
 {
   position: absolute;
   overflow: hidden;
@@ skipping 33 matching lines @@
 
 #content-whitelist form input
 {
   flex: 1;
   height: 100%;
   padding: 0.5rem 1rem;
   font-size: 1rem;
   border: 2px solid #077CA6;
 }
 
-#content-whitelist form button
+html:not([dir="rtl"]) #content-whitelist form button
 {
   margin-left: 0.7rem;
+}
+
+html[dir="rtl"] #content-whitelist form button
+{
+  margin-right: 0.7rem;
 }
 
 #whitelisting-table li
 {
   padding-left: 1.4rem;
   padding-right: 1.4rem;
   border-left: 0rem;
   border-right: 0rem; 
 }
 
@@ skipping 212 matching lines @@
 
 #social ul
 {
   list-style: none;
   padding: 0px;
 }
 
 #social ul li
 {
   display: inline-block;
+}
+
+html:not([dir="rtl"]) #social ul li
+{
   margin-right: 1rem;
+}
+
+html[dir="rtl"] #social ul li
+{
+  margin-left: 1rem;
 }
 
 #social ul li a
 {
   display: block;
   text-align: center;
   text-decoration: none;
 }
 
 /*
@@ skipping 150 matching lines @@
   font-size: 1rem;
   color: #077CA6;
   background-color: #E1F2FA;
 }
 
 #notification strong
 {
   flex: 1;
   text-align: center;
 }