[tbb-commits] [tor-browser/tor-browser-60.1.0esr-8.0-1] Bug 26962 - implement new features onboarding (part 2).

[gk at torproject.org]

commit d5f82c2a5747108cc60607b3b7608e9c34640848
Author: Kathy Brade <brade at 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 Identity button (located on the left side of the URL bar) to see the new circuit display.">
+<!ENTITY aboutTBUpdate.learnMore "Learn More">