[tbb-commits] [tor-browser/tor-browser-60.6.1esr-8.5-1] Bug 29768: Introduce new features to users

gk at torproject.org gk at torproject.org
Thu Apr 4 14:06:26 UTC 2019


commit e4a163b58530f37b7f292fe49ad7b882b2f046d0
Author: Kathy Brade <brade at pearlcrescent.com>
Date:   Wed Apr 3 16:14:46 2019 -0400

    Bug 29768: Introduce new features to users
    
    Add an "update" tour for the Tor Browser 8.5 release that contains two
    panels: Toolbar and Security (with appropriate description text and
    images).
    
    Display an attention-grabbing dot on the onboarding text bubble when
    the update tour is active. The animation lasts for 14 seconds.
---
 browser/app/profile/000-tor-browser.js             |   3 +-
 browser/extensions/onboarding/bootstrap.js         |   2 +
 .../content/img/figure_tor-security-level.png      | Bin 0 -> 12185 bytes
 .../content/img/figure_tor-toolbar-layout.png      | Bin 0 -> 5837 bytes
 .../extensions/onboarding/content/onboarding.css   |  54 +++++++++++++--
 .../extensions/onboarding/content/onboarding.js    |  75 ++++++++++++++++++++-
 6 files changed, 128 insertions(+), 6 deletions(-)

diff --git a/browser/app/profile/000-tor-browser.js b/browser/app/profile/000-tor-browser.js
index cca469725d28..c810c18a84a1 100644
--- a/browser/app/profile/000-tor-browser.js
+++ b/browser/app/profile/000-tor-browser.js
@@ -327,8 +327,9 @@ pref("browser.download.panel.shown", true);
 pref("dom.securecontext.whitelist_onions", true);
 
 // Onboarding.
+pref("browser.onboarding.tourset-version", 3);
 pref("browser.onboarding.newtour", "welcome,privacy,tor-network,circuit-display,security,expect-differences,onion-services");
-pref("browser.onboarding.updatetour", "welcome,privacy,tor-network,circuit-display,security,expect-differences,onion-services");
+pref("browser.onboarding.updatetour", "toolbar-update-8.5,security-update-8.5");
 pref("browser.onboarding.skip-tour-button.hide", true);
 
 // prefs to disable jump-list entries in the taskbar on Windows (see bug #12885)
diff --git a/browser/extensions/onboarding/bootstrap.js b/browser/extensions/onboarding/bootstrap.js
index a90bef0faaa2..6eec2122ce2a 100644
--- a/browser/extensions/onboarding/bootstrap.js
+++ b/browser/extensions/onboarding/bootstrap.js
@@ -38,6 +38,8 @@ const PREF_WHITELIST = [
   "onboarding-tour-tor-security",
   "onboarding-tour-tor-expect-differences",
   "onboarding-tour-tor-onion-services",
+  "onboarding-tour-tor-toolbar-update-8-5",
+  "onboarding-tour-tor-security-update-8-5",
 #if 0
 // Firefox tours. To reduce conflicts when rebasing against newer Firefox
 // code, we use the preprocessor to omit this code block.
diff --git a/browser/extensions/onboarding/content/img/figure_tor-security-level.png b/browser/extensions/onboarding/content/img/figure_tor-security-level.png
new file mode 100644
index 000000000000..5c7b8c5635fe
Binary files /dev/null and b/browser/extensions/onboarding/content/img/figure_tor-security-level.png differ
diff --git a/browser/extensions/onboarding/content/img/figure_tor-toolbar-layout.png b/browser/extensions/onboarding/content/img/figure_tor-toolbar-layout.png
new file mode 100644
index 000000000000..0a8161087827
Binary files /dev/null and b/browser/extensions/onboarding/content/img/figure_tor-toolbar-layout.png differ
diff --git a/browser/extensions/onboarding/content/onboarding.css b/browser/extensions/onboarding/content/onboarding.css
index e70cf3fa671a..4804c4fbadc6 100644
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -23,11 +23,44 @@
   display: block;
 }
 
-#onboarding-overlay-button {
-  padding: 10px 0 0 0;
+#onboarding-overlay-button-container {
+  padding: 16px 0 0 0;
   position: fixed;
-  cursor: pointer;
   top: 4px;
+}
+
+/*
+ * Define an animated attention-grabbing dot which is shown on the
+ * speech bubble when we are displaying the "updated" tour.
+*/
+#onboarding-overlay-button-container.onboarding-overlay-attention-dot::after {
+  display: inline-block;
+  position: relative;
+  content: " ";
+  width: 20px;
+  height: 20px;
+  top: -8px;
+  offset-inline-start: -16px;
+  background-color: #00E2B1;
+  border-radius: 50%;
+  animation: pulsate 2.0s ease-out;
+  animation-iteration-count: 7;
+}
+
+ at keyframes pulsate {
+  0% {
+    opacity: 1.0;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1.0;
+  }
+}
+
+#onboarding-overlay-button {
+  cursor: pointer;
   offset-inline-start: 12px;
   border: none;
   /* Set to none so no grey contrast background in the high-contrast mode */
@@ -78,7 +111,7 @@
   font-weight: 400;
   content: attr(aria-label);
   border: 1px solid transparent;
-  border-radius: 58px;
+  border-radius: 12px;
   padding: 10px 16px;
   width: auto;
   height: auto;
@@ -308,6 +341,19 @@
   grid-template-columns: [tour-page-start] 368px [tour-content-start] 1fr [tour-page-end];
 }
 
+.onboarding-tour-description-prefix {
+  display: inline-block;
+  margin-bottom: -8px; /* reduce vertical space below */
+  padding: 2px 10px;
+  vertical-align: center;
+  background-color: #F1F1F3;
+  border-radius: 4px;
+  min-height: 25px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
 .onboarding-tour-description {
   grid-row: tour-page-start / tour-page-end;
   grid-column: tour-page-start / tour-content-start;
diff --git a/browser/extensions/onboarding/content/onboarding.js b/browser/extensions/onboarding/content/onboarding.js
index ac5569d4b57b..acfcd93c5cef 100644
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -51,6 +51,17 @@ function createOnboardingTourDescription(div, title, description) {
 }
 
 /**
+ * Helper function to insert a prefix above the tour description.
+ */
+function addOnboardingTourPrefix(section, l10nId) {
+  let doc = section.ownerDocument;
+  let div = doc.createElement("div");
+  div.className = "onboarding-tour-description-prefix";
+  div.setAttribute("data-l10n-id", l10nId);
+  section.insertBefore(div, section.firstChild); // Insert as first child.
+}
+
+/**
  * Helper function to create the tour content UI element.
  */
 function createOnboardingTourContent(div, imageSrc) {
@@ -108,6 +119,7 @@ function createOnboardingTourButton(div, buttonId, l10nId, buttonElementTagName
  **/
 // Tor Browser tours:
 var onboardingTourset = {
+  // Tour items for new users:
   "welcome": {
     id: "onboarding-tour-tor-welcome",
     tourNameId: TORBROWSER_WELCOME_TOUR_NAME_KEY,
@@ -228,6 +240,47 @@ var onboardingTourset = {
       return div;
     },
   },
+  // Tour items for users who have updated their Tor Browser:
+  "toolbar-update-8.5": {
+    id: "onboarding-tour-tor-toolbar-update-8-5",
+    tourNameId: "onboarding.tour-tor-toolbar",
+    instantComplete: true,
+    getPage(win) {
+      let div = win.document.createElement("div");
+
+      let desc = createOnboardingTourDescription(div,
+        "onboarding.tour-tor-toolbar-update-8.5.title", "onboarding.tour-tor-toolbar-update-8.5.description");
+      addOnboardingTourPrefix(desc, "onboarding.tour-tor-update.prefix-updated");
+
+      createOnboardingTourContent(div, "resource://onboarding/img/figure_tor-toolbar-layout.png");
+      createOnboardingTourButton(div,
+        "onboarding-tour-tor-toolbar-next-button", "onboarding.tour-tor-toolbar-update-8.5.next-button");
+
+      return div;
+    },
+  },
+  "security-update-8.5": {
+    id: "onboarding-tour-tor-security-update-8-5",
+    tourNameId: "onboarding.tour-tor-security",
+    getPage(win) {
+      let div = win.document.createElement("div");
+
+      let desc = createOnboardingTourDescription(div,
+        "onboarding.tour-tor-security-update-8.5.title", "onboarding.tour-tor-security-update-8.5.description");
+      addOnboardingTourPrefix(desc, "onboarding.tour-tor-update.prefix-new");
+
+      createOnboardingTourContent(div, "resource://onboarding/img/figure_tor-security-level.png");
+      let btnContainer = createOnboardingTourButton(div,
+        "onboarding-tour-tor-security-button", "onboarding.tour-tor-security-level.button");
+      btnContainer.className = "onboarding-tour-tor-action-button-container";
+      // It is confusing to use the two onion-services IDs below, but they
+      // provide the functionality and translated string ("Done") that we need.
+      createOnboardingTourButton(div,
+        "onboarding-tour-tor-onion-services-next-button", "onboarding.tour-tor-onion-services.next-button");
+
+      return div;
+    },
+  },
 };
 #if 0
 // Firefox tours. To reduce conflicts when rebasing against newer Firefox
@@ -669,6 +722,7 @@ class Onboarding {
     } else {
       this._overlayIcon.classList.remove("onboarding-speech-bubble");
     }
+    this.updateAttentionDot();
   }
 
   _initUI() {
@@ -683,7 +737,10 @@ class Onboarding {
     this._overlayIcon = this._renderOverlayButton();
     this._overlayIcon.addEventListener("click", this);
     this._overlayIcon.addEventListener("keypress", this);
-    body.insertBefore(this._overlayIcon, body.firstChild);
+    let buttonContainer = this._window.document.createElement("div");
+    buttonContainer.id = "onboarding-overlay-button-container";
+    buttonContainer.appendChild(this._overlayIcon);
+    body.insertBefore(buttonContainer, body.firstChild);
 
     this._overlay = this._renderOverlay();
     this._overlay.addEventListener("click", this);
@@ -917,6 +974,7 @@ class Onboarding {
       case "onboarding-tour-tor-security-next-button":
       case "onboarding-tour-tor-expect-differences-next-button":
       case "onboarding-tour-tor-onion-services-next-button":
+      case "onboarding-tour-tor-toolbar-next-button":
         this.gotoNextTourItem();
         handledTourActionClick = true;
         break;
@@ -1131,7 +1189,9 @@ class Onboarding {
     this._overlayIcon.dispatchEvent(new this._window.CustomEvent("Agent:Destroy"));
 
     this._clearPrefObserver();
+    let buttonContainer = this._overlayIcon.parentElement;
     this._overlayIcon.remove();
+    buttonContainer.remove();
     if (this._overlay) {
       // send overlay-session telemetry
       this.hideOverlay();
@@ -1155,9 +1215,21 @@ class Onboarding {
         this._overlayIcon.classList.add("onboarding-watermark");
         break;
     }
+    this.updateAttentionDot();
     return true;
   }
 
+  // Display an attention-grabbing dot on the speech bubble if the
+  // bubble is visible and we are showing the "update" tour.
+  updateAttentionDot() {
+    let buttonContainer = this._overlayIcon.parentElement;
+    if ((this._bubbleState === "bubble") && (this._tourType === "update")) {
+      buttonContainer.classList.add("onboarding-overlay-attention-dot");
+    } else {
+      buttonContainer.classList.remove("onboarding-overlay-attention-dot");
+    }
+  }
+
   showOverlay() {
     if (this._tourItems.length == 0) {
       // Lazy loading until first toggle.
@@ -1418,6 +1490,7 @@ class Onboarding {
     // After the notification mute on the 1st session,
     // we don't want to show the speech bubble by default
     this._overlayIcon.classList.remove("onboarding-speech-bubble");
+    this.updateAttentionDot();
 
     let queue = this._getNotificationQueue();
     let totalMaxTime = Services.prefs.getIntPref("browser.onboarding.notification.max-life-time-all-tours-ms");



More information about the tbb-commits mailing list