commit d6319109718b5e2bbd82244bce9baeaaea46f356 Author: Kathy Brade <brade@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