compat-table: upstream update

Author: myfreeer

src/mdn/browser-compatibility-table/README.md

@@ -1,6 +1,6 @@
 browser-compatibility-table
 --------------
-This dir contains code rewritten from [mdn/yari](https://github.com/mdn/yari/blob/v4.9.0/client/src/lit/compat/), which is licensed [MPL-2.0](https://github.com/mdn/yari/blob/v0.4.123/LICENSE)
+This dir contains code rewritten from [mdn/yari](https://github.com/mdn/yari/blob/v4.11.0/client/src/lit/compat/), which is licensed [MPL-2.0](https://github.com/mdn/yari/blob/v0.4.123/LICENSE)
 
 `types.ts` is [types.d.ts](https://unpkg.com/@mdn/[email protected]/types.d.ts) from [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data), licensed [CC0](https://github.com/mdn/browser-compat-data/blob/v5.2.38/LICENSE)
 

src/mdn/browser-compatibility-table/compat-table.ts

@@ -196,7 +196,40 @@ export class CompatTable {
   _renderTableBody() {
     // <FeatureListAccordion>
     const { data, _browsers: browsers, browserInfo, locale } = this;
-    const features = listFeatures(data, '', this._name);
+    let features = listFeatures(data, '', this._name);
+
+    const MAX_FEATURES = 100;
+
+    // If there are too many features, hide nested features.
+    if (features.length > MAX_FEATURES) {
+      features = features.filter(({ depth }) => depth < 2);
+    }
+
+    // If there are still too many features, hide non-standard features.
+    if (features.length > MAX_FEATURES) {
+      features = features.filter(
+        ({ compat: { status } }) => status?.standard_track
+      );
+    }
+
+    // If there are still too many features, hide deprecated features.
+    if (features.length > MAX_FEATURES) {
+      features = features.filter(
+        ({ compat: { status } }) => !status?.deprecated
+      );
+    }
+
+    // If there are still too many features, hide experimental features.
+    if (features.length > MAX_FEATURES) {
+      features = features.filter(
+        ({ compat: { status } }) => !status?.experimental
+      );
+    }
+
+    // At this point, we did all we can to reduce the number of features shown.
+    if (features.length > MAX_FEATURES) {
+      features = features.slice(0, MAX_FEATURES);
+    }
 
     return `<tbody>
       ${features.map((feature) => {
@@ -609,12 +642,12 @@ export class CompatTable {
         <span
           class="bc-version-label"
           title="${browserReleaseDate && !timeline
-    ? `${browser.name} ${added} – Released ${browserReleaseDate}`
+    ? `${browser.name} ${added} – Release date: ${browserReleaseDate}`
     : ''}"
         >
           ${!timeline || added ? label : ''}
           ${browserReleaseDate && timeline
-    ? ` (Released ${browserReleaseDate})`
+    ? ` (Release date: ${browserReleaseDate})`
     : ''}
         </span>
       </div>