Verified Commit f59fcb7b authored by henry's avatar henry Committed by Pier Angelo Vendrame
Browse files

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

parent e7b9c8e8

browser/components/abouttor/AboutTorParent.sys.mjs

+5 −0
Original line number Diff line number Diff line
@@ -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

+207 −0
Original line number Diff line number Diff line
@@ -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

+33 −0
Original line number Diff line number Diff line
@@ -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

+117 −0
Original line number Diff line number Diff line
@@ -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

0 → 100644
+4 −0
Original line number Diff line number Diff line 
<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>