commit d6319109718b5e2bbd82244bce9baeaaea46f356
Author: Kathy Brade <brade(a)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