@mdn/fred 1.3.2 → 1.4.0

package/components/menu/server.js

@@ -11,14 +11,34 @@ export class Menu extends ServerComponent {
    * @param {import("@fred").Context} context
    */
   render(context) {
+    /**
+     * Holds the id of the section being rendered.
+     *
+     * @type {string|null}
+     */
+    let currentSection = null;
+
+    /**
+     * Generates a Glean ID for menu/submenu links.
+     *
+     * @param {string} href - The href of the link.
+     * @param {object} [options]
+     * @param {boolean} [options.primary] - Whether this is the primary link (in the panel title).
+     * @returns {string} the Glean ID.
+     */
+    const gleanId = (href, { primary = false } = {}) =>
+      `${primary ? "menu_click_menu" : "menu_click_submenu"}: ${currentSection ?? "?"} -> ${href}`;
+
     /**
      * Renders a link to a page.
      *
-     * @param {string} slug
-     * @param {string} text
-     * @param {string} [label]
+     * @param {string} slug - The link slug (the part after `/en-US/docs/`!).
+     * @param {string} text - The link text.
+     * @param {object} [options]
+     * @param {string} [options.label] - The title and aria-label of the link.
+     * @param {boolean} [options.primary] - Whether this is the primary link (in the panel title).
      */
-    const link = (slug, text, label) => {
+    const link = (slug, text, { label, primary = false } = {}) => {
       const locale =
         context.locale in MISSING_DOCS &&
         MISSING_DOCS[context.locale]?.includes(slug)
@@ -34,20 +54,22 @@ export class Menu extends ServerComponent {
         href=${href}
         aria-label=${ifDefined(label)}
         title=${ifDefined(label)}
+        data-glean-id=${gleanId(href, { primary })}
         >${text}</a
       >`;
     };
 
-    return html`
-      <nav class="menu">
-        <div class="menu__tab" data-section="html">
-          <mdn-dropdown>
+    const sections = [
+      {
+        id: "html",
+        render: () =>
+          html`<mdn-dropdown>
             <button class="menu__tab-button" type="button" slot="button">
               <span class="menu__tab-label">HTML</span>
             </button>
             <div class="menu__panel" slot="dropdown">
               <p class="menu__panel-title">
-                ${link("Web/HTML", "HTML: Markup language")}
+                ${link("Web/HTML", "HTML: Markup language", { primary: true })}
               </p>
               <div class="menu__panel-content">
                 <dl>
@@ -67,11 +89,9 @@ export class Menu extends ServerComponent {
                         ${link("Web/HTML/Reference/Attributes", "Attributes")}
                       </li>
                       <li>
-                        ${link(
-                          "Web/HTML/Reference",
-                          "See all…",
-                          "See all HTML references",
-                        )}
+                        ${link("Web/HTML/Reference", "See all…", {
+                          label: "See all HTML references",
+                        })}
                       </li>
                     </ul>
                   </dd>
@@ -87,10 +107,7 @@ export class Menu extends ServerComponent {
                         )}
                       </li>
                       <li>
-                        ${link(
-                          "Learn_web_development/Core/Structuring_content/HTML_video_and_audio",
-                          "Video & audio content",
-                        )}
+                        ${link("Web/HTML/Guides/Cheatsheet", "HTML cheatsheet")}
                       </li>
                       <li>
                         ${link(
@@ -99,11 +116,9 @@ export class Menu extends ServerComponent {
                         )}
                       </li>
                       <li>
-                        ${link(
-                          "Web/HTML/Guides",
-                          "See all…",
-                          "See all HTML guides",
-                        )}
+                        ${link("Web/HTML/Guides", "See all…", {
+                          label: "See all HTML guides",
+                        })}
                       </li>
                     </ul>
                   </dd>
@@ -120,16 +135,18 @@ export class Menu extends ServerComponent {
                 </dl>
               </div>
             </div>
-          </mdn-dropdown>
-        </div>
-        <div class="menu__tab" data-section="css">
-          <mdn-dropdown>
+          </mdn-dropdown>`,
+      },
+      {
+        id: "css",
+        render: () =>
+          html`<mdn-dropdown>
             <button class="menu__tab-button" type="button" slot="button">
               <span class="menu__tab-label">CSS</span>
             </button>
             <div class="menu__panel" slot="dropdown">
               <p class="menu__panel-title">
-                ${link("Web/CSS", "CSS: Styling language")}
+                ${link("Web/CSS", "CSS: Styling language", { primary: true })}
               </p>
               <div class="menu__panel-content">
                 <dl>
@@ -146,11 +163,9 @@ export class Menu extends ServerComponent {
                         )}
                       </li>
                       <li>
-                        ${link(
-                          "Web/CSS/Reference",
-                          "See all…",
-                          "See all CSS references",
-                        )}
+                        ${link("Web/CSS/Reference", "See all…", {
+                          label: "See all CSS references",
+                        })}
                       </li>
                     </ul>
                   </dd>
@@ -161,7 +176,7 @@ export class Menu extends ServerComponent {
                     <ul>
                       <li>
                         ${link(
-                          "Learn_web_development/Core/Styling_basics/Box_model",
+                          "Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model",
                           "Box model",
                         )}
                       </li>
@@ -173,17 +188,15 @@ export class Menu extends ServerComponent {
                       </li>
                       <li>
                         ${link(
-                          "Learn_web_development/Core/CSS_layout/Flexbox",
+                          "Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox",
                           "Flexbox",
                         )}
                       </li>
                       <li>${link("Web/CSS/CSS_colors", "Colors")}</li>
                       <li>
-                        ${link(
-                          "Web/CSS/Guides",
-                          "See all…",
-                          "See all CSS guides",
-                        )}
+                        ${link("Web/CSS/Guides", "See all…", {
+                          label: "See all CSS guides",
+                        })}
                       </li>
                     </ul>
                   </dd>
@@ -216,17 +229,21 @@ export class Menu extends ServerComponent {
                 </dl>
               </div>
             </div>
-          </mdn-dropdown>
-        </div>
-        <div class="menu__tab" data-section="javascript">
-          <mdn-dropdown>
+          </mdn-dropdown>`,
+      },
+      {
+        id: "javascript",
+        render: () =>
+          html`<mdn-dropdown>
             <button class="menu__tab-button" type="button" slot="button">
               <span class="menu__tab-label" data-type="long">JavaScript</span>
               <span class="menu__tab-label" data-type="short">JS</span>
             </button>
             <div class="menu__panel" slot="dropdown">
               <p class="menu__panel-title">
-                ${link("Web/JavaScript", "JavaScript: Scripting language")}
+                ${link("Web/JavaScript", "JavaScript: Scripting language", {
+                  primary: true,
+                })}
               </p>
               <div class="menu__panel-content">
                 <dl>
@@ -258,11 +275,9 @@ export class Menu extends ServerComponent {
                         )}
                       </li>
                       <li>
-                        ${link(
-                          "Web/JavaScript/Reference",
-                          "See all…",
-                          "See all JavaScript references",
-                        )}
+                        ${link("Web/JavaScript/Reference", "See all…", {
+                          label: "See all JavaScript references",
+                        })}
                       </li>
                     </ul>
                   </dd>
@@ -296,27 +311,29 @@ export class Menu extends ServerComponent {
                         )}
                       </li>
                       <li>
-                        ${link(
-                          "Web/JavaScript/Guide",
-                          "See all…",
-                          "See all JavaScript guides",
-                        )}
+                        ${link("Web/JavaScript/Guide", "See all…", {
+                          label: "See all JavaScript guides",
+                        })}
                       </li>
                     </ul>
                   </dd>
                 </dl>
               </div>
             </div>
-          </mdn-dropdown>
-        </div>
-        <div class="menu__tab" data-section="webapis">
-          <mdn-dropdown>
+          </mdn-dropdown>`,
+      },
+      {
+        id: "webapis",
+        render: () =>
+          html`<mdn-dropdown>
             <button class="menu__tab-button" type="button" slot="button">
               <span class="menu__tab-label">Web APIs</span>
             </button>
             <div class="menu__panel" slot="dropdown">
               <p class="menu__panel-title">
-                ${link("Web/API", "Web APIs: Programming interfaces")}
+                ${link("Web/API", "Web APIs: Programming interfaces", {
+                  primary: true,
+                })}
               </p>
               <div class="menu__panel-content">
                 <dl>
@@ -339,7 +356,9 @@ export class Menu extends ServerComponent {
                         )}
                       </li>
                       <li>
-                        ${link("Web/API", "See all…", "See all Web API guides")}
+                        ${link("Web/API", "See all…", {
+                          label: "See all Web API guides",
+                        })}
                       </li>
                     </ul>
                   </dd>
@@ -383,16 +402,18 @@ export class Menu extends ServerComponent {
                 </dl>
               </div>
             </div>
-          </mdn-dropdown>
-        </div>
-        <div class="menu__tab" data-section="all">
-          <mdn-dropdown>
+          </mdn-dropdown>`,
+      },
+      {
+        id: "all",
+        render: () =>
+          html`<mdn-dropdown>
             <button class="menu__tab-button" type="button" slot="button">
               <span class="menu__tab-label">All</span>
             </button>
             <div class="menu__panel" slot="dropdown">
               <p class="menu__panel-title">
-                ${link("Web", "All web technology")}
+                ${link("Web", "All web technology", { primary: true })}
               </p>
               <div class="menu__panel-content">
                 <dl>
@@ -411,11 +432,9 @@ export class Menu extends ServerComponent {
                       <li>${link("WebAssembly", "WebAssembly")}</li>
                       <li>${link("Web/WebDriver", "WebDriver")}</li>
                       <li>
-                        ${link(
-                          "Web",
-                          "See all…",
-                          "See all web technology references",
-                        )}
+                        ${link("Web", "See all…", {
+                          label: "See all web technology references",
+                        })}
                       </li>
                     </ul>
                   </dd>
@@ -439,16 +458,20 @@ export class Menu extends ServerComponent {
                 </dl>
               </div>
             </div>
-          </mdn-dropdown>
-        </div>
-        <div class="menu__tab" data-section="learn">
-          <mdn-dropdown>
+          </mdn-dropdown>`,
+      },
+      {
+        id: "learn",
+        render: () =>
+          html`<mdn-dropdown>
             <button class="menu__tab-button" type="button" slot="button">
               <span class="menu__tab-label">Learn</span>
             </button>
             <div class="menu__panel" slot="dropdown">
               <p class="menu__panel-title">
-                ${link("Learn_web_development", "Learn web development")}
+                ${link("Learn_web_development", "Learn web development", {
+                  primary: true,
+                })}
               </p>
               <div class="menu__panel-content">
                 <dl>
@@ -475,6 +498,7 @@ export class Menu extends ServerComponent {
                               : "only-in-en-us",
                           )}
                           href="/en-US/curriculum/"
+                          data-glean-id=${gleanId("/en-US/curriculum/")}
                           >Curriculum</a
                         >
                       </li>
@@ -540,10 +564,12 @@ export class Menu extends ServerComponent {
                 </dl>
               </div>
             </div>
-          </mdn-dropdown>
-        </div>
-        <div class="menu__tab" data-section="tools">
-          <mdn-dropdown>
+          </mdn-dropdown>`,
+      },
+      {
+        id: "tools",
+        render: () =>
+          html`<mdn-dropdown>
             <button class="menu__tab-button" type="button" slot="button">
               <span class="menu__tab-label">Tools</span>
             </button>
@@ -556,6 +582,7 @@ export class Menu extends ServerComponent {
                       class="menu__panel-icon"
                       data-icon="circle-play"
                       href=${`/en-US/play`}
+                      data-glean-id=${gleanId("/en-US/play/")}
                     >
                       Playground
                     </a>
@@ -565,6 +592,7 @@ export class Menu extends ServerComponent {
                       class="menu__panel-icon"
                       data-icon="shield-check"
                       href=${`/en-US/observatory`}
+                      data-glean-id=${gleanId("/en-US/observatory/")}
                     >
                       HTTP Observatory
                     </a>
@@ -598,10 +626,12 @@ export class Menu extends ServerComponent {
                 </ul>
               </div>
             </div>
-          </mdn-dropdown>
-        </div>
-        <div class="menu__tab" data-section="about">
-          <mdn-dropdown>
+          </mdn-dropdown>`,
+      },
+      {
+        id: "about",
+        render: () =>
+          html`<mdn-dropdown>
             <button class="menu__tab-button" type="button" slot="button">
               <span class="menu__tab-label">About</span>
             </button>
@@ -614,6 +644,7 @@ export class Menu extends ServerComponent {
                       class="menu__panel-icon"
                       data-icon="mdn-m"
                       href=${`/en-US/about`}
+                      data-glean-id=${gleanId("/en-US/about")}
                     >
                       About MDN
                     </a>
@@ -623,6 +654,7 @@ export class Menu extends ServerComponent {
                       class="menu__panel-icon"
                       data-icon="chart-no-axes-combined"
                       href=${`/en-US/advertising`}
+                      data-glean-id=${gleanId("/en-US/advertising")}
                     >
                       Advertise with us
                     </a>
@@ -634,6 +666,7 @@ export class Menu extends ServerComponent {
                       class="menu__panel-icon"
                       data-icon="users"
                       href=${`/en-US/community`}
+                      data-glean-id=${gleanId("/en-US/community")}
                     >
                       Community
                     </a>
@@ -643,6 +676,7 @@ export class Menu extends ServerComponent {
                       class="menu__panel-icon"
                       data-icon="github"
                       href="https://github.com/mdn"
+                      data-glean-id=${gleanId("https://github.com/mdn")}
                     >
                       MDN on GitHub
                     </a>
@@ -650,11 +684,30 @@ export class Menu extends ServerComponent {
                 </ul>
               </div>
             </div>
-          </mdn-dropdown>
-        </div>
-        <div class="menu__tab" data-section="blog">
-          <a class="menu__tab-link" href=${`/en-US/blog/`}>Blog</a>
-        </div>
+          </mdn-dropdown>`,
+      },
+      {
+        id: "blog",
+        render: () =>
+          html`<a
+            class="menu__tab-link"
+            href=${`/en-US/blog/`}
+            data-glean-id=${`menu_click_link: top-level -> /en-US/blog/`}
+            >Blog</a
+          >`,
+      },
+    ];
+
+    return html`
+      <nav class="menu">
+        ${sections.map((section) => {
+          currentSection = section.id;
+          const result = html`<div class="menu__tab" data-section=${section.id}>
+            ${section.render()}
+          </div>`;
+          currentSection = null;
+          return result;
+        })}
       </nav>
     `;
   }

package/components/placement-bottom/element.js

@@ -50,10 +50,10 @@ export class MDNPlacementBottom extends PlacementMixin(LitElement) {
       <section class="placement-container">
         <a
           class="placement-link"
-          data-glean="pong: pong-&gt;click top-banner"
+          data-glean-id=${`pong: pong->click top-banner`}
           href=${this.clickLink(click, version)}
           target="_blank"
-          rel="sponsored noreferrer"
+          rel="sponsored"
         >
           <img
             src=${this.imgLink(image)}

package/components/placement-hp-main/element.js

@@ -50,10 +50,10 @@ export class MDNPlacementHpMain extends PlacementMixin(LitElement) {
       <section class="placement-container">
         <a
           class="placement-link"
-          data-glean="pong: pong-&gt;click top-banner"
+          data-glean-id=${`pong: pong->click top-banner`}
           href=${this.clickLink(click, version)}
           target="_blank"
-          rel="sponsored noreferrer"
+          rel="sponsored"
         >
           <img
             src=${this.imgLink(image)}

package/components/placement-no/element.js

@@ -45,7 +45,7 @@ class MDNPlacementNo extends L10nMixin(LitElement) {
           return showNoAds
             ? html`<a
                 class="placement-no"
-                data-glean=${"pong: " +
+                data-glean-id=${"pong: " +
                 (user?.isSubscriber ? "pong->settings" : "pong->plus")}
                 href=${user?.isSubscriber
                   ? "/en-US/plus/settings?ref=nope"

package/components/placement-note/element.js

@@ -11,7 +11,7 @@ class MDNPlacementNote extends L10nMixin(LitElement) {
     return html`<a
       href="/en-US/advertising"
       class="placement-note"
-      data-glean="pong: pong-&gt;about"
+      data-glean-id=${`pong: pong->about`}
       target="_blank"
       rel="noreferrer"
       >${this.l10n("placement-note")}</a

package/components/placement-sidebar/element.js

@@ -75,10 +75,10 @@ export class MDNPlacementSidebar extends PlacementMixin(LitElement) {
           >
             <a
               class="placement-link"
-              data-glean="pong: pong-&gt;click side"
+              data-glean-id=${`pong: pong->click side`}
               href=${this.clickLink(click, version)}
               target="_blank"
-              rel="sponsored noreferrer"
+              rel="sponsored"
               ><img
                 src=${this.imgLink(image)}
                 aria-hidden=${!alt}
@@ -101,10 +101,10 @@ export class MDNPlacementSidebar extends PlacementMixin(LitElement) {
           >
             <a
               class="placement-link"
-              data-glean="pong: pong-&gt;click side"
+              data-glean-id=${`pong: pong->click side`}
               href=${this.clickLink(click, version)}
               target="_blank"
-              rel="sponsored noreferrer"
+              rel="sponsored"
               ><img
                 src=${this.imgLink(image)}
                 aria-hidden=${!alt}

package/components/placement-top/element.js

@@ -37,7 +37,7 @@ export class MDNPlacementTop extends PlacementMixin(LitElement) {
             href="https://scrimba.com/learn/frontend?via=mdn"
             target="_blank"
             rel="noreferrer"
-            data-glean="pong: pong->click fallback-scrimba"
+            data-glean-id=${`pong: pong->click fallback-scrimba`}
           >
             Scrimba
           </a>
@@ -115,10 +115,10 @@ export class MDNPlacementTop extends PlacementMixin(LitElement) {
             <div class="placement-inner">
               <a
                 class="placement-link"
-                data-glean="pong: pong-&gt;click top-banner"
+                data-glean-id=${`pong: pong->click top-banner`}
                 href=${this.clickLink(click, version)}
                 target="_blank"
-                rel="sponsored noreferrer"
+                rel="sponsored"
                 ><div class="placement-content">
                   <img
                     src=${this.imgLink(image)}
@@ -142,10 +142,10 @@ export class MDNPlacementTop extends PlacementMixin(LitElement) {
             <div class="placement-inner">
               <a
                 class="placement-link"
-                data-glean="pong: pong-&gt;click top-banner"
+                data-glean-id=${`pong: pong->click top-banner`}
                 href=${this.clickLink(click, version)}
                 target="_blank"
-                rel="sponsored noreferrer"
+                rel="sponsored"
                 ><div class="placement-content">
                   <img
                     src=${this.imgLink(image)}

package/components/play-controller/element.js

@@ -102,6 +102,7 @@ export class MDNPlayController extends LitElement {
   }
 
   clear() {
+    this.runOnChange = true;
     this.initialCode = undefined;
     this.srcPrefix = "";
     this.reset();

package/components/playground/element.js

@@ -80,6 +80,7 @@ export class MDNPlayground extends L10nMixin(LitElement) {
       controller
     ) {
       controller.clear();
+      this._autoRun = true;
       this._storeSession();
       this.requestUpdate();
       const urlWithoutSearch = new URL(location.href);
@@ -238,7 +239,7 @@ ${"```"}`,
     permalink.search = new URLSearchParams({ id }).toString();
     this._permalink = permalink.toString();
 
-    gleanClick("playground", { type: "load-shared" });
+    gleanClick("play_action: load-shared");
     const code = await response.json();
     return stateToSession(code);
   }

package/components/recent-contributions/server.js

@@ -18,7 +18,7 @@ export class RecentContributions extends ServerComponent {
               <a
                 class="external"
                 href=${contribution.repo.url}
-                data-glean=${`homepage: contribution_repo ${index + 1}`}
+                data-glean-id=${`homepage: contribution_repo ${index + 1}`}
                 >${contribution.repo.name}</a
               >
             </span>

package/components/scrim-inline/element.js

@@ -89,7 +89,7 @@ export class MDNScrimInline extends LitElement {
               target="_blank"
               rel="origin noreferrer"
               class="external"
-              data-glean="curriculum: scrim link id:${this._scrimId}"
+              data-glean-id="curriculum: scrim link id:${this._scrimId}"
             >
               <div class="scrim-link"></div>
               <span class="visually-hidden">Open on Scrimba</span>
@@ -123,7 +123,7 @@ export class MDNScrimInline extends LitElement {
                   <button
                     @click=${this.#open}
                     class="open"
-                    data-glean=${`curriculum: scrim engage id:${this._scrimId}`}
+                    data-glean-id=${`curriculum: scrim engage id:${this._scrimId}`}
                   >
                     ${playSvg}
                     <span class="visually-hidden">

package/l10n/en-US.ftl

@@ -108,8 +108,11 @@ compat-support-flags =
     [one] {" "}to <code data-l10n-name="value">{ $flag_value }</code>
     *[other] {""}
   }{"."}
-  { $flag_type ->
-    [preference] To change preferences in { $browser_name }, visit { $browser_pref_url }.
+  { NUMBER($has_pref_url) ->
+    [one] { $flag_type ->
+      [preference] To change preferences in { $browser_name }, visit { $browser_pref_url }.
+      *[other] {""}
+    }
     *[other] {""}
   }