commit d5f82c2a5747108cc60607b3b7608e9c34640848 Author: Kathy Brade brade@pearlcrescent.com Date: Fri Aug 24 14:52:52 2018 -0400

Bug 26962 - implement new features onboarding (part 2).

Add a "New Circuit Display" promotional banner to the about:tbupdate page. --- .../base/content/abouttbupdate/aboutTBUpdate.css | 25 ++++++++++++++++++++++ .../base/content/abouttbupdate/aboutTBUpdate.js | 9 +++++++- .../base/content/abouttbupdate/aboutTBUpdate.xhtml | 5 +++++ browser/base/content/tab-content.js | 10 +++++++++ .../locales/en-US/chrome/browser/aboutTBUpdate.dtd | 4 ++++ 5 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/browser/base/content/abouttbupdate/aboutTBUpdate.css b/browser/base/content/abouttbupdate/aboutTBUpdate.css index 2b73552729fc..7ec1950e1474 100644 --- a/browser/base/content/abouttbupdate/aboutTBUpdate.css +++ b/browser/base/content/abouttbupdate/aboutTBUpdate.css @@ -53,6 +53,31 @@ a { margin-bottom: 20px; }

+#new-features { + margin-bottom: 15px; + padding: 10px; + text-align: center; + /* swap text and background colors in this section */ + color: var(--abouttor-bg-toron-color); + background-color: var(--abouttor-text-color); +} + +#new-features-description { + margin: 15px auto; + max-width: 500px; + font-size: 85%; +} + +#new-features button { + padding: 8px 20px; + border: none; + border-radius: 3px; + font-size: 90%; + color: var(--abouttor-text-color); + background-color: var(--abouttor-bg-toron-color); + cursor: pointer; +} + #changelog-container { margin: 0px 20px 20px 20px; } diff --git a/browser/base/content/abouttbupdate/aboutTBUpdate.js b/browser/base/content/abouttbupdate/aboutTBUpdate.js index 8243647c5708..fa8bd3241a28 100644 --- a/browser/base/content/abouttbupdate/aboutTBUpdate.js +++ b/browser/base/content/abouttbupdate/aboutTBUpdate.js @@ -1,4 +1,4 @@ -// Copyright (c) 2015, The Tor Project, Inc. +// Copyright (c) 2018, The Tor Project, Inc. // See LICENSE for licensing information. // // vim: set sw=2 sts=2 ts=8 et syntax=javascript: @@ -8,3 +8,10 @@ function init() let event = new CustomEvent("AboutTBUpdateLoad", { bubbles: true }); document.dispatchEvent(event); } + +function showNewFeaturesOnboarding() +{ + let event = new CustomEvent("AboutTBUpdateNewFeaturesOnboarding", + { bubbles: true }); + document.dispatchEvent(event); +} diff --git a/browser/base/content/abouttbupdate/aboutTBUpdate.xhtml b/browser/base/content/abouttbupdate/aboutTBUpdate.xhtml index fe8ed69b537f..a046f2658a5a 100644 --- a/browser/base/content/abouttbupdate/aboutTBUpdate.xhtml +++ b/browser/base/content/abouttbupdate/aboutTBUpdate.xhtml @@ -28,6 +28,11 @@ </div> </div> <br clear="all"/> +<div id="new-features"> + <div>&aboutTBUpdate.circuitDisplayHeading;</div> + <div id="new-features-description">&aboutTBUpdate.circuitDisplayDescription;</div> + <button onclick="showNewFeaturesOnboarding()">&aboutTBUpdate.learnMore;</button> +</div> <div id="changelog-container"> <div id="changelog-heading">&aboutTBUpdate.changeLogHeading;</div> <div id="changelog"></div> diff --git a/browser/base/content/tab-content.js b/browser/base/content/tab-content.js index e0cf6747aaa4..c0987dbc05c7 100644 --- a/browser/base/content/tab-content.js +++ b/browser/base/content/tab-content.js @@ -359,6 +359,8 @@ AboutReaderListener.init(); let AboutTBUpdateListener = { init: function(chromeGlobal) { chromeGlobal.addEventListener('AboutTBUpdateLoad', this, false, true); + chromeGlobal.addEventListener("AboutTBUpdateNewFeaturesOnboarding", + this, false, true); },

get isAboutTBUpdate() { @@ -373,6 +375,9 @@ let AboutTBUpdateListener = { case "AboutTBUpdateLoad": this.onPageLoad(); break; + case "AboutTBUpdateNewFeaturesOnboarding": + this.onNewFeaturesOnboarding(); + break; case "pagehide": this.onPageHide(aEvent); break; @@ -406,6 +411,11 @@ let AboutTBUpdateListener = { removeEventListener("pagehide", this, true); },

+ onNewFeaturesOnboarding: function() { + // Tell the onboarding extension to open the circuit display onboarding. + sendAsyncMessage("Onboarding:OnContentMessage", + {action: "tor-open-circuit-display-page"}); + }, }; AboutTBUpdateListener.init(this); #endif diff --git a/browser/locales/en-US/chrome/browser/aboutTBUpdate.dtd b/browser/locales/en-US/chrome/browser/aboutTBUpdate.dtd index 37567bd7e38c..f7b3f2ed8fcd 100644 --- a/browser/locales/en-US/chrome/browser/aboutTBUpdate.dtd +++ b/browser/locales/en-US/chrome/browser/aboutTBUpdate.dtd @@ -4,3 +4,7 @@ <!ENTITY aboutTBUpdate.linkLabel "visit our website"> <!ENTITY aboutTBUpdate.linkSuffix "."> <!ENTITY aboutTBUpdate.changeLogHeading "Changelog:"> + +<!ENTITY aboutTBUpdate.circuitDisplayHeading "New, Redesigned Circuit Display"> +<!ENTITY aboutTBUpdate.circuitDisplayDescription "The Tor circuit display has been relocated and improved! Click the Site&#160;Identity button (located on the left side of the URL bar) to see the new circuit display."> +<!ENTITY aboutTBUpdate.learnMore "Learn More">