commit b55672f07a24e5611510840012a32108553cf413 Author: Arthur Edelstein arthuredelstein@gmail.com Date: Mon Aug 27 16:32:20 2018 -0700
Bug 27097: Tor News signup banner
The banner disappears permanently: * if the user clicks a small "X" on the right * if the user clicks the "Sign Up" link * if the banner has already been shown 4 times --- src/chrome/content/aboutTor/aboutTor-content.js | 20 +++++++ src/chrome/content/aboutTor/aboutTor.xhtml | 13 +++++ src/chrome/content/torbutton.js | 17 ++++++ src/chrome/skin/aboutTor.css | 72 ++++++++++++++++++++++++ src/chrome/skin/newsletter_3x.png | Bin 0 -> 6735 bytes src/defaults/preferences/preferences.js | 1 + 6 files changed, 123 insertions(+)
diff --git a/src/chrome/content/aboutTor/aboutTor-content.js b/src/chrome/content/aboutTor/aboutTor-content.js index ae20505e..ac552e21 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", + kAboutTorHideTorNewsBanner: "AboutTor:HideTorNewsBanner",
get isAboutTor() { return content.document.documentURI.toLowerCase() == "about:tor"; @@ -58,6 +59,23 @@ var AboutTorListener = { } },
+ setupBannerClosing: function () { + let closer = content.document.getElementById("tornews-banner-closer"); + closer.addEventListener("click", function () { + sendAsyncMessage(this.kAboutTorHideTorNewsBanner); + }); + let link = content.document.querySelector("#tornews-banner-message a"); + link.addEventListener("click", function () { + // Wait until page unloads so we don't hide banner before that. + content.addEventListener("unload", function () { + sendAsyncMessage(this.kAboutTorHideTorNewsBanner); + }); + }); + bindPrefAndInit("extensions.torbutton.tornews_banner_countdown", + countdown => content.document.body.setAttribute( + "show-tornews-banner", countdown > 0)); + }, + onPageLoad: function() { // Arrange to update localized text and links. bindPrefAndInit("intl.locale.requested", aNewVal => { @@ -66,6 +84,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 ecdd0f85..87fe8307 100644 --- a/src/chrome/content/aboutTor/aboutTor.xhtml +++ b/src/chrome/content/aboutTor/aboutTor.xhtml @@ -31,6 +31,19 @@ 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> + </div> + <div id="tornews-banner-closer">×</div> + </div> + <div class="torcontent-container"> <div id="torstatus-version"/> <div id="torstatus" class="top"> diff --git a/src/chrome/content/torbutton.js b/src/chrome/content/torbutton.js index 9f6ba898..03dc3563 100644 --- a/src/chrome/content/torbutton.js +++ b/src/chrome/content/torbutton.js @@ -19,6 +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";
var m_tb_prefs = Services.prefs;
@@ -231,6 +232,14 @@ 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); + if (count > 0) { + m_tb_prefs.setIntPref(k_tb_tornews_banner_countdown, count - 1); + } +} + // Bug 1506 P2-P4: This code sets some version variables that are irrelevant. // It does read out some important environment variables, though. It is // called once per browser window.. This might belong in a component. @@ -339,6 +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", + torbutton_abouttor_message_handler); + + torbutton_tornews_banner_countdown();
setupPreferencesForMobile();
@@ -418,6 +431,10 @@ 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); + break; } },
diff --git a/src/chrome/skin/aboutTor.css b/src/chrome/skin/aboutTor.css index 2e6bab75..ce0a2f29 100644 --- a/src/chrome/skin/aboutTor.css +++ b/src/chrome/skin/aboutTor.css @@ -271,3 +271,75 @@ body:not([showmanual]) .showForManual { height: 50px; border-radius: 50px 50px 0 0; } + +/* Tor News Signup Banner + * While this banner is present, we need to + * offset the elements normally at the top of + * the window. + */ + +#tornews-banner { + display: flex; + align-items: center; + background-color: white; + color: var(--abouttor-bg-toron-color); + font-size: 16px; + height: 60px; + justify-content: space-between; + left: 0px; + right: 0px; + top: 0px; + transform: translateY(-60px); + transition: transform 200ms; +} + +body[show-tornews-banner="true"] #tornews-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; +} + +#tornews-banner-closer { + display: flex; + align-items: center; + font-size: 20px; + height: 22px; + justify-content: center; + margin: 4px 20px; + padding: 4px; + width: 22px; + -moz-user-select: none; +} + +#tornews-banner-closer:hover { + background-color: gray; + cursor: pointer; +} + +body[show-tornews-banner="false"] #torstatus-version, +body[show-tornews-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); + transition: transform 0ms; +} diff --git a/src/chrome/skin/newsletter_3x.png b/src/chrome/skin/newsletter_3x.png new file mode 100644 index 00000000..821572fa Binary files /dev/null and b/src/chrome/skin/newsletter_3x.png differ diff --git a/src/defaults/preferences/preferences.js b/src/defaults/preferences/preferences.js index 92d1c106..fecf0e69 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.tornews_banner_countdown", 4);
// Tor check and proxy prefs pref("extensions.torbutton.test_enabled",true);
tbb-commits@lists.torproject.org