[BASILISK] Port PM Sync Client - Part 2: Basic Integration with glue and preferences

2 files changed, 97 insertions, 657 deletions

diff --git a/application/basilisk/components/preferences/in-content/sync.js b/application/basilisk/components/preferences/in-content/sync.js
index 32b94de86..917b5f123 100644
--- a/application/basilisk/components/preferences/in-content/sync.js
+++ b/application/basilisk/components/preferences/in-content/sync.js
@@ -1,32 +1,16 @@
 /* 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/. */
+ * 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/. */
 
 Components.utils.import("resource://services-sync/main.js");
 Components.utils.import("resource://gre/modules/Services.jsm");
 
-XPCOMUtils.defineLazyGetter(this, "FxAccountsCommon", function () {
-  return Components.utils.import("resource://gre/modules/FxAccountsCommon.js", {});
-});
-
-XPCOMUtils.defineLazyModuleGetter(this, "fxAccounts",
-  "resource://gre/modules/FxAccounts.jsm");
-
 const PAGE_NO_ACCOUNT = 0;
 const PAGE_HAS_ACCOUNT = 1;
 const PAGE_NEEDS_UPDATE = 2;
-const FXA_PAGE_LOGGED_OUT = 3;
-const FXA_PAGE_LOGGED_IN = 4;
-
-// Indexes into the "login status" deck.
-// We are in a successful verified state - everything should work!
-const FXA_LOGIN_VERIFIED = 0;
-// We have logged in to an unverified account.
-const FXA_LOGIN_UNVERIFIED = 1;
-// We are logged in locally, but the server rejected our credentials.
-const FXA_LOGIN_FAILED = 2;
 
 var gSyncPane = {
+  _stringBundle: null,
   prefArray: ["engine.bookmarks", "engine.passwords", "engine.prefs",
               "engine.tabs", "engine.history"],
 
@@ -45,13 +29,11 @@ var gSyncPane = {
   needsUpdate: function () {
     this.page = PAGE_NEEDS_UPDATE;
     let label = document.getElementById("loginError");
-    label.textContent = Weave.Utils.getErrorString(Weave.Status.login);
+    label.value = Weave.Utils.getErrorString(Weave.Status.login);
     label.className = "error";
   },
 
   init: function () {
-    this._setupEventListeners();
-
     // If the Service hasn't finished initializing, wait for it.
     let xps = Components.classes["@mozilla.org/weave/service;1"]
                                 .getService(Components.interfaces.nsISupports)
@@ -62,10 +44,6 @@ var gSyncPane = {
       return;
     }
 
-    // it may take some time before we can determine what provider to use
-    // and the state of that provider, so show the "please wait" page.
-    this._showLoadPage(xps);
-
     let onUnload = function () {
       window.removeEventListener("unload", onUnload, false);
       try {
@@ -85,235 +63,50 @@ var gSyncPane = {
     xps.ensureLoaded();
   },
 
-  _showLoadPage: function (xps) {
-    let username;
-    try {
-      username = Services.prefs.getCharPref("services.sync.username");
-    } catch (e) {}
-    if (!username) {
-      this.page = FXA_PAGE_LOGGED_OUT;
-    } else {
-      this.page = PAGE_HAS_ACCOUNT;
-    }
-  },
-
   _init: function () {
     let topics = ["weave:service:login:error",
                   "weave:service:login:finish",
-                  "weave:service:start-over:finish",
+                  "weave:service:start-over",
                   "weave:service:setup-complete",
-                  "weave:service:logout:finish",
-                  FxAccountsCommon.ONVERIFIED_NOTIFICATION,
-                  FxAccountsCommon.ONLOGIN_NOTIFICATION,
-                  FxAccountsCommon.ON_PROFILE_CHANGE_NOTIFICATION,
-                  ];
+                  "weave:service:logout:finish"];
+
     // Add the observers now and remove them on unload
-    // XXXzpao This should use Services.obs.* but Weave's Obs does nice handling
+    //XXXzpao This should use Services.obs.* but Weave's Obs does nice handling
     //        of `this`. Fix in a followup. (bug 583347)
     topics.forEach(function (topic) {
       Weave.Svc.Obs.add(topic, this.updateWeavePrefs, this);
     }, this);
-
     window.addEventListener("unload", function() {
       topics.forEach(function (topic) {
         Weave.Svc.Obs.remove(topic, this.updateWeavePrefs, this);
       }, gSyncPane);
     }, false);
 
-    XPCOMUtils.defineLazyGetter(this, '_stringBundle', () => {
-      return Services.strings.createBundle("chrome://browser/locale/preferences/preferences.properties");
-    });
-
-    XPCOMUtils.defineLazyGetter(this, '_accountsStringBundle', () => {
-      return Services.strings.createBundle("chrome://browser/locale/accounts.properties");
-    });
-
-    let url = Services.prefs.getCharPref("identity.mobilepromo.android") + "sync-preferences";
-    document.getElementById("fxaMobilePromo-android").setAttribute("href", url);
-    document.getElementById("fxaMobilePromo-android-hasFxaAccount").setAttribute("href", url);
-    url = Services.prefs.getCharPref("identity.mobilepromo.ios") + "sync-preferences";
-    document.getElementById("fxaMobilePromo-ios").setAttribute("href", url);
-    document.getElementById("fxaMobilePromo-ios-hasFxaAccount").setAttribute("href", url);
-
-    document.getElementById("tosPP-small-ToS").setAttribute("href", gSyncUtils.tosURL);
-    document.getElementById("tosPP-normal-ToS").setAttribute("href", gSyncUtils.tosURL);
-    document.getElementById("tosPP-small-PP").setAttribute("href", gSyncUtils.privacyPolicyURL);
-    document.getElementById("tosPP-normal-PP").setAttribute("href", gSyncUtils.privacyPolicyURL);
-
-    fxAccounts.promiseAccountsManageURI(this._getEntryPoint()).then(url => {
-      document.getElementById("verifiedManage").setAttribute("href", url);
-    });
-
+    this._stringBundle =
+      Services.strings.createBundle("chrome://browser/locale/preferences/preferences.properties");
     this.updateWeavePrefs();
-
-    this._initProfileImageUI();
-  },
-
-  _toggleComputerNameControls: function(editMode) {
-    let textbox = document.getElementById("fxaSyncComputerName");
-    textbox.disabled = !editMode;
-    document.getElementById("fxaChangeDeviceName").hidden = editMode;
-    document.getElementById("fxaCancelChangeDeviceName").hidden = !editMode;
-    document.getElementById("fxaSaveChangeDeviceName").hidden = !editMode;
-  },
-
-  _focusComputerNameTextbox: function() {
-    let textbox = document.getElementById("fxaSyncComputerName");
-    let valLength = textbox.value.length;
-    textbox.focus();
-    textbox.setSelectionRange(valLength, valLength);
-  },
-
-  _blurComputerNameTextbox: function() {
-    document.getElementById("fxaSyncComputerName").blur();
-  },
-
-  _focusAfterComputerNameTextbox: function() {
-    // Focus the most appropriate element that's *not* the "computer name" box.
-    Services.focus.moveFocus(window,
-                             document.getElementById("fxaSyncComputerName"),
-                             Services.focus.MOVEFOCUS_FORWARD, 0);
-  },
-
-  _updateComputerNameValue: function(save) {
-    if (save) {
-      let textbox = document.getElementById("fxaSyncComputerName");
-      Weave.Service.clientsEngine.localName = textbox.value;
-    }
-    this._populateComputerName(Weave.Service.clientsEngine.localName);
-  },
-
-  _setupEventListeners: function() {
-    function setEventListener(aId, aEventType, aCallback)
-    {
-      document.getElementById(aId)
-              .addEventListener(aEventType, aCallback.bind(gSyncPane));
-    }
-
-    setEventListener("noAccountSetup", "click", function (aEvent) {
-      aEvent.stopPropagation();
-      gSyncPane.openSetup(null);
-    });
-    setEventListener("noAccountPair", "click", function (aEvent) {
-      aEvent.stopPropagation();
-      gSyncPane.openSetup('pair');
-    });
-    setEventListener("syncChangePassword", "command",
-      () => gSyncUtils.changePassword());
-    setEventListener("syncResetPassphrase", "command",
-      () => gSyncUtils.resetPassphrase());
-    setEventListener("syncReset", "command", gSyncPane.resetSync);
-    setEventListener("syncAddDeviceLabel", "click", function () {
-      gSyncPane.openAddDevice();
-      return false;
-    });
-    setEventListener("syncEnginesList", "select", function () {
-      if (this.selectedCount)
-        this.clearSelection();
-    });
-    setEventListener("syncComputerName", "change", function (e) {
-      gSyncUtils.changeName(e.target);
-    });
-    setEventListener("fxaChangeDeviceName", "command", function () {
-      this._toggleComputerNameControls(true);
-      this._focusComputerNameTextbox();
-    });
-    setEventListener("fxaCancelChangeDeviceName", "command", function () {
-      // We explicitly blur the textbox because of bug 75324, then after
-      // changing the state of the buttons, force focus to whatever the focus
-      // manager thinks should be next (which on the mac, depends on an OSX
-      // keyboard access preference)
-      this._blurComputerNameTextbox();
-      this._toggleComputerNameControls(false);
-      this._updateComputerNameValue(false);
-      this._focusAfterComputerNameTextbox();
-    });
-    setEventListener("fxaSaveChangeDeviceName", "command", function () {
-      // Work around bug 75324 - see above.
-      this._blurComputerNameTextbox();
-      this._toggleComputerNameControls(false);
-      this._updateComputerNameValue(true);
-      this._focusAfterComputerNameTextbox();
-    });
-    setEventListener("unlinkDevice", "click", function () {
-      gSyncPane.startOver(true);
-      return false;
-    });
-    setEventListener("loginErrorUpdatePass", "click", function () {
-      gSyncPane.updatePass();
-      return false;
-    });
-    setEventListener("loginErrorResetPass", "click", function () {
-      gSyncPane.resetPass();
-      return false;
-    });
-    setEventListener("loginErrorStartOver", "click", function () {
-      gSyncPane.startOver(true);
-      return false;
-    });
-    setEventListener("noFxaSignUp", "command", function () {
-      gSyncPane.signUp();
-      return false;
-    });
-    setEventListener("noFxaSignIn", "command", function () {
-      gSyncPane.signIn();
-      return false;
-    });
-    setEventListener("fxaUnlinkButton", "command", function () {
-      gSyncPane.unlinkFirefoxAccount(true);
-    });
-    setEventListener("verifyFxaAccount", "command",
-      gSyncPane.verifyFirefoxAccount);
-    setEventListener("unverifiedUnlinkFxaAccount", "command", function () {
-      /* no warning as account can't have previously synced */
-      gSyncPane.unlinkFirefoxAccount(false);
-    });
-    setEventListener("rejectReSignIn", "command",
-      gSyncPane.reSignIn);
-    setEventListener("rejectUnlinkFxaAccount", "command", function () {
-      gSyncPane.unlinkFirefoxAccount(true);
-    });
-    setEventListener("fxaSyncComputerName", "keypress", function (e) {
-      if (e.keyCode == KeyEvent.DOM_VK_RETURN) {
-        document.getElementById("fxaSaveChangeDeviceName").click();
-      } else if (e.keyCode == KeyEvent.DOM_VK_ESCAPE) {
-        document.getElementById("fxaCancelChangeDeviceName").click();
-      }
-    });
-  },
-
-  _initProfileImageUI: function () {
-    try {
-      if (Services.prefs.getBoolPref("identity.fxaccounts.profile_image.enabled")) {
-        document.getElementById("fxaProfileImage").hidden = false;
-      }
-    } catch (e) { }
+    document.getElementById("weavePrefsDeck").setAttribute("hidden", "");
   },
 
   updateWeavePrefs: function () {
-    let service = Components.classes["@mozilla.org/weave/service;1"]
-                  .getService(Components.interfaces.nsISupports)
-                  .wrappedJSObject;
     if (Weave.Status.service == Weave.CLIENT_NOT_CONFIGURED ||
         Weave.Svc.Prefs.get("firstSync", "") == "notReady") {
       this.page = PAGE_NO_ACCOUNT;
-    // else: sync was previously configured for the legacy provider, so we
-    // make the "old" panels available.
     } else if (Weave.Status.login == Weave.LOGIN_FAILED_INVALID_PASSPHRASE ||
                Weave.Status.login == Weave.LOGIN_FAILED_LOGIN_REJECTED) {
       this.needsUpdate();
     } else {
       this.page = PAGE_HAS_ACCOUNT;
-      document.getElementById("accountName").textContent = Weave.Service.identity.account;
+      document.getElementById("accountName").value = Weave.Service.identity.account;
       document.getElementById("syncComputerName").value = Weave.Service.clientsEngine.localName;
-      document.getElementById("tosPP-normal").hidden = this._usingCustomServer;
+      document.getElementById("tosPP").hidden = this._usingCustomServer;
     }
   },
 
   startOver: function (showDialog) {
     if (showDialog) {
       let flags = Services.prompt.BUTTON_POS_0 * Services.prompt.BUTTON_TITLE_IS_STRING +
-                  Services.prompt.BUTTON_POS_1 * Services.prompt.BUTTON_TITLE_CANCEL +
+                  Services.prompt.BUTTON_POS_1 * Services.prompt.BUTTON_TITLE_CANCEL + 
                   Services.prompt.BUTTON_POS_1_DEFAULT;
       let buttonChoice =
         Services.prompt.confirmEx(window,
@@ -324,8 +117,9 @@ var gSyncPane = {
                                   null, null, null, {});
 
       // If the user selects cancel, just bail
-      if (buttonChoice == 1)
+      if (buttonChoice == 1) {
         return;
+      }
     }
 
     Weave.Service.startOver();
@@ -333,33 +127,19 @@ var gSyncPane = {
   },
 
   updatePass: function () {
-    if (Weave.Status.login == Weave.LOGIN_FAILED_LOGIN_REJECTED)
+    if (Weave.Status.login == Weave.LOGIN_FAILED_LOGIN_REJECTED) {
       gSyncUtils.changePassword();
-    else
+    } else {
       gSyncUtils.updatePassphrase();
+    }
   },
 
   resetPass: function () {
-    if (Weave.Status.login == Weave.LOGIN_FAILED_LOGIN_REJECTED)
+    if (Weave.Status.login == Weave.LOGIN_FAILED_LOGIN_REJECTED) {
       gSyncUtils.resetPassword();
-    else
+    } else {
       gSyncUtils.resetPassphrase();
-  },
-
-  _getEntryPoint: function () {
-    let params = new URLSearchParams(document.URL.split("#")[0].split("?")[1] || "");
-    return params.get("entrypoint") || "preferences";
-  },
-
-  _openAboutAccounts: function(action) {
-    let entryPoint = this._getEntryPoint();
-    let params = new URLSearchParams();
-    if (action) {
-      params.set("action", action);
     }
-    params.set("entrypoint", entryPoint);
-
-    this.replaceTabWithUrl("about:accounts?" + params);
   },
 
   /**
@@ -372,159 +152,16 @@ var gSyncPane = {
    *          "reset" -- reset sync
    */
   openSetup: function (wizardType) {
-    let service = Components.classes["@mozilla.org/weave/service;1"]
-                  .getService(Components.interfaces.nsISupports)
-                  .wrappedJSObject;
-
     let win = Services.wm.getMostRecentWindow("Weave:AccountSetup");
-    if (win)
+    if (win) {
       win.focus();
-    else {
+    } else {
       window.openDialog("chrome://browser/content/sync/setup.xul",
                         "weaveSetup", "centerscreen,chrome,resizable=no",
                         wizardType);
     }
   },
 
-  openContentInBrowser: function(url, options) {
-    let win = Services.wm.getMostRecentWindow("navigator:browser");
-    if (!win) {
-      // no window to use, so use _openLink to create a new one.  We don't
-      // always use that as it prefers to open a new window rather than use
-      // an existing one.
-      gSyncUtils._openLink(url);
-      return;
-    }
-    win.switchToTabHavingURI(url, true, options);
-  },
-
-  // Replace the current tab with the specified URL.
-  replaceTabWithUrl(url) {
-    // Get the <browser> element hosting us.
-    let browser = window.QueryInterface(Ci.nsIInterfaceRequestor)
-                        .getInterface(Ci.nsIWebNavigation)
-                        .QueryInterface(Ci.nsIDocShell)
-                        .chromeEventHandler;
-    // And tell it to load our URL.
-    browser.loadURI(url);
-  },
-
-  signUp: function() {
-    this._openAboutAccounts("signup");
-  },
-
-  signIn: function() {
-    this._openAboutAccounts("signin");
-  },
-
-  reSignIn: function() {
-    this._openAboutAccounts("reauth");
-  },
-
-
-  clickOrSpaceOrEnterPressed: function(event) {
-    // Note: charCode is deprecated, but 'char' not yet implemented.
-    // Replace charCode with char when implemented, see Bug 680830
-    return ((event.type == "click" && event.button == 0) ||
-            (event.type == "keypress" &&
-             (event.charCode == KeyEvent.DOM_VK_SPACE || event.keyCode == KeyEvent.DOM_VK_RETURN)));
-  },
-
-  openChangeProfileImage: function(event) {
-    if (this.clickOrSpaceOrEnterPressed(event)) {
-      fxAccounts.promiseAccountsChangeProfileURI(this._getEntryPoint(), "avatar")
-          .then(url => {
-        this.openContentInBrowser(url, {
-          replaceQueryString: true
-        });
-      });
-      // Prevent page from scrolling on the space key.
-      event.preventDefault();
-    }
-  },
-
-  openManageFirefoxAccount: function(event) {
-    if (this.clickOrSpaceOrEnterPressed(event)) {
-      this.manageFirefoxAccount();
-      // Prevent page from scrolling on the space key.
-      event.preventDefault();
-    }
-  },
-
-  manageFirefoxAccount: function() {
-    fxAccounts.promiseAccountsManageURI(this._getEntryPoint())
-      .then(url => {
-        this.openContentInBrowser(url, {
-          replaceQueryString: true
-        });
-      });
-  },
-
-  verifyFirefoxAccount: function() {
-    let showVerifyNotification = (data) => {
-      let isError = !data;
-      let maybeNot = isError ? "Not" : "";
-      let sb = this._accountsStringBundle;
-      let title = sb.GetStringFromName("verification" + maybeNot + "SentTitle");
-      let email = !isError && data ? data.email : "";
-      let body = sb.formatStringFromName("verification" + maybeNot + "SentBody", [email], 1);
-      new Notification(title, { body })
-    }
-
-    let onError = () => {
-      showVerifyNotification();
-    };
-
-    let onSuccess = data => {
-      if (data) {
-        showVerifyNotification(data);
-      } else {
-        onError();
-      }
-    };
-
-    fxAccounts.resendVerificationEmail()
-      .then(fxAccounts.getSignedInUser, onError)
-      .then(onSuccess, onError);
-  },
-
-  openOldSyncSupportPage: function() {
-    let url = Services.urlFormatter.formatURLPref("app.support.baseURL") + "old-sync";
-    this.openContentInBrowser(url);
-  },
-
-  unlinkFirefoxAccount: function(confirm) {
-    if (confirm) {
-      // We use a string bundle shared with aboutAccounts.
-      let sb = Services.strings.createBundle("chrome://browser/locale/syncSetup.properties");
-      let disconnectLabel = sb.GetStringFromName("disconnect.label");
-      let title = sb.GetStringFromName("disconnect.verify.title");
-      let body = sb.GetStringFromName("disconnect.verify.bodyHeading") +
-                 "\n\n" +
-                 sb.GetStringFromName("disconnect.verify.bodyText");
-      let ps = Services.prompt;
-      let buttonFlags = (ps.BUTTON_POS_0 * ps.BUTTON_TITLE_IS_STRING) +
-                        (ps.BUTTON_POS_1 * ps.BUTTON_TITLE_CANCEL) +
-                        ps.BUTTON_POS_1_DEFAULT;
-
-      let factory = Cc["@mozilla.org/prompter;1"]
-                      .getService(Ci.nsIPromptFactory);
-      let prompt = factory.getPrompt(window, Ci.nsIPrompt);
-      let bag = prompt.QueryInterface(Ci.nsIWritablePropertyBag2);
-      bag.setPropertyAsBool("allowTabModal", true);
-
-      let pressed = prompt.confirmEx(title, body, buttonFlags,
-                                     disconnectLabel, null, null, null, {});
-
-      if (pressed != 0) { // 0 is the "continue" button
-        return;
-      }
-    }
-    fxAccounts.signOut().then(() => {
-      this.updateWeavePrefs();
-    });
-  },
-
   openQuotaDialog: function () {
     let win = Services.wm.getMostRecentWindow("Sync:ViewQuota");
     if (win) {
@@ -536,27 +173,21 @@ var gSyncPane = {
   },
 
   openAddDevice: function () {
-    if (!Weave.Utils.ensureMPUnlocked())
+    if (!Weave.Utils.ensureMPUnlocked()) {
       return;
+    }
 
     let win = Services.wm.getMostRecentWindow("Sync:AddDevice");
-    if (win)
+    if (win) {
       win.focus();
-    else
+    } else {
       window.openDialog("chrome://browser/content/sync/addDevice.xul",
                         "syncAddDevice", "centerscreen,chrome,resizable=no");
+    }
   },
 
   resetSync: function () {
     this.openSetup("reset");
   },
-
-  _populateComputerName(value) {
-    let textbox = document.getElementById("fxaSyncComputerName");
-    if (!textbox.hasAttribute("placeholder")) {
-      textbox.setAttribute("placeholder",
-                           Weave.Utils.getDefaultDeviceName());
-    }
-    textbox.value = value;
-  },
 };
+
diff --git a/application/basilisk/components/preferences/in-content/sync.xul b/application/basilisk/components/preferences/in-content/sync.xul
index cf0e81ca1..7ca075483 100644
--- a/application/basilisk/components/preferences/in-content/sync.xul
+++ b/application/basilisk/components/preferences/in-content/sync.xul
@@ -1,35 +1,22 @@
-# 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/.
-
-<!-- Sync panel -->
-
-<preferences id="syncEnginePrefs" hidden="true" data-category="paneSync">
-  <preference id="engine.addons"
-              name="services.sync.engine.addons"
-              type="bool"/>
-  <preference id="engine.bookmarks"
-              name="services.sync.engine.bookmarks"
-              type="bool"/>
-  <preference id="engine.history"
-              name="services.sync.engine.history"
-              type="bool"/>
-  <preference id="engine.tabs"
-              name="services.sync.engine.tabs"
-              type="bool"/>
-  <preference id="engine.prefs"
-              name="services.sync.engine.prefs"
-              type="bool"/>
-  <preference id="engine.passwords"
-              name="services.sync.engine.passwords"
-              type="bool"/>
-</preferences>
+<!-- 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/. -->
 
 <script type="application/javascript"
         src="chrome://browser/content/preferences/in-content/sync.js"/>
 <script type="application/javascript"
         src="chrome://browser/content/sync/utils.js"/>
 
+<preferences>
+<!--      <preference id="engine.addons"    name="services.sync.engine.addons"    type="bool"/> -->
+  <preference id="engine.bookmarks" name="services.sync.engine.bookmarks" type="bool"/>
+  <preference id="engine.history"   name="services.sync.engine.history"   type="bool"/>
+  <preference id="engine.tabs"      name="services.sync.engine.tabs"      type="bool"/>
+  <preference id="engine.prefs"     name="services.sync.engine.prefs"     type="bool"/>
+  <preference id="engine.passwords" name="services.sync.engine.passwords" type="bool"/>
+</preferences>
+
+
 <hbox id="header-sync"
       class="header"
       hidden="true"
@@ -39,22 +26,19 @@
 </hbox>
 
 <deck id="weavePrefsDeck" data-category="paneSync" hidden="true">
-  <!-- These panels are for the "legacy" sync provider -->
   <vbox id="noAccount" align="center">
     <spacer flex="1"/>
     <description id="syncDesc">
       &weaveDesc.label;
     </description>
     <separator/>
-    <label id="noAccountSetup" class="text-link">
-      &setupButton.label;
-    </label>
-    <vbox id="pairDevice">
-      <separator/>
-      <label id="noAccountPair" class="text-link">
-        &pairDevice.label;
-      </label>
-    </vbox>
+    <label class="text-link"
+           onclick="event.stopPropagation(); gSyncPane.openSetup(null);"
+           value="&setupButton.label;"/>
+    <separator/>
+    <label class="text-link"
+           onclick="event.stopPropagation(); gSyncPane.openSetup('pair');"
+           value="&pairDevice.label;"/>
     <spacer flex="3"/>
   </vbox>
 
@@ -63,7 +47,7 @@
       <!-- label is set to account name -->
       <caption id="accountCaption" align="center">
         <image id="accountCaptionImage"/>
-        <label id="accountName"/>
+        <label id="accountName" value=""/>
       </caption>
 
       <hbox>
@@ -71,28 +55,39 @@
                 label="&manageAccount.label;"
                 accesskey="&manageAccount.accesskey;">
           <menupopup>
-            <menuitem id="syncViewQuota" label="&viewQuota.label;"
+            <menuitem label="&viewQuota.label;"
                       oncommand="gSyncPane.openQuotaDialog();"/>
-            <menuseparator/> 
-            <menuitem id="syncChangePassword" label="&changePassword2.label;"/>
-            <menuitem id="syncResetPassphrase" label="&myRecoveryKey.label;"/>
             <menuseparator/>
-            <menuitem id="syncReset" label="&resetSync2.label;"/>
+            <menuitem label="&changePassword2.label;"
+                      oncommand="gSyncUtils.changePassword();"/>
+            <menuitem label="&myRecoveryKey.label;"
+                      oncommand="gSyncUtils.resetPassphrase();"/>
+            <menuseparator/>
+            <menuitem label="&resetSync2.label;"
+                      oncommand="gSyncPane.resetSync();"/>
           </menupopup>
         </button>
       </hbox>
 
       <hbox>
         <label id="syncAddDeviceLabel"
-               class="text-link">
-          &pairDevice.label;
-        </label>
+               class="text-link"
+               onclick="gSyncPane.openAddDevice(); return false;"
+               value="&pairDevice.label;"/>
       </hbox>
 
       <vbox>
-        <label>&syncMy.label;</label>
+        <label value="&syncMy.label;" />
         <richlistbox id="syncEnginesList"
-                     orient="vertical">
+                     orient="vertical"
+                     onselect="if (this.selectedCount) this.clearSelection();">
+          <!--
+          <richlistitem>
+            <checkbox label="&engine.addons.label;"
+                      accesskey="&engine.addons.accesskey;"
+                      preference="engine.addons"/>
+          </richlistitem>
+          -->
           <richlistitem>
             <checkbox label="&engine.bookmarks.label;"
                       accesskey="&engine.bookmarks.accesskey;"
@@ -130,228 +125,42 @@
         </columns>
         <rows>
           <row align="center">
-            <label control="syncComputerName">
-              &syncDeviceName.label;
-            </label>
-            <textbox id="syncComputerName"/>
+            <label value="&syncDeviceName.label;"
+                   accesskey="&syncDeviceName.accesskey;"
+                   control="syncComputerName"/>
+            <textbox id="syncComputerName"
+                     onchange="gSyncUtils.changeName(this)"/>
           </row>
         </rows>
       </grid>
       <hbox>
-        <label id="unlinkDevice" class="text-link">
-          &unlinkDevice.label;
-        </label>
+        <label class="text-link"
+               onclick="gSyncPane.startOver(true); return false;"
+               value="&unlinkDevice.label;"/>
       </hbox>
     </groupbox>
-    <vbox id="tosPP-normal">
-      <label id="tosPP-normal-ToS" class="text-link">
-        &prefs.tosLink.label;
-      </label>
-      <label id="tosPP-normal-PP" class="text-link">
-        &prefs.ppLink.label;
-      </label>
-    </vbox>
-  </vbox>
-
-  <vbox id="needsUpdate" align="center" pack="center">
-    <hbox>
-      <label id="loginError"/>
-      <label id="loginErrorUpdatePass" class="text-link">
-        &updatePass.label;
-      </label>
-      <label id="loginErrorResetPass" class="text-link">
-        &resetPass.label;
-      </label>
+    <hbox id="tosPP" pack="center">
+      <label class="text-link"
+             onclick="event.stopPropagation();gSyncUtils.openToS();"
+             value="&prefs.tosLink.label;"/>
+      <label class="text-link"
+             onclick="event.stopPropagation();gSyncUtils.openPrivacyPolicy();"
+             value="&prefs.ppLink.label;"/>
     </hbox>
-    <label id="loginErrorStartOver" class="text-link">
-      &unlinkDevice.label;
-    </label>
   </vbox>
 
-  <!-- These panels are for the Firefox Accounts identity provider -->
-  <vbox id="noFxaAccount">
-    <hbox>
-      <vbox id="fxaContentWrapper">
-        <groupbox id="noFxaGroup">
-          <vbox>
-            <label id="noFxaCaption">&signedOut.caption;</label>
-            <description id="noFxaDescription" flex="1">&signedOut.description;</description>
-            <hbox class="fxaAccountBox">
-              <vbox>
-                <image class="fxaFirefoxLogo"/>
-              </vbox>
-              <vbox flex="1">
-                <label id="signedOutAccountBoxTitle">&signedOut.accountBox.title;</label>
-                <hbox class="fxaAccountBoxButtons">
-                  <button id="noFxaSignUp" label="&signedOut.accountBox.create;" accesskey="&signedOut.accountBox.create.accesskey;"></button>
-                  <button id="noFxaSignIn" label="&signedOut.accountBox.signin;" accesskey="&signedOut.accountBox.signin.accesskey;"></button>
-                </hbox>
-              </vbox>
-            </hbox>
-          </vbox>
-        </groupbox>
-      </vbox>
-      <vbox>
-        <image class="fxaSyncIllustration"/>
-      </vbox>
-    </hbox>
-    <label class="fxaMobilePromo">
-        &mobilePromo3.start;<!-- We put these comments to avoid inserting white spaces
-        --><label id="fxaMobilePromo-android"
-                  class="androidLink text-link"><!--
-        -->&mobilePromo3.androidLink;</label><!--
-        -->&mobilePromo3.iOSBefore;<!--
-        --><label id="fxaMobilePromo-ios"
-                  class="iOSLink text-link"><!--
-        -->&mobilePromo3.iOSLink;</label><!--
-        -->&mobilePromo3.end;
-    </label>
-  </vbox>
-
-  <vbox id="hasFxaAccount">
+  <vbox id="needsUpdate" align="center" pack="center">
     <hbox>
-      <vbox id="fxaContentWrapper">
-        <groupbox id="fxaGroup">
-          <caption><label>&syncBrand.fxAccount.label;</label></caption>
-          <deck id="fxaLoginStatus">
-
-            <!-- logged in and verified and all is good -->
-            <hbox id="fxaLoginVerified" class="fxaAccountBox">
-              <vbox align="center" pack="center">
-                <image id="fxaProfileImage" class="actionable"
-                    role="button"
-                    onclick="gSyncPane.openChangeProfileImage(event);" hidden="true"
-                    onkeypress="gSyncPane.openChangeProfileImage(event);"
-                    tooltiptext="&profilePicture.tooltip;"/>
-              </vbox>
-              <vbox flex="1" pack="center">
-                <label id="fxaDisplayName" hidden="true"/>
-                <label id="fxaEmailAddress1"/>
-                <hbox class="fxaAccountBoxButtons">
-                  <button id="fxaUnlinkButton" label="&disconnect.label;" accesskey="&disconnect.accesskey;"/>
-                  <html:a id="verifiedManage" target="_blank"
-                         accesskey="&verifiedManage.accesskey;"
-                         onkeypress="gSyncPane.openManageFirefoxAccount(event);"><!--
-                  -->&verifiedManage.label;</html:a>
-                </hbox>
-              </vbox>
-            </hbox>
-
-            <!-- logged in to an unverified account -->
-            <hbox id="fxaLoginUnverified" class="fxaAccountBox">
-              <vbox>
-                <image id="fxaProfileImage"/>
-              </vbox>
-              <vbox flex="1">
-                <hbox>
-                  <vbox><image id="fxaLoginRejectedWarning"/></vbox>
-                  <description flex="1">
-                    &signedInUnverified.beforename.label;
-                    <label id="fxaEmailAddress2"/>
-                    &signedInUnverified.aftername.label;
-                  </description>
-                </hbox>
-                <hbox class="fxaAccountBoxButtons">
-                  <button id="verifyFxaAccount" accesskey="&verify.accesskey;">&verify.label;</button>
-                  <button id="unverifiedUnlinkFxaAccount" accesskey="&forget.accesskey;">&forget.label;</button>
-                </hbox>
-              </vbox>
-            </hbox>
-
-            <!-- logged in locally but server rejected credentials -->
-            <hbox id="fxaLoginRejected" class="fxaAccountBox">
-              <vbox>
-                <image id="fxaProfileImage"/>
-              </vbox>
-              <vbox flex="1">
-                <hbox>
-                  <vbox><image id="fxaLoginRejectedWarning"/></vbox>
-                  <description flex="1">
-                    &signedInLoginFailure.beforename.label;
-                    <label id="fxaEmailAddress3"/>
-                    &signedInLoginFailure.aftername.label;
-                  </description>
-                </hbox>
-                <hbox class="fxaAccountBoxButtons">
-                  <button id="rejectReSignIn" accessky="&signIn.accesskey;">&signIn.label;</button>
-                  <button id="rejectUnlinkFxaAccount" accesskey="&forget.accesskey;">&forget.label;</button>
-                </hbox>
-              </vbox>
-            </hbox>
-          </deck>
-        </groupbox>
-        <groupbox id="syncOptions">
-          <caption><label>&signedIn.engines.label;</label></caption>
-          <hbox id="fxaSyncEngines">
-            <vbox align="start" flex="1">
-              <checkbox label="&engine.tabs.label;"
-                        accesskey="&engine.tabs.accesskey;"
-                        preference="engine.tabs"/>
-              <checkbox label="&engine.bookmarks.label;"
-                        accesskey="&engine.bookmarks.accesskey;"
-                        preference="engine.bookmarks"/>
-              <checkbox label="&engine.passwords.label;"
-                        accesskey="&engine.passwords.accesskey;"
-                        preference="engine.passwords"/>
-            </vbox>
-            <vbox align="start" flex="1">
-              <checkbox label="&engine.history.label;"
-                        accesskey="&engine.history.accesskey;"
-                        preference="engine.history"/>
-              <checkbox label="&engine.addons.label;"
-                        accesskey="&engine.addons.accesskey;"
-                        preference="engine.addons"/>
-              <checkbox label="&engine.prefs.label;"
-                        accesskey="&engine.prefs.accesskey;"
-                        preference="engine.prefs"/>
-            </vbox>
-            <spacer/>
-          </hbox>
-        </groupbox>
-      </vbox>
-      <vbox>
-        <image class="fxaSyncIllustration"/>
-      </vbox>
+      <label id="loginError" value=""/>
+      <label class="text-link"
+             onclick="gSyncPane.updatePass(); return false;"
+             value="&updatePass.label;"/>
+      <label class="text-link"
+             onclick="gSyncPane.resetPass(); return false;"
+             value="&resetPass.label;"/>
     </hbox>
-    <groupbox>
-      <caption>
-        <label control="fxaSyncComputerName">
-          &fxaSyncDeviceName.label;
-        </label>
-      </caption>
-      <hbox id="fxaDeviceName">
-        <textbox id="fxaSyncComputerName" disabled="true"/>
-        <hbox>
-          <button id="fxaChangeDeviceName"
-                  label="&changeSyncDeviceName.label;"
-                  accesskey="&changeSyncDeviceName.accesskey;"/>
-          <button id="fxaCancelChangeDeviceName"
-                  label="&cancelChangeSyncDeviceName.label;"
-                  accesskey="&cancelChangeSyncDeviceName.accesskey;"
-                  hidden="true"/>
-          <button id="fxaSaveChangeDeviceName"
-                  label="&saveChangeSyncDeviceName.label;"
-                  accesskey="&saveChangeSyncDeviceName.accesskey;"
-                  hidden="true"/>
-        </hbox>
-      </hbox>
-    </groupbox>
-    <label class="fxaMobilePromo">
-        &mobilePromo3.start;<!-- We put these comments to avoid inserting white spaces
-        --><label class="androidLink text-link" id="fxaMobilePromo-android-hasFxaAccount"><!--
-        -->&mobilePromo3.androidLink;</label><!--
-        -->&mobilePromo3.iOSBefore;<!--
-        --><label class="iOSLink text-link" id="fxaMobilePromo-ios-hasFxaAccount"><!--
-        -->&mobilePromo3.iOSLink;</label><!--
-        -->&mobilePromo3.end;
-    </label>
-    <vbox id="tosPP-small" align="start">
-      <label id="tosPP-small-ToS" class="text-link">
-        &prefs.tosLink.label;
-      </label>
-      <label id="tosPP-small-PP" class="text-link">
-        &fxaPrivacyNotice.link.label;
-      </label>
-    </vbox>
+    <label class="text-link"
+           onclick="gSyncPane.startOver(true); return false;"
+           value="&unlinkDevice.label;"/>
   </vbox>
 </deck>