Squashed commits for donation banner

arthuredelstein · Dec 17, 2015 · 74062bcc6392589c7809df566bbe8044bc18aa36 · 74062bc
1 parent 4997ff2
commit 74062bcc6392589c7809df566bbe8044bc18aa36
diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml
@@ -23,10 +23,16 @@
         href="chrome://torbutton/skin/aboutTor.css"/>
 <script type="text/javascript;version=1.7">
  <![CDATA[
+let kPropertiesURL = "chrome://torbutton/locale/aboutTor.properties";
+Components.utils.import("resource://gre/modules/Services.jsm");
+let gStringBundle = Services.strings.createBundle(kPropertiesURL);
+
 function onLoad()
 {
   insertPropertyStrings();
 
+  setupDonationBanner();
+
   document.addEventListener("AboutTorAdjustArrow", function() {
     adjustToolbarIconArrow();
   }, false);
@@ -144,10 +150,6 @@ function adjustToolbarIconArrow()
 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,135 @@ window.addEventListener("pageshow", function() {
   document.dispatchEvent(evt);
 });
 
+// Donation banner constants
+let gBannerAlternates = ["lp", "cd", "rd"],
+    gBannerSuffixes = ["quote", "who", "speciality"];
+
+// Change the font size of text in element by ratio.
+let scaleFontBy = function (element, ratio) {
+    let style = window.getComputedStyle(element),
+        originalFontSize = parseFloat(style.fontSize),
+        targetFontSize = originalFontSize * ratio;
+    element.style.fontSize = targetFontSize + "px";
+};
+
+// Shrink the font size if the text in the given element is overflowing.
+let fitTextInElement = function(element) {
+  let style = window.getComputedStyle(element);
+  if (style.whiteSpace === "nowrap") {
+    // Look for horizontal overflow.
+    let elementWidth = element.getBoundingClientRect().width,
+        paddingWidth = parseFloat(style.paddingLeft) +
+                       parseFloat(style.paddingRight),
+        targetWidth = elementWidth - paddingWidth,
+        textWidth = element.scrollWidth;
+    // Compute the appropriate font size to make the text fit.
+    let ratio = targetWidth / textWidth;
+    scaleFontBy(element, ratio);
+  } else {
+    // Look for vertical overflow.
+    let elementHeight = element.getBoundingClientRect().height,
+        paddingHeight = parseFloat(style.paddingTop) +
+                        parseFloat(style.paddingBottom),
+        targetHeight = elementHeight - paddingHeight;
+    // Wrapping causes somewhat difficult-to-predict overflow.
+    // So shrink slightly and repeat.
+    let ratio = 0;
+    for (let i = 0; i < 100 && ratio < 1; ++i) {
+      let textHeight = element.scrollHeight;
+      ratio = targetHeight < textHeight ? 0.99 : 1;
+      if (ratio < 1) {
+        scaleFontBy(element, ratio);
+      }
+    }
+  }
+};
+
+// Put text of the appropriate locale into donation banner elements.
+let populateBannerText = function (suffix, alternate) {
+  let text = gStringBundle.GetStringFromName("aboutTor.donationBanner." +
+                                             alternate + "." + suffix),
+      div = document.getElementById("donation-banner-" + suffix);
+  div.innerHTML = text;
+};
+
+// This function takes care of the donation banner.
+function setupDonationBanner() {
+  try {
+    // Only show banner for locales for which we have translations.
+    let browserLocale = Services.prefs.getCharPref("general.useragent.locale");
+    if (!["en", "de", "fa", "fr", "nl", "ru", "sv", "tr", "zh"]
+           .some(code => browserLocale.startsWith(code))) {
+      return;
+    }
+    // Only show banner until 2016 Jan 25.
+    let now = new Date();
+    let expiration = new Date(2016,0,26);
+    if (now > expiration) {
+      return;
+    }
+    // Only show banner 10 times.
+    let showCountPref = "extensions.torbutton.donation_banner.shown_count";
+    if (Services.prefs.prefHasUserValue(showCountPref)) {
+      count = Services.prefs.getIntPref(showCountPref);
+    } else {
+      count = 0;
+    }
+    if (count >= 10) {
+      return;
+    }
+    Services.prefs.setIntPref(showCountPref, count+1);
+
+    // Decide which champion we are using.
+    let alternate = gBannerAlternates[
+                      Math.floor(Math.random() * gBannerAlternates.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 gBannerSuffixes) {
+      populateBannerText(suffix, alternate);
+    }
+  } catch (e) {
+    // Something has gone wrong! Don't show the banner, and don't propagate
+    // any errors that will interfere with other code.
+    return;
+  }
+  // Now we can show the banner.
+  document.getElementById("donation-banner").style.display = "block";
+  for (let id of ["donation-banner-quote",
+                  "donate-button",
+                  "donation-banner-who",
+                  "donation-banner-speciality",
+                  "donation-banner-plea"]) {
+    fitTextInElement(document.getElementById(id));
+  }
+}
 ]]>
 </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
@@ -302,3 +302,97 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
   font-size: 18px;
 }
 
+#donation-banner {
+  margin: 0px auto;
+  position: relative;
+  width: 700px;
+  display: none;
+}
+
+#donation-banner > a {
+  display: block;
+}
+
+#donation-banner-inner {
+  margin: 0px auto;
+  position: relative;
+  text-align: left;
+  width: 700px;
+  z-index: -1;
+  display: block;
+}
+
+#donation-banner-image {
+  display: block;
+}
+
+#donation-banner-text {
+  height: 120px;
+  left: 245px;
+  position: absolute;
+  top: 23px;
+  text-align: start;
+  width: 420px;
+}
+
+#donation-banner-quote {
+  color: darkgreen;
+  font-family: serif;
+  font-size: 18px;
+  max-height: 64px;
+  white-space: normal;
+}
+
+#donation-banner-credit {
+  color: rgb(17, 17, 17);
+  padding: 10px;
+  position: absolute;
+}
+
+#donation-banner-who {
+  font-size: 19px;
+  font-style: bold;
+  width: 420px;
+}
+
+#donation-banner-speciality {
+  font-size: 13px;
+  text-transform: uppercase;
+  width: 420px;
+}
+
+#donation-banner-plea {
+  background-color: yellow;
+  font-family: sans-serif;
+  font-size: 20px;
+  color: darkgreen;
+  left: 250px;
+  line-height: 42px;
+  height: 42px;
+  padding: 0px 5px 0px 5px;
+  position: absolute;
+  text-align: center;
+  top: 144px;
+  width: 200px;
+}
+
+#donate-button {
+  background-color: green;
+  border-radius: 5px;
+  color: white;
+  font-family: sans-serif;
+  font-size: 20px;
+  height: 42px;
+  left: 490px;
+  line-height: 42px;
+  padding: 0px 5px 0px 5px;
+  position: absolute;
+  text-align: center;
+  top: 144px;
+  vertical-align: middle;
+  width: 110px;
+}
+
+#donate-button:hover {
+  filter: brightness(1.2);
+}