Commit 4c9e8dc0 authored by Arthur Edelstein's avatar Arthur Edelstein
Browse files

Bug 23925: Donation banner for YE 2018 Campaign

Design by Antonela Debiasi
parent 9ad95c91
...@@ -24,7 +24,7 @@ let { bindPrefAndInit, show_torbrowser_manual } = Cu.import("resource://torbutto ...@@ -24,7 +24,7 @@ let { bindPrefAndInit, show_torbrowser_manual } = Cu.import("resource://torbutto
var AboutTorListener = { var AboutTorListener = {
kAboutTorLoadedMessage: "AboutTor:Loaded", kAboutTorLoadedMessage: "AboutTor:Loaded",
kAboutTorChromeDataMessage: "AboutTor:ChromeData", kAboutTorChromeDataMessage: "AboutTor:ChromeData",
kAboutTorHideTorNewsBanner: "AboutTor:HideTorNewsBanner", kAboutTorHideDonationBanner: "AboutTor:HideDonationBanner",
get isAboutTor() { get isAboutTor() {
return content.document.documentURI.toLowerCase() == "about:tor"; return content.document.documentURI.toLowerCase() == "about:tor";
...@@ -61,20 +61,24 @@ var AboutTorListener = { ...@@ -61,20 +61,24 @@ var AboutTorListener = {
setupBannerClosing: function () { setupBannerClosing: function () {
let that = this; let that = this;
let closer = content.document.getElementById("tornews-banner-closer"); let closer = content.document.getElementById("donation-banner-closer");
closer.addEventListener("click", function () { closer.addEventListener("click", function () {
sendAsyncMessage(that.kAboutTorHideTorNewsBanner); sendAsyncMessage(that.kAboutTorHideDonationBanner);
}); });
let link = content.document.querySelector("#tornews-banner-message a"); let button = content.document.getElementById("donation-banner-button");
link.addEventListener("click", function () { button.addEventListener("click", function () {
// Wait until page unloads so we don't hide banner before that. // Wait until page unloads so we don't hide banner before that.
content.addEventListener("unload", function () { content.addEventListener("unload", function () {
sendAsyncMessage(that.kAboutTorHideTorNewsBanner); sendAsyncMessage(that.kAboutTorHideDonationBanner);
}); });
}); });
bindPrefAndInit("extensions.torbutton.tornews_banner_countdown", bindPrefAndInit("extensions.torbutton.donation_banner_countdown",
countdown => content.document.body.setAttribute( countdown => {
"show-tornews-banner", countdown > 0)); if (content.document && content.document.body) {
content.document.body.setAttribute(
"show-donation-banner", countdown > 0);
}
});
}, },
onPageLoad: function() { onPageLoad: function() {
...@@ -124,6 +128,14 @@ var AboutTorListener = { ...@@ -124,6 +128,14 @@ var AboutTorListener = {
content.document.getElementById("manualLink").href = content.document.getElementById("manualLink").href =
"https://tb-manual.torproject.org/" + aLocale; "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. // Display the Tor Browser product name and version.
try { try {
const kBrandBundle = "chrome://branding/locale/brand.properties"; const kBrandBundle = "chrome://branding/locale/brand.properties";
......
...@@ -31,21 +31,48 @@ window.addEventListener("pageshow", function() { ...@@ -31,21 +31,48 @@ window.addEventListener("pageshow", function() {
</script> </script>
</head> </head>
<body dir="&locale.dir;"> <body dir="&locale.dir;">
<div id="tornews-banner"> <div id="donation-banner">
<div><!--EMPTY SPACER DIV--></div> <div id="donation-banner-image"></div>
<div id="tornews-banner-message"> <div id="donation-banner-lines">
<div id="tornews-banner-icon"></div> <div id="donation-banner-line1">&aboutTor.donationBanner.line1;</div>
<div>&aboutTor.newsletter.tagline; <div id="donation-banner-line2"
<a href="https://newsletter.torproject.org"> data-0="&aboutTor.donationBanner.line2a;"
&aboutTor.newsletter.link_text; data-1="&aboutTor.donationBanner.line2b;"
</a> 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>
<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>
<div id="tornews-banner-closer">&times;</div> <div id="donation-banner-closer">&times;</div>
</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 class="torcontent-container">
<div id="torstatus-version"/>
<div id="torstatus" class="top"> <div id="torstatus" class="top">
<div id="torstatus-on-container" class="hideIfTorOff torstatus-container"> <div id="torstatus-on-container" class="hideIfTorOff torstatus-container">
<div class="heading1">&aboutTor.ready.label;</div> <div class="heading1">&aboutTor.ready.label;</div>
......
...@@ -19,7 +19,7 @@ const k_tb_last_browser_version_pref = "extensions.torbutton.lastBrowserVersion" ...@@ -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_browser_update_needed_pref = "extensions.torbutton.updateNeeded";
const k_tb_last_update_check_pref = "extensions.torbutton.lastUpdateCheck"; const k_tb_last_update_check_pref = "extensions.torbutton.lastUpdateCheck";
const k_tb_tor_check_failed_topic = "Torbutton:TorCheckFailed"; 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; var m_tb_prefs = Services.prefs;
...@@ -233,10 +233,10 @@ function torbutton_init_toolbutton() ...@@ -233,10 +233,10 @@ function torbutton_init_toolbutton()
} }
// Show the Sign Up for Tor News banner a finite number of times. // Show the Sign Up for Tor News banner a finite number of times.
function torbutton_tornews_banner_countdown() { function torbutton_donation_banner_countdown() {
let count = m_tb_prefs.getIntPref(k_tb_tornews_banner_countdown, 0); let count = m_tb_prefs.getIntPref(k_tb_donation_banner_countdown, 0);
if (count > 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() { ...@@ -348,10 +348,10 @@ function torbutton_init() {
// Add about:tor IPC message listener. // Add about:tor IPC message listener.
window.messageManager.addMessageListener("AboutTor:Loaded", window.messageManager.addMessageListener("AboutTor:Loaded",
torbutton_abouttor_message_handler); torbutton_abouttor_message_handler);
window.messageManager.addMessageListener("AboutTor:HideTorNewsBanner", window.messageManager.addMessageListener("AboutTor:HideDonationBanner",
torbutton_abouttor_message_handler); torbutton_abouttor_message_handler);
torbutton_tornews_banner_countdown(); torbutton_donation_banner_countdown();
setupPreferencesForMobile(); setupPreferencesForMobile();
...@@ -431,9 +431,9 @@ var torbutton_abouttor_message_handler = { ...@@ -431,9 +431,9 @@ var torbutton_abouttor_message_handler = {
aMessage.target.messageManager.sendAsyncMessage("AboutTor:ChromeData", aMessage.target.messageManager.sendAsyncMessage("AboutTor:ChromeData",
this.chromeData); this.chromeData);
break; break;
case "AboutTor:HideTorNewsBanner": case "AboutTor:HideDonationBanner":
torbutton_log(5, "message AboutTor:HideTorNewsBanner received"); torbutton_log(5, "message AboutTor:HideDonationBanner received");
m_tb_prefs.setIntPref(k_tb_tornews_banner_countdown, 0); m_tb_prefs.setIntPref(k_tb_donation_banner_countdown, 0);
break; break;
} }
}, },
......
...@@ -272,74 +272,126 @@ body:not([showmanual]) .showForManual { ...@@ -272,74 +272,126 @@ body:not([showmanual]) .showForManual {
border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0;
} }
/* Tor News Signup Banner /* Donation Banner
* While this banner is present, we need to * While this banner is present, we need to
* offset the elements normally at the top of * offset the elements normally at the top of
* the window. * the window.
*/ */
#tornews-banner { #donation-banner {
display: flex; display: flex;
align-items: center; align-items: stretch;
background-color: white; background-color: white;
color: var(--abouttor-bg-toron-color); color: var(--abouttor-bg-toron-color);
font-size: 16px; font-size: 16px;
height: 60px; height: 200px;
justify-content: space-between; justify-content: center;
left: 0px; left: 0px;
right: 0px; right: 0px;
top: 0px; top: 0px;
transform: translateY(-60px); position: absolute;
transform: translateY(-200px);
transition: transform 200ms; transition: transform 200ms;
z-index: 1;
} }
body[show-tornews-banner="true"] #tornews-banner { body[show-donation-banner="true"] #donation-banner {
transform: translateY(0px); transform: translateY(0px);
transition: transform 0ms; transition: transform 0ms;
} }
#tornews-banner-message { #donation-banner-image {
align-items: center; background: url('chrome://torbutton/skin/donation_banner_image_3x.png') no-repeat center center;
display: flex; background-size: contain;
justify-content: center; height: 190px;
} margin: 10px 10px 0px 0px;
width: 400px;
#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;
} }
#tornews-banner-closer { #donation-banner-closer {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 20px; font-size: 20px;
height: 22px; height: 22px;
justify-content: center; justify-content: center;
margin: 4px 20px; margin: 4px;
padding: 4px; padding: 4px;
position: absolute;
offset-inline-end: 0px;
top: 0px;
width: 22px; width: 22px;
-moz-user-select: none; -moz-user-select: none;
} }
#tornews-banner-closer:hover { #donation-banner-closer:hover {
background-color: gray; background-color: gray;
cursor: pointer; cursor: pointer;
} }
body[show-tornews-banner="false"] #torstatus-version, #donation-banner-lines {
body[show-tornews-banner="false"] #onboarding-overlay-button { 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; transition: transform 200ms;
} }
body[show-tornews-banner="true"] #torstatus-version, body[show-donation-banner="true"] .torcontent-container,
body[show-tornews-banner="true"] #onboarding-overlay-button { body[show-donation-banner="true"] .onion-pattern-container {
transform: translateY(60px); transform: translateY(80px);
transition: transform 0ms; 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;
}
...@@ -6,7 +6,7 @@ pref("extensions.torbutton.logmethod",1); // 0=stdout, 1=errorconsole, 2=debuglo ...@@ -6,7 +6,7 @@ pref("extensions.torbutton.logmethod",1); // 0=stdout, 1=errorconsole, 2=debuglo
pref("extensions.torbutton.display_circuit", true); pref("extensions.torbutton.display_circuit", true);
pref("extensions.torbutton@torproject.org.description", "chrome://torbutton/locale/torbutton.properties"); pref("extensions.torbutton@torproject.org.description", "chrome://torbutton/locale/torbutton.properties");
pref("extensions.torbutton.updateNeeded", false); pref("extensions.torbutton.updateNeeded", false);
pref("extensions.torbutton.tornews_banner_countdown", 4); pref("extensions.torbutton.donation_banner_countdown", 12);
// Tor check and proxy prefs // Tor check and proxy prefs
pref("extensions.torbutton.test_enabled",true); pref("extensions.torbutton.test_enabled",true);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment