mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-21 01:05:45 +00:00
Bug 1357023 - Add onboarding tour for Firefox Sync. r=flod,mossop
MozReview-Commit-ID: vZQyXU82YK --HG-- extra : rebase_source : 8cfc0f521f923b35789a05b5fc4a15523b640f6e
This commit is contained in:
Rex Lee
parent
933d747314
commit
863d8bb7b1
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 24 KiB |
1
browser/extensions/onboarding/content/img/icons_sync-colored.svg
Executable file
1
browser/extensions/onboarding/content/img/icons_sync-colored.svg
Executable file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="8 8 16 16"><title> Icons / Sync</title><desc> Created with Sketch.</desc><g fill="none"><rect width="32" height="32"/><path d="M22 9C21.4 9 21 9.4 21 10L21 11.1C19.2 9.3 16.6 8.6 14.2 9.2 11.7 9.9 9.8 11.8 9.2 14.3 9.1 14.7 9.2 15 9.5 15.3 9.8 15.5 10.1 15.6 10.5 15.5 10.8 15.4 11.1 15.1 11.2 14.8 11.7 12.6 13.7 11 16 11 17.6 11 19 11.7 20 13L18 13C17.4 13 17 13.4 17 14 17 14.6 17.4 15 18 15L22 15C22.6 15 23 14.6 23 14L23 10C23 9.4 22.6 9 22 9ZM22 16.5C21.8 16.4 21.5 16.5 21.3 16.6 21.1 16.7 20.9 17 20.8 17.2 20.3 19.4 18.3 21 16 21 14.4 21 13 20.3 12 19L14 19C14.6 19 15 18.6 15 18 15 17.4 14.6 17 14 17L10 17C9.4 17 9 17.4 9 18L9 22C9 22.6 9.4 23 10 23 10.6 23 11 22.6 11 22L11 20.9C12.8 22.7 15.4 23.4 17.8 22.8 20.3 22.1 22.2 20.2 22.8 17.7 22.9 17.2 22.6 16.6 22 16.5Z" fill="#0A84FF"/></g></svg>
|
||||
|
After Width: | Height: | Size: 887 B |
1
browser/extensions/onboarding/content/img/icons_sync.svg
Normal file
1
browser/extensions/onboarding/content/img/icons_sync.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="8 8 16 16"><title> Icons / Sync</title><desc> Created with Sketch.</desc><g fill="none"><rect width="32" height="32"/><path d="M22 9C21.4 9 21 9.4 21 10L21 11.1C19.2 9.3 16.6 8.6 14.2 9.2 11.7 9.9 9.8 11.8 9.2 14.3 9.1 14.7 9.2 15 9.5 15.3 9.8 15.5 10.1 15.6 10.5 15.5 10.8 15.4 11.1 15.1 11.2 14.8 11.7 12.6 13.7 11 16 11 17.6 11 19 11.7 20 13L18 13C17.4 13 17 13.4 17 14 17 14.6 17.4 15 18 15L22 15C22.6 15 23 14.6 23 14L23 10C23 9.4 22.6 9 22 9ZM22 16.5C21.8 16.4 21.5 16.5 21.3 16.6 21.1 16.7 20.9 17 20.8 17.2 20.3 19.4 18.3 21 16 21 14.4 21 13 20.3 12 19L14 19C14.6 19 15 18.6 15 18 15 17.4 14.6 17 14 17L10 17C9.4 17 9 17.4 9 18L9 22C9 22.6 9.4 23 10 23 10.6 23 11 22.6 11 22L11 20.9C12.8 22.7 15.4 23.4 17.8 22.8 20.3 22.1 22.2 20.2 22.8 17.7 22.9 17.2 22.6 16.6 22 16.5Z" fill="#3E3D40"/></g></svg>
|
||||
|
After Width: | Height: | Size: 887 B |
@ -24,6 +24,10 @@ document.getElementById("onboarding-overlay")
|
||||
case "onboarding-tour-search-button":
|
||||
Mozilla.UITour.openSearchPanel(() => {});
|
||||
break;
|
||||
case "onboarding-tour-sync-button":
|
||||
let emailInput = document.getElementById("onboarding-tour-sync-email-input");
|
||||
Mozilla.UITour.showFirefoxAccounts(null, emailInput.value);
|
||||
break;
|
||||
case "onboarding-overlay":
|
||||
case "onboarding-overlay-close-btn":
|
||||
// Dismiss any highlights if a user tries to close the dialog.
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
margin: 0 calc(50% - 480px);
|
||||
top: calc(50% - 255px);
|
||||
display: grid;
|
||||
grid-template-rows: [dialog-start] 76px [page-start] 1fr [footer-start] 30px [dialog-end];
|
||||
grid-template-rows: [dialog-start] 70px [page-start] 1fr [footer-start] 30px [dialog-end];
|
||||
grid-template-columns: [dialog-start] 230px [page-start] 1fr [dialog-end];
|
||||
}
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
#onboarding-overlay-dialog > header {
|
||||
grid-row: dialog-start / page-start;
|
||||
grid-column: dialog-start / tour-end;
|
||||
margin-top: 24px;
|
||||
margin-top: 22px;
|
||||
margin-bottom: 0;
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: 36px;
|
||||
@ -151,6 +151,47 @@
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Sync tour */
|
||||
#onboarding-tour-sync-page form {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#onboarding-tour-sync-page form > h3 {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#onboarding-tour-sync-page form > p {
|
||||
text-align: center;
|
||||
margin: 3px 0 0 0;
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#onboarding-tour-sync-page form > input {
|
||||
margin-top: 10px;
|
||||
height: 40px;
|
||||
width: 80%;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
#onboarding-tour-sync-page form > button {
|
||||
padding: 10px 20px;
|
||||
min-width: 40%;
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
line-height: 20px;
|
||||
background: #0d96ff;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
box-shadow: 0 1px 0 rgba(0,0,0,0.23);
|
||||
cursor: pointer;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
/* Onboarding tour pages */
|
||||
.onboarding-tour-page {
|
||||
grid-row: page-start / footer-end;
|
||||
@ -283,6 +324,15 @@
|
||||
background-image: url("img/icons_default-colored.svg");
|
||||
}
|
||||
|
||||
#onboarding-tour-sync {
|
||||
background-image: url("img/icons_sync.svg");
|
||||
}
|
||||
|
||||
#onboarding-tour-sync.onboarding-active,
|
||||
#onboarding-tour-sync:hover,
|
||||
#onboarding-notification-bar[data-target-tour-id=onboarding-tour-sync] #onboarding-notification-tour-icon {
|
||||
background-image: url("img/icons_sync-colored.svg");
|
||||
}
|
||||
|
||||
/* Tour Notifications */
|
||||
#onboarding-notification-bar {
|
||||
|
||||
@ -35,7 +35,7 @@ const BRAND_SHORT_NAME = Services.strings
|
||||
* // Return a div appended with elements for this tours.
|
||||
* // Each tour should contain the following 3 sections in the div:
|
||||
* // .onboarding-tour-description, .onboarding-tour-content, .onboarding-tour-button.
|
||||
* // Add no-button css class in the div if this tour does not need a button.
|
||||
* // Add onboarding-no-button css class in the div if this tour does not need a button.
|
||||
* // The overlay layout will responsively position and distribute space for these 3 sections based on viewport size
|
||||
* getPage() {},
|
||||
* },
|
||||
@ -178,6 +178,39 @@ var onboardingTours = [
|
||||
return div;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "onboarding-tour-sync",
|
||||
tourNameId: "onboarding.tour-sync",
|
||||
getNotificationStrings(bundle) {
|
||||
return {
|
||||
title: bundle.GetStringFromName("onboarding.notification.onboarding-tour-sync.title"),
|
||||
message: bundle.GetStringFromName("onboarding.notification.onboarding-tour-sync.message"),
|
||||
button: bundle.GetStringFromName("onboarding.button.learnMore"),
|
||||
};
|
||||
},
|
||||
getPage(win, bundle) {
|
||||
let div = win.document.createElement("div");
|
||||
div.classList.add("onboarding-no-button");
|
||||
div.innerHTML = `
|
||||
<section class="onboarding-tour-description">
|
||||
<h1 data-l10n-id="onboarding.tour-sync.title"></h1>
|
||||
<p data-l10n-id="onboarding.tour-sync.description"></p>
|
||||
</section>
|
||||
<section class="onboarding-tour-content">
|
||||
<form>
|
||||
<h3 data-l10n-id="onboarding.tour-sync.form.title"></h3>
|
||||
<p data-l10n-id="onboarding.tour-sync.form.description"></p>
|
||||
<input id="onboarding-tour-sync-email-input" type="text"></input><br />
|
||||
<button id="onboarding-tour-sync-button" data-l10n-id="onboarding.tour-sync.button"></button>
|
||||
</form>
|
||||
<img src="resource://onboarding/img/figure_sync.svg" />
|
||||
</section>
|
||||
`;
|
||||
div.querySelector("#onboarding-tour-sync-email-input").placeholder =
|
||||
bundle.GetStringFromName("onboarding.tour-sync.email-input.placeholder");
|
||||
return div;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
@ -490,7 +523,7 @@ class Onboarding {
|
||||
li.className = "onboarding-tour-item";
|
||||
itemsFrag.appendChild(li);
|
||||
// Dynamically create tour pages
|
||||
let div = tour.getPage(this._window);
|
||||
let div = tour.getPage(this._window, this._bundle);
|
||||
|
||||
// Do a traverse for elements in the page that need to be localized.
|
||||
let l10nElements = div.querySelectorAll("[data-l10n-id]");
|
||||
|
||||
@ -62,3 +62,25 @@ onboarding.button.learnMore=Learn More
|
||||
|
||||
# LOCALIZATION NOTE(onboarding.notification-icon-tool-tip): %S is brandShortName.
|
||||
onboarding.notification-icon-tool-tip=New to %S?
|
||||
|
||||
onboarding.tour-sync=Firefox Sync
|
||||
onboarding.tour-sync.title=Sync brings it all together.
|
||||
onboarding.tour-sync.description=Access your bookmarks and passwords on any device. You can even send a tab from your laptop to your phone! Better yet, you can choose what you sync and what you don’t.
|
||||
|
||||
# LOCALIZATION NOTE(onboarding.tour-sync.form.title): This string is displayed
|
||||
# as a title and followed by onboarding.tour-sync.form.description.
|
||||
# Your translation should be consistent with the form displayed in
|
||||
# about:accounts when signing up to Firefox Account.
|
||||
onboarding.tour-sync.form.title=Create a Firefox Account
|
||||
|
||||
# LOCALIZATION NOTE(onboarding.tour-sync.form.description): The description
|
||||
# continues after onboarding.tour-sync.form.title to create a complete sentence.
|
||||
# If it's not possible for your locale, you can translate this string as
|
||||
# "Continue to Firefox Sync" instead.
|
||||
# Your translation should be consistent with the form displayed in
|
||||
# about:accounts when signing up to Firefox Account.
|
||||
onboarding.tour-sync.form.description=to continue to Firefox Sync
|
||||
onboarding.tour-sync.button=Next
|
||||
onboarding.tour-sync.email-input.placeholder=Email
|
||||
onboarding.notification.onboarding-tour-sync.title=Pick up where you left off.
|
||||
onboarding.notification.onboarding-tour-sync.message=Still sending yourself links to save or read on your phone? Do it the easy way: get Sync and have the things you save here show up on all of your devices.
|
||||
|
||||
@ -11,6 +11,7 @@ const TOUR_IDs = [
|
||||
"onboarding-tour-customize",
|
||||
"onboarding-tour-search",
|
||||
"onboarding-tour-default-browser",
|
||||
"onboarding-tour-sync",
|
||||
];
|
||||
|
||||
function resetOnboardingDefaultState() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user