Bug 1371531 - Add single search tour and notification to onboarding. r=mossop,flod
MozReview-Commit-ID: CQJPpYAmOZd
--- a/browser/extensions/onboarding/bootstrap.js
+++ b/browser/extensions/onboarding/bootstrap.js
@@ -22,22 +22,23 @@ const PREF_WHITELIST = [
"browser.onboarding.hidden",
"browser.onboarding.notification.finished",
"browser.onboarding.notification.prompt-count",
"browser.onboarding.notification.last-time-of-changing-tour-sec",
"browser.onboarding.notification.tour-ids-queue"
];
[
- "onboarding-tour-private-browsing",
"onboarding-tour-addons",
"onboarding-tour-customize",
"onboarding-tour-default-browser",
"onboarding-tour-library",
+ "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;
/**
* Set pref. Why no `getPrefs` function is due to the priviledge level.
* We cannot set prefs inside a framescript but can read.
--- a/browser/extensions/onboarding/content/onboarding-tour-agent.js
+++ b/browser/extensions/onboarding/content/onboarding-tour-agent.js
@@ -33,16 +33,19 @@ document.getElementById("onboarding-over
Mozilla.UITour.showHighlight("library");
break;
case "onboarding-tour-private-browsing-button":
Mozilla.UITour.showHighlight("privateWindow");
break;
case "onboarding-tour-search-button":
Mozilla.UITour.openSearchPanel(() => {});
break;
+ case "onboarding-tour-singlesearch-button":
+ Mozilla.UITour.showMenu("urlbar");
+ break;
case "onboarding-tour-sync-button":
let emailInput = document.getElementById("onboarding-tour-sync-email-input");
if (emailInput.checkValidity()) {
Mozilla.UITour.showFirefoxAccounts(null, emailInput.value);
}
break;
case "onboarding-overlay":
case "onboarding-overlay-close-btn":
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -302,26 +302,30 @@
background: #003EAA;
}
.onboarding-tour-action-button:disabled {
opacity: 0.5;
}
/* Tour Icons */
-#onboarding-tour-search {
+#onboarding-tour-search,
+#onboarding-tour-singlesearch {
background-image: url("img/icons_search.svg");
}
#onboarding-tour-search.onboarding-active,
-#onboarding-tour-search:hover {
+#onboarding-tour-search:hover,
+#onboarding-tour-singlesearch.onboarding-active,
+#onboarding-tour-singlesearch:hover {
background-image: url("img/icons_search-colored.svg");
}
-#onboarding-notification-bar[data-target-tour-id=onboarding-tour-search] #onboarding-notification-tour-icon {
+#onboarding-notification-bar[data-target-tour-id=onboarding-tour-search] #onboarding-notification-tour-icon,
+#onboarding-notification-bar[data-target-tour-id=onboarding-tour-singlesearch] #onboarding-notification-tour-icon {
background-image: url("img/icons_search-notification.svg");
}
#onboarding-tour-private-browsing {
background-image: url("img/icons_private.svg");
}
#onboarding-tour-private-browsing.onboarding-active,
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -245,16 +245,43 @@ var onboardingTourset = {
</section>
<aside class="onboarding-tour-button-container">
<button id="onboarding-tour-library-button" class="onboarding-tour-action-button" data-l10n-id="onboarding.tour-library.button"></button>
</aside>
`;
return div;
},
},
+ "singlesearch": {
+ id: "onboarding-tour-singlesearch",
+ tourNameId: "onboarding.tour-singlesearch",
+ getNotificationStrings(bundle) {
+ return {
+ title: bundle.GetStringFromName("onboarding.notification.onboarding-tour-singlesearch.title"),
+ message: bundle.GetStringFromName("onboarding.notification.onboarding-tour-singlesearch.message"),
+ button: bundle.GetStringFromName("onboarding.button.learnMore"),
+ };
+ },
+ getPage(win, bundle) {
+ let div = win.document.createElement("div");
+ div.innerHTML = `
+ <section class="onboarding-tour-description">
+ <h1 data-l10n-id="onboarding.tour-singlesearch.title"></h1>
+ <p data-l10n-id="onboarding.tour-singlesearch.description"></p>
+ </section>
+ <section class="onboarding-tour-content">
+ <img src="resource://onboarding/img/figure_search.svg" role="presentation"/>
+ </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;
+ },
+ },
};
/**
* The script won't be initialized if we turned off onboarding by
* setting "browser.onboarding.enabled" to false.
*/
class Onboarding {
constructor(contentWindow) {
--- a/browser/extensions/onboarding/locales/en-US/onboarding.properties
+++ b/browser/extensions/onboarding/locales/en-US/onboarding.properties
@@ -90,8 +90,16 @@ onboarding.notification.onboarding-tour-
onboarding.tour-library=Library
onboarding.tour-library.title=Keep it together.
# LOCALIZATION NOTE (onboarding.tour-library.description): This string will be used in the library tour description. %1$S is brandShortName
onboarding.tour-library.description=Check out the new %1$S library in the redesigned toolbar. The library puts the things you’ve seen and saved to %1$S - your browsing history, bookmarks, Pocket lists, and synced tabs - in one convenient place.
onboarding.tour-library.button=Show Library in Menu
onboarding.notification.onboarding-tour-library.title=Keep it together.
# LOCALIZATION NOTE(onboarding.notification.onboarding-tour-library.message): This string will be used in the notification message for the library tour. %S is brandShortName
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.