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/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/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/SourceSansPro-bold.woff) format("woff");
-  font-weight: 700;
-  font-style: normal;
+/* cyrillic-ext */

[saroyanm, 2018/01/29 16:16:17]

I added fonts from the URLS bellow accordingly:

*
https://fonts.googleapis.com/css?family=Source+Sans+Pro:300&subset=cyrillic,c...

*
https://fonts.googleapis.com/css?family=Source+Sans+Pro:400&subset=cyrillic,c...
*
https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&subset=cyrillic,c...


@Thomas if you agree with current implementation, I'll add same fonts into
mobile-options.css and issue-reporter.css and remove unused fonts.

As soon we will have SASS support we will be able to move the fonts into a
separate file and avoid duplication.

[Thomas Greiner, 2018/02/14 17:13:45]

Can you verify that we actually need each of those unicode ranges?

If there's a language we don't support or generally, if there are characters we
refer to here which we don't use, we don't need to include them here either.

[Thomas Greiner, 2018/02/14 17:13:46]

Anything we need to consider when using the fonts from this source? Are they
under a different license then the one we already include in the repo?

On 2018/01/29 16:16:17, saroyanm wrote:
I don't think we want to duplicate them across all CSS files so why not just
separate them into a "fonts.css" file already?

[saroyanm, 2018/02/14 18:30:04]

Not sure how I can verify ? 
We do support "cyrillic" languages, "greek", "vietnamese", I'm not sure if some
of them are using or might use characters in future that are part of extended
version.

[saroyanm, 2018/02/14 18:30:04]

Only thing I could find is from -> https://developers.google.com/fonts/faq 
The open source fonts in the Google Fonts catalog are published under licenses
that allow you to use them on any website, whether it’s commercial or personal. 
Search queries may surface results from external foundries, who may or may not
use open source licenses.

Source Sans Pro is "OFL" and links to actual license from here ->
https://fonts.google.com/specimen/Source+Sans+Pro 

I'll include the license as a separate file.
I agree, mind if I use Import until we have CSS preprocessor in place
https://developer.mozilla.org/en-US/docs/Web/CSS/%40import ?

[Thomas Greiner, 2018/02/15 12:17:06]

Ok. From what I read in the license text, the requirements are:
- Include the license text in adblockplusui and in the extension build
- Include the copyright notice in adblockplusui and in the extension build

The Google Fonts page doesn't mention though what the copyright notice should
say so I did a quick search and found the font's official site at
https://typekit.com/fonts/source-sans. There you find links on the bottom for
each font variant. Those pages contain the license as well as the copyright
notice we need to include.

This also matches the license file that I found in the repo where you got the
font files from:
https://github.com/adobe-fonts/source-sans-pro/blob/release/LICENSE.txt

We could even include the fonts as an npm package if we want (see
https://github.com/adobe-fonts/source-sans-pro/blob/release/README.md#font-in...
and https://www.npmjs.com/package/source-sans-pro).
I think there's a misunderstanding. What I'm suggesting is to include it as
follows:

<head>
  ...
  <link rel="stylesheet" type="text/css" href="fonts.css">
  <link rel="stylesheet" type="text/css" href="desktop-options.css">
  ...
</head>

[Thomas Greiner, 2018/02/15 12:17:06]

I assumed there'd be resources out there that clarify that since that's quite an
important aspect of which ranges to choose. But all I found was
http://cldr.unicode.org/ which is not too easy to extract information from.

So let's simplify this:
- If there's at least one language for each Unicode block (e.g. "latin"), we
should keep it. Presumably, that's all of them anyway.
- If there's a language we support that's not covered by any of the Unicode
blocks, we're missing characters. It may be sufficient to check for support of
arabic, chinese, cyrillic, greek, japanese and latin but let's check back with
C&T on that.

[saroyanm, 2018/02/15 18:47:19]

If we include Font as an npm package, we don't need to include License ?
Sure, I was referring to use @include rather than manage another file in HTML,
but if you have a strong preference to current method, I'll go for it.

[saroyanm, 2018/02/15 18:47:19]

I don't think that C&T ever noticed that we had that problem for more than 3
years.

Result of my tests:
Arabic, Chinese, Japanese is using "Latin" only, because we are not loading
Source Sans Pro for them, I'm not sure if Source Sans Pro has a separate
implementation for them.

Greek and Cyrilic languages I've tested so far looks good.
I think we should fix the issue for Cyrilic and Greek if possible and find a
Font that support all other languages.

Alternatively we can allow usage of Local fonts and rely on user having right
font in the system.

I suggest that we fix for as much languages as possible with the current review
and find optimal solution separately.

[saroyanm, 2018/02/16 21:02:56]

As discussed, I've included "fonts" file separately as you suggested and
included license.

+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 300;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url("fonts/Source-Sans-Pro/300/cyrillic-ext.woff2") format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;

[Thomas Greiner, 2018/02/14 17:13:45]

Coding style: "Line length: 80 characters or less"

Also applies to other occurrences in this file.

[saroyanm, 2018/02/14 18:30:04]

Will fix this.

[saroyanm, 2018/02/16 21:02:56]

Done.

+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url("fonts/Source-Sans-Pro/400/cyrillic-ext.woff2") format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url("fonts/Source-Sans-Pro/700/cyrillic-ext.woff2") format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 300;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url("fonts/Source-Sans-Pro/300/cyrillic.woff2") format("woff2");
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url("fonts/Source-Sans-Pro/400/cyrillic.woff2") format("woff2");
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url("fonts/Source-Sans-Pro/700/cyrillic.woff2") format("woff2");
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 300;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url("fonts/Source-Sans-Pro/300/greek-ext.woff2") format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url("fonts/Source-Sans-Pro/400/greek-ext.woff2") format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url("fonts/Source-Sans-Pro/700/greek-ext.woff2") format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 300;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url("fonts/Source-Sans-Pro/300/greek.woff2") format("woff2");
+  unicode-range: U+0370-03FF;
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url("fonts/Source-Sans-Pro/400/greek.woff2") format("woff2");
+  unicode-range: U+0370-03FF;
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url("fonts/Source-Sans-Pro/700/greek.woff2") format("woff2");
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 300;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url("fonts/Source-Sans-Pro/300/vietnamese.woff2") format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url("fonts/Source-Sans-Pro/400/vietnamese.woff2") format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url("fonts/Source-Sans-Pro/700/vietnamese.woff2") format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 300;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url(fonts/Source-Sans-Pro/300/latin-ext.woff2) format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url(fonts/Source-Sans-Pro/400/latin-ext.woff2) format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url(fonts/Source-Sans-Pro/700/latin-ext.woff2) format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 300;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url(fonts/Source-Sans-Pro/300/latin.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url(fonts/Source-Sans-Pro/400/latin.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  /* local("Ø") forces using no local font called Source Sans Pro */
+  src: local("Ø"), url(fonts/Source-Sans-Pro/700/latin.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
 }
 
 html
 {
   font-size: 16px;
 }
 
 body
 {
   background-color: #F3F3F3;
@@ skipping 881 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;

[Thomas Greiner, 2018/02/14 17:13:45]

If the design doesn't consider long texts, there's not much we can do. Therefore
I'd argue that we shouldn't optimize for exceptions but instead make sure that
the design works for most users.

In this case, for instance, we'd be unnecessarily increasing the column width
for all languages even though most of them may not even have this issue.

What I'd suggest is to feed this issue back to Product and resolve the
underlying issue rather than patching one hole after another (see also
"Disabled" label in Spanish).

[saroyanm, 2018/02/14 18:30:04]

I agree that this need to be fixed in design, but mind if we keep this as a
stopgap solution, because currently this is the only column that has both
elements next to each other, though we might change this, it was done so to
easily change the state using sibling selector.

I'll followup and create a Gitlab issue to address that as well.

[Thomas Greiner, 2018/02/15 12:17:07]

Ok, I'm fine with that.

 }
 
 .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)
@@ skipping 20 matching lines @@
 .table.cols > span
 {
   margin: 0rem;
 }
 
 .table.cols li
 {
   padding: 0.5rem 0rem;
 }
 
-.table.cols .state
+.table.cols .toggle
 {
-  -moz-margin-start: 1rem;
-  -webkit-margin-start: 1rem;
+  -moz-margin-end: 0.5rem;
+  -webkit-margin-end: 0.5rem;
 }
 
 .table.cols .gear
 {
   margin: 0rem 
 }
 
 #dialog .table.list li
 {
   display: block;
@@ skipping 502 matching lines @@
   font-size: 1rem;
   color: #077CA6;
   background-color: #E1F2FA;
 }
 
 #notification strong
 {
   flex: 1;
   text-align: center;
 }