Issue 6209 - Updated woff fonts and table status column for long texts

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
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@font-face
-{
-  font-family: "Source Sans Pro";
-  src: url(fonts/SourceSansPro-Light.woff);
-  /* local("Ø") forces using no local font called Source Sans Pro */
-  src: local("Ø"), url("fonts/Source-Sans-Pro/300.woff2") format("woff2"),

[saroyanm, 2018/01/02 15:39:23]

I think we should update the folder structure and adjust @font-face accordingly
in current review, I suggest:
skin/
  fonts/
    Source-Sans-Pro/
      woff/
        light.woff
        regular.woff
        bold.woff
      woff2/
        light.woff2
        regular.woff2
        bold.woff2

-    url(fonts/SourceSansPro-Light.woff) format("woff");
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face
-{
-  font-family: "Source Sans Pro";
-  src: url(fonts/SourceSansPro-Regular.woff);
-  /* local("Ø") forces using no local font called Source Sans Pro */
-  src: local("Ø"), url("fonts/Source-Sans-Pro/400.woff2") format("woff2"),
-    url(fonts/SourceSansPro-Regular.woff) format("woff");
-  font-style: normal;
-}
-
-@font-face
-{
-  font-family: "Source Sans Pro";
-  src: url(fonts/SourceSansPro-bold.woff);
-  /* local("Ø") forces using no local font called Source Sans Pro */
-  src: local("Ø"), url("fonts/Source-Sans-Pro/700.woff2") format("woff2"),
-    url(fonts/SourceSansPro-bold.woff) format("woff");
-  font-weight: 700;
-  font-style: normal;
-}
-
 html
 {
   font-size: 16px;
 }
 
 body
 {
   background-color: #F3F3F3;
   display: flex;
   justify-content: center;
@@ skipping 161 matching lines @@
 .side-controls:not(.wrap)
 {
   margin: 0.8rem 0rem;
   display: flex;
   justify-content: flex-end;
 }
 
 .side-controls button
 {
   margin: 0rem;
-  -moz-margin-start: 1rem;
-  -webkit-margin-start: 1rem;
+}
+
+/*
+  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;
+}
+
+html[dir="rtl"] .side-controls button
+{
+  margin-right: 1rem;
 }
 
 .side-controls.wrap button
 {
   margin: 0.6rem 0rem;
-  -moz-margin-start: auto;
-  -webkit-margin-start: auto;
+}
+
+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 290 matching lines @@
 
 #sidebar,
 #sidebar .fixed,
 [role="tablist"]
 {
   width: 14.3rem;
 }
 
 #sidebar
 {
-  flex-shrink: 0; 
+  flex-shrink: 0;
 }
 
 #sidebar .fixed
 {
   top: 1.2rem;
   bottom: 0rem;
   height: auto;
 }
 
 #sidebar header
@@ skipping 50 matching lines @@
   padding: 0rem;
   position: relative;
   font-size: 1rem;
 }
 
 [role="tablist"] li a
 {
   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;
+  margin-left: -1px;
+  margin-right: -1px;
   border-color: #CDCDCD transparent;
   border-style: solid;
   border-width: 1px;
   text-decoration: none;
   color: inherit;
   cursor: pointer;
 }
 
 li a[role="tab"][aria-selected]
 {
-  -moz-border-start-color: #CDCDCD;
-  -webkit-border-start-color: #CDCDCD;
   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;
   justify-content: center;
   margin: 1rem 0rem;
 }
 
 /* This is a stopgap solution of footer overlapping tabs on low resolutions */
 @media (min-height: 37rem)
 {
   #sidebar .fixed
   {
     position: fixed;
   }
 
   #sidebar footer
   {
     bottom: 0px;
     position: absolute;
   }
+
 }
 
 /*
   Main content
  */
 
 body[data-tab|="general"] #content-general,
 body[data-tab|="advanced"] #content-advanced,
 body[data-tab|="whitelist"] #content-whitelist,
 body[data-tab|="help"] #content-help
@@ skipping 55 matching lines @@
 }
 
 section.cols
 {
   display: flex;
 }
 
 section.cols > *:first-child
 {
   flex: 1;
-  -moz-margin-end: 2rem;
-  -webkit-margin-end: 2rem;
+}
+
+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;
-  -moz-margin-end: 0.5rem;
-  -webkit-margin-end: 0.5rem;
+}
+
+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 54 matching lines @@
 {
   padding: 0.5rem 1rem;
   margin: 0rem;
 }
 
 .table.list.bottom-control li:last-of-type
 {
   border-bottom: 0px;
 }
 
-li .display
+.list li > span
 {
   margin: 0rem 1rem;
 }
 
-.table.list li .display
+.table.list li > span
 {
   flex: 1;
   margin: 0rem;
 }
 
 .table.list li.empty-placeholder
 {
   padding: 1rem 1.4rem;
 }
 
@@ skipping 30 matching lines @@
 {
   display: flex;
 }
 
 .col5 > *
 {
   display: inline-block;
   vertical-align: middle;
 }
 
-.cols .col5
+.cols .col5,
+.th .col5
 {
   margin: 0rem 1rem;
+  align-self: center;
 }
 
 .th .col5:nth-of-type(1),
 .table .col5:nth-of-type(1)
 {
-  flex: 4;
+  flex: 5;
 }
 
 .th .col5:nth-of-type(2),
 .table .col5:nth-of-type(2)
 {
   flex: 8;
 }
 
 .th .col5:nth-of-type(3),
 .table .col5:nth-of-type(3)
 {
   flex: 4;
 }
 
 .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;
-  -moz-margin-start: 0;
-  -webkit-margin-start: 0;
-  -moz-margin-end: 1.8rem;
-  -webkit-margin-end: 1.8rem;
-}
-
-.table.cols .display
+}
+
+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
-{
-  -moz-margin-start: 1rem;
-  -webkit-margin-start: 1rem;
+.table.cols .toggle
+{
+  -moz-margin-end: 0.5rem;
+  -webkit-margin-end: 0.5rem;
 }
 
 .table.cols .gear
 {
   margin: 0rem 
 }
 
 #dialog .table.list li
 {
   display: block;
@@ skipping 14 matching lines @@
   height: auto; 
   padding: 1.1rem 1rem;
 }
 
 #dialog .table.list li button:hover,
 #dialog .table.list li button:focus
 {
   background-color: #E1F2FA;
 }
 
-#dialog .table.list li button[aria-checked="true"]
+#dialog .table.list li button[aria-checked="true"],
+.table.list li .dimmed
 {
   color: #BBB;
 }
 
-#dialog .table.list li button .display
+#dialog .table.list li button > span
 {
   flex: none;
   margin: 0rem 0.8rem;
   text-transform: none;
   font-weight: 400;
 }
 
 /*
   Tooltips
 */
 
 .tooltip
 {
   position: relative;
   margin: 0rem;
-  -moz-margin-end: 1rem;
-  -webkit-margin-end: 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
-{
-  -moz-margin-start: 0.7rem;
-  -webkit-margin-start: 0.7rem;
+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;
-  -moz-margin-end: 1rem;
-  -webkit-margin-end: 1rem;
+}
+
+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;
 }