Bug 42072: 2023 year end campaign for about:tor.

browser/components/abouttor/AboutTorParent.sys.mjs

@@ -17,6 +17,11 @@ export class AboutTorParent extends JSWindowActorParent {
           messageData: lazy.AboutTorMessage.getNext(),
           isStable: AppConstants.MOZ_UPDATE_CHANNEL === "release",
           searchOnionize: Services.prefs.getBoolPref(onionizePref, false),
+          // Locale for YEC 2023. See tor-browser#42072.
+          appLocale:
+            Services.locale.appLocaleAsBCP47 === "ja-JP-macos"
+              ? "ja"
+              : Services.locale.appLocaleAsBCP47,
         });
       case "AboutTor:SetSearchOnionize":
         Services.prefs.setBoolPref(onionizePref, message.data);

browser/components/abouttor/content/aboutTor.css

@@ -232,3 +232,210 @@ body:not(.show-tor-check) #tor-check {
     color: var(--purple-60);
   }
 }
+
+/* YEC 2023.
+ * See tor-browser#42072 */
+body:not(.yec-2023-is-shown) #yec-2023-banner {
+  display: none;
+}
+
+body.yec-2023-is-shown h1 {
+  /* Text of heading is still available to screen readers, but it does not
+   * contribute visually to the page or the body grid layout. */
+  position: absolute;
+  clip-path: inset(50%);
+}
+
+#yec-2023-banner {
+  grid-area: heading;
+  border-radius: 8px;
+  border-width: 1px;
+  border-style: solid;
+  display: grid;
+  grid-template:
+    "yec-image yec-matching" auto
+    "yec-image yec-heading" auto
+    "yec-image yec-body" auto
+    "yec-image yec-donate" min-content
+    / min-content 1fr;
+  --yec-image-background: #1f0333;
+  gap: 16px 32px;
+  /* Remove 1px from padding for border. */
+  padding-block: 39px 47px;
+  padding-inline: 31px 55px;
+  box-sizing: border-box;
+  max-width: 860px;
+  margin-block-end: 40px;
+  /* Position for the close button. */
+  position: relative;
+}
+
+#yec-2023-banner > * {
+  margin: 0;
+}
+
+#yec-2023-image {
+  grid-area: yec-image;
+  align-self: center;
+  /* Center horizontally for small width layout. */
+  justify-self: center;
+  /* background color and border radius only stands out when using a high
+   * contrast theme. */
+  background: var(--yec-image-background);
+  border-radius: 8px;
+  border: 1px solid transparent;
+  /* Remove border from layout size. */
+  margin: -1px;
+}
+
+#yec-2023-matching {
+  grid-area: yec-matching;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+body:not(.yec-2023-is-donation-matching) #yec-2023-matching {
+  display: none;
+}
+
+#yec-2023-heading {
+  grid-area: yec-heading;
+  font-size: 1.7em;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+#yec-2023-body {
+  grid-area: yec-body;
+  line-height: 1.5;
+  margin-block-end: 8px;
+}
+
+#yec-2023-body .yec-2023-attention {
+  font-weight: 600;
+}
+
+#yec-2023-donate-link {
+  grid-area: yec-donate;
+  justify-self: start;
+  font-weight: 700;
+  /* Style like a button. */
+  color: var(--in-content-button-text-color);
+  border: 1px solid var(--in-content-button-border-color);
+  border-radius: 4px;
+  background-color: var(--in-content-button-background);
+  line-height: 1.2;
+  padding-block: 12px;
+  padding-inline: 16px;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+#yec-2023-donate-link > * {
+  flex: 0 0 auto;
+}
+
+#yec-2023-donate-link:hover {
+  background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
+  border-color: var(--in-content-button-border-color-hover);
+}
+
+#yec-2023-donate-link:hover:active {
+  background-color: var(--in-content-button-background-active);
+  color: var(--in-content-button-text-color-active);
+  border-color: var(--in-content-button-border-color-active);
+}
+
+#yec-2023-close {
+  position: absolute;
+  inset-block-start: 12px;
+  inset-inline-end: 12px;
+  padding: 8px;
+  min-width: auto;
+  min-height: auto;
+  width: 16px;
+  height: 16px;
+  box-sizing: content-box;
+  /* Transparent background when neither hover nor active. */
+  background-color: transparent;
+  border-color: transparent;
+}
+
+#yec-2023-close:hover {
+  background-color: var(--in-content-button-background-hover);
+  border-color: var(--in-content-button-border-color-hover);
+}
+
+#yec-2023-close:hover:active {
+  background-color: var(--in-content-button-background-active);
+  border-color: var(--in-content-button-border-color-active);
+}
+
+.yec-2023-icon {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+@media (max-width: 750px) {
+  /* Small width layout. */
+  #yec-2023-banner {
+    grid-template:
+      "yec-image" min-content
+      "yec-matching" auto
+      "yec-heading" auto
+      "yec-body" auto
+      "yec-donate" min-content
+      / 1fr;
+    padding-inline: 32px;
+    /* Match max-width of the form. */
+    max-width: 600px;
+  }
+
+  #yec-2023-donate-link {
+    justify-self: center;
+  }
+}
+
+@media (prefers-contrast) {
+  #yec-2023-banner {
+    border-color: -moz-DialogText;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    #yec-2023-image {
+      /* Give the dark image a border to separate from background. */
+      border-color: -moz-DialogText;
+    }
+  }
+}
+
+@media not (prefers-contrast) {
+  #yec-2023-banner {
+    background-color: var(--yec-image-background);
+    border-color: transparent;
+    --acorn-yellow-40: #ffbd4f;
+    --acorn-yellow-50: #ffa436;
+    --acorn-yellow-60: #e27f2e;
+    --acorn-dark-grey-80: #1c1b22;
+    /* Rules for #yec-2023-close */
+    --in-content-button-text-color: var(--in-content-text-color);
+    --in-content-button-text-color-hover: var(--in-content-text-color);
+    --in-content-button-text-color-active: var(--in-content-text-color);
+  }
+
+  #yec-2023-matching {
+    color: var(--acorn-yellow-40);
+  }
+
+  #yec-2023-donate-link {
+    --in-content-button-text-color: var(--acorn-dark-grey-80);
+    --in-content-button-text-color-hover: var(--acorn-dark-grey-80);
+    --in-content-button-text-color-active: var(--acorn-dark-grey-80);
+    --in-content-button-background: var(--acorn-yellow-40);
+    --in-content-button-background-hover: var(--acorn-yellow-50);
+    --in-content-button-background-active: var(--acorn-yellow-60);
+  }
+}

browser/components/abouttor/content/aboutTor.html

@@ -29,6 +29,39 @@
     <script src="chrome://browser/content/abouttor/aboutTor.js"></script>
   </head>
   <body>
+    <!-- YEC 2023. See tor-browser#42072. -->
+    <article id="yec-2023-banner">
+      <img
+        id="yec-2023-image"
+        alt=""
+        src="chrome://browser/content/abouttor/yec-2023-image.svg"
+      />
+      <!-- TODO: Set "amount" to final USD matching amount. -->
+      <p
+        id="yec-2023-matching"
+        data-l10n-id="yec-2023-matched-donation"
+        data-l10n-args='{ "amount": 0 }'
+      ></p>
+      <h2 id="yec-2023-heading" data-l10n-id="yec-2023-introduction"></h2>
+      <p id="yec-2023-body" data-l10n-id="yec-2023-please-donate">
+        <span class="yec-2023-attention" data-l10n-name="attention"></span>
+      </p>
+      <a id="yec-2023-donate-link">
+        <span data-l10n-id="yec-2023-donate-button"></span>
+        <img
+          class="yec-2023-icon"
+          alt=""
+          src="chrome://browser/content/abouttor/yec-2023-heart.svg"
+        />
+      </a>
+      <button id="yec-2023-close" data-l10n-id="yec-2023-close-button">
+        <img
+          class="yec-2023-icon"
+          alt=""
+          src="chrome://global/skin/icons/close.svg"
+        />
+      </button>
+    </article>
     <h1>
       <img
         id="tor-browser-logo"

browser/components/abouttor/content/aboutTor.js

@@ -181,3 +181,120 @@ window.addEventListener("InitialData", event => {
   SearchWidget.setOnionizeState(!!searchOnionize);
   MessageArea.setMessageData(messageData, !!isStable, !!torConnectEnabled);
 });
+
+// YEC 2023 (year end campaign).
+// See tor-browser#42072
+const YecWidget = {
+  _initialized: false,
+  _locale: null,
+
+  /**
+   * Initialize the widget.
+   */
+  init() {
+    this._initialized = true;
+
+    const now = Date.now();
+    const yecStart = Date.UTC(2023, 9, 16); // October 16th
+    const yecEnd = Date.UTC(2024); // 2024 January 1st
+
+    this.isActive = now >= yecStart && now < yecEnd;
+    document.getElementById("yec-2023-close").addEventListener("click", () => {
+      this.isOpen = false;
+    });
+
+    // TODO: Uncomment once we have a final donation matching amount.
+    //const donateMatchStart = Date.UTC(2023, 10, 13); // November 13th
+    //document.body.classList.toggle(
+    //  "yec-2023-is-donation-matching",
+    //  now >= donateMatchStart
+    //);
+
+    this._updateDonateLocale();
+  },
+
+  _isStable: false,
+  _isActive: false,
+  _isOpen: true,
+
+  /**
+   * Whether this is a stable release.
+   *
+   * @type {boolean}
+   */
+  get isStable() {
+    return this._isStable;
+  },
+
+  set isStable(isStable) {
+    this._isStable = isStable;
+    this._updateShown();
+  },
+
+  /**
+   * Whether the year end campaign is active.
+   *
+   * @type {boolean}
+   */
+  get isActive() {
+    return this._isActive;
+  },
+
+  set isActive(isActive) {
+    this._isActive = isActive;
+    this._updateShown();
+  },
+
+  /**
+   * Whether the banner is open or has been closed by the user.
+   *
+   * @type {boolean}
+   */
+  get isOpen() {
+    return this._isOpen;
+  },
+
+  set isOpen(isOpen) {
+    this._isOpen = isOpen;
+    this._updateShown();
+  },
+
+  _updateShown() {
+    if (!this._initialized) {
+      return;
+    }
+    document.body.classList.toggle(
+      "yec-2023-is-shown",
+      this.isActive && this.isOpen && this.isStable
+    );
+  },
+
+  _updateDonateLocale() {
+    if (!this._initialized) {
+      return;
+    }
+    const donateLink = document.getElementById("yec-2023-donate-link");
+    const base = "https://www.torproject.org/donate";
+    donateLink.href = this._locale ? `${base}/2023yec-${this._locale}` : base;
+  },
+
+  /**
+   * Set the locale to use for the donation link.
+   *
+   * @param {string} locale - The new locale, as BCP47.
+   */
+  setDonateLocale(locale) {
+    this._locale = locale;
+    this._updateDonateLocale();
+  },
+};
+
+window.addEventListener("DOMContentLoaded", () => {
+  YecWidget.init();
+});
+
+window.addEventListener("InitialData", event => {
+  const { appLocale, isStable } = event.detail;
+  YecWidget.setDonateLocale(appLocale);
+  YecWidget.isStable = isStable;
+});

browser/components/abouttor/content/yec-2023-heart.svg

+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 6C8 6 8 2 11.5 2C15 2 15 5 15 6C15 10.5 8 15 8 15V6Z" fill="context-fill"/>
+<path d="M8 6C8 6 8 2 4.5 2C1 2 1 5 1 6C1 10.5 8 15 8 15L9 9L8 6Z" fill="context-fill"/>
+</svg>

browser/components/abouttor/jar.mn

@@ -8,3 +8,5 @@ browser.jar:
   content/browser/abouttor/2728-sparkles.svg      (content/2728-sparkles.svg)
   content/browser/abouttor/2764-red-heart.svg     (content/2764-red-heart.svg)
   content/browser/abouttor/onion-pattern.svg      (content/onion-pattern.svg)
+  content/browser/abouttor/yec-2023-heart.svg     (content/yec-2023-heart.svg)
+  content/browser/abouttor/yec-2023-image.svg     (content/yec-2023-image.svg)

browser/locales/en-US/browser/tor-browser.ftl

@@ -44,3 +44,21 @@ tor-browser-home-message-testing = This is an unstable version of Tor Browser fo
 # Shown in Home settings, corresponds to the default about:tor home page.
 home-mode-choice-tor =
     .label = Tor Browser Home
+
+
+## 2023 year-end-campaign.
+
+# Large introduction text.
+yec-2023-introduction = Right now, Tor Browser is protecting your privacy and the privacy of millions of people like you!
+# Follows directly below yec-2023-introduction.
+# The <span data-l10n-name="attention"> tag is meant to bring some styling attention to the first phrase, but doesn't have any semantic meaning.
+yec-2023-please-donate = <span data-l10n-name="attention">This is possible because of donations from our community.</span> If you value the privacy that Tor Browser offers yourself and others, please make a donation today. You’ll ensure Tor Browser continues to provide online privacy to everyone who needs it.
+# Shown only during a period where donations will be matched. The end date should match the end of the year.
+# $amount (Number) - The donation limit. This will be a whole-number and will be automatically formatted according to the language/locale: using the language's numeral symbols and thousand-separators.
+# NOTE: The amount should be shown as USD (United States dollar) currency. In the original English string, the first "$" is the literal USD currency symbol, and this can be changed or removed when translating to whatever is most appropriate for USD currency in the locale. In contrast, the "$" at the start of "$amount" is part of the Fluent format's syntax and should not be changed when translating.
+# For example, "${ $amount }" for English would eventually be shown as "$5,000", whilst "{ $amount } US$" for Arabic would be shown as "٥٬٠٠٠ US$".
+# Translators: If you need any help or clarification, feel free to ask a question on weblate or in IRC (#tor-l10n).
+yec-2023-matched-donation = From now until December 31, donations to the Tor Project will be matched one-to-one, up to ${ $amount }!
+yec-2023-close-button =
+    .title = Close
+yec-2023-donate-button = Donate now