[tbb-commits] [torbutton/master] Bug 27097: Tor News signup banner
gk at torproject.org
gk at torproject.org
Mon Sep 17 19:25:17 UTC 2018
commit b55672f07a24e5611510840012a32108553cf413
Author: Arthur Edelstein <arthuredelstein at 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 at 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);
More information about the tbb-commits
mailing list