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);