Bug 1381407 - Add Fast&Mordern tour in onboarding overlay. r=flod,gasolin,mossop
authorRex Lee <rexboy@mozilla.com>
Mon, 17 Jul 2017 18:25:39 +0800
changeset 418585 d822df13c8402e3878c6b7b861c326f6f57306ee
parent 418584 384002b17a52b3b96780a4d2e99f56e181a65f4d
child 418586 1cfc47df313b42658f824e4e705b910e3f53bfc2
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflod, gasolin, mossop
bugs1381407
milestone56.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1381407 - Add Fast&Mordern tour in onboarding overlay. r=flod,gasolin,mossop 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.