Bug 1392474 - [Onboarding] replace the check box with a “Skip Tour” button r=Fischer

MozReview-Commit-ID: IECHQf03n0z

--HG--
rename : browser/extensions/onboarding/test/browser/browser_onboarding_hide_all.js => browser/extensions/onboarding/test/browser/browser_onboarding_skip_tour.js
extra : rebase_source : d558fa3d3a2777526a76f2683c249984595e8ca6
This commit is contained in:
Ricky Chien 2017-09-01 23:47:40 +08:00
Родитель 0f543d7829
Коммит e3a75f22f7
13 изменённых файлов: 60 добавлений и 145 удалений

Просмотреть файл

@ -1736,7 +1736,6 @@ pref("browser.suppress_first_window_animation", true);
pref("browser.onboarding.enabled", true);
// Mark this as an upgraded profile so we don't offer the initial new user onboarding tour.
pref("browser.onboarding.tourset-version", 2);
pref("browser.onboarding.hidden", false);
// On the Activity-Stream page, the snippet's position overlaps with our notification.
// So use `browser.onboarding.notification.finished` to let the AS page know
// if our notification is finished and safe to show their snippet.

Просмотреть файл

@ -32,7 +32,6 @@ var OnboardingTourType = {
} else if (Services.prefs.getIntPref(PREF_SEEN_TOURSET_VERSION) < TOURSET_VERSION) {
// show the update user tour when tour set version is larger than the seen tourset version
Services.prefs.setStringPref(PREF_TOUR_TYPE, "update");
Services.prefs.setBoolPref("browser.onboarding.hidden", false);
// Reset all the notification-related prefs because tours update.
Services.prefs.setBoolPref("browser.onboarding.notification.finished", false);
Services.prefs.clearUserPref("browser.onboarding.notification.prompt-count");

Просмотреть файл

@ -8,7 +8,6 @@ Open `about:config` page and filter with `onboarding` keyword. Then set followin
```
browser.onboarding.disabled = false
browser.onboarding.hidden = false
browser.onboarding.tour-set = "new" // for new user tour, or "update" for update user tour
```
And make sure the value of `browser.onboarding.tourset-verion` and `browser.onboarding.seen-tourset-verion` are the same.

3
browser/extensions/onboarding/bootstrap.js поставляемый
Просмотреть файл

@ -20,7 +20,6 @@ const BROWSER_READY_NOTIFICATION = "browser-delayed-startup-finished";
const BROWSER_SESSION_STORE_NOTIFICATION = "sessionstore-windows-restored";
const PREF_WHITELIST = [
["browser.onboarding.enabled", PREF_BOOL],
["browser.onboarding.hidden", PREF_BOOL],
["browser.onboarding.notification.finished", PREF_BOOL],
["browser.onboarding.notification.prompt-count", PREF_INT],
["browser.onboarding.notification.last-time-of-changing-tour-sec", PREF_INT],
@ -48,7 +47,7 @@ let waitingForBrowserReady = true;
*
* @param {Array} prefs the array of prefs to set.
* The array element carrys info to set pref, should contain
* - {String} name the pref name, such as `browser.onboarding.hidden`
* - {String} name the pref name
* - {*} value the value to set
**/
function setPrefs(prefs) {

Просмотреть файл

@ -165,14 +165,13 @@
}
#onboarding-overlay-dialog > footer {
grid-row: footer-start;
grid-column: dialog-start / tour-end;
font-size: 13px;
}
#onboarding-tour-hidden-checkbox {
#onboarding-skip-tour-button {
margin-inline-start: 27px;
margin-inline-end: 10px;
margin-bottom: 27px;
}
/* Onboarding tour list */
@ -324,6 +323,8 @@
}
.onboarding-tour-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-content-start / tour-page-end;
}
@ -350,14 +351,14 @@
}
/* Remove default dotted outline around buttons' text */
.onboarding-tour-action-button::-moz-focus-inner,
#onboarding-overlay button::-moz-focus-inner,
#onboarding-overlay-button::-moz-focus-inner {
border: 0;
}
/* Keyboard focus specific outline */
.onboarding-tour-action-button:-moz-focusring,
#onboarding-notification-action-btn:-moz-focusring,
#onboarding-overlay button:-moz-focusring,
.onboarding-action-button:-moz-focusring,
#onboarding-tour-list .onboarding-tour-item:focus {
outline: 2px solid rgba(0,149,221,0.5);
outline-offset: 1px;
@ -556,7 +557,7 @@ a#onboarding-tour-screenshots-button:visited {
background-image: url("chrome://branding/content/icon64.png");
}
#onboarding-notification-action-btn {
.onboarding-action-button {
background: #fbfbfb;
/* With 1px border, could see a border in the high-constrast mode */
border: 1px solid #c1c1c1;
@ -569,12 +570,12 @@ a#onboarding-tour-screenshots-button:visited {
min-width: 130px;
}
#onboarding-notification-action-btn:hover {
.onboarding-action-button:hover {
background-color: #ebebeb;
cursor: pointer;
}
#onboarding-notification-action-btn:active {
.onboarding-action-button:active {
background-color: #dadada;
}

Просмотреть файл

@ -452,11 +452,6 @@ class Onboarding {
}
this._prefsObserved = new Map();
this._prefsObserved.set("browser.onboarding.hidden", prefValue => {
if (prefValue) {
this.destroy();
}
});
this._tours.forEach(tour => {
let tourId = tour.id;
this._prefsObserved.set(`browser.onboarding.tour.${tourId}.completed`, () => {
@ -499,6 +494,11 @@ class Onboarding {
this.showOverlay();
this.gotoPage(this._firstUncompleteTour.id);
break;
case "onboarding-skip-tour-button":
this.hideNotification();
this.hideOverlay();
this.skipTour();
break;
case "onboarding-overlay-close-btn":
// If the clicking target is directly on the outer-most overlay,
// that means clicking outside the tour content area.
@ -666,10 +666,6 @@ class Onboarding {
}
hideOverlay() {
let hiddenCheckbox = this._window.document.getElementById("onboarding-tour-hidden-checkbox");
if (hiddenCheckbox.checked) {
this.hide();
}
this.toggleModal(this._overlay.classList.toggle("onboarding-opened"));
}
@ -993,7 +989,7 @@ class Onboarding {
<h1 id="onboarding-notification-tour-title"></h1>
<p id="onboarding-notification-tour-message"></p>
</div>
<button id="onboarding-notification-action-btn"></button>
<button id="onboarding-notification-action-btn" class="onboarding-action-button"></button>
</section>
<button id="onboarding-notification-close-btn" class="onboarding-close-btn"></button>
`;
@ -1004,13 +1000,9 @@ class Onboarding {
return footer;
}
hide() {
skipTour() {
this.setToursCompleted(this._tours.map(tour => tour.id));
sendMessageToChrome("set-prefs", [
{
name: "browser.onboarding.hidden",
value: true
},
{
name: "browser.onboarding.notification.finished",
value: true
@ -1030,7 +1022,7 @@ class Onboarding {
<ul id="onboarding-tour-list" role="tablist"></ul>
</nav>
<footer id="onboarding-footer">
<input type="checkbox" id="onboarding-tour-hidden-checkbox" /><label for="onboarding-tour-hidden-checkbox"></label>
<button id="onboarding-skip-tour-button" class="onboarding-action-button"></button>
</footer>
<button id="onboarding-overlay-close-btn" class="onboarding-close-btn"></button>
</div>
@ -1039,8 +1031,8 @@ class Onboarding {
this._dialog = div.querySelector(`[role="dialog"]`);
this._dialog.id = ONBOARDING_DIALOG_ID;
div.querySelector("label[for='onboarding-tour-hidden-checkbox']").textContent =
this._bundle.GetStringFromName("onboarding.hidden-checkbox-label-text");
div.querySelector("#onboarding-skip-tour-button").textContent =
this._bundle.GetStringFromName("onboarding.skip-tour-button-label");
div.querySelector("#onboarding-header").textContent =
this._bundle.GetStringFromName("onboarding.overlay-title2");
let closeBtn = div.querySelector("#onboarding-overlay-close-btn");
@ -1154,20 +1146,18 @@ if (Services.prefs.getBoolPref("browser.onboarding.enabled", false)) {
return;
}
if (!Services.prefs.getBoolPref("browser.onboarding.hidden", false)) {
let window = evt.target.defaultView;
let location = window.location.href;
if (location == ABOUT_NEWTAB_URL || location == ABOUT_HOME_URL) {
// We just want to run tests as quick as possible
// so in the automation test, we don't do `requestIdleCallback`.
if (Cu.isInAutomation) {
new Onboarding(window);
return;
}
window.requestIdleCallback(() => {
new Onboarding(window);
});
let window = evt.target.defaultView;
let location = window.location.href;
if (location == ABOUT_NEWTAB_URL || location == ABOUT_HOME_URL) {
// We just want to run tests as quick as possible
// so in the automation test, we don't do `requestIdleCallback`.
if (Cu.isInAutomation) {
new Onboarding(window);
return;
}
window.requestIdleCallback(() => {
new Onboarding(window);
});
}
}, true);
}

Просмотреть файл

@ -3,7 +3,7 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
# LOCALIZATION NOTE(onboarding.overlay-title2): This string will be used in the overlay title.
onboarding.overlay-title2=Lets get started
onboarding.hidden-checkbox-label-text=Mark all as complete, and hide the tour
onboarding.skip-tour-button-label=Skip Tour
#LOCALIZATION NOTE(onboarding.button.learnMore): this string is used as a button label, displayed near the message, and shared across all the onboarding notifications.
onboarding.button.learnMore=Learn More
# LOCALIZATION NOTE(onboarding.overlay-icon-tooltip2): This string will be used

Просмотреть файл

@ -3,7 +3,6 @@ support-files =
head.js
[browser_onboarding_accessibility.js]
[browser_onboarding_hide_all.js]
[browser_onboarding_keyboard.js]
skip-if = debug || os == "mac" # Full keyboard navigation on OSX only works if Full Keyboard Access setting is set to All Control in System Keyboard Preferences
[browser_onboarding_notification.js]
@ -13,5 +12,6 @@ skip-if = debug || os == "mac" # Full keyboard navigation on OSX only works if F
[browser_onboarding_notification_5.js]
[browser_onboarding_notification_click_auto_complete_tour.js]
[browser_onboarding_select_default_tour.js]
[browser_onboarding_skip_tour.js]
[browser_onboarding_tours.js]
[browser_onboarding_tourset.js]

Просмотреть файл

@ -1,84 +0,0 @@
/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
function assertOnboardingDestroyed(browser) {
return ContentTask.spawn(browser, {}, function() {
let expectedRemovals = [
"#onboarding-overlay",
"#onboarding-overlay-button"
];
for (let selector of expectedRemovals) {
let removal = content.document.querySelector(selector);
ok(!removal, `Should remove ${selector} onboarding element`);
}
});
}
add_task(async function test_hide_onboarding_tours() {
resetOnboardingDefaultState();
let tourIds = TOUR_IDs;
let expectedPrefUpdates = [
promisePrefUpdated("browser.onboarding.hidden", true),
promisePrefUpdated("browser.onboarding.notification.finished", true)
];
tourIds.forEach((id, idx) => expectedPrefUpdates.push(promisePrefUpdated(`browser.onboarding.tour.${id}.completed`, true)));
let tabs = [];
for (let url of URLs) {
let tab = await openTab(url);
await promiseOnboardingOverlayLoaded(tab.linkedBrowser);
await BrowserTestUtils.synthesizeMouseAtCenter("#onboarding-overlay-button", {}, tab.linkedBrowser);
await promiseOnboardingOverlayOpened(tab.linkedBrowser);
tabs.push(tab);
}
let doc = content.document;
await BrowserTestUtils.synthesizeMouseAtCenter("#onboarding-tour-hidden-checkbox", {}, gBrowser.selectedBrowser);
await BrowserTestUtils.synthesizeMouseAtCenter("#onboarding-overlay-close-btn", {}, gBrowser.selectedBrowser);
await Promise.all(expectedPrefUpdates);
ok(!doc.getElementById("onboarding-overlay-button"));
for (let i = tabs.length - 1; i >= 0; --i) {
let tab = tabs[i];
await assertOnboardingDestroyed(tab.linkedBrowser);
await BrowserTestUtils.removeTab(tab);
}
});
add_task(async function test_refresh_onboarding_tours_after_hide() {
resetOnboardingDefaultState();
let tourIds = TOUR_IDs;
let expectedPrefUpdates = [
promisePrefUpdated("browser.onboarding.hidden", true),
promisePrefUpdated("browser.onboarding.notification.finished", true)
];
tourIds.forEach((id, idx) => expectedPrefUpdates.push(promisePrefUpdated(`browser.onboarding.tour.${id}.completed`, true)));
let tabs = [];
for (let url of URLs) {
let tab = await openTab(url);
await promiseOnboardingOverlayLoaded(tab.linkedBrowser);
await BrowserTestUtils.synthesizeMouseAtCenter("#onboarding-overlay-button", {}, tab.linkedBrowser);
await promiseOnboardingOverlayOpened(tab.linkedBrowser);
tabs.push(tab);
}
await BrowserTestUtils.synthesizeMouseAtCenter("#onboarding-tour-hidden-checkbox", {}, gBrowser.selectedBrowser);
await BrowserTestUtils.synthesizeMouseAtCenter("#onboarding-overlay-close-btn", {}, gBrowser.selectedBrowser);
await Promise.all(expectedPrefUpdates);
ok(!content.document.getElementById("onboarding-overlay-button"), "should not show fox icon");
for (let i = tabs.length - 1; i >= 0; --i) {
let tab = tabs[i];
await reloadTab(tab);
await waitUntilWindowIdle(tab.linkedBrowser);
ok(!content.document.getElementById("onboarding-overlay-button"), "should not show fox icon after refresh");
await assertOnboardingDestroyed(tab.linkedBrowser);
await BrowserTestUtils.removeTab(tab);
}
});

Просмотреть файл

@ -0,0 +1,26 @@
/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
add_task(async function test_skip_onboarding_tours() {
resetOnboardingDefaultState();
let tourIds = TOUR_IDs;
let expectedPrefUpdates = [
promisePrefUpdated("browser.onboarding.notification.finished", true)
];
tourIds.forEach((id, idx) => expectedPrefUpdates.push(promisePrefUpdated(`browser.onboarding.tour.${id}.completed`, true)));
let tab = await openTab(ABOUT_NEWTAB_URL);
await promiseOnboardingOverlayLoaded(tab.linkedBrowser);
await BrowserTestUtils.synthesizeMouseAtCenter("#onboarding-overlay-button", {}, tab.linkedBrowser);
await promiseOnboardingOverlayOpened(tab.linkedBrowser);
let overlayClosedPromise = promiseOnboardingOverlayClosed(tab.linkedBrowser);
await BrowserTestUtils.synthesizeMouseAtCenter("#onboarding-skip-tour-button", {}, tab.linkedBrowser);
await overlayClosedPromise;
await Promise.all(expectedPrefUpdates);
await BrowserTestUtils.removeTab(tab);
});

Просмотреть файл

@ -29,7 +29,6 @@ function resetOnboardingDefaultState() {
// All the prefs should be reset to the default states
// and no need to revert back so we don't use `SpecialPowers.pushPrefEnv` here.
Preferences.set("browser.onboarding.enabled", true);
Preferences.set("browser.onboarding.hidden", false);
Preferences.set("browser.onboarding.notification.finished", false);
Preferences.set("browser.onboarding.notification.mute-duration-on-first-session-ms", 300000);
Preferences.set("browser.onboarding.notification.max-life-time-per-tour-ms", 432000000);

Просмотреть файл

@ -28,11 +28,9 @@ const NEXT_TOURSET_VERSION = 2;
const PREF_TOUR_TYPE = "browser.onboarding.tour-type";
const PREF_TOURSET_VERSION = "browser.onboarding.tourset-version";
const PREF_SEEN_TOURSET_VERSION = "browser.onboarding.seen-tourset-version";
const PREF_ONBOARDING_HIDDEN = "browser.onboarding.hidden";
function resetOnboardingDefaultState() {
// All the prefs should be reset to what prefs should looks like in a new user profile
Services.prefs.setBoolPref(PREF_ONBOARDING_HIDDEN, false);
Services.prefs.setIntPref(PREF_TOURSET_VERSION, TOURSET_VERSION);
Services.prefs.clearUserPref(PREF_SEEN_TOURSET_VERSION);
Services.prefs.clearUserPref(PREF_TOUR_TYPE);
@ -42,6 +40,5 @@ function resetOldProfileDefaultState() {
// All the prefs should be reset to what prefs should looks like in a older new user profile
Services.prefs.setIntPref(PREF_TOURSET_VERSION, TOURSET_VERSION);
Services.prefs.setIntPref(PREF_SEEN_TOURSET_VERSION, 0);
Services.prefs.clearUserPref(PREF_ONBOARDING_HIDDEN);
Services.prefs.clearUserPref(PREF_TOUR_TYPE);
}

Просмотреть файл

@ -16,7 +16,6 @@ add_task(async function() {
"tourset version should not change");
do_check_eq(Preferences.get(PREF_SEEN_TOURSET_VERSION), TOURSET_VERSION,
"seen tourset version should be set as the tourset version");
do_check_eq(Preferences.get(PREF_ONBOARDING_HIDDEN), false, "should show the user tour");
});
add_task(async function() {
@ -24,7 +23,6 @@ add_task(async function() {
resetOnboardingDefaultState();
Preferences.set(PREF_TOUR_TYPE, "new");
Preferences.set(PREF_SEEN_TOURSET_VERSION, TOURSET_VERSION);
Preferences.set(PREF_ONBOARDING_HIDDEN, false);
OnboardingTourType.check();
do_check_eq(Preferences.get(PREF_TOUR_TYPE), "new", "should show the new user tour");
@ -32,7 +30,6 @@ add_task(async function() {
"tourset version should not change";
do_check_eq(Preferences.get(PREF_SEEN_TOURSET_VERSION), TOURSET_VERSION,
"seen tourset version should be set as the tourset version");
do_check_eq(Preferences.get(PREF_ONBOARDING_HIDDEN), false, "should show the user tour");
});
add_task(async function() {
@ -40,7 +37,6 @@ add_task(async function() {
resetOnboardingDefaultState();
Preferences.set(PREF_TOUR_TYPE, "new");
Preferences.set(PREF_SEEN_TOURSET_VERSION, TOURSET_VERSION);
Preferences.set(PREF_ONBOARDING_HIDDEN, true);
OnboardingTourType.check();
do_check_eq(Preferences.get(PREF_TOUR_TYPE), "new", "should show the new user tour");
@ -48,7 +44,6 @@ add_task(async function() {
"tourset version should not change";
do_check_eq(Preferences.get(PREF_SEEN_TOURSET_VERSION), TOURSET_VERSION,
"seen tourset version should be set as the tourset version");
do_check_eq(Preferences.get(PREF_ONBOARDING_HIDDEN), true, "should hide the user tour");
});
add_task(async function() {
@ -57,7 +52,6 @@ add_task(async function() {
Preferences.set(PREF_TOURSET_VERSION, NEXT_TOURSET_VERSION);
Preferences.set(PREF_TOUR_TYPE, "new");
Preferences.set(PREF_SEEN_TOURSET_VERSION, TOURSET_VERSION);
Preferences.set(PREF_ONBOARDING_HIDDEN, false);
OnboardingTourType.check();
do_check_eq(Preferences.get(PREF_TOUR_TYPE), "update", "should show the update user tour");
@ -65,7 +59,6 @@ add_task(async function() {
"tourset version should not change";
do_check_eq(Preferences.get(PREF_SEEN_TOURSET_VERSION), NEXT_TOURSET_VERSION,
"seen tourset version should be set as the tourset version");
do_check_eq(Preferences.get(PREF_ONBOARDING_HIDDEN), false, "should show the user tour");
});
add_task(async function() {
@ -74,7 +67,6 @@ add_task(async function() {
Preferences.set(PREF_TOURSET_VERSION, NEXT_TOURSET_VERSION);
Preferences.set(PREF_TOUR_TYPE, "new");
Preferences.set(PREF_SEEN_TOURSET_VERSION, TOURSET_VERSION);
Preferences.set(PREF_ONBOARDING_HIDDEN, true);
OnboardingTourType.check();
do_check_eq(Preferences.get(PREF_TOUR_TYPE), "update", "should show the update user tour");
@ -82,7 +74,6 @@ add_task(async function() {
"tourset version should not change";
do_check_eq(Preferences.get(PREF_SEEN_TOURSET_VERSION), NEXT_TOURSET_VERSION,
"seen tourset version should be set as the tourset version");
do_check_eq(Preferences.get(PREF_ONBOARDING_HIDDEN), false, "should show the user tour");
});
add_task(async function() {
@ -95,5 +86,4 @@ add_task(async function() {
"tourset version should not change";
do_check_eq(Preferences.get(PREF_SEEN_TOURSET_VERSION), TOURSET_VERSION,
"seen tourset version should be set as the tourset version");
do_check_eq(Preferences.get(PREF_ONBOARDING_HIDDEN), false, "should show the user tour");
});