Bug 1420193 - Add Connect Another Device button to Sync onboarding panel. r=markh,mossop

MozReview-Commit-ID: 7M6JMJALz2j

--HG--
extra : rebase_source : 171ace5252f1b750f96494b739d9e8fcafea9d7c

browser/components/uitour/UITour-lib.js

@@ -594,6 +594,33 @@ if (typeof Mozilla == "undefined") {
     });
   };
 
+  /**
+   * Request the browser open the "Connect Another Device" Firefox Accounts page.
+   *
+   * @param {Object} extraURLCampaignParams - An object containing additional
+   * parameters for the URL opened by the browser for reasons of promotional
+   * campaign tracking. Each attribute of the object must have a name that
+   * is a string, begins with "utm_" and contains only only alphanumeric
+   * characters, dashes or underscores. The values may be any string and will
+   * automatically be encoded.
+   * @since 59
+   * @example
+   * // Will open https://accounts.firefox.com/connect_another_device?entrypoint=uitour
+   * Mozilla.UITour.showConnectAnotherDevice();
+   * @example
+   * // Will open:
+   * // https://accounts.firefox.com/connect_another_device?entrypoint=uitour&utm_foo=bar&utm_bar=baz
+   * Mozilla.UITour.showConnectAnotherDevice({
+   *   'utm_foo': 'bar',
+   *   'utm_bar': 'baz'
+   * });
+   */
+  Mozilla.UITour.showConnectAnotherDevice = function(extraURLCampaignParams) {
+    _sendEvent("showConnectAnotherDevice", {
+      extraURLCampaignParams: JSON.stringify(extraURLCampaignParams)
+    });
+  };
+
   /**
    * Show a profile refresh/reset dialog, allowing users to choose to reomve
    * add-ons and customizations as well as restore browser defaults, if possible.

browser/components/uitour/UITour.jsm

@@ -569,6 +569,20 @@ this.UITour = {
         break;
       }
 
+      case "showConnectAnotherDevice": {
+        const url = new URL(Services.prefs.getCharPref("identity.fxaccounts.remote.connectdevice.uri"));
+        url.searchParams.append("entrypoint", "uitour");
+        // Call our helper to validate extraURLCampaignParams and populate URLSearchParams
+        if (!this._populateCampaignParams(url, data.extraURLCampaignParams)) {
+          log.warn("showConnectAnotherDevice: invalid campaign args specified");
+          return false;
+        }
+
+        // We want to replace the current tab.
+        browser.loadURI(url.href);
+        break;
+      }
+
       case "resetFirefox": {
         // Open a reset profile dialog window.
         if (ResetProfile.resetSupported()) {

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

@@ -57,6 +57,9 @@ let onClick = evt => {
         Mozilla.UITour.showFirefoxAccounts(null, emailInput.value);
       }
       break;
+    case "onboarding-tour-sync-connect-device-button":
+      Mozilla.UITour.showConnectAnotherDevice();
+      break;
   }
   let classList = evt.target.classList;
   // On keyboard navigation the target would be .onboarding-tour-item.

browser/extensions/onboarding/content/onboarding.css

@@ -356,11 +356,6 @@
   border: none;
 }
 
-.onboarding-tour-page.onboarding-no-button > .onboarding-tour-content {
-  grid-row: tour-page-start / tour-page-end;
-  grid-column: tour-content-start / tour-page-end;
-}
-
 .onboarding-tour-button-container {
   /* Get higher z-index in order to ensure buttons within container are selectable */
   z-index: 2;
@@ -368,12 +363,6 @@
   grid-column: tour-content-start / tour-page-end;
 }
 
-.onboarding-tour-page.onboarding-no-button > .onboarding-tour-button-container {
-  display: none;
-  grid-row: tour-page-end;
-  grid-column: tour-page-end;
-}
-
 .onboarding-tour-action-button {
   background: #0060df;
   /* With 1px transparent border, could see a border in the high-constrast mode */

browser/extensions/onboarding/content/onboarding.js

@@ -43,7 +43,6 @@ const ICON_STATE_DEFAULT = "default";
  *   // Return a div appended with elements for this tours.
  *   // Each tour should contain the following 3 sections in the div:
  *   // .onboarding-tour-description, .onboarding-tour-content, .onboarding-tour-button-container.
- *   // Add onboarding-no-button css class in the div if this tour does not need a button container.
  *   // If there was a .onboarding-tour-action-button present and was clicked, tour would be marked as completed.
  *   getPage() {},
  * },
@@ -184,7 +183,6 @@ var onboardingTourset = {
       const STATE_LOGOUT = "logged-out";
       const STATE_LOGIN = "logged-in";
       let div = win.document.createElement("div");
-      div.classList.add("onboarding-no-button");
       div.dataset.loginState = STATE_LOGOUT;
       // The email validation pattern used in the form comes from IETF rfc5321,
       // which is identical to server-side checker of Firefox Account. See
@@ -207,6 +205,9 @@ var onboardingTourset = {
           </form>
           <img src="resource://onboarding/img/figure_sync.svg" role="presentation"/>
         </section>
+        <aside class="onboarding-tour-button-container show-on-logged-in">
+          <button id="onboarding-tour-sync-connect-device-button" class="onboarding-tour-action-button" data-l10n-id="onboarding.tour-sync.connect-device.button"></button>
+        </aside>
       `;
       let emailInput = div.querySelector("#onboarding-tour-sync-email-input");
       emailInput.placeholder =

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

@@ -84,6 +84,7 @@ onboarding.tour-sync.form.title=Create a Firefox Account
 # "Continue to Firefox Sync" instead.
 onboarding.tour-sync.form.description=to continue to Firefox Sync
 onboarding.tour-sync.button=Next
+onboarding.tour-sync.connect-device.button=Connect Another Device
 onboarding.tour-sync.email-input.placeholder=Email
 onboarding.notification.onboarding-tour-sync.title=Pick up where you left off.
 onboarding.notification.onboarding-tour-sync.message=Still sending yourself links to save or read on your phone? Do it the easy way: get Sync and have the things you save here show up on all of your devices.