Bug 1381407 - Add Fast&Mordern tour in onboarding overlay. r=Gasolin, mossop, flod
MozReview-Commit-ID: 7P4BT3xDheV
--- a/browser/extensions/onboarding/bootstrap.js
+++ b/browser/extensions/onboarding/bootstrap.js
@@ -26,16 +26,17 @@ const PREF_WHITELIST = [
"browser.onboarding.notification.tour-ids-queue"
];
[
"onboarding-tour-addons",
"onboarding-tour-customize",
"onboarding-tour-default-browser",
"onboarding-tour-library",
+ "onboarding-tour-performance",
"onboarding-tour-private-browsing",
"onboarding-tour-search",
"onboarding-tour-singlesearch",
"onboarding-tour-sync",
].forEach(tourId => PREF_WHITELIST.push(`browser.onboarding.tour.${tourId}.completed`));
let waitingForBrowserReady = true;
new file mode 100644
--- /dev/null
+++ b/browser/extensions/onboarding/content/img/icons_performance-colored.svg
@@ -0,0 +1,1 @@
+<svg width="16" height="16" viewBox="0 0 92 92" xmlns="http://www.w3.org/2000/svg"><title>Tip / Icon / Performance</title><g id="Symbols" fill="none" fill-rule="evenodd"><g id="Tip-/-Icon-/-Performance" fill="#0A84FF"><path d="M47.237 53.003L47 53c-6.075 0-11 4.925-11 11s4.925 11 11 11c4.453 0 8.287-2.645 10.018-6.45 1.888-3.525 2.97-7.84 8.397-12.066 7.422-5.778 15.097-10.033 14.61-11.098-.485-1.06-8.04 2.724-16.675 5.79-7.916 2.812-14.765 1.706-16.113 1.827zm-36.467 31.3C4.05 76.316 0 66.015 0 54.768 0 29.4 20.593 8.838 46 8.838c25.404 0 46 20.563 46 45.93 0 11.247-4.05 21.548-10.77 29.535H10.77zM46 21.698c-1.016 0-1.84 1.646-1.84 3.674s.824 3.675 1.84 3.675 1.84-1.647 1.84-3.675c0-2.028-.824-3.674-1.84-3.674zm34.96 40.418c0-1.016-1.65-1.837-3.68-1.837-2.03 0-3.68.82-3.68 1.836s1.65 1.837 3.68 1.837c2.03 0 3.68-.82 3.68-1.837zm-62.364 0c0-1.016-1.65-1.837-3.68-1.837-2.032 0-3.68.82-3.68 1.836s1.648 1.837 3.68 1.837c2.03 0 3.68-.82 3.68-1.837zm7.664-23.133c.73-.706.18-2.46-1.232-3.92s-3.15-2.072-3.88-1.366c-.73.704-.178 2.458 1.234 3.92 1.41 1.457 3.148 2.07 3.878 1.366zm46-5.287c-.73-.706-2.468-.094-3.88 1.367-1.41 1.46-1.962 3.215-1.232 3.92.73.704 2.47.092 3.88-1.368 1.412-1.46 1.964-3.214 1.233-3.92z" id="Combined-Shape"/></g></g></svg>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/browser/extensions/onboarding/content/img/icons_performance.svg
@@ -0,0 +1,1 @@
+<svg width="16" height="16" viewBox="0 0 92 92" xmlns="http://www.w3.org/2000/svg"><title>Tip / Icon / Performance</title><g id="Symbols" fill="none" fill-rule="evenodd"><g id="Tip-/-Icon-/-Performance" fill="#3E3D40"><path d="M47.237 53.003L47 53c-6.075 0-11 4.925-11 11s4.925 11 11 11c4.453 0 8.287-2.645 10.018-6.45 1.888-3.525 2.97-7.84 8.397-12.066 7.422-5.778 15.097-10.033 14.61-11.098-.485-1.06-8.04 2.724-16.675 5.79-7.916 2.812-14.765 1.706-16.113 1.827zm-36.467 31.3C4.05 76.316 0 66.015 0 54.768 0 29.4 20.593 8.838 46 8.838c25.404 0 46 20.563 46 45.93 0 11.247-4.05 21.548-10.77 29.535H10.77zM46 21.698c-1.016 0-1.84 1.646-1.84 3.674s.824 3.675 1.84 3.675 1.84-1.647 1.84-3.675c0-2.028-.824-3.674-1.84-3.674zm34.96 40.418c0-1.016-1.65-1.837-3.68-1.837-2.03 0-3.68.82-3.68 1.836s1.65 1.837 3.68 1.837c2.03 0 3.68-.82 3.68-1.837zm-62.364 0c0-1.016-1.65-1.837-3.68-1.837-2.032 0-3.68.82-3.68 1.836s1.648 1.837 3.68 1.837c2.03 0 3.68-.82 3.68-1.837zm7.664-23.133c.73-.706.18-2.46-1.232-3.92s-3.15-2.072-3.88-1.366c-.73.704-.178 2.458 1.234 3.92 1.41 1.457 3.148 2.07 3.878 1.366zm46-5.287c-.73-.706-2.468-.094-3.88 1.367-1.41 1.46-1.962 3.215-1.232 3.92.73.704 2.47.092 3.88-1.368 1.412-1.46 1.964-3.214 1.233-3.92z" id="Combined-Shape"/></g></g></svg>
\ No newline at end of file
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -395,16 +395,31 @@
}
#onboarding-tour-library.onboarding-active,
#onboarding-tour-library:hover,
#onboarding-notification-bar[data-target-tour-id=onboarding-tour-library] #onboarding-notification-tour-icon {
background-image: url("img/icons_search-colored.svg");
}
+#onboarding-tour-performance {
+ background-image: url("img/icons_performance.svg");
+}
+
+#onboarding-tour-performance.onboarding-active,
+#onboarding-tour-performance:hover {
+ background-image: url("img/icons_performance-colored.svg");
+}
+
+#onboarding-notification-bar[data-target-tour-id=onboarding-tour-performance] #onboarding-notification-tour-icon {
+ /* TODO: Placeholder icon. It should be replaced upon assets are available.
+ This is tracking in Bug 1382520. */
+ background-image: url("img/icons_sync-notification.svg");
+}
+
/* Tour Notifications */
#onboarding-notification-bar {
position: fixed;
z-index: 20998; /* We want this always under #onboarding-overlay */
left: 0;
bottom: 0;
width: 100%;
height: 122px;
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -272,16 +272,42 @@ var onboardingTourset = {
</section>
<aside class="onboarding-tour-button-container">
<button id="onboarding-tour-singlesearch-button" class="onboarding-tour-action-button" data-l10n-id="onboarding.tour-singlesearch.button"></button>
</aside>
`;
return div;
},
},
+ "performance": {
+ id: "onboarding-tour-performance",
+ tourNameId: "onboarding.tour-performance",
+ getNotificationStrings(bundle) {
+ return {
+ title: bundle.GetStringFromName("onboarding.notification.onboarding-tour-performance.title"),
+ message: bundle.formatStringFromName("onboarding.notification.onboarding-tour-performance.message", [BRAND_SHORT_NAME], 1),
+ button: bundle.GetStringFromName("onboarding.button.learnMore"),
+ };
+ },
+ getPage(win, bundle) {
+ let div = win.document.createElement("div");
+ // TODO: The content image is a placeholder. It should be replaced upon assets are available.
+ // This is tracking in Bug 1382520.
+ div.innerHTML = `
+ <section class="onboarding-tour-description">
+ <h1 data-l10n-id="onboarding.tour-performance.title"></h1>
+ <p data-l10n-id="onboarding.tour-performance.description"></p>
+ </section>
+ <section class="onboarding-tour-content">
+ <img src="resource://onboarding/img/figure_sync.svg" role="presentation"/>
+ </section>
+ `;
+ return div;
+ },
+ },
};
/**
* The script won't be initialized if we turned off onboarding by
* setting "browser.onboarding.enabled" to false.
*/
class Onboarding {
constructor(contentWindow) {
@@ -440,16 +466,22 @@ class Onboarding {
this._removeTourFromNotificationQueue(this._notificationBar.dataset.targetTourId);
break;
case "onboarding-notification-action-btn":
let tourId = this._notificationBar.dataset.targetTourId;
this.toggleOverlay();
this.gotoPage(tourId);
this._removeTourFromNotificationQueue(tourId);
break;
+ // These tours are tagged completed instantly upon showing.
+ case "onboarding-tour-default-browser":
+ case "onboarding-tour-sync":
+ case "onboarding-tour-performance":
+ this.setToursCompleted([ evt.target.id ]);
+ break;
}
let classList = evt.target.classList;
if (classList.contains("onboarding-tour-item")) {
this.gotoPage(evt.target.id);
} else if (classList.contains("onboarding-tour-action-button")) {
let activeItem = this._tourItems.find(item => item.classList.contains("onboarding-active"));
this.setToursCompleted([ activeItem.id ]);
}
--- a/browser/extensions/onboarding/locales/en-US/onboarding.properties
+++ b/browser/extensions/onboarding/locales/en-US/onboarding.properties
@@ -98,8 +98,16 @@ onboarding.notification.onboarding-tour-library.message=The new %S library puts the great things you’ve discovered on the web in one convenient place.
onboarding.tour-singlesearch=Address Bar
onboarding.tour-singlesearch.title=Find it faster.
# LOCALIZATION NOTE(onboarding.tour-singlesearch.description): %S is brandShortName
onboarding.tour-singlesearch.description=The address bar might be the most powerful tool in the sleek new %S toolbar. Start typing, and see suggestions based on your browsing and search history. Go to a web address, search the whole web with your default search engine, or send your query directly to a single site with one-click search.
onboarding.tour-singlesearch.button=Show Address Bar
onboarding.notification.onboarding-tour-singlesearch.title=Find it faster.
onboarding.notification.onboarding-tour-singlesearch.message=The unified address bar is the only tool you need to find your way around the web.
+
+onboarding.tour-performance=Performance
+onboarding.tour-performance.title=Browse with the best of ‘em.
+# LOCALIZATION NOTE(onboarding.tour-performance.description): %1$S is brandShortName.
+onboarding.tour-performance.description=It’s a whole new %1$S, built for faster page loading, smoother scrolling, and more responsive tab switching. These performance upgrades come paired with a modern, intuitive design. Start browsing and experience it for yourself: the best %1$S yet.
+onboarding.notification.onboarding-tour-performance.title=Browse with the best of ‘em.
+# LOCALIZATION NOTE(onboarding.notification.onboarding-tour-performance.message): %S is brandShortName.
+onboarding.notification.onboarding-tour-performance.message=Prepare yourself for the fastest, smoothest, most reliable %S yet.