Feature table redesign

_includes/feature-table.html

@@ -0,0 +1,146 @@
+<link rel="preload" href="/features.json" as="fetch">
+<link rel="modulepreload" href="https://unpkg.com/wasm-feature-detect@1/dist/esm/index.js?v=1">
+<script type="module" src="/features.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.15/dist/cdn.js" defer></script><!-- TODO: use minimized version -->
+
+<div
+  id="feature-table"
+  x-data="data"
+  x-init="$watch('selectedCategories', (value, oldValue) => onSelectedCategoryChange(value, oldValue))"
+  x-cloak
+>
+  <div id="table-actions">
+    <fieldset x-show="categories.length">
+      <legend>Currently showing:</legend>
+      <div id="platform-filters">
+        <template x-for="category in categories" x-bind:key="category">
+          <label class="platform-filter" x-id="['platform-filter']">
+            <input type="checkbox" x-bind:id="$id('platform-filter')" x-bind:value="category" x-model="selectedCategories" />
+            <div class="checkbox-button" x-bind:for="$id('platform-filter')" x-text="category"></div>
+          </label>
+        </template>
+      </div>
+    </fieldset>
+    <div>
+      <a href="https://github.com/WebAssembly/website/issues" target="_blank">Report issues</a>
+      &bull;
+      <a href="https://github.com/WebAssembly/website/blob/main/features.json" target="_blank">Contribute data</a>
+    </div>
+  </div>
+
+  <div id="feature-scroll" x-show="categories.length">
+    <table x-bind:style="{ '--num-columns': numColumns }">
+      <thead>
+        <tr>
+          <th class="top-corner"></th>
+          <template x-for="(numColumns, category) in cellGroupsForRow" x-bind:key="category">
+            <th scope="colgroup" class="category" x-bind:colspan="numColumns" x-bind:style="{ '--num-columns-in-category': numColumns }">
+              <div x-text="category"></div>
+            </th>
+          </template>
+        </tr>
+        <tr class="platform-header-row">
+          <th class="top-corner"></th>
+          <template x-for="platform in cellsForRow(null)" x-bind:key="platform.name">
+            <th scope="col">
+              <template x-if="platform.url">
+                <a x-bind:href="platform.url" target="_blank">
+                  <template x-if="platform.logo">
+                    <!-- Empty alt trick: https://www.w3.org/WAI/WCAG22/Techniques/html/H2 -->
+                    <img x-bind:src="platform.logo" alt="" x-bind:class="platform.logoClassName">
+                  </template>
+                  <span class="platform-name" x-text="platform.name"></span>
+                </a>
+              </template>
+              <template x-if="!platform.url">
+                <span>
+                  <span class="platform-name" x-text="platform.name"></span>
+                </span>
+              </template>
+            </th>
+          </template>
+        </tr>
+      </thead>
+      <template x-for="(featureGroup, i) in featureGroups" x-bind:key="i">
+        <tbody>
+          <tr><th scope="colgroup" x-bind:colspan="numColumns" x-text="featureGroup.name"></th></tr>
+          <template x-for="feature in featureGroup.features" x-bind:key="feature.id">
+            <tr x-bind:data-feature-id="feature.id">
+              <th scope="row">
+                <a x-bind:href="feature.url" x-text="feature.description" target="_blank"></a>
+              </th>
+              <template x-for="{ name, status } in cellsForRow(feature.id)" x-bind:key="name">
+                <td x-id="['cell-details']">
+                  <button
+                    type="button"
+                    class="cell"
+                    x-bind:class="classForStatus(status)"
+                    title="Toggle details"
+                    x-on:click="toggleFeatureDetails(status)"
+                    x-bind:aria-expanded="String(status?.expanded ?? false)"
+                    x-bind:aria-controls="$id('cell-details')"
+                  >
+                    <div x-replace.clone="iconForStatus(status)"></div>
+                    <div x-show="labelForStatus(status)" x-text="labelForStatus(status)"></div>
+                    <div x-show="status?.note" class="icon-note" x-replace.clone="iconMoreDetails"></div>
+                  </button>
+                  <div class="details" x-bind:id="$id('cell-details')" x-bind:hidden="!status?.expanded">
+                    <template x-if="status?.expanded">
+                      <div class="details-inner">
+                        <div class="details-status" x-bind:class="classForStatus(status)">
+                          <div x-replace.clone="iconForNote(status)" aria-hidden="true"></div>
+                          <div x-replace="detailsLabelForStatus(status, name)"></div>
+                        </div>
+                        <div class="details-note" x-show="status?.note">
+                          <div x-replace.clone="iconNote" aria-hidden="true"></div>
+                          <div class="details-note-line text-secondary" x-replace="renderNote(status?.note)"></div>
+                        </div>
+                      </div>
+                    </template>
+                  </div>
+                </td>
+              </template>
+            </tr>
+          </template>
+        </tbody>
+      </template>
+    </table>
+  </div>
+</div>
+
+<!-- Apache License 2.0, https://github.com/Remix-Design/remixicon -->
+<!-- TODO: clean up unused icons -->
+<template id="icon-check">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 15.2 19.2 6l1.4 1.4L10 18l-6.4-6.4L5 10.2Z"/></svg>
+</template>
+<template id="icon-checkbox-circle">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m5.457 7.457-1.414-1.414L11 13.086l-2.793-2.793-1.414 1.414L11 15.914z"/></svg>
+</template>
+<template id="icon-close">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 10.6 5-5 1.4 1.5-5 4.9 5 5-1.4 1.4-5-5-5 5L5.7 17l5-5-5-5 1.5-1.4z"/></svg>
+</template>
+<template id="icon-close-circle">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20m0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16m0-9.41 2.83-2.83 1.41 1.41L13.41 12l2.83 2.83-1.41 1.41L12 13.41l-2.83 2.83-1.41-1.41L10.59 12 7.76 9.17l1.41-1.41z"/></svg>
+</template>
+<template id="icon-checkbox-blank-circle">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20m0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16"/></svg>
+</template>
+<template id="icon-flask">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.9994 2v2h-1v3.243c0 1.1575.2512 2.3013.7363 3.3524l4.2813 9.276c.3471.7522.0188 1.6434-.7334 1.9905A1.5 1.5 0 0 1 18.655 22H5.3438c-.8285 0-1.5-.6716-1.5-1.5a1.5 1.5 0 0 1 .138-.6286l4.2813-9.276a8 8 0 0 0 .7363-3.3525V4h-1V2zm-2.6121 8.0012h-2.7758a10 10 0 0 1-.3744 1.0712l-.1581.3611L6.1244 20h11.749l-3.9536-8.5665a10 10 0 0 1-.5325-1.4323m-2.3879-2.7583a10 10 0 0 1-.0288.758h2.0576a10 10 0 0 1-.021-.3639l-.0078-.394V4h-2z"/></svg>
+</template>
+<template id="icon-forbid-2">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20m0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16m4.9-11.48L8.51 16.9a6 6 0 0 1-1.41-1.41l8.37-8.37a6 6 0 0 1 1.41 1.41"/></svg>
+</template>
+<template id="icon-asterisk">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 3v7.267l6.294-3.633 1 1.732-6.293 3.633 6.293 3.635-1 1.732L13 13.732V21h-2v-7.268l-6.294 3.634-1-1.732L9.999 12 3.706 8.366l1-1.732L11 10.267V3z"/></svg>
+</template>
+<template id="icon-question-mark">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 38a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0-34a12 12 0 0 1 12 12c0 4.3-1.5 6.6-5.3 9.8-3.9 3.3-4.7 4.8-4.7 8.2h-4c0-5 1.6-7.4 6-11.2 3.1-2.6 4-4 4-6.8a8 8 0 1 0-16 0v2h-4v-2A12 12 0 0 1 24 4z"/></svg>
+</template>
+<template id="icon-more">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 10a2 2 0 0 0-2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2 2 2 0 0 0-2-2m14 0a2 2 0 0 0-2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2 2 2 0 0 0-2-2m-7 0a2 2 0 0 0-2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2 2 2 0 0 0-2-2"/></svg>
+</template>
+
+<template id="icon-loading">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle fill="#ccc" cx="2" cy="12" r="2"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin=".1"/></circle><circle fill="#ccc" cx="10" cy="12" r="2"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin=".2"/></circle><circle fill="#ccc" cx="18" cy="12" r="2"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin=".3"/></circle></svg>
+</template>

_includes/header.html

@@ -16,8 +16,11 @@
     <noscript id="dark-mode-toggle-stylesheets">
       <link rel="stylesheet" type="text/css" href="/css/light.css" media="(prefers-color-scheme: light)" />
       <link rel="stylesheet" type="text/css" href="/css/dark.css" media="(prefers-color-scheme: dark)" />
-      <meta name="color-scheme" content="dark light" />
+      <meta name="color-scheme" content="light dark" />
     </noscript>
+    {% if page.url == "/features/" %}
+    <link rel="stylesheet" type="text/css" href="/css/feature-table.css" />
+    {% endif %}
     <script src="/js/dark-mode-toggle-stylesheets-loader.min.js"></script>
     <script type="module" src="/js/dark-mode-toggle.min.mjs"></script>
     <script type="module" src="/js/wasm-compat.js"></script>

css/custom.css

@@ -2447,8 +2447,6 @@ dl dd {
 }
 
 table {
-  /* https://bugzilla.mozilla.org/show_bug.cgi?id=1005271 */
-  /* display: block; */
   width: 100%;
   overflow: auto;
 }
@@ -2522,185 +2520,6 @@ pre code::after {
   content: normal;
 }
 
-#feature-support-scrollbox {
-  width: min-content;
-  max-width: 95vw;
-  margin: 0 50%;
-  margin-bottom: 2em;
-  transform: translateX(-50%);
-  overflow-x: auto;
-}
-
-#feature-support-scrollbox th[scope='row'] {
-  position: sticky;
-  left: -1px;
-  background-color: inherit;
-  z-index: 1;
-}
-
-#feature-support-scrollbox a::after {
-  /* Hide external link symbols on the table, since they are all external. */
-  display: none;
-}
-
-@media (min-width: 1400px) {
-  #feature-support {
-    white-space: nowrap;
-  }
-}
-
-#feature-support {
-  cursor: default;
-}
-
-#feature-support > caption {
-  text-align: left;
-}
-
-#feature-support sup {
-  padding-left: 1pt;
-}
-
-#feature-support tr > * {
-  text-align: center;
-}
-
-#feature-support tr:first-child > th {
-  vertical-align: bottom;
-  white-space: normal;
-}
-
-#feature-support .img-container {
-  width: 32px;
-  height: 32px;
-}
-
-#feature-support td {
-  position: relative; /* for tooltip */
-}
-
-#feature-support td:hover,
-#feature-support td:focus,
-#feature-support td:focus-within {
-  background: rgba(0, 0, 0, 0.04);
-}
-
-#feature-support th img {
-  max-height: 32px;
-}
-
-.feature-cell {
-  position: relative;
-  height: 24px; /* height of the icon inside */
-  line-height: 24px;
-}
-
-.feature-cell > sup {
-  font-size: 0.7em;
-  position: absolute;
-  top: 0.2em;
-}
-
-.feature-cell > svg {
-  width: 24px;
-  height: 24px;
-}
-
-.feature-cell.icon-yes {
-  color: #1b5e20;
-}
-
-.feature-cell.icon-yes > svg .svg-stroke {
-  fill: #1b5e20;
-}
-
-.feature-cell.icon-no {
-  color: #a96e8e;
-}
-
-.feature-cell.icon-no > svg .svg-stroke {
-  fill: #a96e8e;
-}
-
-.feature-cell.icon-flag {
-  color: #575581;
-}
-
-.feature-cell.icon-flag > svg .svg-stroke {
-  fill: #575581;
-}
-
-.feature-cell.icon-na {
-  color: #78909c;
-}
-
-.feature-cell.icon-unknown > svg .svg-stroke {
-  fill: #78909c;
-}
-
-#feature-support-scrollbox + ol {
-  list-style: lower-alpha;
-  font-size: 0.7em;
-  margin: 0 0 1em 0;
-  columns: 32em auto;
-  column-gap: 2em;
-}
-
-#feature-support-scrollbox + ol > li {
-  transition: background-color 0.08s ease-in-out;
-}
-
-#feature-support-scrollbox + ol .ref-highlight {
-  background: #eceff1;
-}
-
-.feature-tooltip {
-  text-align: left;
-  text-align: start;
-  white-space: normal;
-  color: #000;
-  background: #fefefe;
-  font-size: 0.8em;
-  border-radius: 2px;
-  outline: none;
-
-  top: 0;
-  left: 0;
-  z-index: 1;
-  max-width: 16em;
-  width: max-content;
-  height: max-content;
-  padding: 12px;
-}
-
-/* Only apply transition after the initial position was set */
-.feature-tooltip[data-placement] {
-  transition: transform 0.2s ease-in-out;
-}
-
-.feature-tooltip,
-.feature-tooltip-arrow {
-  position: absolute;
-  contain: layout style;
-  --shadow-size: 3px;
-  box-shadow: 0 0 var(--shadow-size) rgba(0, 0, 0, 0.3);
-}
-
-.feature-tooltip-arrow {
-  --arrow-size: 8px;
-  background: inherit;
-  width: var(--arrow-size);
-  height: var(--arrow-size);
-
-  --c0: calc(var(--shadow-size) * -1);
-  --c1: calc(100% + var(--shadow-size));
-  clip-path: polygon(
-    var(--c0) var(--c1),
-    var(--c0) var(--c0),
-    var(--c1) var(--c0)
-  );
-}
-
 [data-placement='top'] > .feature-tooltip-arrow {
   bottom: 0;
   transform: translateY(50%) rotate(-135deg);