Add first-introduced versions to roadmap

WebAssembly · Sep 2, 2022 · 330b032 · 330b032
1 parent 1754291
commit 330b032
Show file tree

Hide file tree

Showing 5 changed files with 489 additions and 95 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
@@ -13,7 +13,7 @@
 <body>
   <header class="page-section">
     <div class="container-narrow">
-    <a class="site-logo" href="/"></a>
+    <a class="site-logo" href="/" title="WebAssembly"></a>
     <nav class="site-nav">
       <a class="site-nav-item btn" href="/">Overview</a>
       <a class="site-nav-item btn" href="/getting-started/developers-guide/">Getting Started</a>
@@ -29,10 +29,10 @@
       <div class="banner-update-icon"></div>
       <span class="banner-update-date"></span>
       <span>WebAssembly 1.0 has shipped in 4 major browser engines.
-        &nbsp;<img width="48px" src="/images/firefox.svg"/>
-        &nbsp;<img width="48px" src="/images/chrome.svg"/>
-        &nbsp;<img width="48px" src="/images/safari.svg"/>
-        &nbsp;<img width="48px" src="/images/edge.svg"/>
+        &nbsp;<img width="48" height="48" src="/images/firefox.svg" alt="Firefox"/>
+        &nbsp;<img width="48" height="48" src="/images/chrome.svg" alt="Chrome"/>
+        &nbsp;<img width="48" height="48" src="/images/safari.svg" alt="Safari"/>
+        &nbsp;<img width="48" height="48" src="/images/edge.svg" alt="Edge"/>
         &nbsp;&#8203;<a href="/roadmap/">Learn&nbsp;more</a></span>
     </div>
   </section>

diff --git a/css/custom.css b/css/custom.css
@@ -14,7 +14,7 @@ body {
 }
 
 a {
-    color: #6797e2;
+    color: #4772b5;
     text-decoration: none;
 }
 
@@ -1880,7 +1880,8 @@ dl dd {
 }
 
 table {
-  display: block;
+  /* https://bugzilla.mozilla.org/show_bug.cgi?id=1005271 */
+  /* display: block; */
   width: 100%;
   overflow: auto;
 }
@@ -1890,7 +1891,7 @@ table th {
 }
 
 table th, table td {
-  padding: 6px 13px;
+  padding: 6px 11px;
   border: 1px solid #ddd;
 }
 
@@ -1957,9 +1958,15 @@ pre code::before, pre code::after {
   content: normal;
 }
 
+#feature-support-scrollbox {
+  overflow: auto;
+  margin: 0 0 16px 0;
+}
+
 #feature-support {
   white-space: nowrap;
   cursor: default;
+  margin: 0;
 }
 
 #feature-support>caption {
@@ -1984,7 +1991,119 @@ pre code::before, pre code::after {
   height: 32px;
 }
 
-#feature-support td[title] {
-  text-decoration: underline dashed;
-  text-underline-position: under;
+#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, .04);
+}
+
+.feature-cell {
+  position: relative;
+  height: 24px; /* height of the icon inside */
+  line-height: 24px;
+}
+
+.feature-cell > sup {
+  font-size: .7em;
+  position: absolute;
+  top: .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;
+}
+
+#feature-support-scrollbox + ol > li {
+  transition: background-color .08s ease-in-out;
+}
+
+#feature-support-scrollbox + ol .ref-highlight {
+  background: #ECEFF1;
+}
+
+.feature-tooltip {
+  text-align: left;
+  text-align: start;
+  white-space: normal;
+  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 .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, .30);
+}
+
+.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);  }
+[data-placement="bottom"] > .feature-tooltip-arrow { top: 0; transform: translateY(-50%) rotate(45deg); }
+[data-placement="left"] > .feature-tooltip-arrow { right: 0; transform: translateX(50%) rotate(135deg); }
+[data-placement="right"] > .feature-tooltip-arrow { left: 0; transform: translateX(-50%) rotate(-45deg); }
diff --git a/features.json b/features.json
@@ -90,56 +90,53 @@
 		"Chrome": {
 			"url": "https://www.google.com/chrome/",
 			"logo": "/images/chrome.svg",
-			"version": "96",
 			"features": {
-				"bigInt": true,
-				"bulkMemory": true,
-				"exceptions": true,
-				"multiValue": true,
-				"mutableGlobals": true,
-				"referenceTypes": true,
-				"saturatedFloatToInt": true,
-				"signExtensions": true,
-				"simd": true,
-				"tailCall": "#enable-experimental-webassembly-features",
-				"threads": true
+				"bigInt": "85",
+				"bulkMemory": "75",
+				"exceptions": "95",
+				"multiValue": "85",
+				"mutableGlobals": "74",
+				"referenceTypes": "96",
+				"saturatedFloatToInt": "75",
+				"signExtensions": "74",
+				"simd": "91",
+				"tailCall": ["flag", "Requires flag `#enable-experimental-webassembly-features`"],
+				"threads": "74"
 			}
 		},
 		"Firefox": {
 			"url": "https://www.mozilla.org/firefox/",
 			"logo": "/images/firefox.svg",
-			"version": "90",
 			"features": {
-				"bigInt": true,
-				"bulkMemory": true,
-				"exceptions": true,
-				"extendedConstantExprs": "Enabled in Nightly, unavailable in Beta/Release",
-				"memory64": "Enabled in Nightly, unavailable in Beta/Release",
-				"multiValue": true,
-				"mutableGlobals": true,
-				"referenceTypes": true,
-				"relaxedSimd": "Enabled in Nightly, unavailable in Beta/Release",
-				"saturatedFloatToInt": true,
-				"signExtensions": true,
-				"simd": true,
-				"threads": true,
-				"typeReflection": "Enabled in Nightly, unavailable in Beta/Release"
+				"bigInt": "78",
+				"bulkMemory": "79",
+				"exceptions": "100",
+				"extendedConstantExprs": ["flag", "Enabled in Nightly, unavailable in Beta/Release"],
+				"memory64": ["flag", "Enabled in Nightly, unavailable in Beta/Release"],
+				"multiValue": "78",
+				"mutableGlobals": "61",
+				"referenceTypes": "79",
+				"relaxedSimd": ["flag", "Enabled in Nightly, unavailable in Beta/Release"],
+				"saturatedFloatToInt": "64",
+				"signExtensions": "62",
+				"simd": "89",
+				"threads": "79",
+				"typeReflection": ["flag", "Enabled in Nightly, unavailable in Beta/Release"]
 			}
 		},
 		"Safari": {
 			"url": "https://www.apple.com/safari/",
 			"logo": "/images/safari.svg",
-			"version": "15.2",
 			"features": {
-				"bigInt": true,
-				"bulkMemory": true,
-				"exceptions": true,
+				"bigInt": ["14.1", "Supported in desktop Safari since 14.1 and iOS Safari since 14.5"],
+				"bulkMemory": "15",
+				"exceptions": "15.2",
 				"multiValue": true,
 				"mutableGlobals": true,
-				"referenceTypes": true,
-				"saturatedFloatToInt": true,
-				"signExtensions": true,
-				"threads": true
+				"referenceTypes": "15",
+				"saturatedFloatToInt": "15",
+				"signExtensions": ["14.1", "Supported in desktop Safari since 14.1 and iOS Safari since 14.5"],
+				"threads": ["14.1", "Supported in desktop Safari since 14.1 and iOS Safari since 14.5"]
 			}
 		},
 		"Wasmtime": {
@@ -149,9 +146,9 @@
 			"features": {
 				"bigInt": null,
 				"bulkMemory": true,
-				"memory64": "--enable-memory64",
-				"multiMemory": "--enable-multi-memory",
-				"moduleLinking": "--enable-module-linking",
+				"memory64": ["flag", "Requires flag `--enable-memory64`"],
+				"multiMemory": ["flag", "Requires flag `--enable-multi-memory`"],
+				"moduleLinking": ["flag", "Requires flag `--enable-module-linking`"],
 				"multiValue": true,
 				"mutableGlobals": true,
 				"referenceTypes": true,
@@ -163,7 +160,6 @@
 		"Wasmer": {
 			"url": "https://wasmer.io/",
 			"logo": "/images/wasmer.svg",
-			"version": "2.0",
 			"features": {
 				"bigInt": null,
 				"bulkMemory": true,
@@ -173,31 +169,29 @@
 				"saturatedFloatToInt": true,
 				"signExtensions": true,
 				"simd": true,
-				"threads": "--enable-threads"
+				"threads": ["flag", "Requires flag `--enable-threads`"]
 			}
 		},
 		"Node.js": {
 			"url": "https://nodejs.org/",
 			"logo": "/images/nodejs.svg",
-			"version": "16.4",
 			"features": {
 				"bigInt": true,
 				"bulkMemory": true,
-				"exceptions": "--experimental-wasm-eh",
+				"exceptions": ["flag", "Requires flag `--experimental-wasm-eh`"],
 				"multiValue": true,
 				"mutableGlobals": true,
-				"referenceTypes": "--experimental-wasm-reftypes",
+				"referenceTypes": ["flag", "Requires flag `--experimental-wasm-reftypes`"],
 				"saturatedFloatToInt": true,
 				"signExtensions": true,
 				"simd": true,
-				"tailCall": "--experimental-wasm-return-call",
+				"tailCall": ["flag", "Requires flag `--experimental-wasm-return-call`"],
 				"threads": true
 			}
 		},
 		"Deno": {
 			"url": "https://deno.land/",
 			"logo": "/images/deno.svg",
-			"version": "1.21.3",
 			"features": {
 				"bigInt": true,
 				"bulkMemory": true,