@mdn/fred 2.4.3 → 2.6.0

package/components/footer/server.js

@@ -186,6 +186,7 @@ export class Footer extends ServerComponent {
                     rel="noopener"
                     aria-label=${item.ariaLabel}
                     data-icon=${item.icon}
+                    data-glean-id=${`footer: social -> ${item.icon}`}
                   ></a>
                 </li>
               `,
@@ -206,6 +207,7 @@ export class Footer extends ServerComponent {
                             class=${link.external ? "external" : ""}
                             target=${link.external ? "_blank" : undefined}
                             rel=${link.external ? "noopener" : undefined}
+                            data-glean-id=${`footer: link -> ${link.href}`}
                           >
                             ${link.text}
                           </a>
@@ -230,7 +232,10 @@ export class Footer extends ServerComponent {
             ${mozillaLinks(context).map(
               (item) => html`
                 <li>
-                  <a href=${item.href} class=${item.external ? "external" : ""}
+                  <a
+                    href=${item.href}
+                    class=${item.external ? "external" : ""}
+                    data-glean-id=${`footer: mozilla -> ${item.href}`}
                     >${item.text}</a
                   >
                 </li>

package/components/generic-about/server.js

@@ -80,6 +80,7 @@ export class GenericAbout extends ServerComponent {
                                 slot="tab"
                                 href="#${h3Value.id}"
                                 data-panel-id=${h3Value.id}
+                                data-glean-id=${`about: tab -> ${h3Value.id}`}
                               >
                                 ${h3Value.title}
                               </a>

package/components/generic-toc/server.js

@@ -25,7 +25,12 @@ export class GenericToc extends ServerComponent {
         ${context.hyData.toc.map(
           ({ id, text }) =>
             html`<li class="generic-toc__item">
-              <a class="generic-toc__link" href="#${id}">${text}</a>
+              <a
+                class="generic-toc__link"
+                href="#${id}"
+                data-glean-id="toc_click: #${id}"
+                >${text}</a
+              >
             </li>`,
         )}
       </ul>

package/components/language-always-redirect-button/element.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from "lit";
 
+import { gleanClick } from "../../utils/glean.js";
 import { setPreferredLocale } from "../preferred-locale/utils.js";
 
 export class MDNLanguageAlwaysRedirectButton extends LitElement {
@@ -15,6 +16,7 @@ export class MDNLanguageAlwaysRedirectButton extends LitElement {
   }
 
   _handleClick() {
+    gleanClick(`language: ${this.locale} -> ${this.to} (always)`);
     setPreferredLocale(this.to);
     const url = document.location.pathname.replace(
       `/${this.locale}/`,

package/components/language-switcher/element.js

@@ -2,6 +2,7 @@ import { Task } from "@lit/task";
 import { LitElement, html, nothing } from "lit";
 
 import { L10nMixin } from "../../l10n/mixin.js";
+import { gleanClick } from "../../utils/glean.js";
 
 import infoIcon from "../icon/info.svg?lit";
 import { getEnglishDoc } from "../not-found/utils.js";
@@ -63,12 +64,15 @@ export class MDNLanguageSwitcher extends L10nMixin(LitElement) {
 
   _togglePreferredLocale() {
     if (this.notFound) return;
+    const oldValue = this._preferredLocale ?? "0";
     if (this._isLocalePreferred) {
       resetPreferredLocale();
       this._preferredLocale = undefined;
+      gleanClick(`language_remember: ${oldValue} -> 0`);
     } else {
       setPreferredLocale(this.locale);
       this._preferredLocale = this.locale;
+      gleanClick(`language_remember: ${oldValue} -> ${this.locale}`);
     }
   }
 
@@ -160,6 +164,7 @@ export class MDNLanguageSwitcher extends L10nMixin(LitElement) {
                 `/${notFound ? "en-US" : locale}/`,
                 `/${translation.locale}/`,
               )}
+              data-glean-id=${`language: ${locale} -> ${translation.locale}`}
               >${translation.native}</a
             >
           </li>

package/components/latest-news/server.js

@@ -14,16 +14,23 @@ export class LatestNews extends ServerComponent {
 
     return html`<ul class="latest-news">
       ${items.map(
-        (item) =>
+        (item, index) =>
           html`<li>
             <article class="latest-news__item">
               ${item.source
-                ? html`<a class="latest-news__source" href=${item.source.url}
+                ? html`<a
+                    class="latest-news__source"
+                    href=${item.source.url}
+                    data-glean-id=${`homepage: news_source ${index + 1} -> ${item.source.url}`}
                     >${item.source.name}</a
                   >`
                 : nothing}
               <h3 class="latest-news__title">
-                <a href=${item.url}>${item.title}</a>
+                <a
+                  href=${item.url}
+                  data-glean-id=${`homepage: news ${index + 1} -> ${item.url}`}
+                  >${item.title}</a
+                >
               </h3>
               <time class="latest-news__date" datetime=${item.published_at}>
                 ${rtf.format(

package/components/left-sidebar/server.css

@@ -115,7 +115,7 @@
   }
 
   a,
-  span:not(.highlight-container) {
+  span:not(.sidebar-filter-mark-container) {
     display: inline-block;
     padding-block: 0.25rem;
     vertical-align: middle;

package/components/login-button/element.js

@@ -16,7 +16,7 @@ export class MDNLoginButton extends L10nMixin(LitElement) {
   }
 
   render() {
-    return html`<mdn-button href=${this._loginUrl}
+    return html`<mdn-button href=${this._loginUrl} data-glean-id="login_button"
       >${this.l10n("login-button-login")`Login`}</mdn-button
     >`;
   }

package/components/menu/server.js

@@ -71,7 +71,9 @@ export class Menu extends ServerComponent {
                   data-glean-id=${`menu_click_link: top-level -> ${tab.href}`}
                   >${tab.buttonText}</a
                 >`
-              : html`<mdn-dropdown>
+              : html`<mdn-dropdown
+                  data-glean-toggle-open=${`menu_toggle: ${tab.id}`}
+                >
                   <button class="menu__tab-button" type="button" slot="button">
                     ${typeof tab.buttonText === "string"
                       ? html`<span class="menu__tab-label"

package/components/observatory-form/element.js

@@ -1,6 +1,7 @@
 import { LitElement, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 
+import { gleanClick } from "../../utils/glean.js";
 import { OBSERVATORY_API_URL } from "../env/index.js";
 import "../progress-bar/element.js";
 import "../button/element.js";
@@ -61,6 +62,7 @@ export class MDNObservatoryForm extends LitElement {
       this._hostname = host;
     }
     this._queryRunning = true;
+    gleanClick("observatory: scan");
     try {
       const apiUrl = new URL(
         OBSERVATORY_API_URL +
@@ -77,6 +79,7 @@ export class MDNObservatoryForm extends LitElement {
     } catch (error) {
       // @ts-expect-error
       this._errorMessage = `${ERROR_MAP[error.name] || "message" in error ? error["message"] : error}`;
+      gleanClick(`observatory: error -> ${this._errorMessage}`);
     } finally {
       this._queryRunning = false;
     }

package/components/observatory-results/element.js

@@ -2,6 +2,7 @@ import { Task } from "@lit/task";
 import { LitElement, html } from "lit";
 import { nothing } from "lit";
 
+import { gleanClick } from "../../utils/glean.js";
 import { OBSERVATORY_API_URL } from "../env/index.js";
 
 import styles from "./element.css?lit";
@@ -62,7 +63,9 @@ export class MDNObservatoryResults extends LitElement {
         }
         return await res.json();
       } catch (error) {
-        throw new Error("Observatory API request for scan data failed", {
+        const message = "Observatory API request for scan data failed";
+        gleanClick(`observatory: error -> ${message}`);
+        throw new Error(message, {
           cause: error,
         });
       }
@@ -116,6 +119,7 @@ export class MDNObservatoryResults extends LitElement {
     if (!this.host) {
       return;
     }
+    gleanClick("observatory: rescan");
     this._usePostInApi = true;
     this._apiTask.run();
   }
@@ -127,6 +131,7 @@ export class MDNObservatoryResults extends LitElement {
    */
   _handleTabSelect(index, key) {
     this.selectedTab = index;
+    gleanClick(`observatory: tab -> ${key}`);
     globalThis.history.replaceState(
       "",
       "",

package/components/observatory-results/rating.js

@@ -65,7 +65,12 @@ export function Rating({ result, host, rescan }) {
           @click=${rescan}
         ></mdn-observatory-rescan-button>
         <div class="scan-another">
-          <a href="/en-US/observatory"> Scan another website </a>
+          <a
+            href="/en-US/observatory"
+            data-glean-id="observatory: scan-another"
+          >
+            Scan another website
+          </a>
         </div>
       </section>
     </section>

package/components/outer-layout/server.js

@@ -6,7 +6,7 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import inlineScript from "../../entry.inline.js?source&csp=true";
 import {
   ROBOTS_GLOBAL_ALLOW,
-  TRANSCEND_BUNDLE_ID,
+  TRANSCEND_AIRGAP_URL,
   WRITER_MODE,
 } from "../env/index.js";
 import { RUNTIME_ENV, runtimeVariables } from "../env/runtime.js";
@@ -116,12 +116,12 @@ export class OuterLayout extends ServerComponent {
                 fetchpriority="low"
               />`,
           )}
-          ${TRANSCEND_BUNDLE_ID &&
+          ${TRANSCEND_AIRGAP_URL &&
           html`<script
             data-cfasync="false"
             data-report-only="on"
             data-prompt="0"
-            src=${`https://transcend-cdn.com/cm/${TRANSCEND_BUNDLE_ID}/airgap.js`}
+            src=${TRANSCEND_AIRGAP_URL}
           ></script>`}
           ${scripts?.map(
             (path) => html`<script src=${path} type="module"></script>`,

package/components/placement-top/element.js

@@ -1,12 +1,14 @@
 import { LitElement, html, nothing } from "lit";
-import { ref } from "lit/directives/ref.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { styleMap } from "lit/directives/style-map.js";
 
+import { gleanClick } from "../../utils/glean.js";
+import { PlacementMixin } from "../placement/mixin.js";
+import { ViewedController } from "../viewed-controller/viewed-controller.js";
+
 import "../placement-note/element.js";
 import "../placement-no/element.js";
 
-import { PlacementMixin } from "../placement/mixin.js";
-
 import styles from "./element.css?lit";
 
 /**
@@ -17,6 +19,16 @@ import styles from "./element.css?lit";
 export class MDNPlacementTop extends PlacementMixin(LitElement) {
   static styles = styles;
 
+  /** @type {import("lit/directives/ref.js").Ref<HTMLElement>} */
+  _fallbackRef = createRef();
+
+  constructor() {
+    super();
+    new ViewedController(this, this._fallbackRef, () => {
+      gleanClick("banner_scrimba_view");
+    });
+  }
+
   /**
    *
    * @returns {TemplateResult | symbol}
@@ -27,7 +39,7 @@ export class MDNPlacementTop extends PlacementMixin(LitElement) {
 
   renderFallback() {
     return html`
-      <div class="fallback">
+      <div ${ref(this._fallbackRef)} class="fallback">
         <p class="fallback__copy">
           Learn frontend, backend, and AI from our course partner
           <a

package/components/playground/element.js

@@ -342,6 +342,7 @@ ${"```"}`,
                   @click=${this._share}
                   ?disabled=${!hasCode}
                   data-id="share"
+                  data-glean-id="playground: share-click"
                   >${this.l10n("playground-share")`Share`}</mdn-button
                 >
                 <mdn-button
@@ -356,6 +357,7 @@ ${"```"}`,
                       variant="secondary"
                       @click=${this._reset}
                       ?disabled=${!isResettable}
+                      data-glean-id="playground: reset-click"
                       >${this.l10n("playground-reset")`Reset`}</mdn-button
                     >`
                   : nothing}
@@ -391,6 +393,7 @@ ${"```"}`,
                       @click=${this._reportOpen}
                       variant="secondary"
                       .icon=${warningIcon}
+                      data-glean-id="playground: flag-click"
                     >
                       ${this.l10n(
                         "playground-seeing-something-inappropriate",
@@ -437,8 +440,14 @@ ${"```"}`,
             )`Share your code via Permalink`}
           </h2>
           ${this._user.render({
-            initial: () => html`<mdn-login-button></mdn-login-button>`,
-            pending: () => html`<mdn-login-button></mdn-login-button>`,
+            initial: () =>
+              html`<mdn-login-button
+                data-glean-id="playground: banner-login"
+              ></mdn-login-button>`,
+            pending: () =>
+              html`<mdn-login-button
+                data-glean-id="playground: banner-login"
+              ></mdn-login-button>`,
             complete: (user) =>
               user.isAuthenticated
                 ? this._permalink && !isResettable
@@ -453,12 +462,16 @@ ${"```"}`,
                         )`Copy to clipboard`}</mdn-button
                       >
                     `
-                  : html`<mdn-button @click=${this._createPermalink}
+                  : html`<mdn-button
+                      @click=${this._createPermalink}
+                      data-glean-id="playground: share-permalink"
                       >${this.l10n(
                         "playground-create-link",
                       )`Create link`}</mdn-button
                     >`
-                : html`<mdn-login-button></mdn-login-button>`,
+                : html`<mdn-login-button
+                    data-glean-id="playground: banner-login"
+                  ></mdn-login-button>`,
           })}
         </section>
       </mdn-modal>

package/components/recent-contributions/server.js

@@ -33,7 +33,10 @@ export class RecentContributions extends ServerComponent {
               )}
             </time>
             <div class="recent-contributions__title">
-              <a class="external" href=${contribution.url}
+              <a
+                class="external"
+                href=${contribution.url}
+                data-glean-id=${`homepage: contribution ${index + 1} -> ${contribution.url}`}
                 >${contribution.title}</a
               >
             </div>

package/components/reference-toc/server.js

@@ -21,7 +21,11 @@ export class ReferenceToc extends ServerComponent {
       <ul>
         ${toc?.map(
           ({ id, text }) =>
-            html`<li><a href="#${id}">${unsafeHTML(text)}</a></li>`,
+            html`<li>
+              <a href="#${id}" data-glean-id="toc_click: #${id}"
+                >${unsafeHTML(text)}</a
+              >
+            </li>`,
         )}
       </ul>
     </nav>`;

package/components/scrim-inline/element.js

@@ -1,8 +1,11 @@
 import { LitElement, html, nothing } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import { L10nMixin } from "../../l10n/mixin.js";
+import { gleanClick } from "../../utils/glean.js";
+import { ViewedController } from "../viewed-controller/viewed-controller.js";
 
 import playSvg from "./assets/scrim-play.svg?lit";
 import styles from "./element.css?lit";
@@ -20,6 +23,9 @@ export class MDNScrimInline extends L10nMixin(LitElement) {
     _scrimLoaded: { state: true },
   };
 
+  /** @type {import("lit/directives/ref.js").Ref<HTMLElement>} */
+  _bodyRef = createRef();
+
   constructor() {
     super();
     /** @type {string | undefined} */
@@ -41,6 +47,12 @@ export class MDNScrimInline extends L10nMixin(LitElement) {
     this._fullscreen = false;
     /** @type {boolean} */
     this._scrimLoaded = false;
+
+    new ViewedController(this, this._bodyRef, () => {
+      if (this._scrimId) {
+        gleanClick(`curriculum: scrim view id:${this._scrimId}`);
+      }
+    });
   }
 
   /**
@@ -109,7 +121,7 @@ export class MDNScrimInline extends L10nMixin(LitElement) {
               >
             </a>
           </div>
-          <div class="body">
+          <div class="body" ${ref(this._bodyRef)}>
             ${this._scrimLoaded
               ? html`
                   <iframe

package/components/server/index.js

@@ -13,6 +13,9 @@ export class ServerComponent {
   /** @type {string | undefined} */
   static inlineScript;
 
+  /** `true` if we're rendering in a renderSimplified context */
+  simplifiedMode = false;
+
   /**
    * @template {typeof ServerComponent} T
    * @this {T}
@@ -28,6 +31,7 @@ export class ServerComponent {
     const component = new this();
 
     if ("renderSimplified" in asyncStore) {
+      component.simplifiedMode = true;
       return component.renderSimplified(...args);
     }
 

package/components/sidebar-filter/element.js

@@ -5,6 +5,7 @@
 import { LitElement, html } from "lit";
 
 import { L10nMixin } from "../../l10n/mixin.js";
+import { gleanClick } from "../../utils/glean.js";
 import cancelIcon from "../icon/cancel.svg?lit";
 
 import styles from "./element.css?lit";
@@ -91,6 +92,7 @@ class MDNSidebarFilter extends L10nMixin(LitElement) {
       // Mark that the user has typed if the query is non-empty.
       if (this.query && this.query.trim().length > 0 && !this.hasTyped) {
         this.hasTyped = true;
+        gleanClick("sidebar_filter_typed");
       }
 
       if (this._quicklinks) {
@@ -116,6 +118,14 @@ class MDNSidebarFilter extends L10nMixin(LitElement) {
     }
   }
 
+  /**
+   * Event handler for focus events on the text field.
+   * @private
+   */
+  _onFocus() {
+    gleanClick("sidebar_filter_focus");
+  }
+
   /**
    * Event handler for input events on the text field.
    * @param {Event} event The input event.
@@ -152,6 +162,7 @@ class MDNSidebarFilter extends L10nMixin(LitElement) {
         type="text"
         placeholder=${this.l10n("sidebar-filter-filter")`Filter`}
         .value=${this.query}
+        @focus=${this._onFocus}
         @input=${this._onInput}
       />
       ${this.matchCount === undefined

package/components/sidebar-filter/sidebar-filterer.js

@@ -154,7 +154,9 @@ export class SidebarFilterer {
    * @param {HTMLAnchorElement} link The link element to reset.
    */
   resetHighlighting(link) {
-    const nodes = [...link.querySelectorAll("span, mark")];
+    const nodes = [
+      ...link.querySelectorAll("span.sidebar-filter-mark-container, mark"),
+    ];
     const parents = new Set();
     for (const node of nodes) {
       const parent = node.parentElement;
@@ -250,7 +252,7 @@ export class SidebarFilterer {
       );
 
       const span = this.replaceChildNode(node, "span");
-      span.className = "highlight-container";
+      span.className = "sidebar-filter-mark-container";
 
       /** @type {Text|undefined} */
       const initialRest = [...span.childNodes].find(

package/components/specifications-list/server.js

@@ -0,0 +1,72 @@
+import { html } from "@lit-labs/ssr";
+import { join } from "lit/directives/join.js";
+
+import { ServerComponent } from "../server/index.js";
+
+export class SpecificationsList extends ServerComponent {
+  /**
+   * @param {import("@fred").Context} context
+   * @param {import("@rari").Specification[]} specifications
+   */
+  render(context, specifications) {
+    if (specifications.length === 0) {
+      return html`${context.l10n(
+        "specifications-list-this-feature-does-not-appear-to",
+      )`This feature does not appear to be defined in any specification.`}`;
+    }
+
+    /** @type {Map<string, string[]>} */
+    const urlsByTitle = new Map();
+    for (const { title, bcdSpecificationURL: url } of specifications) {
+      const urls = urlsByTitle.get(title) ?? [];
+      urls.push(url);
+      urlsByTitle.set(title, urls);
+    }
+    const links = urlsByTitle
+      .entries()
+      .flatMap(([title, urls]) =>
+        urls.map((url) => this.renderLink(url, title)),
+      );
+
+    if (this.simplifiedMode) {
+      return html`<ul>
+        ${links.map((link) => html`<li>${link}</li>`)}
+      </ul>`;
+    }
+    return html`<table>
+      <thead>
+        <tr>
+          <th scope="col">
+            ${context.l10n("specifications-list-specification")`Specification`}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        ${links.map(
+          (link) =>
+            html`<tr>
+              <td>${link}</td>
+            </tr>`,
+        )}
+      </tbody>
+    </table>`;
+  }
+
+  /**
+   * @param {string} url
+   * @param {string} [title]
+   */
+  renderLink(url, title) {
+    const hash = url.split("#")[1];
+
+    const label = [
+      title && html`${title}`,
+      title && hash && html`<br />`,
+      hash && html`# ${hash}`,
+    ].filter(Boolean);
+
+    return html`<a class="external" href=${url} rel="noopener" target="_blank"
+      >${join(label, "")}</a
+    >`;
+  }
+}

package/components/translation-banner/server.js

@@ -99,7 +99,10 @@ export class TranslationBanner extends ServerComponent {
     // Note: Do not translate, this is intentionally in English.
 
     return html`<p class="translation-banner__switch" lang="en-US">
-      <mdn-button data-variant="secondary" href=${url}
+      <mdn-button
+        data-variant="secondary"
+        href=${url}
+        data-glean-id=${`language: ${context.locale} -> en-US (view)`}
         >View in English</mdn-button
       >
       <mdn-language-always-redirect-button locale=${context.locale} to="en-US"

package/components/user-menu/element.js

@@ -144,6 +144,7 @@ export class MDNUserMenu extends L10nMixin(LitElement) {
                   href=${this.#loginUrl()}
                   .icon=${logInIcon}
                   variant="plain"
+                  data-glean-id="top_nav: login"
                 >
                   ${this.l10n("login")}
                 </mdn-button>