Bug 1381407 - Add Fast&Mordern tour in onboarding overlay. r=Gasolin, mossop, flod draft
authorRex Lee <rexboy@mozilla.com>
Mon, 17 Jul 2017 18:25:39 +0800
changeset 612152 17bdf3dee1b8e9f433887f4464478c2ff513820d
parent 612151 4ceabc64aee4bf0884373b585daa74c2009a4509
child 638326 2a96b68e6a1cb0a76e3fcd7c638c098a24f955e4
push id69401
push userbmo:rexboy@mozilla.com
push dateThu, 20 Jul 2017 11:18:28 +0000
reviewersGasolin, mossop, flod
bugs1381407
milestone56.0a1
Bug 1381407 - Add Fast&Mordern tour in onboarding overlay. r=Gasolin, mossop, flod MozReview-Commit-ID: 7P4BT3xDheV
browser/extensions/onboarding/bootstrap.js
browser/extensions/onboarding/content/img/icons_performance-colored.svg
browser/extensions/onboarding/content/img/icons_performance.svg
browser/extensions/onboarding/content/onboarding.css
browser/extensions/onboarding/content/onboarding.js
browser/extensions/onboarding/locales/en-US/onboarding.properties
--- 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.