Clarify downstream browser support on gh-pages site (#3245)

* First pass draft at adding a statement on downstream browsers

* Remove double spaces after full stops

* Escape asterisks

* Explain Baseline years, add link to supported browsers

* Rewording gh-pages index and supported-browsers pages

* code cleanup

* Formatting fixes

* Removes explanation of Baseline years as requested by @captainbrosset

* Adds Facebook and Instagram apps to supported-browsers.html

* Run prettier for formatting

* Add link to KaiOS developer docs

* Show the browser ID if pretty name is not available

---------

Co-authored-by: Patrick Brosset <[email protected]>

Author: tonypconway

gh-pages/src/index.md

@@ -21,6 +21,16 @@ Baseline is calculated using the following core browser set:
 - Microsoft Edge (desktop)
 - Mozilla Firefox (desktop and Android)
 
+## What about other browsers?
+
+Many browsers outside the core browser set typically support the same Baseline feature set as a browser in the core browser set.
+
+For example, many browsers on Android, Windows, and macOS are built on Chromium, the open source engine underpinning Chrome and Edge. On iOS, all browsers use the same engine, WebKit, that underpins that device's Safari browser.
+
+For a wider range of browsers, see [supported browsers](/supported-browsers/) to find out which minimum browser versions support different Baseline feature sets, including Newly and Widely available and Baseline years.
+
+The [`baseline-browser-mapping`](https://github.com/web-platform-dx/baseline-browser-mapping) module tracks these mappings to derive the feature set for browsers outside the core browser set.
+
 ## How do I find the Baseline status of a feature?
 
 You can find at-a-glance Baseline statuses on [Can I Use](https://caniuse.com/) feature entries, and [MDN Web Docs](https://developer.mozilla.org/) reference pages. See [Baseline in the wild](/baseline-in-the-wild/) for more examples.

gh-pages/src/supported-browsers.html

@@ -4,7 +4,6 @@
 ---
 
 <style>
-  #downstreamContainer,
   #widelyAvailableOnDateLabel {
     display: none;
   }
@@ -107,7 +106,11 @@
     qq_android: "QQ Browser Mobile",
     uc_android: "UC Browser Mobile",
     ya_android: "Yandex Browser Mobile",
+    kai_os: "KaiOS",
+    facebook_android: "Facebook for Android",
+    instagram_android: "Instagram for Android",
   };
+  const calloutDownstreamBrowsers = ["kai_os", "webview_android"];
   const datePicker = document.getElementById("widelyAvailableOnDatePicker");
   const targetSelect = document.getElementById("targetSelect");
   const nextYear = new Date().getFullYear() + 1;
@@ -138,16 +141,18 @@
       `<tr>
         <th>Browser</th>
         <th>Version</th>
-        <th>Chromium version</th>
+        <th>Engine</th>
+        <th>Version</th>
         <th>Release date</th>
       </tr>` +
       versions
         .slice(7)
         .map((version) => {
           return (
             `<tr view-transition-name="view-transition-${version.browser}">` +
-            `<td>${nameMappings[version.browser]}</td>
+            `<td>${nameMappings[version.browser] ? nameMappings[version.browser] : version.browser}${calloutDownstreamBrowsers.indexOf(version.browser) != -1 ? "*" : ""}</td>
           <td>${version.version}</td>
+          <td>${version.engine}</td>
           <td>${version.engine_version}</td>
           <td>${version.release_date}</td>` +
             `</tr>`
@@ -162,6 +167,7 @@
     const versions = getCompatibleVersions({
       ...config,
       includeDownstreamBrowsers: true,
+      includeKaiOS: true,
     });
 
     if (!document.startViewTransition) {
@@ -218,16 +224,6 @@
     setInputValue(datePicker, new Date().toISOString().slice(0, 10));
     datePicker.setAttribute("max", maxWaDate.toISOString().slice(0, 10));
 
-    // Set downstream browser display
-    // NB: downstream browsers are always requested from baseline-browser-mapping
-    const includeDownstreamFromUrl =
-      urlParams.get("includeDownstream") === "true" ? true : false;
-    showHideElements("downstreamContainer", includeDownstreamFromUrl);
-    setInputValue(
-      document.getElementById("downstreamBrowsersCheckbox"),
-      includeDownstreamFromUrl,
-    );
-
     // Look for target year in URL
     if (urlParams.get("targetYear")) {
       configObject.targetYear = parseInt(urlParams.get("targetYear"));
@@ -259,15 +255,6 @@
   };
 
   // Event handlers for inputs
-  document
-    .getElementById("downstreamBrowsersCheckbox")
-    .addEventListener("change", (e) => {
-      updateUrl(urlParams, {
-        set: { includeDownstream: e.target.checked },
-      });
-      showHideElements("downstreamContainer", e.target.checked);
-      return;
-    });
 
   document.getElementById("targetSelect").addEventListener("change", (e) => {
     e.preventDefault();
@@ -335,11 +322,6 @@
   <label id="widelyAvailableOnDateLabel">
     <input id="widelyAvailableOnDatePicker" min="2018-01-29" type="date" />
   </label>
-
-  <label id="showDownstreamLabel">
-    <input id="downstreamBrowsersCheckbox" type="checkbox" />
-    Show downstream browsers
-  </label>
 </div>
 
 <div id="loadingContainer"></div>
@@ -363,4 +345,32 @@ <h2>Downstream browsers</h2>
     >.
   </p>
   <table id="downstreamVersionsList"></table>
+  <p>
+    <strong>* NOTE:</strong> Android WebView supports the majority of Baseline
+    features. However, there are exceptions that you should take into account if
+    you rely heavily on webviews. For details on which APIs are unsupported in
+    Android and iOS webviews, see
+    <a href="https://caniwebview.com">caniwebview.com</a>.
+  </p>
+  <p>
+    <strong>* NOTE:</strong> KaiOS is a feature phone operating system used for
+    flip phones which uses the Gecko engine from Firefox. It is possible to
+    derive feature support in KaiOS based on Gecko feature support, but please
+    be aware that KaiOS has a significantly different set of UI limitations and
+    interaction model compared to the other browsers on this page. For more
+    information, see the
+    <a href="https://developer.kaiostech.com/">KaiOS developer documentation</a
+    >.
+  </p>
+  <p>
+    Other browsers built on Chromium/Blink, Gecko, and WebKit also support
+    Baseline features. If you work on a browser and can provide data connecting
+    your versions back to their upstream engine for
+    <code>baseline-browser-mapping</code>, please
+    <a
+      href="https://github.com/web-platform-dx/baseline-browser-mapping/issues"
+      target="_blank"
+      >create an issue</a
+    >.
+  </p>
 </div>