Bug 23925: Donation banner for YE 2018 Campaign

Design by Antonela Debiasi
arthuredelstein · Oct 18, 2018 · 4c9e8dc · 4c9e8dc
1 parent 9ad95c9
commit 4c9e8dc
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 61 deletions.
diff --git a/src/chrome/content/aboutTor/aboutTor-content.js b/src/chrome/content/aboutTor/aboutTor-content.js
@@ -24,7 +24,7 @@ let { bindPrefAndInit, show_torbrowser_manual } = Cu.import("resource://torbutto
 var AboutTorListener = {
   kAboutTorLoadedMessage: "AboutTor:Loaded",
   kAboutTorChromeDataMessage: "AboutTor:ChromeData",
-  kAboutTorHideTorNewsBanner: "AboutTor:HideTorNewsBanner",
+  kAboutTorHideDonationBanner: "AboutTor:HideDonationBanner",
 
   get isAboutTor() {
     return content.document.documentURI.toLowerCase() == "about:tor";
@@ -61,20 +61,24 @@ var AboutTorListener = {
 
   setupBannerClosing: function () {
     let that = this;
-    let closer = content.document.getElementById("tornews-banner-closer");
+    let closer = content.document.getElementById("donation-banner-closer");
     closer.addEventListener("click", function () {
-      sendAsyncMessage(that.kAboutTorHideTorNewsBanner);
+      sendAsyncMessage(that.kAboutTorHideDonationBanner);
     });
-    let link = content.document.querySelector("#tornews-banner-message a");
-    link.addEventListener("click", function () {
+    let button = content.document.getElementById("donation-banner-button");
+    button.addEventListener("click", function () {
       // Wait until page unloads so we don't hide banner before that.
       content.addEventListener("unload", function () {
-        sendAsyncMessage(that.kAboutTorHideTorNewsBanner);
+        sendAsyncMessage(that.kAboutTorHideDonationBanner);
       });
     });
-    bindPrefAndInit("extensions.torbutton.tornews_banner_countdown",
-                    countdown => content.document.body.setAttribute(
-                      "show-tornews-banner", countdown > 0));
+    bindPrefAndInit("extensions.torbutton.donation_banner_countdown",
+                    countdown => {
+                      if (content.document && content.document.body) {
+                        content.document.body.setAttribute(
+                          "show-donation-banner", countdown > 0);
+                      }
+                    });
   },
 
   onPageLoad: function() {
@@ -124,6 +128,14 @@ var AboutTorListener = {
     content.document.getElementById("manualLink").href =
                             "https://tb-manual.torproject.org/" + aLocale;
 
+    // Don't use "Count Me In" phrase in non-en-US locales
+    if (!aLocale.startsWith("en")) {
+      let button = content.document.getElementById("donation-banner-button");
+      button.innerHTML = button.getAttribute("data-0");
+      let theURL = button.getAttribute("href");
+      button.setAttribute("href", theURL.slice(0,-2));
+    }
+
     // Display the Tor Browser product name and version.
     try {
       const kBrandBundle = "chrome://branding/locale/brand.properties";

diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml
@@ -31,21 +31,48 @@ window.addEventListener("pageshow", function() {
 </script>
 </head>
 <body dir="&locale.dir;">
-  <div id="tornews-banner">
-    <div><!--EMPTY SPACER DIV--></div>
-    <div id="tornews-banner-message">
-      <div id="tornews-banner-icon"></div>
-      <div>&aboutTor.newsletter.tagline;
-        <a href="https://newsletter.torproject.org">
-          &aboutTor.newsletter.link_text;
-        </a>
+  <div id="donation-banner">
+    <div id="donation-banner-image"></div>
+    <div id="donation-banner-lines">
+      <div id="donation-banner-line1">&aboutTor.donationBanner.line1;</div>
+      <div id="donation-banner-line2"
+           data-0="&aboutTor.donationBanner.line2a;"
+           data-1="&aboutTor.donationBanner.line2b;"
+           data-2="&aboutTor.donationBanner.line2c;"
+           data-3="&aboutTor.donationBanner.line2d;"
+           data-4="&aboutTor.donationBanner.line2e;"
+           data-5="&aboutTor.donationBanner.line2f;">
+        &aboutTor.donationBanner.line2a;
       </div>
+      <div id="donation-banner-line3">&aboutTor.donationBanner.line3;</div>
+      <a id="donation-banner-button"
+         href="https://www.torproject.org/donate/donate-sin-tbd0-0"
+         type="button"
+         data-0="&aboutTor.donationBanner.buttonA;"
+         data-1="&aboutTor.donationBanner.buttonB;">
+        &aboutTor.donationBanner.buttonA;
+      </a>
     </div>
-    <div id="tornews-banner-closer">&times;</div>
+    <div id="donation-banner-closer">&times;</div>
   </div>
-
+<script type="text/javascript">
+ <![CDATA[
+    let lineChoice = Math.floor(Math.random() * 6);
+    let line2 = document.getElementById("donation-banner-line2");
+    let line2text = line2.getAttribute(`data-${lineChoice}`);
+    let line2pieces = line2text.split(" ");
+    let line2end = '<span>' + line2pieces.pop() + '</span>';
+    line2pieces.push(line2end);
+    line2.innerHTML = line2pieces.join(" ");
+    let buttonChoice = Math.floor(Math.random() * 2);
+    let button = document.getElementById("donation-banner-button");
+    button.innerHTML = button.getAttribute(`data-${buttonChoice}`);
+    button.setAttribute("href",
+      `https://www.torproject.org/donate/donate-sin-tbd${lineChoice}-${buttonChoice}`);
+]]>
+</script>
+  <div id="torstatus-version"/>
   <div class="torcontent-container">
-    <div id="torstatus-version"/>
     <div id="torstatus" class="top">
       <div id="torstatus-on-container" class="hideIfTorOff torstatus-container">
         <div class="heading1">&aboutTor.ready.label;</div>

diff --git a/src/chrome/content/torbutton.js b/src/chrome/content/torbutton.js
@@ -19,7 +19,7 @@ const k_tb_last_browser_version_pref = "extensions.torbutton.lastBrowserVersion"
 const k_tb_browser_update_needed_pref = "extensions.torbutton.updateNeeded";
 const k_tb_last_update_check_pref = "extensions.torbutton.lastUpdateCheck";
 const k_tb_tor_check_failed_topic = "Torbutton:TorCheckFailed";
-const k_tb_tornews_banner_countdown = "extensions.torbutton.tornews_banner_countdown";
+const k_tb_donation_banner_countdown = "extensions.torbutton.donation_banner_countdown";
 
 var m_tb_prefs = Services.prefs;
 
@@ -233,10 +233,10 @@ function torbutton_init_toolbutton()
 }
 
 // Show the Sign Up for Tor News banner a finite number of times.
-function torbutton_tornews_banner_countdown() {
-  let count = m_tb_prefs.getIntPref(k_tb_tornews_banner_countdown, 0);
+function torbutton_donation_banner_countdown() {
+  let count = m_tb_prefs.getIntPref(k_tb_donation_banner_countdown, 0);
   if (count > 0) {
-    m_tb_prefs.setIntPref(k_tb_tornews_banner_countdown, count - 1);
+    m_tb_prefs.setIntPref(k_tb_donation_banner_countdown, count - 1);
   }
 }
 
@@ -348,10 +348,10 @@ function torbutton_init() {
     // Add about:tor IPC message listener.
     window.messageManager.addMessageListener("AboutTor:Loaded",
                                    torbutton_abouttor_message_handler);
-    window.messageManager.addMessageListener("AboutTor:HideTorNewsBanner",
+    window.messageManager.addMessageListener("AboutTor:HideDonationBanner",
                                    torbutton_abouttor_message_handler);
 
-    torbutton_tornews_banner_countdown();
+    torbutton_donation_banner_countdown();
 
     setupPreferencesForMobile();
 
@@ -431,9 +431,9 @@ var torbutton_abouttor_message_handler = {
         aMessage.target.messageManager.sendAsyncMessage("AboutTor:ChromeData",
                                                         this.chromeData);
         break;
-      case "AboutTor:HideTorNewsBanner":
-        torbutton_log(5, "message AboutTor:HideTorNewsBanner received");
-        m_tb_prefs.setIntPref(k_tb_tornews_banner_countdown, 0);
+      case "AboutTor:HideDonationBanner":
+        torbutton_log(5, "message AboutTor:HideDonationBanner received");
+        m_tb_prefs.setIntPref(k_tb_donation_banner_countdown, 0);
         break;
     }
   },

diff --git a/src/chrome/skin/aboutTor.css b/src/chrome/skin/aboutTor.css
@@ -272,74 +272,126 @@ body:not([showmanual]) .showForManual {
   border-radius: 50px 50px 0 0;
 }
 
-/* Tor News Signup Banner
+/* Donation Banner
  * While this banner is present, we need to
  * offset the elements normally at the top of
  * the window.
  */
 
-#tornews-banner {
+#donation-banner {
   display: flex;
-  align-items: center;
+  align-items: stretch;
   background-color: white;
   color: var(--abouttor-bg-toron-color);
   font-size: 16px;
-  height: 60px;
-  justify-content: space-between;
+  height: 200px;
+  justify-content: center;
   left: 0px;
   right: 0px;
   top: 0px;
-  transform: translateY(-60px);
+  position: absolute;
+  transform: translateY(-200px);
   transition: transform 200ms;
+  z-index: 1;
 }
 
-body[show-tornews-banner="true"] #tornews-banner {
+body[show-donation-banner="true"] #donation-banner {
   transform: translateY(0px);
   transition: transform 0ms;
 }
 
-#tornews-banner-message {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
-
-#tornews-banner-message a {
-  color: var(--abouttor-bg-toron-color);
-}
-
-#tornews-banner-icon {
-  background: url('chrome://torbutton/skin/newsletter_3x.png') no-repeat center center;
-  background-size: cover;
-  height: 32px;
-  margin: 0px 16px;
-  width: 32px;
+#donation-banner-image {
+  background: url('chrome://torbutton/skin/donation_banner_image_3x.png') no-repeat center center;
+  background-size: contain;
+  height: 190px;
+  margin: 10px 10px 0px 0px;
+  width: 400px;
 }
 
-#tornews-banner-closer {
+#donation-banner-closer {
   display: flex;
   align-items: center;
   font-size: 20px;
   height: 22px;
   justify-content: center;
-  margin: 4px 20px;
+  margin: 4px;
   padding: 4px;
+  position: absolute;
+  offset-inline-end: 0px;
+  top: 0px;
   width: 22px;
   -moz-user-select: none;
 }
 
-#tornews-banner-closer:hover {
+#donation-banner-closer:hover {
   background-color: gray;
   cursor: pointer;
 }
 
-body[show-tornews-banner="false"] #torstatus-version,
-body[show-tornews-banner="false"] #onboarding-overlay-button {
+#donation-banner-lines {
+  align-items: start;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  padding: 20px 0px;
+}
+
+#donation-banner-line1 {
+  font-size: 11px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+#donation-banner-line2 {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+#donation-banner-line2 span {
+  background-color: #a9fef8;
+}
+
+#donation-banner-line3 {
+  font-size: 14px;
+}
+
+#donation-banner-button {
+  background-color: var(--abouttor-bg-toron-color);
+  border-radius: 3px;
+  border: 0px;
+  color: white;
+  font-size: 14px;
+  font-weight: bold;
+  margin: 10px 0px;
+  padding: 10px 24px;
+  text-decoration: none;
+}
+
+#donation-banner-button:hover {
+  background-color: #683d7d;
+  cursor: pointer;
+}
+
+body[show-donation-banner="false"] .torcontent-container,
+body[show-donation-banner="false"] .onion-pattern-container,
+body[show-donation-banner="false"] #torstatus-version,
+body[show-donation-banner="false"] #onboarding-overlay-button {
   transition: transform 200ms;
 }
 
-body[show-tornews-banner="true"] #torstatus-version,
-body[show-tornews-banner="true"] #onboarding-overlay-button {
-  transform: translateY(60px);
+body[show-donation-banner="true"] .torcontent-container,
+body[show-donation-banner="true"] .onion-pattern-container {
+  transform: translateY(80px);
   transition: transform 0ms;
 }
+
+body[show-donation-banner="true"] .onion-pattern-container {
+  position: fixed;
+}
+
+body[show-donation-banner="true"] #torstatus-version,
+body[show-donation-banner="true"] #onboarding-overlay-button {
+  transform: translateY(200px);
+  transition: transform 0ms;
+  position: absolute;
+}
diff --git a/src/chrome/skin/donation_banner_image_3x.png b/src/chrome/skin/donation_banner_image_3x.png
diff --git a/src/chrome/skin/newsletter_3x.png b/src/chrome/skin/newsletter_3x.png
diff --git a/src/defaults/preferences/preferences.js b/src/defaults/preferences/preferences.js
@@ -6,7 +6,7 @@ pref("extensions.torbutton.logmethod",1); // 0=stdout, 1=errorconsole, 2=debuglo
 pref("extensions.torbutton.display_circuit", true);
 pref("extensions.torbutton@torproject.org.description", "chrome://torbutton/locale/torbutton.properties");
 pref("extensions.torbutton.updateNeeded", false);
-pref("extensions.torbutton.tornews_banner_countdown", 4);
+pref("extensions.torbutton.donation_banner_countdown", 12);
 
 // Tor check and proxy prefs
 pref("extensions.torbutton.test_enabled",true);