@mdn/fred 2.5.0 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [2.6.0](https://github.com/mdn/fred/compare/v2.5.0...v2.6.0) (2026-04-28)
+
+
+### Features
+
+* **glean:** port missing measurements ([#1279](https://github.com/mdn/fred/issues/1279)) ([bdbc1a1](https://github.com/mdn/fred/commit/bdbc1a166cbd4fd2dd01ce898b0f5ff7837599d9))
+
+
+### Bug Fixes
+
+* **content-section:** add iframe styling ([#1414](https://github.com/mdn/fred/issues/1414)) ([2696dbc](https://github.com/mdn/fred/commit/2696dbc9ad769855ef9c3356a54ef06ebdcd132c))
+
+
+### Miscellaneous
+
+* **deps-dev:** bump @mdn/browser-compat-data from 7.3.12 to 7.3.13 ([#1517](https://github.com/mdn/fred/issues/1517)) ([6dbfba4](https://github.com/mdn/fred/commit/6dbfba4c396c0490f753c7a0cbc8e29f267adacb))
+* **deps-dev:** bump postcss from 8.5.10 to 8.5.12 in the npm-dev group ([#1516](https://github.com/mdn/fred/issues/1516)) ([b605a17](https://github.com/mdn/fred/commit/b605a170bb1c003c728ecee9695197add9e07957))
+* **deps-dev:** bump the npm-dev group with 2 updates ([#1519](https://github.com/mdn/fred/issues/1519)) ([e1f4d25](https://github.com/mdn/fred/commit/e1f4d258df237b192d391e337b72e5026ed022d0))
+* **deps:** bump @mdn/rari from 0.2.20 to 0.2.21 ([#1525](https://github.com/mdn/fred/issues/1525)) ([63a0803](https://github.com/mdn/fred/commit/63a08039823627b6816469f7798ed54941b33a30))
+* **I10n:** add Simplified Chinese translation ([#1510](https://github.com/mdn/fred/issues/1510)) ([ae1bf08](https://github.com/mdn/fred/commit/ae1bf083d88e3579d99e3587b687245ce26a8107))
+
 ## [2.5.0](https://github.com/mdn/fred/compare/v2.4.3...v2.5.0) (2026-04-23)
 
 

package/components/a11y-menu/server.js

@@ -9,14 +9,14 @@ export class A11yMenu extends ServerComponent {
   render(context) {
     return html`<ul class="a11y-menu">
       <li>
-        <a href="#content"
+        <a href="#content" data-glean-id="a11y_menu: click #content"
           >${context.l10n(
             "a11y-menu-skip-to-main-content",
           )`Skip to main content`}</a
         >
       </li>
       <li>
-        <a href="#search"
+        <a href="#search" data-glean-id="a11y_menu: click #search"
           >${context.l10n("a11y-menu-skip-to-search")`Skip to search`}</a
         >
       </li>

package/components/breadcrumbs/server.js

@@ -18,6 +18,7 @@ export class Breadcrumbs extends ServerComponent {
       return nothing;
     }
 
+    const total = parents.length;
     return html`
       <ol
         class="breadcrumbs"
@@ -27,7 +28,11 @@ export class Breadcrumbs extends ServerComponent {
         ${parents.map(
           ({ uri, title }, index) => html`
             <li property="itemListElement" typeof="ListItem">
-              <a href=${uri} property="item" typeof="WebPage"
+              <a
+                href=${uri}
+                property="item"
+                typeof="WebPage"
+                data-glean-id="breadcrumb_click: ${total - index}/${total}"
                 ><span property="name">${title}</span></a
               >
               <meta property="position" content=${index + 1} />

package/components/collection-save-button/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 { globalUser } from "../user/context.js";
 
 import styles from "./element.css?lit";
@@ -89,16 +90,26 @@ export class MDNCollectionSaveButton extends L10nMixin(LitElement) {
   });
 
   _open() {
+    this._selectFocusEventTriggered = false;
+    gleanClick("article_actions_collections_opened");
     this._bookmarks.run();
     this._collections.run();
     this.shadowRoot?.querySelector("mdn-modal")?.showModal();
   }
 
+  _selectOpen() {
+    if (!this._selectFocusEventTriggered) {
+      gleanClick("article_actions_collection_select_opened");
+      this._selectFocusEventTriggered = true;
+    }
+  }
+
   /** @param {Event} event */
   _selectChange({ target }) {
     if (target instanceof HTMLSelectElement) {
       const { value } = target;
       if (value === ADD_VALUE) {
+        gleanClick("article_actions_new_collection");
         this.shadowRoot?.querySelector("mdn-modal")?.close();
         open("/en-US/plus/collections");
       } else {
@@ -149,6 +160,9 @@ export class MDNCollectionSaveButton extends L10nMixin(LitElement) {
       this._lastAction = "save";
 
       const url = `/api/v2/collections/${collectionId}/items/${item ? `${item.id}/` : ""}`;
+
+      gleanClick("new_collection_modal_submit_article_actions");
+
       const res = await fetch(url, {
         body: JSON.stringify({
           url: this.docUrl,
@@ -229,6 +243,7 @@ export class MDNCollectionSaveButton extends L10nMixin(LitElement) {
                           )`Collection:`}
                           <select
                             .value=${this._item?.collection_id}
+                            @focus=${this._selectOpen}
                             @change=${this._selectChange}
                           >
                             ${collections.map(

package/components/color-theme/element.js

@@ -1,6 +1,7 @@
 import { LitElement, html } from "lit";
 
 import { L10nMixin } from "../../l10n/mixin.js";
+import { gleanClick } from "../../utils/glean.js";
 
 import styles from "./element.css?lit";
 
@@ -17,6 +18,7 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
     super();
     /** @type {import("./types.js").ColorScheme} */
     this._mode = "light dark";
+    this._closingFromSelect = false;
     this._options = Object.entries({
       "light dark": this.l10n("theme-default")`OS default`,
       light: this.l10n("color-theme-light")`Light`,
@@ -30,6 +32,8 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
       const mode = target.dataset.mode;
       if (mode === "light dark" || mode === "light" || mode === "dark") {
         this._mode = mode;
+        const gleanMode = mode === "light dark" ? "os-default" : mode;
+        gleanClick(`theme_switcher: switch -> ${gleanMode}`);
         try {
           localStorage.setItem("theme", mode);
         } catch (error) {
@@ -37,12 +41,24 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
         }
         const dropdown = this.shadowRoot?.querySelector("mdn-dropdown");
         if (dropdown) {
+          this._closingFromSelect = true;
           dropdown.open = false;
         }
       }
     }
   }
 
+  /** @param {Event} event */
+  _onDropdownToggle({ target }) {
+    if (target instanceof HTMLElement && "open" in target) {
+      if (!target.open && this._closingFromSelect) {
+        this._closingFromSelect = false;
+        return;
+      }
+      gleanClick(`theme_switcher: ${target.open ? "open" : "close"}`);
+    }
+  }
+
   /**
    * @param {import("lit").PropertyValues<this>} changedProperties
    */
@@ -61,7 +77,7 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
 
   render() {
     return html`<div class="color-theme">
-      <mdn-dropdown>
+      <mdn-dropdown @toggle=${this._onDropdownToggle}>
         <button
           part="button"
           slot="button"

package/components/compat-table/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 { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 import { L10nMixin } from "../../l10n/mixin.js";
+import { gleanClick } from "../../utils/glean.js";
+import { ViewedController } from "../viewed-controller/viewed-controller.js";
 
 import { DEFAULT_LOCALE, ISSUE_METADATA_TEMPLATE } from "./constants.js";
 import styles from "./element.css?lit";
@@ -73,6 +76,9 @@ export class MDNCompatTable extends L10nMixin(LitElement) {
 
   static styles = styles;
 
+  /** @type {import("lit/directives/ref.js").Ref<HTMLElement>} */
+  _ref = createRef();
+
   constructor() {
     super();
     this.query = "";
@@ -88,6 +94,9 @@ export class MDNCompatTable extends L10nMixin(LitElement) {
     this._browsers = [];
     /** @type {string|undefined} */
     this._showTimelineId = undefined;
+    new ViewedController(this, this._ref, () => {
+      gleanClick(`bcd: view -> ${this.query}`);
+    });
   }
 
   get _breadcrumbs() {
@@ -255,7 +264,7 @@ export class MDNCompatTable extends L10nMixin(LitElement) {
   }
 
   _renderTable() {
-    return html`<figure class="table-container">
+    return html`<figure ${ref(this._ref)} class="table-container">
       <figure class="table-container-inner">
         ${this._renderIssueLink()}
         <table

package/components/content-section/server.css

@@ -138,6 +138,11 @@
     border-radius: 0.25rem;
   }
 
+  iframe {
+    border: 1px solid var(--color-border-primary);
+    border-radius: 0.25rem;
+  }
+
   table {
     width: 100%;
     border-collapse: collapse;

package/components/curriculum-landing/server.js

@@ -257,7 +257,10 @@ export class CurriculumLanding extends ServerComponent {
     const bannerLight = partnerBannerLight;
 
     return html`
-      <section class="curriculum-partner-banner-container">
+      <section
+        class="curriculum-partner-banner-container"
+        data-glean-view="curriculum: partner banner view"
+      >
         <div class="partner-banner">
           <section>
             <h2>Learn the curriculum with Scrimba and become job ready</h2>

package/components/dropdown/element.js

@@ -96,8 +96,19 @@ export class MDNDropdown extends LitElement {
     `;
   }
 
-  updated() {
+  /**
+   * @param {import("lit").PropertyValues<this>} changedProperties
+   */
+  updated(changedProperties) {
     this._setAriaAttributes();
+    if (
+      changedProperties.has("open") &&
+      changedProperties.get("open") !== undefined
+    ) {
+      this.dispatchEvent(
+        new Event("toggle", { bubbles: true, composed: true }),
+      );
+    }
   }
 
   firstUpdated() {

package/components/featured-articles/server.js

@@ -10,16 +10,23 @@ export class FeaturedArticles extends ServerComponent {
   render(articles) {
     return html`<ul class="featured-articles">
       ${articles.map(
-        (article) =>
+        (article, index) =>
           html`<li>
             <article class="featured-articles__article">
               ${article.tag
-                ? html`<a class="featured-articles__tag" href=${article.tag.uri}
+                ? html`<a
+                    class="featured-articles__tag"
+                    href=${article.tag.uri}
+                    data-glean-id=${`homepage: article_tag ${index + 1} -> ${article.tag.uri}`}
                     >${article.tag.title}</a
                   >`
                 : nothing}
               <h3 class="featured-articles__title">
-                <a href=${article.mdn_url}>${article.title}</a>
+                <a
+                  href=${article.mdn_url}
+                  data-glean-id=${`homepage: article ${index + 1} -> ${article.mdn_url}`}
+                  >${article.title}</a
+                >
               </h3>
               <p class="featured-articles__summary">${article.summary}</p>
             </article>

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/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/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>`;