Bug 526445 - Rearrange Sync prefs panel. r=mconnor a=blocking-betaN
authorPhilipp von Weitershausen <philipp@weitershausen.de>
Tue, 11 Jan 2011 23:50:13 -0800
changeset 60370 b1a940a22511fc33a20ffbbe9f6bfca0d9d5eca7
parent 60369 c833cf2e69ef4e16800f95df7afdeb20c6cdc3c7
child 60371 2ec3f1dcd2c4bcfa0e6b1ef8b8018172b17f8ca4
push id17954
push userpweitershausen@mozilla.com
push dateWed, 12 Jan 2011 07:51:26 +0000
treeherdermozilla-central@c0e05d518f57 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconnor, blocking-betaN
bugs526445, 616488
milestone2.0b10pre
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 526445 - Rearrange Sync prefs panel. r=mconnor a=blocking-betaN Also fixes bug 616488: Wrong Sync Key error should direct user to Update Sync Key dialog
browser/components/preferences/sync.js
browser/components/preferences/sync.xul
browser/locales/en-US/chrome/browser/preferences/sync.dtd
browser/themes/gnomestripe/browser/preferences/preferences.css
browser/themes/pinstripe/browser/preferences/preferences.css
browser/themes/winstripe/browser/preferences/preferences.css
--- a/browser/components/preferences/sync.js
+++ b/browser/components/preferences/sync.js
@@ -37,16 +37,17 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
 Components.utils.import("resource://services-sync/service.js");
 Components.utils.import("resource://gre/modules/Services.jsm");
 
 const PAGE_NO_ACCOUNT = 0;
 const PAGE_HAS_ACCOUNT = 1;
+const PAGE_NEEDS_UPDATE = 2;
 
 let gSyncPane = {
   _stringBundle: null,
   prefArray: ["engine.bookmarks", "engine.passwords", "engine.prefs",
               "engine.tabs", "engine.history"],
 
   get page() {
     return document.getElementById("weavePrefsDeck").selectedIndex;
@@ -59,40 +60,36 @@ let gSyncPane = {
   get _usingCustomServer() {
     return Weave.Svc.Prefs.isSet("serverURL");
   },
 
   onLoginStart: function () {
     if (this.page == PAGE_NO_ACCOUNT)
       return;
 
-    document.getElementById("loginFeedbackRow").hidden = true;
     document.getElementById("connectThrobber").hidden = false;
   },
 
-  onLoginError: function () {
-    if (this.page == PAGE_NO_ACCOUNT)
-      return;
-
+  needsUpdate: function () {
     document.getElementById("connectThrobber").hidden = true;
-    document.getElementById("loginFeedbackRow").hidden = false;
+    this.page = PAGE_NEEDS_UPDATE;
     let label = document.getElementById("loginError");
     label.value = Weave.Utils.getErrorString(Weave.Status.login);
     label.className = "error";
   },
 
   onLoginFinish: function () {
     document.getElementById("connectThrobber").hidden = true;
     this.updateWeavePrefs();
   },
 
   init: function () {
     let obs = [
       ["weave:service:login:start",   "onLoginStart"],
-      ["weave:service:login:error",   "onLoginError"],
+      ["weave:service:login:error",   "onLoginFinish"],
       ["weave:service:login:finish",  "onLoginFinish"],
       ["weave:service:start-over",    "updateWeavePrefs"],
       ["weave:service:setup-complete","updateWeavePrefs"],
       ["weave:service:logout:finish", "updateWeavePrefs"]];
 
     // Add the observers now and remove them on unload
     let self = this;
     let addRem = function(add) {
@@ -110,24 +107,25 @@ let gSyncPane = {
 
     this._stringBundle =
       Services.strings.createBundle("chrome://browser/locale/preferences/preferences.properties");;
     this.updateWeavePrefs();
   },
 
   updateWeavePrefs: function () {
     if (Weave.Status.service == Weave.CLIENT_NOT_CONFIGURED ||
-        Weave.Svc.Prefs.get("firstSync", "") == "notReady")
+        Weave.Svc.Prefs.get("firstSync", "") == "notReady") {
       this.page = PAGE_NO_ACCOUNT;
-    else {
+    } 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("currentAccount").value = Weave.Service.account;
+      document.getElementById("accountName").value = Weave.Service.account;
       document.getElementById("syncComputerName").value = Weave.Clients.localName;
-      if (Weave.Status.service == Weave.LOGIN_FAILED)
-        this.onLoginError();
       this.updateConnectButton();
       document.getElementById("tosPP").hidden = this._usingCustomServer;
     }
   },
 
   updateConnectButton: function () {
     let str = Weave.Service.isLoggedIn ? this._stringBundle.GetStringFromName("disconnect.label")
                                        : this._stringBundle.GetStringFromName("connect.label");
@@ -150,57 +148,34 @@ let gSyncPane = {
                                   this._stringBundle.GetStringFromName("differentAccountConfirm.label"),
                                   null, null, null, {});
 
       // If the user selects cancel, just bail
       if (buttonChoice == 1)
         return;
     }
 
-    this.handleExpanderClick();
     Weave.Service.startOver();
     this.updateWeavePrefs();
-    document.getElementById("manageAccountExpander").className = "expander-down";
-    document.getElementById("manageAccountControls").hidden = true;
   },
 
   updatePass: function () {
     if (Weave.Status.login == Weave.LOGIN_FAILED_LOGIN_REJECTED)
       gSyncUtils.changePassword();
     else
       gSyncUtils.updatePassphrase();
   },
 
   resetPass: function () {
     if (Weave.Status.login == Weave.LOGIN_FAILED_LOGIN_REJECTED)
       gSyncUtils.resetPassword();
     else
       gSyncUtils.resetPassphrase();
   },
 
-  handleExpanderClick: function () {
-    //XXXzpao Might be fixed in bug 583441, otherwise we'll need a new bug.
-    // ok, this is pretty evil, and likely fragile if the prefwindow
-    // binding changes, but that won't happen in 3.6 *fingers crossed*
-    let prefwindow = document.documentElement;
-    let pane = document.getElementById("paneSync");
-    if (prefwindow._shouldAnimate)
-      prefwindow._currentHeight = pane.contentHeight;
-
-    let expander = document.getElementById("manageAccountExpander");
-    let expand = expander.className == "expander-down";
-    expander.className =
-       expand ? "expander-up" : "expander-down";
-    document.getElementById("manageAccountControls").hidden = !expand;
-
-    // and... shazam
-    if (prefwindow._shouldAnimate)
-      prefwindow.animate("null", pane);
-  },
-
   openSetup: function (resetSync) {
     var win = Services.wm.getMostRecentWindow("Weave:AccountSetup");
     if (win)
       win.focus();
     else {
       window.openDialog("chrome://browser/content/syncSetup.xul",
                         "weaveSetup", "centerscreen,chrome,resizable=no", resetSync);
     }
--- a/browser/components/preferences/sync.xul
+++ b/browser/components/preferences/sync.xul
@@ -79,126 +79,128 @@
                   accesskey="&setupButton.accesskey;"
                   oncommand="gSyncPane.openSetup();"/>
           <separator/>
           <description id="syncDesc" flex="1">
             &weaveDesc.label;
           </description>
           <spacer flex="3"/>
         </vbox>
+
         <vbox id="hasAccount">
-          <groupbox>
-            <caption label="&accountGroupboxCaption.label;"/>
-            <grid>
-              <rows>
-                <row align="center">
-                  <label value="&currentAccount.label;" control="currentAccount"/>
-                  <textbox id="currentAccount" readonly="true">
-                    <image/>
-                  </textbox>
-                  <hbox align="center">
-                    <button id="connectButton" oncommand="gSyncPane.handleConnectCommand()"/>
-                    <image id="connectThrobber"
-                           hidden="true"/>
-                  </hbox>
-                </row>
-                <row id="loginFeedbackRow" hidden="true">
-                  <spacer/>
-                  <label id="loginError" value=""/>
-                  <hbox>
-                    <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>
-                </row>
-                <!-- XXXzpao We should make this behave like the "details" view in CRH.
-                             do in followup (bug 583441) -->
-                <row id="manageAccountControls" hidden="true">
-                  <spacer/>
-                    <vbox class="indent">
-                     <label class="text-link"
-                             onclick="gSyncPane.openQuotaDialog(); return false;"
-                             value="&viewQuota.label;"/>
-                      <label class="text-link"
-                             onclick="gSyncUtils.changePassword(); return false;"
-                             value="&changePassword.label;"/>
-                      <label class="text-link"
-                             onclick="gSyncUtils.resetPassphrase(); return false;"
-                             value="&mySyncKey.label;"/>
-                      <label class="text-link"
-                             onclick="gSyncPane.resetSync(); return false;"
-                             value="&resetSync.label;"/>
-                      <label class="text-link"
-                             onclick="gSyncPane.startOver(true); return false;"
-                             value="&stopUsingAccount.label;"/>
-                    </vbox>
-                  <spacer/>
-                </row>
-                <row>
-                  <spacer/>
-                  <button id="manageAccountExpander"
-                          class="expander-down"
-                          label="&manageAccount.label;"
-                          accesskey="&manageAccount.accesskey;"
-                          align="left"
-                          oncommand="gSyncPane.handleExpanderClick()"/>
-                  <spacer/>
-                </row>
-              </rows>
-            </grid>
-            <label class="text-link"
-                   onclick="gSyncPane.openAddDevice(); return false;"
-                   value="&addDevice.label;"/>
+          <groupbox class="syncGroupBox">
+            <!-- label is set to account name -->
+            <caption id="accountCaption" align="center">
+              <image id="accountCaptionImage"/>
+              <label id="accountName" value=""/>
+            </caption>
+
+            <hbox>
+              <button type="menu"
+                      label="&manageAccount.label;"
+                      accesskey="&manageAccount.accesskey;">
+                <menupopup>
+                  <menuitem label="&viewQuota.label;"
+                            oncommand="gSyncPane.openQuotaDialog();"/>
+                  <menuseparator/>
+                  <menuitem label="&changePassword.label;"
+                            oncommand="gSyncUtils.changePassword();"/>
+                  <menuitem label="&mySyncKey.label;"
+                            oncommand="gSyncUtils.resetPassphrase();"/>
+                  <menuseparator/>
+                  <menuitem label="&resetSync.label;"
+                            oncommand="gSyncPane.resetSync();"/>
+                  <menuitem label="&stopUsingAccount.label;"
+                            oncommand="gSyncPane.startOver(true);"/>
+                </menupopup>
+              </button>
+
+              <button id="connectButton"
+                      oncommand="gSyncPane.handleConnectCommand()"/>
+              <image id="connectThrobber"
+                     hidden="true"/>
+            </hbox>
+
+            <hbox>
+              <label id="syncAddDeviceLabel"
+                     class="text-link"
+                     onclick="gSyncPane.openAddDevice(); return false;"
+                     value="&addDevice.label;"/>
+            </hbox>
+
+            <vbox>
+              <label value="&syncMy.label;" />
+              <richlistbox id="syncEnginesList"
+                           orient="vertical"
+                           onselect="if (this.selectedCount) this.clearSelection();">
+                <richlistitem>
+                  <checkbox label="&engine.bookmarks.label;"
+                            accesskey="&engine.bookmarks.accesskey;"
+                            preference="engine.bookmarks"/>
+                </richlistitem>
+                <richlistitem>
+                  <checkbox label="&engine.passwords.label;"
+                            accesskey="&engine.passwords.accesskey;"
+                            preference="engine.passwords"/>
+                </richlistitem>
+                <richlistitem>
+                  <checkbox label="&engine.prefs.label;"
+                            accesskey="&engine.prefs.accesskey;"
+                            preference="engine.prefs"/>
+                </richlistitem>
+                <richlistitem>
+                  <checkbox label="&engine.history.label;"
+                            accesskey="&engine.history.accesskey;"
+                            preference="engine.history"/>
+                </richlistitem>
+                <richlistitem>
+                  <checkbox label="&engine.tabs.label;"
+                            accesskey="&engine.tabs.accesskey;"
+                            preference="engine.tabs"/>
+                </richlistitem>
+              </richlistbox>
+            </vbox>
           </groupbox>
-          <groupbox>
-            <caption label="&syncPrefsCaption.label;"/>
+
+          <groupbox class="syncGroupBox">
             <grid>
               <columns>
                 <column/>
                 <column flex="1"/>
               </columns>
               <rows>
                 <row align="center">
                   <label value="&syncComputerName.label;"
                          accesskey="&syncComputerName.accesskey;"
                          control="syncComputerName"/>
                   <textbox id="syncComputerName"
                            onchange="gSyncUtils.changeName(this)"/>
                 </row>
-                <row>
-                  <label value="&syncMy.label;" />
-                  <vbox>
-                    <checkbox label="&engine.bookmarks.label;"
-                              accesskey="&engine.bookmarks.accesskey;"
-                              preference="engine.bookmarks"/>
-                    <checkbox label="&engine.passwords.label;"
-                              accesskey="&engine.passwords.accesskey;"
-                              preference="engine.passwords"/>
-                    <checkbox label="&engine.prefs.label;"
-                              accesskey="&engine.prefs.accesskey;"
-                              preference="engine.prefs"/>
-                    <checkbox label="&engine.history.label;"
-                              accesskey="&engine.history.accesskey;"
-                              preference="engine.history"/>
-                    <checkbox label="&engine.tabs.label;"
-                              accesskey="&engine.tabs.accesskey;"
-                              preference="engine.tabs"/>
-                  </vbox>
-                </row>
               </rows>
             </grid>
-            <separator/>
           </groupbox>
           <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>
         </vbox>
+
+        <vbox id="needsUpdate" align="center" pack="center">
+          <hbox>
+            <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>
+          <label class="text-link"
+                 onclick="gSyncPane.startOver(true); return false;"
+                 value="&stopUsingAccount.label;"/>
+        </vbox>
       </deck>
   </prefpane>
 </overlay>
--- a/browser/locales/en-US/chrome/browser/preferences/sync.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/sync.dtd
@@ -1,44 +1,40 @@
 <!-- The page shown when not logged in... -->
 <!ENTITY setupButton.label          "Set Up &syncBrand.fullName.label;">
 <!ENTITY setupButton.accesskey      "S">
 <!ENTITY weaveDesc.label            "&syncBrand.fullName.label; lets you access your history, bookmarks, passwords and open tabs across all your devices.">
 
 <!-- The page shown when logged in... -->
-<!ENTITY accountGroupboxCaption.label "&syncBrand.fullName.label; Account">
-<!ENTITY currentAccount.label         "Current Account:">
 
 <!-- Login error feedback -->
 <!ENTITY updatePass.label             "Update">
 <!ENTITY resetPass.label              "Reset">
 
 <!-- Manage Account -->
 <!ENTITY manageAccount.label          "Manage Account">
 <!ENTITY manageAccount.accesskey      "A">
 <!ENTITY viewQuota.label              "View Quota">
 <!ENTITY changePassword.label         "Change Password">
 <!ENTITY mySyncKey.label              "My Sync Key">
 <!ENTITY resetSync.label              "Reset Sync">
 <!ENTITY stopUsingAccount.label       "Stop Using This Account">
 <!ENTITY addDevice.label              "Add a Device">
 
-<!-- Sync Settings -->
-<!ENTITY syncPrefsCaption.label       "Browser Sync">
-<!ENTITY syncComputerName.label       "Computer Name:">
-<!ENTITY syncComputerName.accesskey   "c">
-
 <!ENTITY syncMy.label               "Sync My">
 <!ENTITY engine.bookmarks.label     "Bookmarks">
 <!ENTITY engine.bookmarks.accesskey "m">
 <!ENTITY engine.tabs.label          "Tabs">
 <!ENTITY engine.tabs.accesskey      "T">
 <!ENTITY engine.history.label       "History">
 <!ENTITY engine.history.accesskey   "r">
 <!ENTITY engine.passwords.label     "Passwords">
 <!ENTITY engine.passwords.accesskey "P">
 <!ENTITY engine.prefs.label         "Preferences">
 <!ENTITY engine.prefs.accesskey     "S">
 
+<!-- Device Settings -->
+<!ENTITY syncComputerName.label       "Computer Name:">
+<!ENTITY syncComputerName.accesskey   "c">
 
 <!-- Footer stuff -->
 <!ENTITY prefs.tosLink.label        "Terms of Service">
 <!ENTITY prefs.ppLink.label         "Privacy Policy">
--- a/browser/themes/gnomestripe/browser/preferences/preferences.css
+++ b/browser/themes/gnomestripe/browser/preferences/preferences.css
@@ -162,42 +162,33 @@ radio[pane=paneSync] {
  * Clear Private Data
  */
 #SanitizeDialogPane > groupbox {
   margin-top: 0;
 }
 
 %ifdef MOZ_SERVICES_SYNC
 /* Sync Pane */
+
 #syncDesc {
   padding: 0 12em;
 }
 
-#currentUser image {
+#accountCaptionImage {
   list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
 }
 
 #connectThrobber {
   list-style-image: url("chrome://global/skin/icons/loading_16.png");
-}
-.expander-up,
-.expander-down {
-  min-width: 0;
-  padding: 2px 0;
-  -moz-padding-start: 2px;
-}
-
-.expander-up {
-  list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
+  height: 16px;
+  width: 16px;
 }
 
-.expander-down {
-  list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
+#syncAddDeviceLabel {
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
 
-.expander-down:hover:active {
-  list-style-image: url("chrome://global/skin/arrow/arrow-dn-hov.gif");
+#syncEnginesList {
+  height: 10em;
 }
 
-.expander-up:hover:active {
-  list-style-image: url("chrome://global/skin/arrow/arrow-up-hov.gif");
-}
 %endif
--- a/browser/themes/pinstripe/browser/preferences/preferences.css
+++ b/browser/themes/pinstripe/browser/preferences/preferences.css
@@ -253,32 +253,28 @@ caption {
 
 %ifdef MOZ_SERVICES_SYNC
 /* ----- SYNC PANE ----- */
 
 #syncDesc {
   padding: 0 12em;
 }
 
-#currentUser image {
+#accountCaptionImage {
   list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
 }
 
 #connectThrobber {
   list-style-image: url("chrome://global/skin/icons/loading_16.png");
+  height: 16px;
+  width: 16px;
 }
 
-.expander-up,
-.expander-down {
-  -moz-appearance: none;
-  padding: 0;
-  min-width: 0;
+#syncAddDeviceLabel {
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
 
-.expander-up {
-  list-style-image: url("chrome://browser/skin/places/expander-open.png") !important;
-}
-
-.expander-down {
-  list-style-image: url('chrome://browser/skin/places/expander-closed.png') !important
+#syncEnginesList {
+  height: 10em;
 }
 
 %endif
--- a/browser/themes/winstripe/browser/preferences/preferences.css
+++ b/browser/themes/winstripe/browser/preferences/preferences.css
@@ -176,40 +176,37 @@ radio[pane=paneSync] {
 /* bottom-most box containing a groupbox in a prefpane. Prevents the bottom
    of the groupbox from being cutoff */
 .bottomBox {
   padding-bottom: 4px;
 }
 
 %ifdef MOZ_SERVICES_SYNC
 /* Sync Pane */
+
 #syncDesc {
   padding: 0 12em;
 }
 
-#currentUser image {
+.syncGroupBox {
+  padding: 10px;
+}
+
+#accountCaptionImage {
   list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
 }
 
 #connectThrobber {
   list-style-image: url("chrome://global/skin/icons/loading_16.png");
-}
-
-.expander-up,
-.expander-down {
-  min-width: 0;
-  margin: 0;
-  -moz-margin-end: 4px;
+  height: 16px;
+  width: 16px;
 }
 
-.expander-up > .button-box,
-.expander-down > .button-box {
-  padding: 0;
+#syncAddDeviceLabel {
+  margin-top: 1em;
+  margin-bottom: 1em;
+ }
+
+#syncEnginesList {
+  height: 11em;
 }
 
-.expander-up {
-  list-style-image: url("chrome://global/skin/icons/collapse.png");
-}
-
-.expander-down {
-  list-style-image: url("chrome://global/skin/icons/expand.png");
-}
 %endif