Bug 841480 - Add Sync to Settings charm pane and move sync prefs to a new Sync panel. r=mbrubeck
authorBrian R. Bondy <netzen@gmail.com>
Wed, 27 Feb 2013 11:18:12 -0500
changeset 123177 e5c769a2741a28645e6d249934d0d91056df11d6
parent 123176 fa7820b84e2fdd7e8c3105b5ef40d4f5ac8d7f61
child 123178 026f901ab4177471f7c37f6f71552dc58ecd0e64
push id24373
push userryanvm@gmail.com
push dateThu, 28 Feb 2013 01:36:21 +0000
treeherdermozilla-central@8cb9d6981978 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmbrubeck
bugs841480
milestone22.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 841480 - Add Sync to Settings charm pane and move sync prefs to a new Sync panel. r=mbrubeck
browser/metro/base/content/browser-ui.js
browser/metro/base/content/browser.xul
browser/metro/base/content/preferences.js
browser/metro/locales/en-US/chrome/browser.properties
browser/metro/locales/en-US/chrome/preferences.dtd
browser/metro/locales/en-US/chrome/sync.dtd
browser/metro/theme/browser.css
--- a/browser/metro/base/content/browser-ui.js
+++ b/browser/metro/base/content/browser-ui.js
@@ -41,17 +41,18 @@ let Elements = {};
   ["tray",               "tray"],
   ["toolbar",            "toolbar"],
   ["browsers",           "browsers"],
   ["appbar",             "appbar"],
   ["contentViewport",    "content-viewport"],
   ["progress",           "progress-control"],
   ["contentNavigator",   "content-navigator"],
   ["aboutFlyout",        "about-flyoutpanel"],
-  ["prefsFlyout",        "prefs-flyoutpanel"]
+  ["prefsFlyout",        "prefs-flyoutpanel"],
+  ["syncFlyout",         "sync-flyoutpanel"]
 ].forEach(function (aElementGlobal) {
   let [name, id] = aElementGlobal;
   XPCOMUtils.defineLazyGetter(Elements, name, function() {
     return document.getElementById(id);
   });
 });
 
 /**
@@ -1301,16 +1302,28 @@ var StartUI = {
         let event = document.createEvent("Events");
         event.initEvent("MozEdgeUIGesture", true, false);
         window.dispatchEvent(event);
         break;
     }
   }
 };
 
+var SyncPanelUI = {
+  init: function() {
+    // Run some setup code the first time the panel is shown.
+    Elements.syncFlyout.addEventListener("PopupChanged", function onShow(aEvent) {
+      if (aEvent.detail && aEvent.popup === Elements.syncFlyout) {
+        Elements.syncFlyout.removeEventListener("PopupChanged", onShow, false);
+        WeaveGlue.init();
+      }
+    }, false);
+  }
+};
+
 var FlyoutPanelsUI = {
   get _aboutVersionLabel() {
     return document.getElementById('about-version-label');
   },
 
   _initAboutPanel: function() {
     // Include the build ID if this is an "a#" (nightly or aurora) build
     let version = Services.appinfo.version;
@@ -1320,21 +1333,23 @@ var FlyoutPanelsUI = {
                       "-" + buildID.slice(6,8);
       this._aboutVersionLabel.textContent +=" (" + buildDate + ")";
     }
   },
 
   init: function() {
     this._initAboutPanel();
     PreferencesPanelView.init();
+    SyncPanelUI.init();
   },
 
   hide: function() {
     Elements.aboutFlyout.hide();
     Elements.prefsFlyout.hide();
+    Elements.syncFlyout.hide();
   }
 };
 
 var PanelUI = {
   get _panels() { return document.getElementById("panel-items"); },
   get _switcher() { return document.getElementById("panel-view-switcher"); },
 
   get isVisible() {
@@ -1604,16 +1619,21 @@ var SettingsCharm = {
   init: function SettingsCharm_init() {
     Services.obs.addObserver(this, "metro-settings-entry-selected", false);
 
     // Options
     this.addEntry({
         label: Strings.browser.GetStringFromName("optionsCharm"),
         onselected: function() Elements.prefsFlyout.show()
     });
+    // Sync 
+    this.addEntry({
+        label: Strings.browser.GetStringFromName("syncCharm"),
+        onselected: function() Elements.syncFlyout.show()
+    });
     // About
     this.addEntry({
         label: Strings.browser.GetStringFromName("aboutCharm1"),
         onselected: function() Elements.aboutFlyout.show()
     });
     // Help
     this.addEntry({
         label: Strings.browser.GetStringFromName("helpOnlineCharm"),
--- a/browser/metro/base/content/browser.xul
+++ b/browser/metro/base/content/browser.xul
@@ -423,16 +423,35 @@
         <label id="about-product-label" value="&aboutHeader.product.label;"/>
         <label value="&aboutHeader.company.label;"/>
 #expand <label id="about-version-label">__MOZ_APP_VERSION__</label>
         <label id="about-policy-label"
                onclick="if (event.button == 0) { Browser.onAboutPolicyClick(); }"
                class="text-link" value="&aboutHeader.policy.label;"/>
     </flyoutpanel>
 
+    <flyoutpanel id="sync-flyoutpanel" headertext="&syncHeader.title;">
+      <settings id="prefs-sync" label="&sync.title;">
+        <setting id="sync-connect" title="&sync.notconnected;" type="control">
+          <button label="&sync.connect;" oncommand="WeaveGlue.tryConnect();" />
+        </setting>
+        <setting id="sync-connected" class="setting-group" title="&sync.connected;" type="control" collapsed="true">
+          <button id="sync-pairdevice" label="&sync.pair.title;" oncommand="SyncPairDevice.open();" />
+          <button id="sync-details" label="&sync.details;" type="checkbox" autocheck="false" checked="false" oncommand="WeaveGlue.showDetails();" />
+        </setting>
+        <setting id="sync-sync" class="setting-subgroup" type="control" collapsed="true">
+          <button id="sync-syncButton" label="&sync.syncNow;" oncommand="WeaveGlue.sync();"/>
+        </setting>
+        <setting id="sync-device" class="setting-subgroup" type="string" title="&sync.deviceName;" onchange="WeaveGlue.changeName(this);" collapsed="true"/>
+        <setting id="sync-disconnect" class="setting-subgroup" type="control" collapsed="true">
+          <button label="&sync.disconnect;" oncommand="WeaveGlue.disconnect();" />
+        </setting>
+      </settings>
+    </flyoutpanel>
+
     <flyoutpanel id="prefs-flyoutpanel" headertext="&optionsHeader.title;">
       <settings id="prefs-startup" label="&optionsHeader.startup.title;"> <!-- note, this element has a custom margin-top -->
         <setting id="prefs-homepage" title="&optionsHeader.homepage.title;" type="menulist" pref="browser.startup.sessionRestore" class="setting-expanded">
           <menulist id="prefs-homepage-options">
             <menupopup id="prefs-homepage-popup" position="after_end">
               <menuitem id="prefs-homepage-default" label="&optionsHeader.homepage.startPage.button;" value="false"/>
               <menuitem id="prefs-homepage-session" label="&optionsHeader.homepage.sessionRestore.button;" value="true"/>
             </menupopup>
@@ -449,33 +468,16 @@
         </setting>
       </settings>
       <setting pref="signon.rememberSignons" title="&optionsHeader.privacy.passwords.label;" type="bool"/>
       <settings id="prefs-donottrack" label="&optionsHeader.privacy.doNotTrack.title;">
         <setting pref="privacy.donottrackheader.enabled" title="&optionsHeader.privacy.doNotTrack.label;" type="bool"/>
       </settings>
 
       <setting id="prefs-master-password" title="&optionsHeader.privacy.masterPassword.label;" type="bool" oncommand="MasterPasswordUI.show(this.value);"/>
-
-      <settings id="prefs-sync" label="&sync.title;">
-        <setting id="sync-connect" title="&sync.notconnected;" type="control">
-          <button label="&sync.connect;" oncommand="WeaveGlue.tryConnect();" />
-        </setting>
-        <setting id="sync-connected" class="setting-group" title="&sync.connected;" type="control" collapsed="true">
-          <button id="sync-pairdevice" label="&sync.pair.title;" oncommand="SyncPairDevice.open();" />
-          <button id="sync-details" label="&sync.details;" type="checkbox" autocheck="false" checked="false" oncommand="WeaveGlue.showDetails();" />
-        </setting>
-        <setting id="sync-sync" class="setting-subgroup" type="control" collapsed="true">
-          <button id="sync-syncButton" label="&sync.syncNow;" oncommand="WeaveGlue.sync();"/>
-        </setting>
-        <setting id="sync-device" class="setting-subgroup" type="string" title="&sync.deviceName;" onchange="WeaveGlue.changeName(this);" collapsed="true"/>
-        <setting id="sync-disconnect" class="setting-subgroup" type="control" collapsed="true">
-          <button label="&sync.disconnect;" oncommand="WeaveGlue.disconnect();" />
-        </setting>
-      </settings>
     </flyoutpanel>
 
     <!-- Form Helper form validation helper popup -->
     <arrowbox id="form-helper-validation-container" class="arrowbox-dark" flex="1" hidden="true" offset="0" top="0" left="0">
       <label/>
     </arrowbox>
 
 #ifdef MOZ_SERVICES_SYNC
--- a/browser/metro/base/content/preferences.js
+++ b/browser/metro/base/content/preferences.js
@@ -5,13 +5,12 @@
 
 var PreferencesPanelView = {
   init: function pv_init() {
     // Run some setup code the first time the panel is shown.
     Elements.prefsFlyout.addEventListener("PopupChanged", function onShow(aEvent) {
       if (aEvent.detail && aEvent.popup === Elements.prefsFlyout) {
         Elements.prefsFlyout.removeEventListener("PopupChanged", onShow, false);
         MasterPasswordUI.updatePreference();
-        WeaveGlue.init();
       }
     }, false);
   }
 };
--- a/browser/metro/locales/en-US/chrome/browser.properties
+++ b/browser/metro/locales/en-US/chrome/browser.properties
@@ -11,16 +11,17 @@ browser.search.order.2=Google
 browser.search.order.3=Yahoo
 
 # l10n: search context menu item text will be: |Search (browser.search.defaultenginename) for ".."
 browser.search.contextTextSearchLabel=Search %S for ".."
 
 # Settings Charms
 aboutCharm1=About
 optionsCharm=Options
+syncCharm=Sync
 helpOnlineCharm=Help (online)
 
 # General
 browserForSaveLocation=Save Location
 
 # Download Manager
 downloadsUnknownSize=Unknown size
 
--- a/browser/metro/locales/en-US/chrome/preferences.dtd
+++ b/browser/metro/locales/en-US/chrome/preferences.dtd
@@ -20,10 +20,11 @@
 <!ENTITY optionsHeader.char.options.label                        "Show encoding options on the App Bar">
 <!ENTITY optionsHeader.privacy.clearPrivateData.title            "Clear Private Data">
 <!ENTITY optionsHeader.privacy.clearPrivateData.label            "Clear your browsing history, passwords, cookies, and form data on this device">
 <!ENTITY optionsHeader.privacy.clearPrivateData.button           "Clear">
 <!ENTITY optionsHeader.privacy.passwords.label                   "Remember Passwords">
 <!ENTITY optionsHeader.privacy.doNotTrack.title                  "Tracking">
 <!ENTITY optionsHeader.privacy.doNotTrack.label                  "Tell websites not to track me">
 <!ENTITY optionsHeader.privacy.masterPassword.label              "Use Master Password">
+
+<!-- ## Sync Flyout Panel ## -->
 <!-- see sync.dtd -->
-
--- a/browser/metro/locales/en-US/chrome/sync.dtd
+++ b/browser/metro/locales/en-US/chrome/sync.dtd
@@ -1,12 +1,14 @@
 <!-- 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/. -->
 
+
+<!ENTITY syncHeader.title           "Sync">
 <!ENTITY sync.title                 "Sync">
 <!ENTITY sync.notconnected          "Not connected">
 <!ENTITY sync.connect               "Connect">
 <!ENTITY sync.connected             "Connected">
 <!ENTITY sync.details               "Details">
 <!ENTITY sync.deviceName            "This device">
 <!ENTITY sync.disconnect            "Disconnect">
 <!ENTITY sync.syncNow               "Sync Now">
--- a/browser/metro/theme/browser.css
+++ b/browser/metro/theme/browser.css
@@ -623,16 +623,22 @@ appbar toolbarbutton[disabled="true"] {
 
 /* Flyouts ---------------------------------------------------------------- */
 
 /* don't add a margin to the very top settings entry in flyouts */
 flyoutpanel > settings:first-child {
   margin-top: 0px;
 }
 
+/* Sync flyout pane */
+
+#sync-flyoutpanel {
+  width: 400px;
+}
+
 /* About flyout pane */
 
 #about-flyoutpanel {
   width: 350px;
   background-image:url('chrome://browser/skin/images/about-footer.png');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: right bottom;
@@ -682,20 +688,23 @@ settings {
   margin-top: 32px;
 }
 
 .settings-title {
   font-weight: bold;
 }
 
 /* <setting> elements that are not in a <settings> group get special treatment */
-#prefs-flyoutpanel > setting {
+#prefs-flyoutpanel > setting,
+#sync-flyoutpanel > setting {
   margin-top: 16px;
 }
-#prefs-flyoutpanel > setting .preferences-title {
+
+#prefs-flyoutpanel > setting .preferences-title,
+#sync-flyoutpanel > setting .preferences-title {
   font-weight: bold
 }
 
 setting[type="integer"] > .preferences-alignment,
 setting[type="string"] > .preferences-alignment {
   -moz-box-flex: 3;
 }