[torbutton/master] Bug 30577: Add Fundraising Banner

2 Jul 2019

commit 676f9b37aa8a74c4fb0e2d624d7e4b2a73082352
Author: Alex Catarineu <acat@torproject.org>
Date:   Mon Jul 1 12:08:29 2019 +0200

    Bug 30577: Add Fundraising Banner
---
 src/chrome/content/aboutTor/aboutTor-content.js |  19 ++++++
 src/chrome/content/aboutTor/aboutTor.xhtml      |  13 ++++
 src/chrome/content/torbutton.js                 |  17 +++++
 src/chrome/locale/en-US/aboutTor.dtd            |   3 +
 src/chrome/skin/aboutTor.css                    |  83 ++++++++++++++++++++++++
 src/chrome/skin/icon_monthly_donors.png         | Bin 0 -> 3093 bytes
 src/defaults/preferences/preferences.js         |   1 +
 7 files changed, 136 insertions(+)

diff --git a/src/chrome/content/aboutTor/aboutTor-content.js b/src/chrome/content/aboutTor/aboutTor-content.js
index 2b65dbcf..d4399624 100644
--- a/src/chrome/content/aboutTor/aboutTor-content.js
+++ b/src/chrome/content/aboutTor/aboutTor-content.js
@@ -24,6 +24,7 @@ let { bindPrefAndInit, show_torbrowser_manual } = Cu.import("resource://torbutto
 var AboutTorListener = {
   kAboutTorLoadedMessage: "AboutTor:Loaded",
   kAboutTorChromeDataMessage: "AboutTor:ChromeData",
+  kAboutTorHideDonationBanner: "AboutTor:HideDonationBanner",
 
   get isAboutTor() {
     return content.document.documentURI.toLowerCase() == "about:tor";
@@ -58,6 +59,22 @@ var AboutTorListener = {
     }
   },
 
+  setupBannerClosing: function () {
+    let that = this;
+    let closer = content.document.getElementById("donation-banner-closer");
+    closer.addEventListener("click", function () {
+      sendAsyncMessage(that.kAboutTorHideDonationBanner);
+    });
+
+    bindPrefAndInit("extensions.torbutton.donation_banner_countdown3",
+                    countdown => {
+                      if (content.document && content.document.body) {
+                        content.document.body.setAttribute(
+                          "show-donation-banner", countdown > 0);
+                      }
+                    });
+  },
+
   onPageLoad: function() {
     // Arrange to update localized text and links.
     bindPrefAndInit("intl.locale.requested", aNewVal => {
@@ -66,6 +83,8 @@ var AboutTorListener = {
       }
     });
 
+    this.setupBannerClosing();
+
     // Add message and event listeners.
     addMessageListener(this.kAboutTorChromeDataMessage, this);
     addEventListener("pagehide", this, false);
diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml
index 4736f653..106bd936 100644
--- a/src/chrome/content/aboutTor/aboutTor.xhtml
+++ b/src/chrome/content/aboutTor/aboutTor.xhtml
@@ -34,6 +34,19 @@ window.addEventListener("pageshow", function() {
 </script>
 </head>
 <body dir="&locale.dir;">
+  <div id="donation-banner">
+    <div><!--EMPTY SPACER DIV--></div>
+    <div id="donation-banner-message">
+      <div id="donation-banner-icon"></div>
+      <div>&aboutTor.donationBanner3.line1;
+        <a href="https://donate.torproject.org/monthly-giving">
+          &aboutTor.donationBanner3.line2;
+        </a>
+      </div>
+    </div>
+    <div id="donation-banner-closer">×</div>
+  </div>
+
   <div class="torcontent-container">
     <div id="torbrowser-info">
       <div id="torbrowser-version"/>
diff --git a/src/chrome/content/torbutton.js b/src/chrome/content/torbutton.js
index 53fe4fc9..f0456a3e 100644
--- a/src/chrome/content/torbutton.js
+++ b/src/chrome/content/torbutton.js
@@ -22,6 +22,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_donation_banner_countdown = "extensions.torbutton.donation_banner_countdown3";
 
 var m_tb_prefs = Services.prefs;
 
@@ -217,6 +218,14 @@ function torbutton_init_toolbutton()
     }
 }
 
+// Show the donation banner a finite number of times.
+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_donation_banner_countdown, count - 1);
+  }
+}
+
 function torbutton_is_mobile() {
     return Services.appinfo.OS === "Android";
 }
@@ -329,6 +338,10 @@ function torbutton_init() {
     // Add about:tor IPC message listener.
     window.messageManager.addMessageListener("AboutTor:Loaded",
                                    torbutton_abouttor_message_handler);
+    window.messageManager.addMessageListener("AboutTor:HideDonationBanner",
+                                   torbutton_abouttor_message_handler);
+
+    torbutton_donation_banner_countdown();
 
     setupPreferencesForMobile();
 
@@ -444,6 +457,10 @@ var torbutton_abouttor_message_handler = {
         aMessage.target.messageManager.sendAsyncMessage("AboutTor:ChromeData",
                                                     this.getChromeData(true));
         break;
+      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/locale/en-US/aboutTor.dtd b/src/chrome/locale/en-US/aboutTor.dtd
index c4273ad2..5757fae4 100644
--- a/src/chrome/locale/en-US/aboutTor.dtd
+++ b/src/chrome/locale/en-US/aboutTor.dtd
@@ -30,3 +30,6 @@
 <!ENTITY aboutTor.newsletter.link_text "Sign up for Tor News.">
 <!ENTITY aboutTor.donationBanner.line2e "Keep Tor strong.">
 <!ENTITY aboutTor.donationBanner.buttonA "Donate Now">
+
+<!ENTITY aboutTor.donationBanner3.line1 "Automatic monthly donations keep Tor strong.">
+<!ENTITY aboutTor.donationBanner3.line2 "Become a Defender of Privacy today.">
diff --git a/src/chrome/skin/aboutTor.css b/src/chrome/skin/aboutTor.css
index baa92b42..09f6208d 100644
--- a/src/chrome/skin/aboutTor.css
+++ b/src/chrome/skin/aboutTor.css
@@ -137,6 +137,12 @@ body:not([showmanual]) .showForManual {
   margin-top: 10vh;
 }
 
+/* Reducing this on mobile to avoid vertical overflow
+ * on small screens when showing donation banner */
+body[mobile] #bottom {
+  margin-top: 3vh;
+}
+
 #bottom p {
   font-size: 10px;
   text-align: start;
@@ -304,6 +310,83 @@ body:not([showmanual]) .showForManual {
   border-radius: 50px 50px 0 0;
 }
 
+/* Donation Banner
+ * While this banner is present, we need to
+ * offset the elements normally at the top of
+ * the window.
+ */
+
+#donation-banner {
+  display: flex;
+  align-items: stretch;
+  background-color: white;
+  color: var(--abouttor-bg-toron-color);
+  font-size: 16px;
+  height: 70px;
+  justify-content: center;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  position: absolute;
+  transform: translateY(-70px);
+  transition: transform 200ms;
+  z-index: 1;
+  padding-right:38px;
+}
+
+body[mobile] #donation-banner {
+  font-size: 14px;
+}
+
+body[show-donation-banner="true"] #donation-banner {
+  transform: translateY(0px);
+  transition: transform 0ms;
+}
+
+#donation-banner-message {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+#donation-banner-message a {
+  color: var(--abouttor-bg-toron-color);
+}
+
+#donation-banner-icon {
+  background: url('chrome://torbutton/skin/icon_monthly_donors.png') no-repeat center center;
+  background-size: contain;
+  background-position: bottom;
+  height: 56px;
+  margin: 14px 16px 0px 16px;
+  width: 65px;
+}
+
+#donation-banner-closer {
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  height: 22px;
+  justify-content: center;
+  margin: 4px;
+  padding: 4px;
+  position: absolute;
+  offset-inline-end: 0px;
+  top: 0px;
+  width: 22px;
+  -moz-user-select: none;
+}
+
+#donation-banner-closer:hover {
+  background-color: gray;
+  cursor: pointer;
+}
+
+body[show-donation-banner="true"] #onboarding-overlay-button-container,
+body[show-donation-banner="true"] .torcontent-container {
+  margin-top: 72px;
+}
+
 /*
  * Mobile specific css
  */
diff --git a/src/chrome/skin/icon_monthly_donors.png b/src/chrome/skin/icon_monthly_donors.png
new file mode 100644
index 00000000..9505f471
Binary files /dev/null and b/src/chrome/skin/icon_monthly_donors.png differ
diff --git a/src/defaults/preferences/preferences.js b/src/defaults/preferences/preferences.js
index e5d66d55..3a2cdcd3 100644
--- a/src/defaults/preferences/preferences.js
+++ b/src/defaults/preferences/preferences.js
@@ -6,6 +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.donation_banner_countdown3", 4);
 
 // Tor check and proxy prefs
 pref("extensions.torbutton.test_enabled",true);

    

gk＠torproject.org

tags

participants (1)