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

[gk at torproject.org]

commit 7706b044c9a013ae205168038ae8a734b2249741
Author: Kathy Brade <brade at pearlcrescent.com>
Date:   Tue Apr 9 14:38:35 2019 -0400

    fixup! Bug 29768: Introduce new features to users
---
 .../extensions/onboarding/content/onboarding.css   | 21 +++++++++----
 .../extensions/onboarding/content/onboarding.js    | 34 +++++++++++++---------
 2 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/browser/extensions/onboarding/content/onboarding.css b/browser/extensions/onboarding/content/onboarding.css
index 4804c4fbadc6..939721677c4f 100644
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -341,14 +341,13 @@
   grid-template-columns: [tour-page-start] 368px [tour-content-start] 1fr [tour-page-end];
 }
 
-.onboarding-tour-description-prefix {
+.onboarding-tour-description-highlight {
   display: inline-block;
-  margin-bottom: -8px; /* reduce vertical space below */
-  padding: 2px 10px;
-  vertical-align: center;
+  margin-inline-start: 8px;
+  padding: 6px 8px;
+  vertical-align: middle;
   background-color: #F1F1F3;
   border-radius: 4px;
-  min-height: 25px;
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
@@ -373,6 +372,12 @@
   color: #420c5d;
 }
 
+.onboarding-tour-description-suffix {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 16px;
+}
+
 .onboarding-tour-content {
   grid-row: tour-page-start / tour-button-start;
   grid-column: tour-content-start / tour-page-end;
@@ -391,6 +396,12 @@
   transform: scaleX(-1);
 }
 
+/* The image contained in figure_tor-security-level.png contains English text;
+ * therefore it should not be flipped when the document direction is RTL. */
+#onboarding-tour-tor-security-update-8-5-page > .onboarding-tour-content > img:dir(rtl) {
+  transform: scaleX(1);
+}
+
 .onboarding-tour-content > iframe {
   width: 100%;
   height: 100%;
diff --git a/browser/extensions/onboarding/content/onboarding.js b/browser/extensions/onboarding/content/onboarding.js
index acfcd93c5cef..1326aebc9bcf 100644
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -51,17 +51,6 @@ 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) {
@@ -189,11 +178,18 @@ var onboardingTourset = {
   "security": {
     id: "onboarding-tour-tor-security",
     tourNameId: "onboarding.tour-tor-security",
+    highlightId: "onboarding.tour-tor-update.prefix-new",
     getPage(win) {
       let div = win.document.createElement("div");
 
-      createOnboardingTourDescription(div,
+      let desc = createOnboardingTourDescription(div,
         "onboarding.tour-tor-security.title", "onboarding.tour-tor-security.description");
+      let additionalDesc = win.document.createElement("p");
+      additionalDesc.className = "onboarding-tour-description-suffix";
+      additionalDesc.setAttribute("data-l10n-id",
+        "onboarding.tour-tor-security.description-suffix");
+      desc.appendChild(additionalDesc);
+
       createOnboardingTourContent(div, "resource://onboarding/img/figure_tor-security.png");
       let btnContainer = createOnboardingTourButton(div,
         "onboarding-tour-tor-security-button", "onboarding.tour-tor-security-level.button");
@@ -244,13 +240,13 @@ var onboardingTourset = {
   "toolbar-update-8.5": {
     id: "onboarding-tour-tor-toolbar-update-8-5",
     tourNameId: "onboarding.tour-tor-toolbar",
+    highlightId: "onboarding.tour-tor-update.prefix-updated",
     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,
@@ -262,12 +258,12 @@ var onboardingTourset = {
   "security-update-8.5": {
     id: "onboarding-tour-tor-security-update-8-5",
     tourNameId: "onboarding.tour-tor-security",
+    highlightId: "onboarding.tour-tor-update.prefix-new",
     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,
@@ -1777,7 +1773,17 @@ class Onboarding {
       let tourPanelId = `${tour.id}-page`;
       tab.setAttribute("aria-controls", tourPanelId);
 
+      if (tour.highlightId) {
+        // Add [New] or [Updated] text after this navigation item to draw
+        // attention to it.
+        let highlight = this._window.document.createElement("span");
+        highlight.className = "onboarding-tour-description-highlight";
+        highlight.textContent = this._bundle.GetStringFromName(tour.highlightId);
+        tab.appendChild(highlight);
+      }
+
       li.appendChild(tab);
+
       itemsFrag.appendChild(li);
       // Dynamically create tour pages
       let div = tour.getPage(this._window, this._bundle);