feat(glean): port missing measurements #1279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft

caugner wants to merge 22 commits into main from add-missing-measurements

+239 −31

components/a11y-menu/server.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -8,8 +8,16 @@ export class A11yMenu extends ServerComponent { @@
        */
       render(context) {
         return html`<ul class="a11y-menu">
-          <li><a href="#content">${context.l10n`Skip to main content`}</a></li>
-          <li><a href="#search">${context.l10n`Skip to search`}</a></li>
+          <li>
+            <a href="#content" data-glean-id="a11y_menu: click #content"
+              >${context.l10n`Skip to main content`}</a
+            >
+          </li>
+          <li>
+            <a href="#search" data-glean-id="a11y_menu: click #search"
+              >${context.l10n`Skip to search`}</a
+            >
+          </li>
         </ul>`;
       }
     }

components/about-tabs/element.js

-Original file line number
+Diff line change
@@ -1,5 +1,7 @@
     import { LitElement, html } from "lit";
+    import { gleanClick } from "../../utils/glean.js";
     import styles from "./element.css?lit";
     export class MDNAboutTabs extends LitElement {
@@ Expand Down Expand Up / @@ -86,6 +88,7 @@ export class MDNAboutTabs extends LitElement { @@
             e.preventDefault();
             if (tabEl.dataset.panelId) {
               globalThis.location.hash = tabEl.dataset.panelId;
+              gleanClick(`about: tab -> ${tabEl.dataset.panelId}`);
             }
             this.active_index = i;
@@ Expand Down @@

components/breadcrumbs/server.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,7 @@ export class Breadcrumbs extends ServerComponent { @@
           return nothing;
         }
+        const total = parents.length;
         return html`
           <ol
             class="breadcrumbs"
@@ Expand All / @@ -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} />
@@ Expand Down @@

components/collection-save-button/element.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -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";
@@ Expand Down Expand Up @@
       });
       _open() {
+        gleanClick("article_actions_collections_opened");
         this._bookmarks.run();
         this._collections.run();
         this.shadowRoot?.querySelector("mdn-modal")?.showModal();
@@ Expand All @@
       _selectChange({ target }) {
         if (target instanceof HTMLSelectElement) {
           const { value } = target;
+          gleanClick("article_actions_collection_select_opened");
           if (value === ADD_VALUE) {
+            gleanClick("article_actions_new_collection");
             this.shadowRoot?.querySelector("mdn-modal")?.close();
             open("/en-US/plus/collections");
           } else {
@@ Expand Down Expand Up @@
           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,
@@ Expand Down @@

components/color-theme/element.js

-Original file line number
+Diff line change
@@ -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";
@@ Expand Down Expand Up / @@ -30,6 +31,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) {
@@ Expand All / @@ -43,6 +46,13 @@ export class MDNColorTheme extends L10nMixin(LitElement) { @@
         }
       }
+      /** @param {Event} event */
+      _onDropdownToggle({ target }) {
+        if (target instanceof HTMLElement && "open" in target) {
+          gleanClick(`theme_switcher: ${target.open ? "open" : "close"}`);
+        }
+      }
       /**
        * @param {import("lit").PropertyValues<this>} changedProperties
        */
@@ Expand All / @@ -61,7 +71,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"
@@ Expand Down @@

components/compat-table/element.js

-Original file line number
+Diff line change
@@ -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";
@@ Expand Down Expand Up / @@ -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 = "";
@@ Expand All / @@ -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() {
@@ Expand Down Expand Up / @@ -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
@@ Expand Down @@

components/curriculum-landing/server.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
@@ Expand Down @@

components/dropdown/element.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -22,7 +22,7 @@ export class MDNDropdown extends LitElement { @@
       static styles = styles;
       static properties = {
-        open: { type: Boolean },
+        open: { type: Boolean, reflect: true },
         loaded: { type: Boolean, reflect: true },
       };
@@ Expand Down Expand Up / @@ -96,8 +96,14 @@ export class MDNDropdown extends LitElement { @@
         `;
       }
-      updated() {
+      /**
+       * @param {import("lit").PropertyValues<this>} changedProperties
+       */
+      updated(changedProperties) {
         this._setAriaAttributes();
+        if (changedProperties.has("open")) {
+          this.dispatchEvent(new Event("toggle", { bubbles: true }));
+        }
       }
       firstUpdated() {
@@ Expand Down @@

components/featured-articles/server.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -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.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.title}</a
+                    >
                   </h3>
                   <p class="featured-articles__summary">${article.summary}</p>
                 </article>
@@ Expand Down @@

components/footer/server.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -178,6 +178,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>
                   `,
@@ Expand All / @@ -198,6 +199,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>
@@ Expand All / @@ -222,7 +224,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>
@@ Expand Down @@

components/generic-toc/server.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ -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 {
@@ Expand All @@
       }
       _handleClick() {
+        gleanClick(`language: ${this.locale} -> ${this.to} (always)`);
         setPreferredLocale(this.to);
         const url = document.location.pathname.replace(
           `/${this.locale}/`,
@@ Expand Down @@

components/language-switcher/element.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -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";
@@ Expand Down Expand Up @@
       _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}`);
         }
       }
@@ Expand Down Expand Up @@
                     `/${notFound ? "en-US" : locale}/`,
                     `/${translation.locale}/`,
                   )}
+                  data-glean-id=${`language: ${locale} -> ${translation.locale}`}
                   >${translation.native}</a
                 >
               </li>
@@ Expand Down @@

components/latest-news/server.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -14,16 +14,21 @@ 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.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.title}</a
+                    >
                   </h3>
                   <time class="latest-news__date" datetime=${item.published_at}>
                     ${rtf.format(
@@ Expand Down @@

components/login-button/element.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -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`}</mdn-button
         >`;
       }
@@ Expand Down @@

components/menu/server.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -72,7 +72,12 @@ export class Menu extends ServerComponent { @@
                       >${tab.buttonText}</a
                     >`
                   : html`<mdn-dropdown>
-                      <button class="menu__tab-button" type="button" slot="button">
+                      <button
+                        class="menu__tab-button"
+                        type="button"
+                        slot="button"
+                        data-glean-id=${`menu_toggle: ${tab.id}`}
+                      >
                         ${typeof tab.buttonText === "string"
                           ? html`<span class="menu__tab-label"
                               >${tab.buttonText}</span
@@ Expand Down @@

components/observatory-form/element.js

-Original file line number
+Diff line change
@@ -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";
@@ Expand Down Expand Up / @@ -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 +
@@ Expand All / @@ -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;
         }
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(glean): port missing measurements #1279

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

feat(glean): port missing measurements #1279

Are you sure you want to change the base?

feat(glean): port missing measurements #1279

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!