Bug 20414.2: Tor Donation Banner 2016

arthuredelstein · Nov 4, 2016 · 7565d501fc4811b4f77f6b5ba569709b806b332d · 7565d50
1 parent 9eed15d
commit 7565d501fc4811b4f77f6b5ba569709b806b332d
diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml
@@ -21,6 +21,8 @@
   <title>&aboutTor.title;</title>
   <link rel="stylesheet" type="text/css" media="all"
         href="chrome://torbutton/skin/aboutTor.css"/>
+  <link rel="stylesheet" type="text/css" media="all"
+        href="chrome://torbutton/skin/donation_banner.css"/>
 <script type="text/javascript;version=1.7">
  <![CDATA[
 function onLoad()
@@ -164,6 +166,25 @@ window.addEventListener("pageshow", function() {
 </script>
 </head>
 <body dir="&locale.dir;" onload="onLoad();">
+  <div id="banner" class="onions-bg">
+    <div id="banner-contents-container">
+      <div id="banner-logo-container">
+        <img id="banner-logo" alt="Tor Onion-Heart Logo"
+             src="chrome://torbutton/content/aboutTor/onion-heart.svg"/>
+      </div>
+      <div id="banner-text">
+        <div id="banner-tagline"><span></span></div>
+        <div id="banner-heart"><span></span></div>
+      </div>
+      <a id="banner-donate-button-link"
+         href="https://www.torproject.org/donate/donate-tbb">
+        <div id="banner-donate-button-container">
+          <div id="banner-donate-button"><span></span></div>
+        </div>
+      </a>
+    </div>
+  </div>
+  <div id="banner-spacer"></div>
 <div id="torstatus" class="top">
   <div id="torstatus-version"/>
   <div id="torstatus-image"/>
@@ -237,6 +258,6 @@ window.addEventListener("pageshow", function() {
   <p>&aboutTor.footer.label;
 <a href="&aboutTor.learnMore.link;">&aboutTor.learnMore.label;</a></p>
 </div>
-
+  <script src="chrome://torbutton/content/aboutTor/donation_banner.js"></script>
 </body>
 </html>
diff --git a/src/chrome/content/aboutTor/donation_banner.js b/src/chrome/content/aboutTor/donation_banner.js
@@ -0,0 +1,146 @@
+let kPropertiesURL = "chrome://torbutton/locale/aboutTor.properties";
+Components.utils.import("resource://gre/modules/Services.jsm");
+let gStringBundle = Services.strings.createBundle(kPropertiesURL);
+
+let sel = selector => document.querySelector(selector);
+
+// Check if we should show the banner, depends on
+// browser locale, current date, and how many times
+// we have already shown the banner.
+let shouldShowBanner = function () {
+  try {
+    // Don't show a banner if update is needed.
+    let updateNeeded = Services.prefs.getBoolPref("extensions.torbutton.updateNeeded");
+    if (updateNeeded) {
+      return false;
+    }
+    // Only show banner for US English
+    let browserLocale = Services.prefs.getCharPref("general.useragent.locale");
+    if (browserLocale !== "en-US") {
+      return false;
+    }
+    // Only show banner between 2016 Nov 15 and 2017 Jan 25.
+    let now = new Date();
+    let start = new Date(2016, 10, 15);
+    let end = new Date(2017, 0, 26);
+    let shownCountPref = "extensions.torbutton.donation_banner2016.shown_count";
+    if (now < start || now > end) {
+      // Clean up pref if not in use.
+      Services.prefs.clearUserPref(shownCountPref);
+      return false;
+    }
+    // Only show banner 10 times.
+    if (Services.prefs.prefHasUserValue(shownCountPref)) {
+      count = Services.prefs.getIntPref(shownCountPref);
+    } else {
+      count = 0;
+    }
+    if (count >= 10) {
+         return false;
+    }
+    Services.prefs.setIntPref(shownCountPref, count+1);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+// Shrink the font size if the text in the given element is overflowing.
+let fitTextInElement = function (element) {
+  element.style.fontSize = "8px";
+  let defaultWidth = element.scrollWidth,
+      defaultHeight = element.scrollHeight;
+  for (let testSize = 8; testSize <= 40; testSize += 0.5) {
+    element.style.fontSize = `${testSize}px`;
+    if (element.scrollWidth <= defaultWidth &&
+        element.scrollHeight <= defaultHeight) {
+      bestSize = testSize;
+    } else {
+      break;
+    }
+  }
+  element.style.fontSize = `${bestSize}px`;
+};
+
+// Increase padding at left and right to "squeeze" text, until it gets
+// squeezed so much that it gets longer vertically.
+let avoidWidows = function (element) {
+  element.style.paddingLeft = "0px";
+  element.style.paddingRight = "0px";
+  let originalWidth = element.scrollWidth;
+  let originalHeight = element.scrollHeight;
+  for (let testPadding = 0; testPadding < originalWidth / 2; testPadding += 0.5) {
+    element.style.paddingLeft = element.style.paddingRight = `${testPadding}px`;
+    if (element.scrollHeight <= originalHeight) {
+      bestPadding = testPadding;
+    } else {
+      break;
+    }
+  }
+  element.style.paddingLeft = element.style.paddingRight = `${bestPadding}px`;
+};
+
+// Resize the text inside banner to fit.
+let updateTextSizes = function () {
+  fitTextInElement(sel("#banner-tagline"));
+  fitTextInElement(sel("#banner-heart"));
+  fitTextInElement(sel("#banner-donate-button"));
+  avoidWidows(sel("#banner-tagline span"));
+};
+
+// Read the tagline with the given index.
+let getTagline = index => gStringBundle.GetStringFromName(
+  "aboutTor.donationBanner.tagline" + (index + 1));
+
+// Returns a random integer x, such that 0 <= x < max
+let randomInteger = max => Math.floor(max * Math.random());
+
+// The main donation banner function.
+let runDonationBanner = function () {
+  let torStatusImage = document.getElementById("torstatus-image");
+  let banner = document.getElementById("banner");
+  try {
+    if (!shouldShowBanner()) {
+      return;
+    }
+    sel("#banner-tagline span").innerText = getTagline(randomInteger(4));
+    sel("#banner-heart span").innerText =
+      gStringBundle.GetStringFromName("aboutTor.donationBanner.heart");
+    sel("#banner-donate-button span").innerHTML =
+      gStringBundle.GetStringFromName("aboutTor.donationBanner.donate") +
+      " &#187;";
+    torStatusImage.style.display = "none";
+    banner.style.display = "flex";
+    sel("#banner-spacer").style.display = "block";
+    addEventListener("resize", updateTextSizes);
+    updateTextSizes();
+  } catch (e) {
+    // Something went wrong.
+    console.log(e.message);
+    banner.style.display = "none";
+    torStatusImage.style.display = "block";
+  }
+};
+
+// Calls callback(attributeValue) when the specified attribute changes on
+// target. Returns a zero-arg function that stop observing.
+let observeAttribute = function (target, attributeName, callback) {
+  let observer = new MutationObserver(mutations => {
+    mutations.forEach(mutation => {
+      if (mutation.type === "attributes" &&
+          mutation.attributeName === attributeName) {
+        callback(target.getAttribute(attributeName));
+      }
+    });
+  });
+  observer.observe(document.body, { attributes: true });
+  return () => observer.disconnect();
+};
+
+// Start the donation banner if "toron" has been set to "yes".
+let stopObserving = observeAttribute(document.body, "toron", value => {
+  stopObserving();
+  if (value === "yes") {
+    runDonationBanner();
+  }
+});
diff --git a/src/chrome/content/aboutTor/onion-heart.svg b/src/chrome/content/aboutTor/onion-heart.svg
@@ -0,0 +1,142 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg3004"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   width="399.96011"
+   height="574.18964"
+   xml:space="preserve"
+   sodipodi:docname="tor_onion-heart-no-roots.svg"><metadata
+     id="metadata3010"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
+     id="defs3008"><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath3730"><path
+         d="M 0,936 936,936 936,0 0,0 0,936 z"
+         id="path3732"
+         inkscape:connector-curvature="0" /></clipPath><linearGradient
+       x1="0"
+       y1="0"
+       x2="1"
+       y2="0"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(48.064392,308.5928,-308.5928,48.064392,538.70312,416.25879)"
+       spreadMethod="pad"
+       id="linearGradient4548"><stop
+         style="stop-opacity:1;stop-color:#533c5f"
+         offset="0"
+         id="stop4550" /><stop
+         style="stop-opacity:1;stop-color:#c3a1cc"
+         offset="1"
+         id="stop4552" /></linearGradient><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath4560"><path
+         d="M 0,936 936,936 936,0 0,0 0,936 z"
+         id="path4562"
+         inkscape:connector-curvature="0" /></clipPath></defs><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview3006"
+     showgrid="false"
+     inkscape:zoom="0.20512821"
+     inkscape:cx="191.66224"
+     inkscape:cy="225.57375"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g3012"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" /><g
+     id="g3012"
+     inkscape:groupmode="layer"
+     inkscape:label="tor_onion-heart-tat_k"
+     transform="matrix(1.25,0,0,-1.25,-393.33776,933.61587)"><g
+       id="g5498"><g
+         transform="translate(467.2668,636.4615)"
+         id="g4534"><path
+           inkscape:connector-curvature="0"
+           id="path4536"
+           style="fill:#fefbde;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 38.336,-23.387 c -1.623,-10.421 -7.42,-42.074 -2.365,-52.467 54.488,-98.402 15.611,-272.581 -55.594,-266.116 -107.359,16.723 -136.943,96.034 -126.502,163.069 9.521,61.129 89.133,90.349 138.523,119.652 C 5.023,-51.257 6.441,-29.463 0,0" /></g><g
+         transform="translate(-11.7,-132.6)"
+         id="g4538"><g
+           id="g4540"><g
+             id="g4546"><path
+               inkscape:connector-curvature="0"
+               id="path4554"
+               style="fill:url(#linearGradient4548);stroke:none"
+               d="m 515.125,691.615 c 14.398,-33.193 21.002,-61.614 23.349,-92.216 l 0,0 c 5.282,-78.024 -18.683,-145.076 -69.431,-171.68 l 0,0 c 82.295,-22.068 194.019,58 153.076,169.678 l 0,0 c -11.436,31.663 -47.526,67.164 -86.427,100.616 l 0,0 c -8.858,7.069 -7.588,28.931 -4.684,38.436 l 0,0 -13.594,9.835 c -2.5,-20.602 -8.252,-38.547 -2.289,-54.669" /></g></g></g><g
+         transform="translate(539.4914,722.0167)"
+         id="g4564"><path
+           inkscape:connector-curvature="0"
+           id="path4566"
+           style="fill:#acce45;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="M 0,0 -20.238,-47.718 C 2.938,-15.399 35.18,6.613 71.105,24.853 43.215,1.096 17.408,-22.991 -0.063,-48.373 27.033,-20.575 59.609,-7.864 95.082,-1.648 44.057,-34.611 1.818,-71.932 -31.735,-110.53 l -20.071,12.731 C -42.881,-64.259 -24.406,-31.065 0,0" /></g><g
+         transform="translate(610.6633,746.8927)"
+         id="g4568"><path
+           inkscape:connector-curvature="0"
+           id="path4570"
+           style="fill:#4f7944;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c -18.732,-14.643 -51.215,-40.396 -70.211,-64.362 -16.199,-20.443 -28.023,-39.03 -34.963,-51.689 -4.435,-8.1 -16.986,-6.057 -11.148,7.569 0.06,0.134 0.131,0.231 0.189,0.368 6.617,10.675 16.436,25.483 25.996,38.372 l 18.924,44.909 c -8.81,-18.827 -19.836,-35.509 -28.074,-55.15 0.006,0 -12.072,-19.051 -15.252,-23.871 -1.08,-1.638 -2.02,-3.232 -2.857,-4.727 -0.055,-0.094 -0.12,-0.144 -0.17,-0.239 -1.356,-2.085 -2.416,-4.43 -3.268,-6.515 -0.141,-0.342 -0.145,-0.56 -0.27,-0.887 -1.146,-2.966 -1.884,-5.274 -1.884,-5.274 3.131,-3.687 19.793,-14.219 19.793,-14.219 33.797,38.847 76.142,76.218 127.17,109.18 C -11.502,-32.75 -44.096,-45.426 -71.191,-73.223 -53.719,-47.841 -27.889,-23.757 0,0" /></g><g
+         transform="translate(504.0246,614.7198)"
+         id="g4572"><path
+           inkscape:connector-curvature="0"
+           id="path4574"
+           style="fill:#364733;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="M 0,0 3.443,-3.542 C 37.24,35.305 79.586,72.676 130.613,105.638 101.641,88.618 62.617,65.032 45.039,48.176 22.799,26.855 37.211,47.893 37.211,47.893 c 0,0 13.723,23.78 33.42,36.975 C 59.879,81.646 39.172,62.772 35.447,58.95 35.447,58.95 18.482,35.696 7.662,13.96 4.756,8.131 0,0 0,0" /></g><g
+         transform="translate(495.4396,619.3077)"
+         id="g4576"><path
+           inkscape:connector-curvature="0"
+           id="path4578"
+           style="fill:#f3ecac;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 -50.606,-324.234 c 1.214,-0.211 1.599,-0.373 2.834,-0.564 71.205,-6.467 110.13,167.744 55.642,266.146 -5.057,10.391 0.705,41.975 2.328,52.398 L 0,0 z" /></g><g
+         transform="translate(496.173,618.858)"
+         id="g4580"><path
+           inkscape:connector-curvature="0"
+           id="path4582"
+           style="fill:#292929;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 32.734,-10.453 c -13.681,-28.463 9.821,-53.468 17.739,-59.683 17.775,-13.799 34.8,-27.831 47.625,-43.702 24.132,-30.084 34.48,-68.694 28.527,-106.9 -5.895,-37.853 -28.941,-71.615 -61.904,-91.384 -31.006,-18.65 -70.377,-22.477 -107.196,-16.742 -22.92,3.57 -43.251,7.801 -64.341,18.556 -48.054,24.922 -79.152,74.228 -74.163,126.815 3.549,41.068 17.397,70.575 54.035,97.952 18.971,14.475 54.997,28.784 80.01,40.897 12.305,5.91 27.467,25.606 11.219,69.755 l 5.057,2.771 30.42,-27.723 -26.887,16.145 c 1.891,-3.854 6.055,-20.512 6.742,-25.242 1.125,-13.337 -2.211,-25.627 -5.855,-30.748 -18.242,-23.485 -43.637,-26.643 -63.619,-38.471 -35.263,-20.832 -72.493,-36.022 -79.655,-107.122 -3.672,-35 16.819,-81.593 54.367,-107.718 21.193,-14.688 46.887,-23.316 73.415,-28.867 23.8,-4.774 71.867,2.324 100.117,19.265 30.201,18.063 50.386,49.427 55.742,83.807 5.41,34.736 -3.344,69.895 -25.768,97.222 C 75.537,-105.7 53.42,-85.534 39.496,-74.471 25.564,-63.407 10.248,-36.12 20.123,-13.825 L 0,0 z" /></g><g
+         transform="translate(504.3195,604.0934)"
+         id="g4584"><path
+           inkscape:connector-curvature="0"
+           id="path4586"
+           style="fill:#292929;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c -3.924,-18.399 -5.262,-25.191 -3.904,-39.278 1.494,-15.528 17.593,-40.092 21.738,-65.995 7.926,-49.617 -5.521,-110.842 -24.156,-157.384 -6.819,-16.368 -30.459,-37.95 -51.5,-42.849 l 14.047,-5.748 c 8.041,-0.892 31.505,15.016 42.904,35.65 18.207,32.385 27.021,72.987 28.521,116.866 0.299,4.223 -0.861,42.469 -5.025,59.125 C 16.871,-74.884 3.447,-51.447 2.414,-46.666 0.484,-38.538 -3.91,-21.602 0,0" /></g><g
+         transform="translate(495.4807,619.3595)"
+         id="g4588"><path
+           inkscape:connector-curvature="0"
+           id="path4590"
+           style="fill:#292929;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="M 0,0 C 0.155,-0.008 -49.259,-320.493 -50.456,-319.838 L -0.062,-0.032 C -0.062,0.16 -0.009,-0.035 0,0 c 0.003,0.037 0.231,-0.25 1.218,-0.73 0,0 -43.223,-281.344 -49.418,-321.118 -0.852,0.131 -1.707,0.265 -2.559,0.396 C -44.276,-279.334 -0.148,0.039 0,0" /></g><g
+         transform="translate(453.0549,350.485)"
+         id="g4592"><path
+           inkscape:connector-curvature="0"
+           id="path4594"
+           style="fill:#df3441;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c 0,0 -89.234,63.608 -79.039,129.324 3.929,25.318 23.153,43.156 51.53,38.994 38.91,-5.709 47.481,-43.043 47.481,-43.043 L 0,0 z" /></g><g
+         transform="translate(473.216,476.2032)"
+         id="g4596"><path
+           inkscape:connector-curvature="0"
+           id="path4598"
+           style="fill:#bc303a;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c 0,0 15.029,38.665 32.414,24.385 10.727,-8.813 7.828,-36.448 3.953,-51.406 -12.875,-49.717 -56.528,-98.697 -56.528,-98.697 L 0,0 z" /></g></g></g></svg>