feat(baseline): update widget to reflect new definition (#10128)

See also: mdn/content#30769

build/cli.ts

@@ -26,7 +26,7 @@ import {
   BuiltDocument,
   renderContributorsTxt,
 } from "./index.js";
-import { DocMetadata, Flaws } from "../libs/types/document.js";
+import { Doc, DocMetadata, Flaws } from "../libs/types/document.js";
 import SearchIndex from "./search-index.js";
 import { makeSitemapXML, makeSitemapIndexXML } from "./sitemaps.js";
 import { humanFileSize } from "./utils.js";
@@ -52,6 +52,10 @@ interface GlobalMetadata {
   [locale: string]: Array<DocMetadata>;
 }
 
+interface BuildMetadata {
+  [locale: string]: any;
+}
+
 async function buildDocumentInteractive(
   documentPath: string,
   interactive: boolean,
@@ -132,6 +136,33 @@ async function buildDocuments(
   }
 
   const metadata: GlobalMetadata = {};
+  const buildMetadata: BuildMetadata = {};
+
+  function updateBaselineBuildMetadata(doc: Doc) {
+    if (typeof doc.baseline?.baseline === "undefined") {
+      return;
+    }
+
+    if (typeof buildMetadata[doc.locale] === "undefined") {
+      buildMetadata[doc.locale] = {};
+    }
+    if (typeof buildMetadata[doc.locale].baseline === "undefined") {
+      buildMetadata[doc.locale].baseline = {
+        total: 0,
+        high: 0,
+        highPaths: [],
+        low: 0,
+        lowPaths: [],
+        not: 0,
+        notPaths: [],
+      };
+    }
+
+    buildMetadata[doc.locale].baseline.total++;
+    const key = doc.baseline.baseline || "not";
+    buildMetadata[doc.locale].baseline[key]++;
+    buildMetadata[doc.locale].baseline[`${key}Paths`].push(doc.mdn_url);
+  }
 
   const documents = await Document.findAll(findAllOptions);
   const progressBar = new cliProgress.SingleBar(
@@ -188,6 +219,10 @@ async function buildDocuments(
       appendTotalFlaws(builtDocument.flaws);
     }
 
+    if (builtDocument.baseline) {
+      updateBaselineBuildMetadata(builtDocument);
+    }
+
     if (!noHTML) {
       fs.writeFileSync(
         path.join(outPath, "index.html"),
@@ -330,6 +365,14 @@ async function buildDocuments(
     [...allBrowserCompat].sort().join(" ")
   );
 
+  for (const [locale, meta] of Object.entries(buildMetadata)) {
+    // have to write per-locale because we build each locale concurrently
+    fs.writeFileSync(
+      path.join(BUILD_OUT_ROOT, locale.toLowerCase(), "build.json"),
+      JSON.stringify(meta)
+    );
+  }
+
   return { slugPerLocale: docPerLocale, peakHeapBytes, totalFlaws };
 }
 

build/index.ts

@@ -11,7 +11,7 @@ import {
   MacroRedirectedLinkError,
 } from "../kumascript/src/errors.js";
 
-import { Doc, WebFeatureStatus } from "../libs/types/document.js";
+import { Doc } from "../libs/types/document.js";
 import { Document, execGit, slugToFolder } from "../content/index.js";
 import { CONTENT_ROOT, REPOSITORY_URLS } from "../libs/env/index.js";
 import * as kumascript from "../kumascript/index.js";
@@ -380,7 +380,7 @@ export async function buildDocument(
     browserCompat &&
     (Array.isArray(browserCompat) ? browserCompat : [browserCompat]);
 
-  doc.baseline = await addBaseline(doc);
+  doc.baseline = addBaseline(doc);
 
   // If the document contains <math> HTML, it will set `doc.hasMathML=true`.
   // The client (<Document/> component) needs to know this for loading polyfills.
@@ -558,16 +558,9 @@ export async function buildDocument(
   return { doc: doc as Doc, liveSamples, fileAttachmentMap };
 }
 
-async function addBaseline(
-  doc: Partial<Doc>
-): Promise<WebFeatureStatus | undefined> {
+function addBaseline(doc: Partial<Doc>) {
   if (doc.browserCompat) {
-    const filteredBrowserCompat = doc.browserCompat.filter(
-      (query) =>
-        // temporary blocklist while we wait for an updated baseline definition/designs
-        !["css.properties.grid-template-columns.subgrid"].includes(query)
-    );
-    return await getWebFeatureStatus(...filteredBrowserCompat);
+    return getWebFeatureStatus(...doc.browserCompat);
   }
 }
 

build/web-features.ts

@@ -1,24 +1,10 @@
-import { WebFeature, WebFeatureStatus } from "../libs/types/document.js";
-import { importJSON } from "./utils.js";
+import webFeatures from "web-features";
 
-let promise: Promise<Record<string, WebFeature>> | null = null;
-
-export async function getWebFeatures(): Promise<Record<string, WebFeature>> {
-  if (!promise) {
-    promise = importJSON<Record<string, WebFeature>>("web-features/index.json");
-  }
-
-  return promise;
-}
-
-export async function getWebFeatureStatus(
-  ...features: string[]
-): Promise<WebFeatureStatus | undefined> {
+export function getWebFeatureStatus(...features: string[]) {
   if (features.length === 0) {
     return;
   }
 
-  const webFeatures = await getWebFeatures();
   for (const feature of Object.values(webFeatures)) {
     if (
       feature.status &&

client/src/app.scss

@@ -352,3 +352,15 @@ sup.new {
   top: 0;
   z-index: var(--z-index-main-header);
 }
+
+.feedback-link::before {
+  background-color: var(--feedback-link-icon, var(--text-link));
+  content: "";
+  display: inline-flex;
+  height: 1em;
+  margin-right: 0.4em;
+  mask-image: url("./assets/icons/feedback.svg");
+  mask-size: cover;
+  vertical-align: middle;
+  width: 1em;
+}

client/src/document/baseline-indicator.scss

@@ -3,19 +3,32 @@
 $browsers: "chrome", "edge", "firefox", "safari";
 
 .baseline-indicator {
-  --baseline-bg: var(--baseline-unsupported-bg);
-  --baseline-engine-bg: var(--baseline-unsupported-engine-bg);
-  --baseline-img: var(--baseline-unsupported-img);
+  --baseline-bg: var(--baseline-limited-bg);
+  --baseline-engine-bg: var(--baseline-limited-engine-bg);
+  --baseline-img: var(--baseline-limited-img);
+  --baseline-check: var(--baseline-limited-check);
+  --baseline-cross: var(--baseline-limited-cross);
+  --feedback-link-icon: #666;
 
   background: var(--baseline-bg);
   border-radius: 0.25rem;
   margin: 1rem 0;
   padding-left: 3.8125rem;
 
-  &.supported {
-    --baseline-bg: var(--baseline-supported-bg);
-    --baseline-engine-bg: var(--baseline-supported-engine-bg);
-    --baseline-img: var(--baseline-supported-img);
+  &.high {
+    --baseline-bg: var(--baseline-high-bg);
+    --baseline-engine-bg: var(--baseline-high-engine-bg);
+    --baseline-img: var(--baseline-high-img);
+    --baseline-check: var(--baseline-high-check);
+  }
+
+  &.low {
+    --baseline-bg: var(--baseline-low-bg);
+    --baseline-engine-bg: var(--baseline-low-engine-bg);
+    --baseline-img: var(--baseline-low-img);
+    --baseline-check: var(--baseline-low-check);
+    --baseline-pill-bg: var(--baseline-low-pill-bg);
+    --baseline-pill-color: var(--baseline-low-pill-color);
   }
 
   &[open] {
@@ -34,6 +47,7 @@ $browsers: "chrome", "edge", "firefox", "safari";
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
+    justify-content: space-between;
     padding: 1rem 0;
     padding-right: calc(
       var(--chevron-padding-left) + var(--chevron-size) +
@@ -67,14 +81,24 @@ $browsers: "chrome", "edge", "firefox", "safari";
       letter-spacing: 0;
       line-height: 1.5;
       margin: 0;
-      margin-right: auto;
       padding: 0.375rem 0;
 
       .not-bold {
         font-weight: normal;
       }
     }
 
+    .pill {
+      background: var(--baseline-pill-bg);
+      border-radius: 0.125rem;
+      color: var(--baseline-pill-color);
+      font-size: 0.75rem;
+      font-weight: 600;
+      margin-right: auto;
+      padding: 0 0.25rem;
+      text-transform: uppercase;
+    }
+
     .browsers {
       display: flex;
       flex-wrap: wrap;
@@ -107,7 +131,7 @@ $browsers: "chrome", "edge", "firefox", "safari";
           }
 
           &::after {
-            background-color: var(--baseline-browser-unsupported-bg);
+            background-color: var(--baseline-cross);
             content: "";
             display: block;
             height: 1.25rem;
@@ -118,7 +142,7 @@ $browsers: "chrome", "edge", "firefox", "safari";
           }
 
           &.supported::after {
-            background-color: var(--baseline-browser-supported-bg);
+            background-color: var(--baseline-check);
             mask-image: url("../assets/icons/baseline/browser-check.svg");
           }
         }
@@ -155,8 +179,21 @@ $browsers: "chrome", "edge", "firefox", "safari";
         list-style: none;
         margin: 0;
 
+        &:first-child a {
+          &,
+          &:active,
+          &:visited {
+            background: none;
+            color: var(--text-link);
+          }
+        }
+
         &:not(:first-child) a {
-          color: var(--text-primary);
+          &,
+          &:active {
+            background: none;
+            color: var(--text-primary);
+          }
         }
       }
     }