feat(language-menu): add "Remember language" experiment

client/src/telemetry/constants.ts

@@ -82,5 +82,6 @@ export const BASELINE = Object.freeze({
 
 export const CLIENT_SIDE_NAVIGATION = "client_side_nav";
 export const LANGUAGE = "language";
+export const LANGUAGE_REDIRECT = "language_redirect";
 export const THEME_SWITCHER = "theme_switcher";
 export const SURVEY = "survey";

client/src/ui/atoms/switch/index.scss

@@ -7,7 +7,7 @@
     height: 0;
     margin: 0;
     opacity: 0;
-    width: 3rem;
+    width: 3em;
 
     &:checked + .slider {
       background-color: var(--text-link);
@@ -29,10 +29,10 @@
     background-color: var(--text-secondary);
     border-radius: 1.5em;
     cursor: pointer;
-    height: 1.5rem;
+    height: 1.5em;
     position: absolute;
     transition: 0.4s;
-    width: 3rem;
+    width: 3em;
 
     &:before {
       background-color: var(--background-primary);
@@ -48,6 +48,6 @@
   }
 
   .label {
-    margin-left: 0.5rem;
+    margin-left: 0.5em;
   }
 }

client/src/ui/atoms/thumbs/index.scss

@@ -2,8 +2,8 @@
   align-items: center;
   display: flex;
   flex-direction: row;
-  gap: 0.5rem;
-  height: 1.5rem;
+  gap: 0.5em;
+  height: 1.5em;
 
   .confirmation {
     animation-duration: 2.5s;

client/src/ui/organisms/article-actions/language-menu/index.scss

@@ -7,8 +7,44 @@
 }
 
 .language-menu {
+  li {
+    &:not(:first-child) {
+      padding-top: 1px;
+    }
+
+    &:not(:last-child) {
+      padding-bottom: 1px;
+    }
+  }
+
   .submenu-item {
-    padding: 0.5rem;
+    padding: 0.5rem !important;
+
+    &.locale-redirect-setting {
+      border-bottom: 1px solid var(--border-secondary) !important;
+      border-radius: 0 !important;
+      display: block;
+      font-size: var(--type-tiny-font-size);
+      padding: 0.25em 0.5em;
+
+      &:hover {
+        background-color: unset;
+      }
+
+      .switch {
+        display: flex;
+      }
+
+      .glean-thumbs {
+        font-style: italic;
+        font-variation-settings: "slnt" -10;
+        margin-top: 0.5em;
+
+        .icon {
+          margin-right: unset;
+        }
+      }
+    }
   }
 
   @media (min-width: $screen-md) {

client/src/ui/organisms/article-actions/language-menu/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 
 import { useGleanClick } from "../../../../telemetry/glean-context";
@@ -9,7 +9,14 @@ import { Submenu } from "../../../molecules/submenu";
 import "./index.scss";
 import { DropdownMenu, DropdownMenuWrapper } from "../../../molecules/dropdown";
 import { useLocale } from "../../../../hooks";
-import { LANGUAGE } from "../../../../telemetry/constants";
+import { LANGUAGE, LANGUAGE_REDIRECT } from "../../../../telemetry/constants";
+import {
+  deleteCookie,
+  getCookieValue,
+  setCookieValue,
+} from "../../../../utils";
+import { GleanThumbs } from "../../../atoms/thumbs";
+import { Switch } from "../../../atoms/switch";
 
 // This needs to match what's set in 'libs/constants.js' on the server/builder!
 const PREFERRED_LOCALE_COOKIE_NAME = "preferredlocale";
@@ -29,51 +36,43 @@ export function LanguageMenu({
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const changeLocale: React.MouseEventHandler<HTMLAnchorElement> = (event) => {
-    const preferredLocale = event.currentTarget.dataset.locale;
+    const newLocale = event.currentTarget.dataset.locale;
     // The default is the current locale itself. If that's what's chosen,
     // don't bother redirecting.
-    if (preferredLocale !== locale) {
-      let cookieValueBefore = document.cookie
-        .split("; ")
-        .find((row) => row.startsWith(`${PREFERRED_LOCALE_COOKIE_NAME}=`));
-      if (cookieValueBefore && cookieValueBefore.includes("=")) {
-        cookieValueBefore = cookieValueBefore.split("=")[1];
-      }
+    if (newLocale !== locale) {
+      const cookieValueBefore = getCookieValue(PREFERRED_LOCALE_COOKIE_NAME);
 
-      for (const translation of translations) {
-        if (translation.locale === preferredLocale) {
-          let cookieValue = `${PREFERRED_LOCALE_COOKIE_NAME}=${
-            translation.locale
-          };max-age=${60 * 60 * 24 * 365 * 3};path=/`;
-          if (
-            !(
-              document.location.hostname === "localhost" ||
-              document.location.hostname === "localhost.org"
-            )
-          ) {
-            cookieValue += ";secure";
+      if (cookieValueBefore === locale) {
+        for (const translation of translations) {
+          if (translation.locale === newLocale) {
+            setCookieValue(PREFERRED_LOCALE_COOKIE_NAME, translation.locale, {
+              maxAge: 60 * 60 * 24 * 365 * 3,
+            });
           }
-          document.cookie = cookieValue;
         }
       }
 
-      const oldValue = cookieValueBefore || "none";
-      gleanClick(`${LANGUAGE}: ${oldValue} -> ${preferredLocale}`);
+      gleanClick(`${LANGUAGE}: ${locale} -> ${newLocale}`);
     }
   };
 
   const menuEntry = {
     label: "Languages",
     id: menuId,
-    items: translations.map((translation) => ({
-      component: () => (
-        <LanguageMenuItem
-          native={native}
-          translation={translation}
-          changeLocale={changeLocale}
-        />
-      ),
-    })),
+    items: [
+      {
+        component: () => <LocaleRedirectSetting />,
+      },
+      ...translations.map((translation) => ({
+        component: () => (
+          <LanguageMenuItem
+            native={native}
+            translation={translation}
+            changeLocale={changeLocale}
+          />
+        ),
+      })),
+    ],
   };
 
   return (
@@ -127,3 +126,37 @@ function LanguageMenuItem({
     </a>
   );
 }
+
+function LocaleRedirectSetting() {
+  const gleanClick = useGleanClick();
+  const locale = useLocale();
+  const [value, setValue] = useState(false);
+
+  useEffect(() => {
+    setValue(!!getCookieValue(PREFERRED_LOCALE_COOKIE_NAME));
+  }, [setValue]);
+
+  function toggle(event) {
+    const newValue = event.target.checked;
+    if (newValue) {
+      if (!getCookieValue(PREFERRED_LOCALE_COOKIE_NAME)) {
+        setCookieValue(PREFERRED_LOCALE_COOKIE_NAME, locale, {
+          maxAge: 60 * 60 * 24 * 365 * 3,
+        });
+      }
+    } else {
+      deleteCookie(PREFERRED_LOCALE_COOKIE_NAME);
+    }
+    setValue(event.target.checked);
+    gleanClick(`${LANGUAGE_REDIRECT}: ${locale} -> ${Number(newValue)}`);
+  }
+
+  return (
+    <form className="submenu-item locale-redirect-setting">
+      <Switch name="locale-redirect" checked={value} toggle={toggle}>
+        Remember language
+      </Switch>
+      <GleanThumbs feature="locale-redirect" question="Is this useful?" />
+    </form>
+  );
+}

client/src/utils.ts

@@ -136,3 +136,41 @@ export function splitQuery(term: string): string[] {
     return term.split(/[ ,.]+/);
   }
 }
+
+export function getCookieValue(name: string) {
+  let value = document.cookie
+    .split("; ")
+    .find((row) => row.startsWith(`${name}=`));
+
+  if (value && value.includes("=")) {
+    value = value.split("=")[1];
+  }
+
+  return value;
+}
+
+export function setCookieValue(
+  name: string,
+  value: string,
+  {
+    expires,
+    maxAge,
+    path = "/",
+  }: { expires?: Date; maxAge?: number; path?: string }
+) {
+  const cookieValue = [
+    `${name}=${value}`,
+    expires && `expires=${expires.toUTCString()}`,
+    maxAge && `max-age=${maxAge}`,
+    `path=${path}`,
+    document.location.hostname !== "localhost" && "secure",
+  ]
+    .filter(Boolean)
+    .join(";");
+
+  document.cookie = cookieValue;
+}
+
+export function deleteCookie(name: string) {
+  setCookieValue(name, "", { expires: new Date(0) });
+}

cloud-function/package.json

@@ -36,6 +36,7 @@
     "@yari-internal/pong": "file:src/internal/pong",
     "@yari-internal/slug-utils": "file:src/internal/slug-utils",
     "accept-language-parser": "^1.5.0",
+    "cookie-parser": "^1.4.6",
     "dotenv": "^16.0.3",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.0",
@@ -44,6 +45,7 @@
   "devDependencies": {
     "@swc/core": "^1.3.38",
     "@types/accept-language-parser": "^1.5.3",
+    "@types/cookie-parser": "^1.4.7",
     "@types/http-proxy": "^1.17.10",
     "@types/http-server": "^0.12.1",
     "cross-env": "^7.0.3",

cloud-function/src/app.ts

@@ -1,3 +1,4 @@
+import cookieParser from "cookie-parser";
 import express, { Request, Response } from "express";
 import { Router } from "express";
 
@@ -16,6 +17,7 @@ import { redirectMovedPages } from "./middlewares/redirect-moved-pages.js";
 import { redirectEnforceTrailingSlash } from "./middlewares/redirect-enforce-trailing-slash.js";
 import { redirectFundamental } from "./middlewares/redirect-fundamental.js";
 import { redirectLocale } from "./middlewares/redirect-locale.js";
+import { redirectPreferredLocale } from "./middlewares/redirect-preferred-locale.js";
 import { redirectTrailingSlash } from "./middlewares/redirect-trailing-slash.js";
 import { requireOrigin } from "./middlewares/require-origin.js";
 import { notFound } from "./middlewares/not-found.js";
@@ -25,6 +27,7 @@ import { stripForwardedHostHeaders } from "./middlewares/stripForwardedHostHeade
 import { proxyPong } from "./handlers/proxy-pong.js";
 
 const router = Router();
+router.use(cookieParser());
 router.use(stripForwardedHostHeaders);
 router.use(redirectLeadingSlash);
 // MDN Plus plans.
@@ -85,6 +88,7 @@ router.get(
   requireOrigin(Origin.main),
   redirectFundamental,
   redirectLocale,
+  redirectPreferredLocale,
   redirectTrailingSlash,
   redirectMovedPages,
   resolveIndexHTML,

cloud-function/src/canonicals.ts

@@ -0,0 +1,5 @@
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+
+export const CANONICALS = require("../canonicals.json");