Bug 1357029 - Should add the Add-on tour in the onBoarding overlay;r=Fischer,mossop,rexboy

MozReview-Commit-ID: LwSMLN5t7xt

--HG--
extra : rebase_source : bca7cdaabd9d86e479c51fc5a31a25eeee848271

browser/extensions/onboarding/content/onboarding-tour-agent.js

@@ -9,6 +9,9 @@
 document.getElementById("onboarding-overlay-dialog")
                         .addEventListener("click", evt => {
   switch (evt.target.id) {
+    case "onboarding-tour-addons-button":
+      Mozilla.UITour.showHighlight("addons");
+      break;
     case "onboarding-tour-private-browsing-button":
       Mozilla.UITour.showHighlight("privateWindow");
       break;

browser/extensions/onboarding/content/onboarding.css

@@ -225,3 +225,12 @@
 #onboarding-tour-private-browsing:hover {
   background-image: url("img/icons_private-colored.svg");
 }
+
+#onboarding-tour-addons {
+  background-image: url("img/icons_addons.svg");
+}
+
+#onboarding-tour-addons.onboarding-active,
+#onboarding-tour-addons:hover {
+  background-image: url("img/icons_addons-colored.svg");
+}

browser/extensions/onboarding/content/onboarding.js

@@ -33,8 +33,6 @@ const BRAND_SHORT_NAME = Services.strings
  *   // Add no-button css class in the div if this tour does not need a button.
  *   // The overlay layout will responsively position and distribute space for these 3 sections based on viewport size
  *   getPage() {},
- *   isCompleted() {},
- *   setCompleted() {},
  * },
  **/
 var onboardingTours = [
@@ -57,13 +55,25 @@ var onboardingTours = [
       `;
       return div;
     },
-    isCompleted() {
-      // TODO: determine completion by looking up preferences.
-      return false;
-    },
-    setCompleted() {
-      // TODO: set completion to preferences.
-      return true;
+  },
+  {
+    id: "onboarding-tour-addons",
+    tourNameId: "onboarding.tour-addons",
+    getPage(win) {
+      let div = win.document.createElement("div");
+      div.innerHTML = `
+        <section class="onboarding-tour-description">
+          <h1 data-l10n-id="onboarding.tour-addons.title"></h1>
+          <p data-l10n-id="onboarding.tour-addons.description"></p>
+        </section>
+        <section class="onboarding-tour-content">
+          <img src="resource://onboarding/img/figure_addons.svg" />
+        </section>
+        <aside class="onboarding-tour-button">
+          <button id="onboarding-tour-addons-button" data-l10n-id="onboarding.tour-addons.button"></button>
+        </aside>
+      `;
+      return div;
     },
   },
   {
@@ -85,14 +95,6 @@ var onboardingTours = [
       `;
       return div;
     },
-    isCompleted() {
-      // TODO: determine completion by looking up preferences.
-      return false;
-    },
-    setCompleted() {
-      // TODO: set completion to preferences.
-      return true;
-    },
   },
 ];
 

browser/extensions/onboarding/locales/en-US/onboarding.properties

@@ -1,8 +1,7 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
-# LOCALIZATION NOTE(onboarding.overlay-title): This string will be used in the
-# overlay title. %S is brandShortName.
+# LOCALIZATION NOTE(onboarding.tour-title): This string will be used in the overlay title. %S is brandShortName
 onboarding.overlay-title=Getting started with %S
 onboarding.tour-search=One-Click Search
 onboarding.tour-search.title=Find the needle or the haystack.
@@ -17,8 +16,13 @@ onboarding.tour-search.button=Open One-Click Search
 onboarding.tour-private-browsing=Private Browsing
 onboarding.tour-private-browsing.title=A little privacy goes a long way.
 
-# LOCALIZATION NOTE(onboarding.tour-private-browsing.description): %S is
-# brandShortName.
+# LOCALIZATION NOTE(onboarding.tour-private-browsing.description): %S is brandShortName.
 onboarding.tour-private-browsing.description=Browse the internet without saving your searches or the sites you visited. When your session ends, the cookies disappear from %S like they were never there.
 onboarding.tour-private-browsing.button=Show Private Browsing in Menu
 onboarding.hidden-checkbox-label=Hide the tour
+onboarding.tour-addons=Add-ons
+onboarding.tour-addons.title=Add more functionality.
+
+# LOCALIZATION NOTE(onboarding.tour-addons.description): This string will be used in the add-on tour description. %1$S is brandShortName
+onboarding.tour-addons.description=Add-ons expand %1$S’s built-in features, so %1$S works the way you do. Compare prices, check the weather or express your personality with a custom theme.
+onboarding.tour-addons.button=Show Add-ons in Menu