commit 5d427ef536bd152ba7ba1471604a36aca8699407 Author: Arthur Edelstein arthuredelstein@gmail.com Date: Mon Oct 15 21:15:09 2018 -0700
Bug 23925: Donation banner for YE 2018 Campaign
Design by Antonela Debiasi --- src/chrome/content/aboutTor/aboutTor-content.js | 30 +++++-- src/chrome/content/aboutTor/aboutTor.xhtml | 49 +++++++--- src/chrome/content/torbutton.js | 18 ++-- src/chrome/skin/aboutTor.css | 114 +++++++++++++++++------- src/chrome/skin/donation_banner_image_3x.png | Bin 0 -> 71927 bytes src/chrome/skin/newsletter_3x.png | Bin 6735 -> 0 bytes src/defaults/preferences/preferences.js | 2 +- 7 files changed, 152 insertions(+), 61 deletions(-)
diff --git a/src/chrome/content/aboutTor/aboutTor-content.js b/src/chrome/content/aboutTor/aboutTor-content.js index ff5a970b..e8f5ffa2 100644 --- a/src/chrome/content/aboutTor/aboutTor-content.js +++ b/src/chrome/content/aboutTor/aboutTor-content.js @@ -24,7 +24,7 @@ let { bindPrefAndInit, show_torbrowser_manual } = Cu.import("resource://torbutto var AboutTorListener = { kAboutTorLoadedMessage: "AboutTor:Loaded", kAboutTorChromeDataMessage: "AboutTor:ChromeData", - kAboutTorHideTorNewsBanner: "AboutTor:HideTorNewsBanner", + kAboutTorHideDonationBanner: "AboutTor:HideDonationBanner",
get isAboutTor() { return content.document.documentURI.toLowerCase() == "about:tor"; @@ -61,20 +61,24 @@ var AboutTorListener = {
setupBannerClosing: function () { let that = this; - let closer = content.document.getElementById("tornews-banner-closer"); + let closer = content.document.getElementById("donation-banner-closer"); closer.addEventListener("click", function () { - sendAsyncMessage(that.kAboutTorHideTorNewsBanner); + sendAsyncMessage(that.kAboutTorHideDonationBanner); }); - let link = content.document.querySelector("#tornews-banner-message a"); - link.addEventListener("click", function () { + let button = content.document.getElementById("donation-banner-button"); + button.addEventListener("click", function () { // Wait until page unloads so we don't hide banner before that. content.addEventListener("unload", function () { - sendAsyncMessage(that.kAboutTorHideTorNewsBanner); + sendAsyncMessage(that.kAboutTorHideDonationBanner); }); }); - bindPrefAndInit("extensions.torbutton.tornews_banner_countdown", - countdown => content.document.body.setAttribute( - "show-tornews-banner", countdown > 0)); + bindPrefAndInit("extensions.torbutton.donation_banner_countdown", + countdown => { + if (content.document && content.document.body) { + content.document.body.setAttribute( + "show-donation-banner", countdown > 0); + } + }); },
onPageLoad: function() { @@ -124,6 +128,14 @@ var AboutTorListener = { content.document.getElementById("manualLink").href = "https://tb-manual.torproject.org/" + aLocale;
+ // Don't use "Count Me In" phrase in non-en-US locales + if (!aLocale.startsWith("en")) { + let button = content.document.getElementById("donation-banner-button"); + button.innerHTML = button.getAttribute("data-0"); + let theURL = button.getAttribute("href"); + button.setAttribute("href", theURL.slice(0,-2)); + } + // Display the Tor Browser product name and version. try { const kBrandBundle = "chrome://branding/locale/brand.properties"; diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml index 87fe8307..9256748e 100644 --- a/src/chrome/content/aboutTor/aboutTor.xhtml +++ b/src/chrome/content/aboutTor/aboutTor.xhtml @@ -31,21 +31,48 @@ window.addEventListener("pageshow", function() { </script> </head> <body dir="&locale.dir;"> - <div id="tornews-banner"> - <div><!--EMPTY SPACER DIV--></div> - <div id="tornews-banner-message"> - <div id="tornews-banner-icon"></div> - <div>&aboutTor.newsletter.tagline; - <a href="https://newsletter.torproject.org"> - &aboutTor.newsletter.link_text; - </a> + <div id="donation-banner"> + <div id="donation-banner-image"></div> + <div id="donation-banner-lines"> + <div id="donation-banner-line1">&aboutTor.donationBanner.line1;</div> + <div id="donation-banner-line2" + data-0="&aboutTor.donationBanner.line2a;" + data-1="&aboutTor.donationBanner.line2b;" + data-2="&aboutTor.donationBanner.line2c;" + data-3="&aboutTor.donationBanner.line2d;" + data-4="&aboutTor.donationBanner.line2e;" + data-5="&aboutTor.donationBanner.line2f;"> + &aboutTor.donationBanner.line2a; </div> + <div id="donation-banner-line3">&aboutTor.donationBanner.line3;</div> + <a id="donation-banner-button" + href="https://www.torproject.org/donate/donate-sin-tbd0-0" + type="button" + data-0="&aboutTor.donationBanner.buttonA;" + data-1="&aboutTor.donationBanner.buttonB;"> + &aboutTor.donationBanner.buttonA; + </a> </div> - <div id="tornews-banner-closer">×</div> + <div id="donation-banner-closer">×</div> </div> - +<script type="text/javascript"> + <![CDATA[ + let lineChoice = Math.floor(Math.random() * 6); + let line2 = document.getElementById("donation-banner-line2"); + let line2text = line2.getAttribute(`data-${lineChoice}`); + let line2pieces = line2text.split(" "); + let line2end = '<span>' + line2pieces.pop() + '</span>'; + line2pieces.push(line2end); + line2.innerHTML = line2pieces.join(" "); + let buttonChoice = Math.floor(Math.random() * 2); + let button = document.getElementById("donation-banner-button"); + button.innerHTML = button.getAttribute(`data-${buttonChoice}`); + button.setAttribute("href", + `https://www.torproject.org/donate/donate-sin-tbd${lineChoice}-${buttonChoice}`); +]]> +</script> + <div id="torstatus-version"/> <div class="torcontent-container"> - <div id="torstatus-version"/> <div id="torstatus" class="top"> <div id="torstatus-on-container" class="hideIfTorOff torstatus-container"> <div class="heading1">&aboutTor.ready.label;</div> diff --git a/src/chrome/content/torbutton.js b/src/chrome/content/torbutton.js index 03dc3563..fc1a38d8 100644 --- a/src/chrome/content/torbutton.js +++ b/src/chrome/content/torbutton.js @@ -19,7 +19,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_tornews_banner_countdown = "extensions.torbutton.tornews_banner_countdown"; +const k_tb_donation_banner_countdown = "extensions.torbutton.donation_banner_countdown";
var m_tb_prefs = Services.prefs;
@@ -233,10 +233,10 @@ function torbutton_init_toolbutton() }
// Show the Sign Up for Tor News banner a finite number of times. -function torbutton_tornews_banner_countdown() { - let count = m_tb_prefs.getIntPref(k_tb_tornews_banner_countdown, 0); +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_tornews_banner_countdown, count - 1); + m_tb_prefs.setIntPref(k_tb_donation_banner_countdown, count - 1); } }
@@ -348,10 +348,10 @@ function torbutton_init() { // Add about:tor IPC message listener. window.messageManager.addMessageListener("AboutTor:Loaded", torbutton_abouttor_message_handler); - window.messageManager.addMessageListener("AboutTor:HideTorNewsBanner", + window.messageManager.addMessageListener("AboutTor:HideDonationBanner", torbutton_abouttor_message_handler);
- torbutton_tornews_banner_countdown(); + torbutton_donation_banner_countdown();
setupPreferencesForMobile();
@@ -431,9 +431,9 @@ var torbutton_abouttor_message_handler = { aMessage.target.messageManager.sendAsyncMessage("AboutTor:ChromeData", this.chromeData); break; - case "AboutTor:HideTorNewsBanner": - torbutton_log(5, "message AboutTor:HideTorNewsBanner received"); - m_tb_prefs.setIntPref(k_tb_tornews_banner_countdown, 0); + 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/skin/aboutTor.css b/src/chrome/skin/aboutTor.css index ce0a2f29..9f195cfd 100644 --- a/src/chrome/skin/aboutTor.css +++ b/src/chrome/skin/aboutTor.css @@ -272,74 +272,126 @@ body:not([showmanual]) .showForManual { border-radius: 50px 50px 0 0; }
-/* Tor News Signup Banner +/* Donation Banner * While this banner is present, we need to * offset the elements normally at the top of * the window. */
-#tornews-banner { +#donation-banner { display: flex; - align-items: center; + align-items: stretch; background-color: white; color: var(--abouttor-bg-toron-color); font-size: 16px; - height: 60px; - justify-content: space-between; + height: 200px; + justify-content: center; left: 0px; right: 0px; top: 0px; - transform: translateY(-60px); + position: absolute; + transform: translateY(-200px); transition: transform 200ms; + z-index: 1; }
-body[show-tornews-banner="true"] #tornews-banner { +body[show-donation-banner="true"] #donation-banner { transform: translateY(0px); transition: transform 0ms; }
-#tornews-banner-message { - align-items: center; - display: flex; - justify-content: center; -} - -#tornews-banner-message a { - color: var(--abouttor-bg-toron-color); -} - -#tornews-banner-icon { - background: url('chrome://torbutton/skin/newsletter_3x.png') no-repeat center center; - background-size: cover; - height: 32px; - margin: 0px 16px; - width: 32px; +#donation-banner-image { + background: url('chrome://torbutton/skin/donation_banner_image_3x.png') no-repeat center center; + background-size: contain; + height: 190px; + margin: 10px 10px 0px 0px; + width: 400px; }
-#tornews-banner-closer { +#donation-banner-closer { display: flex; align-items: center; font-size: 20px; height: 22px; justify-content: center; - margin: 4px 20px; + margin: 4px; padding: 4px; + position: absolute; + offset-inline-end: 0px; + top: 0px; width: 22px; -moz-user-select: none; }
-#tornews-banner-closer:hover { +#donation-banner-closer:hover { background-color: gray; cursor: pointer; }
-body[show-tornews-banner="false"] #torstatus-version, -body[show-tornews-banner="false"] #onboarding-overlay-button { +#donation-banner-lines { + align-items: start; + display: flex; + flex-direction: column; + justify-content: space-around; + padding: 20px 0px; +} + +#donation-banner-line1 { + font-size: 11px; + font-weight: bold; + text-transform: uppercase; +} + +#donation-banner-line2 { + font-size: 20px; + font-weight: bold; +} + +#donation-banner-line2 span { + background-color: #a9fef8; +} + +#donation-banner-line3 { + font-size: 14px; +} + +#donation-banner-button { + background-color: var(--abouttor-bg-toron-color); + border-radius: 3px; + border: 0px; + color: white; + font-size: 14px; + font-weight: bold; + margin: 10px 0px; + padding: 10px 24px; + text-decoration: none; +} + +#donation-banner-button:hover { + background-color: #683d7d; + cursor: pointer; +} + +body[show-donation-banner="false"] .torcontent-container, +body[show-donation-banner="false"] .onion-pattern-container, +body[show-donation-banner="false"] #torstatus-version, +body[show-donation-banner="false"] #onboarding-overlay-button { transition: transform 200ms; }
-body[show-tornews-banner="true"] #torstatus-version, -body[show-tornews-banner="true"] #onboarding-overlay-button { - transform: translateY(60px); +body[show-donation-banner="true"] .torcontent-container, +body[show-donation-banner="true"] .onion-pattern-container { + transform: translateY(80px); transition: transform 0ms; } + +body[show-donation-banner="true"] .onion-pattern-container { + position: fixed; +} + +body[show-donation-banner="true"] #torstatus-version, +body[show-donation-banner="true"] #onboarding-overlay-button { + transform: translateY(200px); + transition: transform 0ms; + position: absolute; +} diff --git a/src/chrome/skin/donation_banner_image_3x.png b/src/chrome/skin/donation_banner_image_3x.png new file mode 100644 index 00000000..6eb7fbbb Binary files /dev/null and b/src/chrome/skin/donation_banner_image_3x.png differ diff --git a/src/chrome/skin/newsletter_3x.png b/src/chrome/skin/newsletter_3x.png deleted file mode 100644 index 821572fa..00000000 Binary files a/src/chrome/skin/newsletter_3x.png and /dev/null differ diff --git a/src/defaults/preferences/preferences.js b/src/defaults/preferences/preferences.js index fecf0e69..e9496c08 100644 --- a/src/defaults/preferences/preferences.js +++ b/src/defaults/preferences/preferences.js @@ -6,7 +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.tornews_banner_countdown", 4); +pref("extensions.torbutton.donation_banner_countdown", 12);
// Tor check and proxy prefs pref("extensions.torbutton.test_enabled",true);