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() { -
-
-
-
-
&aboutTor.newsletter.tagline; - - &aboutTor.newsletter.link_text; - +
+
+
+
&aboutTor.donationBanner.line1;
+
+ &aboutTor.donationBanner.line2a;
+
&aboutTor.donationBanner.line3;
+ + &aboutTor.donationBanner.buttonA; +
-
×
+
×
- + +
-
&aboutTor.ready.label;
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@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);