[Framework] Complete implementation info with badges (#216)

* [Framework] Complete implementation info with badges

The code now renders more specific implementation information on screen using
visual badges on top of browser icons. Badges are:
- Feature available on desktop only / mobile only / desktop and mobile
- Features requires using a prefix
- Feature is behind a flag

Essentially, there will always be a desktop/mobile badge and, most of the time,
that badge will be the "desktop and mobile" one, because most recent features
are developed on all platforms.

A tooltip explains what the implementation info means, for instance:
"Experimental in Chrome (mobile). Feature requires using a prefix. Source:
Chrome Platform Status."

That text also appears in a span element for accessibility readers.

Clicking on the browser icon takes the reader to the right page on the Platform
Status Web site where the implementation info comes from.

Some changes made to the `extract-impl-data.js` script to make things possible:
- The script now sets a `selected` flag on the implementation info that is
considered to be the right one for each user agent.
- The script also sets the URL to look at on the underlying Platform Status Web
site to get additional info.
- The script only runs the selection logic once (it incorrectly ran after each
step)
- The Chrome Platform Status platform was marked as authoritative for Chrome
for Android (it was only considered as authoritative for Chrome for Desktop)

The styles of the generated table have been slightly updated to set some
minimum width to the implementation column (enough to render 5 browsers),
and some maximum width to the feature column (to keep it short).

Also created a `tr` function to translate strings instead of passing the
translations object around.

* [Framework] Write spec title and group name in same column

To save some width in generated table for implementation info, and keep all of
our tables consistent, the name of the group(s) responsible for a given spec
or feature is (are) listed below the specification title in the same column.

Styles used are similar to those in the new /TR/ page, the group name appearing
in light grey below using a smaller font size.

Links now use consistent styles throughout the roadmap, regardless of whether
they appear in the body of the text or in generated tables. No underline in
the tables in particular to improve readability.

The update also removes and sanitizes a few styles that were defined twice in
`theme.css` and `roadmap.css`. More work would be needed on that front, but
we'll do that later on (for once, I'm not sure why we have two files).

Updates to link styles meant the remaining `<strong><a>...</a></strong>`
constructs rendered in bold again. I dropped the `<strong>` element everwhere.

* [Framework] Implementation info filtering and new UAs

- Add the following browsers to the list displayed in the implementations
column: Baidu Browser, QQ Browser, Samsung Internet, UC Browser.
- Split browsers between "main" (the four main codebases) and "secondary"
(those based on one of the main codebases), and display main ones first.
- Add a filtering menu to the implementation column that lets the user select
which browsers she wants to see displayed. Choices are saved to session storage
so that they are preserved when the user navigates between roadmap pages but
reset between sessions.
- The four main browsers are displayed by default.

* [Framework] Translation logic for implementation filtering

The implementation filtering mechanism now uses the JSON translation files to
display the filtering menu label and the browser names.

Code re-shuffled accordingly to put JavaScript functions common to the
generation script and to the filtering script in the `utils.js` script and
put JavaScript functions that are only useful for the generation script in a
separate `generate-utils.js` script.

Translation function also updated to fallback to English translations in all
cases and record all missing translations in a global `warnings` array
displayed when the page is generated at the end of the scripts' initialization
to help with translations.

README.md

@@ -277,7 +277,6 @@ The `js/translations.xx.json` file, where `xx` is the BCP47 language code, needs
   "columns": {
     "feature": "",
     "spec": "",
-    "group": "",
     "maturity": "",
     "impl": "",
     "implintents": "",

assets/css/roadmap.css

@@ -1,58 +1,3 @@
-html, body {
-  margin: 0px;
-  padding: 0px;
-  outline: 0px;
-  font-family: Open Sans, 'Helvetica Neue', sans-serif;
-  font-size: 16px;
-  -webkit-font-smoothing: antialiased;
-}
-
-h1 {
-  font-size: 1.5em;
-  line-height: 1.5em;
-  font-weight: 400;
-  margin-top: 0px;
-  margin-bottom: 10px;
-  color: #47525d;
-}
-
-h2 {
-  font-size: 1.4em;
-  line-height: 1.5em;
-  font-weight: 400;
-  margin-top: 20px;
-  margin-bottom: 10px;
-  color: #47525d;
-}
-
-h3 {
-  font-size: 1.2em;
-  line-height: 1.5em;
-  font-weight: 400;
-  margin-top: 10px;
-  margin-bottom: 0px;
-  color: #47525d;
-}
-
-h4 {
-  font-size: 1em;
-  line-height: 1.5em;
-  font-weight: 600;
-  color: #47525d;
-}
-
-p {
-  font-size: 1em;
-  line-height: 1.5em;
-  font-weight: 400;
-  margin: 0px;
-  color: #47525d;
-}
-
-p.highlight {
-  color:#00C853;
-}
-
 .container {
   width: 100%;
   box-sizing: border-box;
@@ -151,6 +96,10 @@ filter: grayscale(1);*/
   box-shadow: 1px 0 0 rgba(0,0,0,0.1),0 0 15px rgba(0,0,0,0.1);
 }
 
+#side-nav a:hover {
+  border-bottom: none;
+}
+
 #side-nav.active {
     transform: translateX(125%);
 }
@@ -350,6 +299,7 @@ margin-top: 10px;
 
 ul.roadmap-list li a {
     text-decoration: none;
+    border-bottom: none;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -410,10 +360,6 @@ ul.roadmap-list li .description p {
     font-size: 0.9em;
 }
 
-.contribute p a:hover {
-  text-decoration: underline;
-}
-
 .contribute p.call-to-action {
     margin-top: 20px;
     margin-bottom: 10px;
@@ -552,10 +498,6 @@ span[lang=en] {
     line-height: 50px;
     margin-top: 20px;
     margin-bottom: 15px;
-    color:  #0070cc;
-    color: #007ee5;
-    color: #47525d;
-
   }
 
   h1.hero-heading {
@@ -569,38 +511,29 @@ span[lang=en] {
 
   h2 {
     font-size: 1.5em;
-    font-weight: 300;
     line-height: 35px;
     margin-top: 15px;
     margin-bottom: 10px;
-    color: #0070cc;
   }
 
   h3 {
     font-size: 1.125em;
-    font-weight: 400;
     line-height: 30px;
     margin-top: 15px;
     margin-bottom: 0px;
-    color: #47525d;
   }
 
   h4 {
-    font-size: 1em;
     font-weight: 800;
     line-height: 30px;
     margin-top: 10px;
     margin-bottom: 5px;
-    color: #47525d;
   }
 
   p {
-    font-size: 1em;
-    font-weight: 400;
     line-height: 25px;
     margin-top: 0px;
     margin-bottom: 8px;
-    color: #47525d;
   }
 }