Bug 1380963 - Display different welcome messages for update or new users on the overlay tour icon.r=flod,gasolin,mossop
authorRex Lee <rexboy@mozilla.com>
Mon, 17 Jul 2017 15:51:43 +0800
changeset 418606 05e27c93b3b4157b54ec56295bb0cc733a845272
parent 418605 fc51c31a950a196209c917803620e6b950466df9
child 418607 58e5ecbd98b3a60a01707d7e4c713dddc68d3421
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
bugs1380963
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 1380963 - Display different welcome messages for update or new users on the overlay tour icon.r=flod,gasolin,mossop MozReview-Commit-ID: A8DxVkSz9dX
browser/extensions/onboarding/content/onboarding.css
browser/extensions/onboarding/content/onboarding.js
browser/extensions/onboarding/locales/en-US/onboarding.properties
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -36,22 +36,23 @@
 #onboarding-notification-icon::after,
 #onboarding-overlay-icon::after {
   background: #5ce6e6;
   position: absolute;
   font-size: 12px;
   border: 1px solid #fff;
   text-align: center;
   color: #10404a;
+  box-sizing: content-box;
 }
 
 #onboarding-overlay-icon::after {
   content: attr(aria-label);
   top: -6px;
-  offset-inline-start: 32px;
+  offset-inline-start: 39px;
   border-radius: 22px;
   padding: 5px 8px;
   min-width: 100px;
 }
 
 #onboarding-overlay-dialog,
 .onboarding-hidden {
   display: none;
@@ -450,17 +451,17 @@
   background-position: right 34px center;
 }
 
 #onboarding-notification-icon::after {
   --height: 22px;
   --vpadding: 3px;
   content: attr(data-tooltip);
   top: 0;
-  offset-inline-start: 68px;
+  offset-inline-start: 73px;
   line-height: calc(var(--height) - var(--vpadding) * 2);
   border-radius: calc(var(--height) / 2);
   padding: var(--vpadding) 10px;
 }
 
 #onboarding-notification-close-btn {
   background-color: rgba(255, 255, 255, 0.97);
   border: none;
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -312,18 +312,19 @@ var onboardingTourset = {
 class Onboarding {
   constructor(contentWindow) {
     this.init(contentWindow);
   }
 
   async init(contentWindow) {
     this._window = contentWindow;
     this._tours = [];
+    this._tourType = Services.prefs.getStringPref("browser.onboarding.tour-type", "update");
 
-    let tourIds = this._getTourIDList(Services.prefs.getStringPref("browser.onboarding.tour-type", "update"));
+    let tourIds = this._getTourIDList();
     tourIds.forEach(tourId => {
       if (onboardingTourset[tourId]) {
         this._tours.push(onboardingTourset[tourId]);
       }
     });
 
     if (this._tours.length === 0) {
       return;
@@ -374,18 +375,18 @@ class Onboarding {
 
     this._loadJS(TOUR_AGENT_JS_URI);
 
     this._initPrefObserver();
     // Doing tour notification takes some effort. Let's do it on idle.
     this._window.requestIdleCallback(() => this._initNotification());
   }
 
-  _getTourIDList(tourType) {
-    let tours = Services.prefs.getStringPref(`browser.onboarding.${tourType}tour`, "");
+  _getTourIDList() {
+    let tours = Services.prefs.getStringPref(`browser.onboarding.${this._tourType}tour`, "");
     return tours.split(",").filter(tourId => tourId !== "").map(tourId => tourId.trim());
   }
 
   _initNotification() {
     let doc = this._window.document;
     if (doc.hidden) {
       // When the preloaded-browser feature is on,
       // it would preload an hidden about:newtab in the background.
@@ -735,17 +736,20 @@ class Onboarding {
         <div id="onboarding-notification-body">
           <h6 id="onboarding-notification-tour-title"></h6>
           <span id="onboarding-notification-tour-message"></span>
         </div>
         <button id="onboarding-notification-action-btn"></button>
       </section>
       <button id="onboarding-notification-close-btn"></button>
     `;
-    let toolTip = this._bundle.formatStringFromName("onboarding.notification-icon-tool-tip", [BRAND_SHORT_NAME], 1);
+    let toolTip = this._bundle.formatStringFromName(
+      this._tourType === "new" ? "onboarding.notification-icon-tool-tip" :
+                                 "onboarding.notification-icon-tooltip-updated",
+      [BRAND_SHORT_NAME], 1);
     div.querySelector("#onboarding-notification-icon").setAttribute("data-tooltip", toolTip);
     return div;
   }
 
   hide() {
     this.setToursCompleted(this._tours.map(tour => tour.id));
     this.sendMessageToChrome("set-prefs", [
       {
@@ -781,17 +785,21 @@ class Onboarding {
        this._bundle.GetStringFromName("onboarding.hidden-checkbox-label-text");
     div.querySelector("#onboarding-header").textContent =
        this._bundle.GetStringFromName("onboarding.overlay-title2");
     return div;
   }
 
   _renderOverlayIcon() {
     let img = this._window.document.createElement("div");
-    let tooltip = this._bundle.formatStringFromName("onboarding.overlay-icon-tooltip", [BRAND_SHORT_NAME], 1);
+    let tooltip = this._bundle.formatStringFromName(
+      this._tourType === "new" ? "onboarding.overlay-icon-tooltip" :
+                                 "onboarding.overlay-icon-tooltip-updated",
+      [BRAND_SHORT_NAME], 1);
+
     img.setAttribute("aria-label", tooltip);
     img.id = "onboarding-overlay-icon";
     return img;
   }
 
   _loadTours(tours) {
     let itemsFrag = this._window.document.createDocumentFragment();
     let pagesFrag = this._window.document.createDocumentFragment();
--- a/browser/extensions/onboarding/locales/en-US/onboarding.properties
+++ b/browser/extensions/onboarding/locales/en-US/onboarding.properties
@@ -5,16 +5,19 @@
 onboarding.overlay-title2=Let’s get started
 onboarding.hidden-checkbox-label-text=Mark all as complete, and hide the tour
 #LOCALIZATION NOTE(onboarding.button.learnMore): this string is used as a button label, displayed near the message, and shared across all the onboarding notifications.
 onboarding.button.learnMore=Learn More
 # LOCALIZATION NOTE(onboarding.notification-icon-tool-tip): This string will be used to show the tooltip alongside the notification icon in the notification bar. %S is brandShortName.
 onboarding.notification-icon-tool-tip=New to %S?
 # LOCALIZATION NOTE(onboarding.overlay-icon-tooltip): This string will be used to show the tooltip alongside the notification icon in the overlay tour. %S is brandShortName.
 onboarding.overlay-icon-tooltip=New to %S? Let’s get started.
+# LOCALIZATION NOTE(onboarding.overlay-icon-tooltip-updated): %S is brandShortName.
+onboarding.overlay-icon-tooltip-updated=%S is all new. See what you can do!
+onboarding.notification-icon-tooltip-updated=See what’s new!
 
 onboarding.tour-search2=Search
 onboarding.tour-search.title2=Find it faster.
 # LOCALIZATION NOTE (onboarding.tour-search.description2): If Amazon is not part
 # of the default searchplugins for your locale, you can replace it with another
 # ecommerce website (if you're shipping one), but not with a general purpose
 # search engine (Google, Bing, Yandex, etc.). Alternatively, only reference
 # Wikipedia and drop Amazon from the text.