[tbb-commits] [torbutton/master] Bug 23925: Donation banner for YE 2018 Campaign
gk at torproject.org
gk at torproject.org
Thu Oct 18 07:06:08 UTC 2018
commit 4c9e8dc0f8a0d45f6955801a24a1d45a98cccdf0
Author: Arthur Edelstein <arthuredelstein at 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 45b60ce8..9beb3993 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 at 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);
More information about the tbb-commits
mailing list