squash! Bug 26961: New user onboarding. (d6319109) · Commits · Tommy Webb / Tor Browser

browser/extensions/onboarding/content/onboarding.css

+25 −0

Original line number	Diff line number	Diff line
		@@ -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 {

browser/extensions/onboarding/content/onboarding.js

+37 −14

Original line number	Diff line number	Diff line
		@@ -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