[tbb-commits] [tor-browser/tor-browser-60.6.1esr-8.5-1] squash! Bug 26961: New user onboarding.

[gk at torproject.org]

commit d6319109718b5e2bbd82244bce9baeaaea46f356
Author: Kathy Brade <brade at pearlcrescent.com>
Date:   Tue Mar 26 11:12:35 2019 -0400

    squash! Bug 26961: New user onboarding.
    
    Also fix bug 27484: Improve navigation within onboarding.
---
 .../extensions/onboarding/content/onboarding.css   | 25 +++++++++++
 .../extensions/onboarding/content/onboarding.js    | 51 ++++++++++++++++------
 2 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/browser/extensions/onboarding/content/onboarding.css b/browser/extensions/onboarding/content/onboarding.css
index fa5f58975c3a..e70cf3fa671a 100644
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -401,6 +401,31 @@
   opacity: 0.5;
 }
 
+/* Tor action buttons appear in the description column rather than the content one. */
+.onboarding-tour-tor-action-button-container {
+  /* Get higher z-index in order to ensure buttons within container are selectable */
+  z-index: 2;
+  grid-row: tour-button-start / tour-page-end;
+  grid-column: tour-page-start / tour-content-start;
+}
+
+.onboarding-tour-tor-action-button-container > .onboarding-tour-action-button {
+  margin-inline-start: 40px;	/* match .onboarding-tour-description */
+  float: inline-start;
+  background: #e6e6e6;
+  color: #303030;
+}
+
+.onboarding-tour-tor-action-button-container > .onboarding-tour-action-button:hover:not([disabled])  {
+  background: #d6d6d6;
+  cursor: pointer;
+}
+
+.onboarding-tour-tor-action-button-container > .onboarding-tour-action-button:active:not([disabled]) {
+  background: #c6c6c6;
+}
+
+
 /* Tour Icons */
 #onboarding-tour-singlesearch.onboarding-tour-item::after,
 #onboarding-notification-bar[data-target-tour-id=onboarding-tour-singlesearch] #onboarding-notification-tour-title::before {
diff --git a/browser/extensions/onboarding/content/onboarding.js b/browser/extensions/onboarding/content/onboarding.js
index 8f62e4f3b9d8..ac5569d4b57b 100644
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -119,7 +119,7 @@ var onboardingTourset = {
         "onboarding.tour-tor-welcome.title", "onboarding.tour-tor-welcome.description");
       createOnboardingTourContent(div, "resource://onboarding/img/figure_tor-welcome.png");
       createOnboardingTourButton(div,
-        "onboarding-tour-tor-welcome-button", "onboarding.tour-tor-welcome.button");
+        "onboarding-tour-tor-welcome-button", "onboarding.tour-tor-welcome.next-button");
 
       return div;
     },
@@ -165,8 +165,11 @@ var onboardingTourset = {
       createOnboardingTourDescription(div,
         "onboarding.tour-tor-circuit-display.title", "onboarding.tour-tor-circuit-display.description");
       createOnboardingTourContent(div, "resource://onboarding/img/figure_tor-circuit-display.png");
-      createOnboardingTourButton(div,
+      let btnContainer = createOnboardingTourButton(div,
         "onboarding-tour-tor-circuit-display-button", "onboarding.tour-tor-circuit-display.button");
+      btnContainer.className = "onboarding-tour-tor-action-button-container";
+      createOnboardingTourButton(div,
+        "onboarding-tour-tor-circuit-display-next-button", "onboarding.tour-tor-circuit-display.next-button");
 
       return div;
     },
@@ -180,8 +183,11 @@ var onboardingTourset = {
       createOnboardingTourDescription(div,
         "onboarding.tour-tor-security.title", "onboarding.tour-tor-security.description");
       createOnboardingTourContent(div, "resource://onboarding/img/figure_tor-security.png");
-      createOnboardingTourButton(div,
+      let btnContainer = createOnboardingTourButton(div,
         "onboarding-tour-tor-security-button", "onboarding.tour-tor-security-level.button");
+      btnContainer.className = "onboarding-tour-tor-action-button-container";
+      createOnboardingTourButton(div,
+        "onboarding-tour-tor-security-next-button", "onboarding.tour-tor-security-level.next-button");
 
       return div;
     },
@@ -195,9 +201,11 @@ var onboardingTourset = {
       createOnboardingTourDescription(div,
         "onboarding.tour-tor-expect-differences.title", "onboarding.tour-tor-expect-differences.description");
       createOnboardingTourContent(div, "resource://onboarding/img/figure_tor-expect-differences.png");
+      let btnContainer = createOnboardingTourButton(div,
+        "onboarding-tour-tor-expect-differences-button", "onboarding.tour-tor-expect-differences.button");
+      btnContainer.className = "onboarding-tour-tor-action-button-container";
       createOnboardingTourButton(div,
-                        "onboarding-tour-tor-expect-differences-button",
-                        "onboarding.tour-tor-expect-differences.button");
+        "onboarding-tour-tor-expect-differences-next-button", "onboarding.tour-tor-expect-differences.next-button");
 
       return div;
     },
@@ -211,9 +219,11 @@ var onboardingTourset = {
       createOnboardingTourDescription(div,
         "onboarding.tour-tor-onion-services.title", "onboarding.tour-tor-onion-services.description");
       createOnboardingTourContent(div, "resource://onboarding/img/figure_tor-onion-services.png");
+      let btnContainer = createOnboardingTourButton(div,
+        "onboarding-tour-tor-onion-services-button", "onboarding.tour-tor-onion-services.button");
+      btnContainer.className = "onboarding-tour-tor-action-button-container";
       createOnboardingTourButton(div,
-                        "onboarding-tour-tor-onion-services-button",
-                        "onboarding.tour-tor-onion-services.button");
+        "onboarding-tour-tor-onion-services-next-button", "onboarding.tour-tor-onion-services.next-button");
 
       return div;
     },
@@ -901,15 +911,13 @@ class Onboarding {
         this._removeTourFromNotificationQueue(tourId);
         break;
       case "onboarding-tour-tor-welcome-button":
-        this.gotoPage("onboarding-tour-tor-privacy");
-        handledTourActionClick = true;
-        break;
       case "onboarding-tour-tor-privacy-button":
-        this.gotoPage("onboarding-tour-tor-network");
-        handledTourActionClick = true;
-        break;
       case "onboarding-tour-tor-network-button":
-        this.gotoPage("onboarding-tour-tor-circuit-display");
+      case "onboarding-tour-tor-circuit-display-next-button":
+      case "onboarding-tour-tor-security-next-button":
+      case "onboarding-tour-tor-expect-differences-next-button":
+      case "onboarding-tour-tor-onion-services-next-button":
+        this.gotoNextTourItem();
         handledTourActionClick = true;
         break;
       case "onboarding-tour-tor-circuit-display-button":
@@ -951,6 +959,21 @@ class Onboarding {
     }
   }
 
+  gotoNextTourItem() {
+    let activeTourID = this._activeTourId;
+    if (activeTourID) {
+      let idx = this._tourItems.findIndex(item => (item.id === activeTourID));
+      if (idx >= 0) {
+        // If at the end of the list, close onboarding; otherwise, go to next.
+        if (++idx >= this._tourItems.length) {
+          this.hideOverlay();
+        } else {
+          this.gotoPage(this._tourItems[idx].id);
+        }
+      }
+    }
+  }
+
   /**
    * Wrap keyboard focus within the dialog.
    * When moving forward, focus on the first element when the current focused