Bug #17565: Tor fundraising campaign donation banner

arthuredelstein · Dec 3, 2015 · 03075dfc6b6507457dd60331b505840e0ae20ff4 · 03075df
1 parent 5572405
commit 03075dfc6b6507457dd60331b505840e0ae20ff4
diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml
@@ -27,6 +27,8 @@ function onLoad()
 {
   insertPropertyStrings();
 
+ setupDonationBanner();
+
   document.addEventListener("AboutTorAdjustArrow", function() {
     adjustToolbarIconArrow();
   }, false);
@@ -141,13 +143,13 @@ function adjustToolbarIconArrow()
     elem.style.display = tailDisplay;
 }
 
+let kPropertiesURL = "chrome://torbutton/locale/aboutTor.properties";
+Components.utils.import("resource://gre/modules/Services.jsm");
+let gStringBundle = Services.strings.createBundle(kPropertiesURL);
+
 function insertPropertyStrings()
 {
   try {
-    let kPropertiesURL = "chrome://torbutton/locale/aboutTor.properties";
-
-    Components.utils.import("resource://gre/modules/Services.jsm");
-    let gStringBundle = Services.strings.createBundle(kPropertiesURL);
     let s1 = gStringBundle.GetStringFromName("aboutTor.searchDC.privacy.link");
     let s2 = gStringBundle.GetStringFromName("aboutTor.searchDC.search.link");
     let result = gStringBundle.formatStringFromName("aboutTor.searchDC.privacy",
@@ -165,11 +167,75 @@ window.addEventListener("pageshow", function() {
   document.dispatchEvent(evt);
 });
 
+// Donation banner constants
+let alternates = ["lp", "cd", "rd"],
+    suffixes = ["quote", "who", "speciality"],
+    populate = (suffix, alternate) =>
+      document.getElementById("donation-banner-" + suffix).innerHTML
+        = gStringBundle.GetStringFromName("aboutTor.donationBanner." +
+                                          alternate + "." + suffix);
+
+// This function takes care of the donation banner.
+function setupDonationBanner() {
+  // Only show banner for US English
+  let browserLocale = Services.prefs.getCharPref("general.useragent.locale");
+  if (browserLocale !== "en-US") {
+    return;
+  }
+  // Only show banner until 2016 Jan 25.
+  let now = new Date().getTime();
+  let expiration = new Date(2016,0,26).getTime();
+  if (now > expiration) {
+    return;
+  }
+  // Only show banner 10 times.
+  let showCountPref = "torbutton.donation-banner.show-count";
+  if (Services.prefs.prefHasUserValue(showCountPref)) {
+    count = Services.prefs.getIntPref(showCountPref);
+  } else {
+    count = 0;
+  }
+  if (count >= 10) {
+    return;
+  }
+  Services.prefs.setIntPref(showCountPref, count+1);
+
+  // OK, we can show the banner.
+  document.getElementById("donation-banner").style.display = "inline";
+  // Decide which champion we are using.
+  let alternate = alternates[Math.floor(Math.random() * alternates.length)];
+  // Show the champion.
+  document.getElementById("donation-banner-image").src = "chrome://torbutton/content/aboutTor/donation-banner-" + alternate + ".jpg";
+  // Populate banner with associated text.
+  for (let suffix of suffixes) {
+    populate(suffix, alternate);
+  }
+}
 ]]>
 </script>
 </head>
 <body dir="&locale.dir;" onload="onLoad();">
-<div id="torstatus" class="top">
+
+  <div id="donation-banner" class="top">
+    <a href="https://www.torproject.org/donate/donate-tbb">
+      <div id="donation-banner-inner">
+        <img id="donation-banner-image" width="700" />
+        <div id="donation-banner-text">
+          <div id="donation-banner-quote"></div>
+          <div id="donation-banner-credit">
+            <div id="donation-banner-who"></div>
+            <div id="donation-banner-speciality"></div>
+          </div>
+        </div>
+        <div id="donation-banner-plea">&aboutTor.donate.supportTor;</div>
+      </div>
+    </a>
+    <a href="https://www.torproject.org/donate/donate-tbb">
+      <div id="donate-button">&aboutTor.donate.donate;</div>
+    </a>
+  </div>
+
+  <div id="torstatus" class="top">
   <div id="torstatus-version"/>
   <div id="torstatus-image"/>
   <div id="torstatus-on-container" class="hideIfTorOff torstatus-container">

diff --git a/src/chrome/content/aboutTor/donation-banner-cd.jpg b/src/chrome/content/aboutTor/donation-banner-cd.jpg
diff --git a/src/chrome/content/aboutTor/donation-banner-lp.jpg b/src/chrome/content/aboutTor/donation-banner-lp.jpg
diff --git a/src/chrome/content/aboutTor/donation-banner-rd.jpg b/src/chrome/content/aboutTor/donation-banner-rd.jpg
diff --git a/src/chrome/locale/en/aboutTor.dtd b/src/chrome/locale/en/aboutTor.dtd
@@ -47,3 +47,6 @@
 <!ENTITY aboutTor.footer.label "The Tor Project is a US 501(c)(3) non-profit dedicated to the research, development, and education of online anonymity and privacy.">
 <!ENTITY aboutTor.learnMore.label "Learn more about The Tor Project »">
 <!ENTITY aboutTor.learnMore.link "https://www.torproject.org/about/overview.html.en">
+
+<!ENTITY aboutTor.donate.donate "Donate">
+<!ENTITY aboutTor.donate.supportTor "Please support Tor!">
diff --git a/src/chrome/locale/en/aboutTor.properties b/src/chrome/locale/en/aboutTor.properties
@@ -19,3 +19,15 @@ aboutTor.searchDC.privacy=Search <a href="%1$S">securely</a> with <a href="%2$S"
 aboutTor.searchDC.privacy.link=https://disconnect.me/privacy
 # The following string is a link which replaces %2$S above.
 aboutTor.searchDC.search.link=https://search.disconnect.me/
+
+aboutTor.donationBanner.lp.who=— Laura Poitras
+aboutTor.donationBanner.lp.quote=Edward Snowden would not have been able to contact me without Tor and other free software encryption projects. Tor is an essential tool, and it needs our support.
+aboutTor.donationBanner.lp.speciality=Oscar-Winning Documentary Filmmaker, <i>CitizenFour</i>
+
+aboutTor.donationBanner.cd.who=— Cory Doctorow
+aboutTor.donationBanner.cd.quote=Privacy and anonymity matter to all of us.
+aboutTor.donationBanner.cd.speciality= Novelist, technology activist, co-editor of Boing Boing
+
+aboutTor.donationBanner.rd.who=— Roger Dingledine
+aboutTor.donationBanner.rd.quote=Please help the strongest privacy tool in the world become more sustainable!
+aboutTor.donationBanner.rd.speciality=Founder, Acting Executive Director of the Tor Project
diff --git a/src/chrome/skin/aboutTor.css b/src/chrome/skin/aboutTor.css
@@ -344,3 +344,81 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
   font-size: 18px;
 }
 
+#donation-banner {
+  margin: 0px auto;
+  position: relative;
+  width: 700px;
+  display: none;
+}
+
+#donation-banner-inner {
+  margin: 0px auto;
+  position: relative;
+  text-align: left;
+  width: 700px;
+  z-index: -1;
+}
+
+#donation-banner-text {
+    height: 120px;
+    left: 245px;
+    position: absolute;
+    top: 23px;
+    width: 420px;
+}
+
+#donation-banner-quote {
+  color: darkgreen;
+  font-size: 18px;
+  text-align: start;
+  white-space: normal;
+}
+
+#donation-banner-credit {
+  color: rgb(17, 17, 17);
+  padding: 10px;
+  position: absolute;
+}
+
+#donation-banner-who {
+  font-size: 19px;
+  font-style: bold;
+}
+
+#donation-banner-speciality {
+  font-size: 13px;
+  text-transform: uppercase;
+}
+
+#donation-banner-plea {
+  background-color: yellow;
+  font-family: sans-serif;
+  font-size: 20px;
+  left: 250px;
+  padding: 5px;
+  position: absolute;
+  top: 150px;
+}
+
+#donate-button {
+  background-color: green;
+  border-radius: 5px;
+  color: white;
+  font-family: sans-serif;
+  font-size: 20px;
+  left: 600px;
+  padding: 10px;
+  position: absolute;
+  text-align: center;
+  top: 153px;
+  vertical-align: middle;
+  width: 110px;
+}
+
+#donate-button:hover {
+  filter: brightness(1.2);
+}
+
+#donate-button:active {
+  transform: translate(0,3px);
+}