Bug 1016300 - Move inline scripts and styles into separate files for in-content preferences. r=Gijs
authorSebastian Hengst <archaeopteryx@coole-files.de>
Wed, 27 Aug 2014 00:08:49 +0200
changeset 201765 076b9e5d8208ee66a2dcd0964cfa8e88a69bb3d6
parent 201764 5e7b290f78832f899595cb0264bb0c98a35e5fd9
child 201766 f71f3d5f8345de0ff463b6f67b237acf6be5693b
push id8389
push userryanvm@gmail.com
push dateWed, 27 Aug 2014 13:10:07 +0000
treeherderfx-team@f71f3d5f8345 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1016300
milestone34.0a1
Bug 1016300 - Move inline scripts and styles into separate files for in-content preferences. r=Gijs
browser/components/preferences/advanced.js
browser/components/preferences/advanced.xul
browser/components/preferences/in-content/advanced.js
browser/components/preferences/in-content/advanced.xul
browser/components/preferences/in-content/applications.js
browser/components/preferences/in-content/applications.xul
browser/components/preferences/in-content/content.js
browser/components/preferences/in-content/content.xul
browser/components/preferences/in-content/main.js
browser/components/preferences/in-content/main.xul
browser/components/preferences/in-content/preferences.js
browser/components/preferences/in-content/preferences.xul
browser/components/preferences/in-content/privacy.js
browser/components/preferences/in-content/privacy.xul
browser/components/preferences/in-content/security.js
browser/components/preferences/in-content/security.xul
browser/components/preferences/in-content/sync.js
browser/components/preferences/in-content/sync.xul
browser/components/preferences/sync.js
browser/components/preferences/sync.xul
browser/locales/en-US/chrome/browser/preferences/preferences.properties
browser/themes/shared/incontentprefs/preferences.css
--- a/browser/components/preferences/advanced.js
+++ b/browser/components/preferences/advanced.js
@@ -40,16 +40,20 @@ var gAdvancedPane = {
     this.initTelemetry();
 #ifdef MOZ_SERVICES_HEALTHREPORT
     this.initSubmitHealthReport();
 #endif
 
     this.updateActualCacheSize();
     this.updateActualAppCacheSize();
 
+    let bundlePrefs = document.getElementById("bundlePreferences");
+    document.getElementById("offlineAppsList")
+            .style.height = bundlePrefs.getString("offlineAppsList.height");
+
     // Notify observers that the UI is now ready
     Services.obs.notifyObservers(window, "advanced-pane-loaded", null);
   },
 
   /**
    * Stores the identity of the current tab in preferences so that the selected
    * tab can be persisted between openings of the preferences window.
    */
--- a/browser/components/preferences/advanced.xul
+++ b/browser/components/preferences/advanced.xul
@@ -283,17 +283,16 @@
                       label="&offlineNotifyExceptions.label;"
                       accesskey="&offlineNotifyExceptions.accesskey;"
                       oncommand="gAdvancedPane.showOfflineExceptions();"/>
             </hbox>
             <hbox>
               <vbox flex="1">
                 <label id="offlineAppsListLabel">&offlineAppsList2.label;</label>
                 <listbox id="offlineAppsList"
-                         style="height: &offlineAppsList.height;;"
                          flex="1"
                          aria-labelledby="offlineAppsListLabel"
                          onselect="gAdvancedPane.offlineAppSelected(event);">
                 </listbox>
               </vbox>
               <vbox pack="end">
                 <button id="offlineAppsListRemove"
                         disabled="true"
--- a/browser/components/preferences/in-content/advanced.js
+++ b/browser/components/preferences/in-content/advanced.js
@@ -10,16 +10,22 @@ Components.utils.import("resource://gre/
 var gAdvancedPane = {
   _inited: false,
 
   /**
    * Brings the appropriate tab to the front and initializes various bits of UI.
    */
   init: function ()
   {
+    function setEventListener(aId, aEventType, aCallback)
+    {
+      document.getElementById(aId)
+              .addEventListener(aEventType, aCallback.bind(gAdvancedPane));
+    }
+
     this._inited = true;
     var advancedPrefs = document.getElementById("advancedPrefs");
 
     var preference = document.getElementById("browser.preferences.advanced.selectedTabIndex");
     if (preference.value !== null)
         advancedPrefs.selectedIndex = preference.value;
 
 #ifdef MOZ_UPDATER
@@ -30,16 +36,54 @@ var gAdvancedPane = {
     this.initSubmitCrashes();
 #endif
     this.initTelemetry();
 #ifdef MOZ_SERVICES_HEALTHREPORT
     this.initSubmitHealthReport();
 #endif
     this.updateActualCacheSize();
     this.updateActualAppCacheSize();
+
+    setEventListener("layers.acceleration.disabled", "change",
+                     gAdvancedPane.updateHardwareAcceleration);
+    setEventListener("advancedPrefs", "select",
+                     gAdvancedPane.tabSelectionChanged);
+#ifdef MOZ_SERVICES_HEALTHREPORT
+    setEventListener("submitHealthReportBox", "command",
+                     gAdvancedPane.updateSubmitHealthReport);
+#endif
+#ifdef MOZ_CRASHREPORTER
+    setEventListener("submitCrashesBox", "command",
+                     gAdvancedPane.updateSubmitCrashes);
+#endif
+    setEventListener("connectionSettings", "command",
+                     gAdvancedPane.showConnections);
+    setEventListener("clearCacheButton", "command",
+                     gAdvancedPane.clearCache);
+    setEventListener("clearOfflineAppCacheButton", "command",
+                     gAdvancedPane.clearOfflineAppCache);
+    setEventListener("offlineNotifyExceptions", "command",
+                     gAdvancedPane.showOfflineExceptions);
+    setEventListener("offlineNotifyExceptions", "command", function (event) {
+      gAdvancedPane.offlineAppSelected(event); })
+    let bundlePrefs = document.getElementById("bundlePreferences");
+    document.getElementById("offlineAppsList")
+            .style.height = bundlePrefs.getString("offlineAppsList.height");
+    setEventListener("offlineAppsListRemove", "command",
+                     gAdvancedPane.removeOfflineApp);
+#ifdef MOZ_UPDATER
+    setEventListener("updateRadioGroup", "command",
+                     gAdvancedPane.updateWritePrefs);
+#endif
+    setEventListener("showUpdateHistory", "command",
+                     gAdvancedPane.showUpdates);
+    setEventListener("viewCertificatesButton", "command",
+                     gAdvancedPane.showCertificates);
+    setEventListener("viewSecurityDevicesButton", "command",
+                     gAdvancedPane.showSecurityDevices);
   },
 
   /**
    * Stores the identity of the current tab in preferences so that the selected
    * tab can be persisted between openings of the preferences window.
    */
   tabSelectionChanged: function ()
   {
--- a/browser/components/preferences/in-content/advanced.xul
+++ b/browser/components/preferences/in-content/advanced.xul
@@ -27,18 +27,17 @@
               name="general.autoScroll"
               type="bool"/>
   <preference id="general.smoothScroll"
               name="general.smoothScroll"
               type="bool"/>
   <preference id="layers.acceleration.disabled"
               name="layers.acceleration.disabled"
               type="bool"
-              inverted="true"
-              onchange="gAdvancedPane.updateHardwareAcceleration()"/>
+              inverted="true"/>
 #ifdef XP_WIN
   <preference id="gfx.direct2d.disabled"
               name="gfx.direct2d.disabled"
               type="bool"
               inverted="true"/>
 #endif
   <preference id="layout.spellcheckDefault"
               name="layout.spellcheckDefault"
@@ -128,18 +127,17 @@
   <label class="header-name">&paneAdvanced.title;</label>
 </hbox>
 
 <tabbox id="advancedPrefs"
         handleCtrlTab="false"
         handleCtrlPageUpDown="false"
         flex="1"
         data-category="paneAdvanced"
-        hidden="true"
-        onselect="gAdvancedPane.tabSelectionChanged();">
+        hidden="true">
 
   <tabs id="tabsElement">
     <tab id="generalTab" label="&generalTab.label;"/>
 #ifdef MOZ_DATA_REPORTING
     <tab id="dataChoicesTab" label="&dataChoicesTab.label;"/>
 #endif
     <tab id="networkTab" label="&networkTab.label;"/>
     <tab id="updateTab" label="&updateTab.label;"/>
@@ -210,32 +208,30 @@
       </groupbox>
 #endif
 #ifdef MOZ_SERVICES_HEALTHREPORT
       <groupbox>
         <caption><label>&healthReportSection.label;</label></caption>
         <description>&healthReportDesc.label;</description>
         <hbox>
           <checkbox id="submitHealthReportBox"
-                    oncommand="gAdvancedPane.updateSubmitHealthReport();"
                     label="&enableHealthReport.label;"
                     accesskey="&enableHealthReport.accesskey;"/>
           <spacer flex="1"/>
           <label id="FHRLearnMore"
                  class="text-link">&healthReportLearnMore.label;</label>
         </hbox>
       </groupbox>
 #endif
 #ifdef MOZ_CRASHREPORTER
       <groupbox>
         <caption><label>&crashReporterSection.label;</label></caption>
         <description>&crashReporterDesc.label;</description>
         <hbox>
           <checkbox id="submitCrashesBox"
-                    oncommand="gAdvancedPane.updateSubmitCrashes();"
                     label="&enableCrashReporter.label;"
                     accesskey="&enableCrashReporter.accesskey;"/>
 
           <spacer flex="1"/>
           <label id="crashReporterLearnMore"
                  class="text-link">&crashReporterLearnMore.label;</label>
         </hbox>
       </groupbox>
@@ -248,30 +244,28 @@
 
       <!-- Connection -->
       <groupbox id="connectionGroup">
         <caption><label>&connection.label;</label></caption>
 
         <hbox align="center">
           <description flex="1" control="connectionSettings">&connectionDesc.label;</description>
           <button id="connectionSettings" icon="network" label="&connectionSettings.label;"
-                  accesskey="&connectionSettings.accesskey;"
-                  oncommand="gAdvancedPane.showConnections();"/>
+                  accesskey="&connectionSettings.accesskey;"/>
         </hbox>
       </groupbox>
 
       <!-- Cache -->
       <groupbox id="cacheGroup">
         <caption><label>&httpCache.label;</label></caption>
 
         <hbox align="center">
           <label id="actualDiskCacheSize" flex="1"/>
           <button id="clearCacheButton" icon="clear"
-                  label="&clearCacheNow.label;" accesskey="&clearCacheNow.accesskey;"
-                  oncommand="gAdvancedPane.clearCache();"/>
+                  label="&clearCacheNow.label;" accesskey="&clearCacheNow.accesskey;"/>
         </hbox>
         <hbox>
           <checkbox preference="browser.cache.disk.smart_size.enabled"
                     id="allowSmartSize"
                     onsyncfrompreference="return gAdvancedPane.readSmartSizeEnabled();"
                     label="&overrideSmartCacheSize.label;"
                     accesskey="&overrideSmartCacheSize.accesskey;"/>
         </hbox>
@@ -291,58 +285,52 @@
 
       <!-- Offline apps -->
       <groupbox id="offlineGroup">
         <caption><label>&offlineStorage2.label;</label></caption>
 
         <hbox align="center">
           <label id="actualAppCacheSize" flex="1"/>
           <button id="clearOfflineAppCacheButton" icon="clear"
-                  label="&clearOfflineAppCacheNow.label;" accesskey="&clearOfflineAppCacheNow.accesskey;"
-                  oncommand="gAdvancedPane.clearOfflineAppCache();"/>
+                  label="&clearOfflineAppCacheNow.label;" accesskey="&clearOfflineAppCacheNow.accesskey;"/>
         </hbox>
         <hbox align="center">
           <checkbox id="offlineNotify"
                     label="&offlineNotify.label;" accesskey="&offlineNotify.accesskey;"
                     preference="browser.offline-apps.notify"
                     onsyncfrompreference="return gAdvancedPane.readOfflineNotify();"/>
           <spacer flex="1"/>
           <button id="offlineNotifyExceptions"
                   label="&offlineNotifyExceptions.label;"
-                  accesskey="&offlineNotifyExceptions.accesskey;"
-                  oncommand="gAdvancedPane.showOfflineExceptions();"/>
+                  accesskey="&offlineNotifyExceptions.accesskey;"/>
         </hbox>
         <hbox>
           <vbox flex="1">
             <label id="offlineAppsListLabel">&offlineAppsList2.label;</label>
             <listbox id="offlineAppsList"
-                    style="height: &offlineAppsList.height;;"
                     flex="1"
-                    aria-labelledby="offlineAppsListLabel"
-                    onselect="gAdvancedPane.offlineAppSelected(event);">
+                    aria-labelledby="offlineAppsListLabel">
             </listbox>
           </vbox>
           <vbox pack="end">
             <button id="offlineAppsListRemove"
                     disabled="true"
                     label="&offlineAppsListRemove.label;"
-                    accesskey="&offlineAppsListRemove.accesskey;"
-                    oncommand="gAdvancedPane.removeOfflineApp();"/>
+                    accesskey="&offlineAppsListRemove.accesskey;"/>
           </vbox>
         </hbox>
       </groupbox>
     </tabpanel>
 
     <!-- Update -->
     <tabpanel id="updatePanel" orient="vertical">
 #ifdef MOZ_UPDATER
       <groupbox id="updateApp" align="start">
         <caption><label>&updateApp.label;</label></caption>
-        <radiogroup id="updateRadioGroup" align="start"
-                    oncommand="gAdvancedPane.updateWritePrefs();">
+        <radiogroup id="updateRadioGroup" align="start">
 #ifdef XP_WIN
 #ifdef MOZ_METRO
               <radio id="autoMetro"
                      value="autoMetro"
                      label="&updateAutoMetro.label;"
                      accesskey="&updateAutoMetro.accesskey;"/>
               <hbox id="autoMetroIndent"
                     class="indent">
@@ -369,18 +357,17 @@
                 label="&updateManual.label;"
                 accesskey="&updateManual.accesskey;"/>
         </radiogroup>
 
         <hbox>
           <button id="showUpdateHistory"
                   label="&updateHistory.label;"
                   accesskey="&updateHistory.accesskey;"
-                  preference="app.update.disable_button.showUpdateHistory"
-                  oncommand="gAdvancedPane.showUpdates();"/>
+                  preference="app.update.disable_button.showUpdateHistory"/>
         </hbox>
 
 #ifdef MOZ_MAINTENANCE_SERVICE
         <checkbox id="useService"
                   label="&useService.label;"
                   accesskey="&useService.accesskey;"
                   preference="app.update.service.enabled"/>
 #endif
@@ -423,18 +410,16 @@
                   onsynctopreference="return gAdvancedPane.writeEnableOCSP();"
                   preference="security.OCSP.enabled"/>
 
         <separator/>
 
         <hbox>
           <button id="viewCertificatesButton"
                   label="&viewCerts.label;" accesskey="&viewCerts.accesskey;"
-                  oncommand="gAdvancedPane.showCertificates();"
                   preference="security.disable_button.openCertManager"/>
           <button id="viewSecurityDevicesButton"
                   label="&viewSecurityDevices.label;" accesskey="&viewSecurityDevices.accesskey;"
-                  oncommand="gAdvancedPane.showSecurityDevices();"
                   preference="security.disable_button.openDeviceManager"/>
         </hbox>
     </tabpanel>
   </tabpanels>
 </tabbox>
--- a/browser/components/preferences/in-content/applications.js
+++ b/browser/components/preferences/in-content/applications.js
@@ -899,16 +899,22 @@ var gApplicationsPane = {
   _ioSvc        : Cc["@mozilla.org/network/io-service;1"].
                   getService(Ci.nsIIOService),
 
 
   //**************************************************************************//
   // Initialization & Destruction
 
   init: function() {
+    function setEventListener(aId, aEventType, aCallback)
+    {
+      document.getElementById(aId)
+              .addEventListener(aEventType, aCallback.bind(gApplicationsPane));
+    }
+
     // Initialize shortcuts to some commonly accessed elements & values.
     this._brandShortName =
       document.getElementById("bundleBrand").getString("brandShortName");
     this._prefsBundle = document.getElementById("bundlePreferences");
     this._list = document.getElementById("handlersView");
     this._filter = document.getElementById("filter");
 
     // Observe preferences that influence what we display so we can rebuild
@@ -926,16 +932,24 @@ var gApplicationsPane = {
     this._prefSvc.addObserver(PREF_VIDEO_FEED_SELECTED_READER, this, false);
 
     this._prefSvc.addObserver(PREF_AUDIO_FEED_SELECTED_APP, this, false);
     this._prefSvc.addObserver(PREF_AUDIO_FEED_SELECTED_WEB, this, false);
     this._prefSvc.addObserver(PREF_AUDIO_FEED_SELECTED_ACTION, this, false);
     this._prefSvc.addObserver(PREF_AUDIO_FEED_SELECTED_READER, this, false);
 
 
+    setEventListener("focusSearch1", "command", gApplicationsPane.focusFilterBox);
+    setEventListener("focusSearch2", "command", gApplicationsPane.focusFilterBox);
+    setEventListener("filter", "command", gApplicationsPane.filter);
+    setEventListener("handlersView", "select",
+      gApplicationsPane.onSelectionChanged);
+    setEventListener("typeColumn", "click", gApplicationsPane.sort);
+    setEventListener("actionColumn", "click", gApplicationsPane.sort);
+
     // Listen for window unload so we can remove our preference observers.
     window.addEventListener("unload", this, false);
 
     // Figure out how we should be sorting the list.  We persist sort settings
     // across sessions, so we can't assume the default sort column/direction.
     // XXX should we be using the XUL sort service instead?
     if (document.getElementById("actionColumn").hasAttribute("sortDirection")) {
       this._sortColumn = document.getElementById("actionColumn");
--- a/browser/components/preferences/in-content/applications.xul
+++ b/browser/components/preferences/in-content/applications.xul
@@ -48,18 +48,18 @@
               type="string"/>
 
   <preference id="pref.downloads.disable_button.edit_actions"
               name="pref.downloads.disable_button.edit_actions"
               type="bool"/>
 </preferences>
 
 <keyset>
-  <key key="&focusSearch1.key;" modifiers="accel" oncommand="gApplicationsPane.focusFilterBox();"/>
-  <key key="&focusSearch2.key;" modifiers="accel" oncommand="gApplicationsPane.focusFilterBox();"/>
+  <key key="&focusSearch1.key;" modifiers="accel" id="focusSearch1"/>
+  <key key="&focusSearch2.key;" modifiers="accel" id="focusSearch2"/>
 </keyset>
 
 <hbox id="header-application"
       class="header"
       hidden="true"
       data-category="paneApplications">
   <label class="header-name">&paneApplications.title;</label>
 </hbox>
@@ -67,29 +67,26 @@
 <vbox id="applicationsContent"
       data-category="paneApplications"
       hidden="true"
       flex="1">
   <hbox>
     <textbox id="filter" flex="1"
              type="search"
              placeholder="&filter.emptytext;"
-             aria-controls="handlersView"
-             oncommand="gApplicationsPane.filter();"/>
+             aria-controls="handlersView"/>
   </hbox>
 
   <separator class="thin"/>
 
   <richlistbox id="handlersView" orient="vertical" persist="lastSelectedType"
                preference="pref.downloads.disable_button.edit_actions"
-               flex="1"
-               onselect="gApplicationsPane.onSelectionChanged();">
-    <listheader equalsize="always" style="border: 0; padding: 0; -moz-appearance: none;">
+               flex="1">
+    <listheader equalsize="always">
         <treecol id="typeColumn" label="&typeColumn.label;" value="type"
                  accesskey="&typeColumn.accesskey;" persist="sortDirection"
-                 flex="1" onclick="gApplicationsPane.sort(event);"
-                 sortDirection="ascending"/>
+                 flex="1" sortDirection="ascending"/>
         <treecol id="actionColumn" label="&actionColumn2.label;" value="action"
                  accesskey="&actionColumn2.accesskey;" persist="sortDirection"
-                 flex="1" onclick="gApplicationsPane.sort(event);"/>
+                 flex="1"/>
     </listheader>
   </richlistbox>
 </vbox>
--- a/browser/components/preferences/in-content/content.js
+++ b/browser/components/preferences/in-content/content.js
@@ -4,29 +4,50 @@
 
 var gContentPane = {
 
   /**
    * Initializes the fonts dropdowns displayed in this pane.
    */
   init: function ()
   {
+    function setEventListener(aId, aEventType, aCallback)
+    {
+      document.getElementById(aId)
+              .addEventListener(aEventType, aCallback.bind(gContentPane));
+    }
+
     this._rebuildFonts();
     var menulist = document.getElementById("defaultFont");
     if (menulist.selectedIndex == -1) {
       menulist.insertItemAt(0, "", "", "");
       menulist.selectedIndex = 0;
     }
 
     // Show translation preferences if we may:
     const prefName = "browser.translation.ui.show";
     if (Services.prefs.getBoolPref(prefName)) {
       let row = document.getElementById("translationBox");
       row.removeAttribute("hidden");
     }
+
+    setEventListener("font.language.group", "change",
+      gContentPane._rebuildFonts);
+    setEventListener("popupPolicyButton", "command",
+      gContentPane.showPopupExceptions);
+    setEventListener("advancedFonts", "command",
+      gContentPane.configureFonts);
+    setEventListener("colors", "command",
+      gContentPane.configureColors);
+    setEventListener("chooseLanguage", "command",
+      gContentPane.showLanguages);
+    setEventListener("translationAttributionImage", "click",
+      gContentPane.openTranslationProviderAttribution);
+    setEventListener("translateButton", "command",
+      gContentPane.showTranslationExceptions);
   },
 
   // UTILITY FUNCTIONS
 
   /**
    * Utility function to enable/disable the button specified by aButtonID based
    * on the value of the Boolean preference specified by aPreferenceID.
    */
--- a/browser/components/preferences/in-content/content.xul
+++ b/browser/components/preferences/in-content/content.xul
@@ -9,18 +9,17 @@
   <!-- Popups -->
   <preference id="dom.disable_open_during_load"
               name="dom.disable_open_during_load"
               type="bool"/>
 
   <!-- Fonts -->
   <preference id="font.language.group"
               name="font.language.group"
-              type="wstring"
-              onchange="gContentPane._rebuildFonts();"/>
+              type="wstring"/>
 
   <!-- Languages -->
   <preference id="browser.translation.detectLanguage"
               name="browser.translation.detectLanguage"
               type="bool"/>
 </preferences>
 
 <script type="application/javascript" 
@@ -47,17 +46,16 @@
       <row id="popupPolicyRow">
         <vbox align="start">
           <checkbox id="popupPolicy" preference="dom.disable_open_during_load"
                     label="&blockPopups.label;" accesskey="&blockPopups.accesskey;"
                     onsyncfrompreference="return gContentPane.updateButtons('popupPolicyButton',
                                                                         'dom.disable_open_during_load');"/>
         </vbox>
         <button id="popupPolicyButton" label="&popupExceptions.label;"
-                oncommand="gContentPane.showPopupExceptions();"
                 accesskey="&popupExceptions.accesskey;"/>
       </row>
     </rows>
   </grid>
 </groupbox>
 
 <!-- Fonts and Colors -->
 <groupbox id="fontsGroup" data-category="paneContent" hidden="true">
@@ -101,53 +99,48 @@
               <menuitem value="56" label="56"/>
               <menuitem value="64" label="64"/>
               <menuitem value="72" label="72"/>
             </menupopup>
           </menulist>
         </hbox>
         <button id="advancedFonts" icon="select-font"
                 label="&advancedFonts.label;"
-                accesskey="&advancedFonts.accesskey;"
-                oncommand="gContentPane.configureFonts();"/>
+                accesskey="&advancedFonts.accesskey;"/>
       </row>
       <row id="colorsRow">
         <hbox/>
         <button id="colors" icon="select-color"
                 label="&colors.label;"
-                accesskey="&colors.accesskey;"
-                oncommand="gContentPane.configureColors();"/>
+                accesskey="&colors.accesskey;"/>
       </row>
     </rows>
   </grid>
 </groupbox>
 
 <!-- Languages -->
 <groupbox id="languagesGroup" data-category="paneContent" hidden="true">
   <caption><label>&languages.label;</label></caption>
 
   <hbox id="languagesBox" align="center">
     <description flex="1" control="chooseLanguage">&chooseLanguage.label;</description>
     <button id="chooseLanguage"
             label="&chooseButton.label;"
-            accesskey="&chooseButton.accesskey;"
-            oncommand="gContentPane.showLanguages();"/>
+            accesskey="&chooseButton.accesskey;"/>
   </hbox>
 
   <hbox id="translationBox" hidden="true">
     <hbox align="center" flex="1">
       <checkbox id="translate" preference="browser.translation.detectLanguage"
                 label="&translateWebPages.label;." accesskey="&translateWebPages.accesskey;"
                 onsyncfrompreference="return gContentPane.updateButtons('translateButton',
                                               'browser.translation.detectLanguage');"/>
       <label>&translation.options.attribution.beforeLogo;</label>
       <separator orient="vertical" class="thin"/>
       <image id="translationAttributionImage" aria-label="Microsoft Translator"
-             onclick="gContentPane.openTranslationProviderAttribution()"
              src="chrome://browser/content/microsoft-translator-attribution.png"/>
       <separator orient="vertical" class="thin"/>
       <label>&translation.options.attribution.afterLogo;</label>
     </hbox>
     <button id="translateButton" label="&translateExceptions.label;"
-            oncommand="gContentPane.showTranslationExceptions();"
             accesskey="&translateExceptions.accesskey;"/>
   </hbox>
 </groupbox>
--- a/browser/components/preferences/in-content/main.js
+++ b/browser/components/preferences/in-content/main.js
@@ -6,16 +6,22 @@ XPCOMUtils.defineLazyModuleGetter(this, 
                                   "resource:///modules/DownloadsCommon.jsm");
 
 var gMainPane = {
   /**
    * Initialization of this.
    */
   init: function ()
   {
+    function setEventListener(aId, aEventType, aCallback)
+    {
+      document.getElementById(aId)
+              .addEventListener(aEventType, aCallback.bind(gMainPane));
+    }
+
 #ifdef HAVE_SHELL_SERVICE
     this.updateSetDefaultBrowser();
 #ifdef XP_WIN
     // In Windows 8 we launch the control panel since it's the only
     // way to get all file type association prefs. So we don't know
     // when the user will select the default.  We refresh here periodically
     // in case the default changes.  On other Windows OS's defaults can also
     // be set while the prefs are open.
@@ -67,16 +73,32 @@ var gMainPane = {
                     getService(Ci.nsIPropertyBag2);
       let ver = parseFloat(sysInfo.getProperty("version"));
       let showTabsInTaskbar = document.getElementById("showTabsInTaskbar");
       showTabsInTaskbar.hidden = ver < 6.1;
     } catch (ex) {}
 
 #endif
 
+    setEventListener("browser.privatebrowsing.autostart", "change",
+                     gMainPane.updateBrowserStartupLastSession);
+    setEventListener("browser.download.dir", "change",
+                     gMainPane.displayDownloadDirPref);
+#ifdef HAVE_SHELL_SERVICE
+    setEventListener("setDefaultButton", "command",
+                     gMainPane.setDefaultBrowser);
+#endif
+    setEventListener("useCurrent", "command",
+                     gMainPane.setHomePageToCurrent);
+    setEventListener("useBookmark", "command",
+                     gMainPane.setHomePageToBookmark);
+    setEventListener("restoreDefaultHomePage", "command",
+                     gMainPane.restoreDefaultHomePage);
+    setEventListener("chooseFolder", "command",
+                     gMainPane.chooseFolder);
   },
 
   // HOME PAGE
 
   /*
    * Preferences:
    *
    * browser.startup.homepage
--- a/browser/components/preferences/in-content/main.xul
+++ b/browser/components/preferences/in-content/main.xul
@@ -34,31 +34,29 @@
                 name="pref.browser.homepage.disable_button.bookmark_page"
                 type="bool"/>
     <preference id="pref.browser.homepage.disable_button.restore_default"
                 name="pref.browser.homepage.disable_button.restore_default"
                 type="bool"/>
 
     <preference id="browser.privatebrowsing.autostart"
                 name="browser.privatebrowsing.autostart"
-                type="bool"
-                onchange="gMainPane.updateBrowserStartupLastSession();"/>
+                type="bool"/>
 
     <!-- Downloads -->
     <preference id="browser.download.useDownloadDir"
                 name="browser.download.useDownloadDir"
                 type="bool"/>
 
     <preference id="browser.download.folderList"
                 name="browser.download.folderList"
                 type="int"/>
     <preference id="browser.download.dir"
                 name="browser.download.dir"
-                type="file"
-                onchange="gMainPane.displayDownloadDirPref();"/>
+                type="file"/>
     <!-- Tab preferences 
     Preferences:
 
     browser.link.open_newwindow
         1 opens such links in the most recent window or tab,
         2 opens such links in a new window,
         3 opens such links in a new tab
     browser.tabs.loadInBackground
@@ -116,17 +114,16 @@
       <checkbox id="alwaysCheckDefault" preference="browser.shell.checkDefaultBrowser"
                 label="&alwaysCheckDefault.label;" accesskey="&alwaysCheckDefault2.accesskey;"/>
     </hbox>
     <deck id="setDefaultPane">
       <hbox align="center" class="indent">
         <label id="isNotDefaultLabel" flex="1">&isNotDefault.label;</label>
         <button id="setDefaultButton"
                 label="&setAsMyDefaultBrowser.label;" accesskey="&setAsMyDefaultBrowser.accesskey;"
-                oncommand="gMainPane.setDefaultBrowser();"
                 preference="pref.general.disable_button.default_browser"/>
       </hbox>
       <hbox align="center" class="indent">
         <label id="isDefaultLabel" flex="1">&isDefault.label;</label>
       </hbox>
     </deck>
     <separator class="thin"/>
   </vbox>
@@ -163,27 +160,24 @@
              placeholder="&abouthome.pageTitle;"
              preference="browser.startup.homepage"/>
   </hbox>
   <hbox align="center" pack="end">
     <button label=""
             accesskey="&useCurrentPage.accesskey;"
             label1="&useCurrentPage.label;"
             label2="&useMultiple.label;"
-            oncommand="gMainPane.setHomePageToCurrent();"
             id="useCurrent"
             preference="pref.browser.homepage.disable_button.current_page"/>
     <button label="&chooseBookmark.label;"
             accesskey="&chooseBookmark.accesskey;"
-            oncommand="gMainPane.setHomePageToBookmark();"
             id="useBookmark"
             preference="pref.browser.homepage.disable_button.bookmark_page"/>
     <button label="&restoreDefault.label;"
             accesskey="&restoreDefault.accesskey;"
-            oncommand="gMainPane.restoreDefaultHomePage();"
             id="restoreDefaultHomePage"
             preference="pref.browser.homepage.disable_button.restore_default"/>
   </hbox>
 </groupbox>
 
 <!-- Downloads -->
 <groupbox id="downloadsGroup"
           data-category="paneGeneral"
@@ -202,17 +196,16 @@
       <filefield id="downloadFolder"
                  flex="1"
                  preference="browser.download.folderList"
                  preference-editable="true"
                  aria-labelledby="saveTo"
                  onsyncfrompreference="return gMainPane.displayDownloadDirPref();"
                  onsynctopreference="return gMainPane.getFolderListPref()"/>
       <button id="chooseFolder"
-              oncommand="gMainPane.chooseFolder();"
 #ifdef XP_MACOSX
               accesskey="&chooseFolderMac.accesskey;"
               label="&chooseFolderMac.label;"
 #else
               accesskey="&chooseFolderWin.accesskey;"
               label="&chooseFolderWin.label;"
 #endif
               preference="browser.download.folderList"
--- a/browser/components/preferences/in-content/preferences.js
+++ b/browser/components/preferences/in-content/preferences.js
@@ -47,16 +47,19 @@ function init_all() {
   });
   categories.addEventListener("mousedown", function() {
     this.removeAttribute("keyboard-navigation");
   });
 
   window.addEventListener("hashchange", onHashChange);
   gotoPref();
 
+  let helpCmd = document.getElementById("help-button");
+  helpCmd.addEventListener("command", helpButtonCommand);
+
   // Wait until initialization of all preferences are complete before
   // notifying observers that the UI is now ready.
   Services.obs.notifyObservers(window, "advanced-pane-loaded", null);
 }
 
 window.addEventListener("unload", function onUnload() {
   gSubDialog.uninit();
 });
--- a/browser/components/preferences/in-content/preferences.xul
+++ b/browser/components/preferences/in-content/preferences.xul
@@ -167,19 +167,19 @@
 #include applications.xul
 #include content.xul
 #include security.xul
 #ifdef MOZ_SERVICES_SYNC
 #include sync.xul
 #endif
       </prefpane>
       <hbox pack="end">
-        <button class="help-button"
-                aria-label="&helpButton.label;"
-                oncommand="helpButtonCommand();"/>
+        <button id="help-button"
+                class="help-button"
+                aria-label="&helpButton.label;"/>
       </hbox>
     </vbox>
 
   </hbox>
 
     <vbox id="dialogOverlay" align="center" pack="center">
       <groupbox id="dialogBox"
                 orient="vertical"
--- a/browser/components/preferences/in-content/privacy.js
+++ b/browser/components/preferences/in-content/privacy.js
@@ -15,21 +15,62 @@ var gPrivacyPane = {
   _shouldPromptForRestart: true,
 
   /**
    * Sets up the UI for the number of days of history to keep, and updates the
    * label of the "Clear Now..." button.
    */
   init: function ()
   {
+    function setEventListener(aId, aEventType, aCallback)
+    {
+      document.getElementById(aId)
+              .addEventListener(aEventType, aCallback.bind(gPrivacyPane));
+    }
+
     this._updateSanitizeSettingsButton();
     this.initializeHistoryMode();
     this.updateHistoryModePane();
     this.updatePrivacyMicroControls();
     this.initAutoStartPrivateBrowsingReverter();
+
+    setEventListener("browser.urlbar.default.behavior", "change",
+      document.getElementById('browser.urlbar.autocomplete.enabled')
+              .updateElements
+    );
+    setEventListener("privacy.sanitize.sanitizeOnShutdown", "change",
+                     gPrivacyPane._updateSanitizeSettingsButton);
+    setEventListener("browser.privatebrowsing.autostart", "change",
+                     gPrivacyPane.updatePrivacyMicroControls);
+    setEventListener("historyMode", "command", function () {
+      gPrivacyPane.updateHistoryModePane();
+      gPrivacyPane.updateHistoryModePrefs();
+      gPrivacyPane.updatePrivacyMicroControls();
+      gPrivacyPane.updateAutostart();
+    });
+    setEventListener("historyRememberClear", "click", function () {
+      gPrivacyPane.clearPrivateDataNow(false);
+      return false;
+    });
+    setEventListener("historyRememberCookies", "click", function () {
+      gPrivacyPane.showCookies();
+      return false;
+    });
+    setEventListener("historyDontRememberClear", "click", function () {
+      gPrivacyPane.clearPrivateDataNow(true);
+      return false;
+    });
+    setEventListener("privateBrowsingAutoStart", "command",
+                     gPrivacyPane.updateAutostart);
+    setEventListener("cookieExceptions", "command",
+                     gPrivacyPane.showCookieExceptions);
+    setEventListener("showCookiesButton", "command",
+                     gPrivacyPane.showCookies);
+    setEventListener("clearDataSettings", "command",
+                     gPrivacyPane.showClearPrivateDataSettings);
   },
 
   // HISTORY MODE
 
   /**
    * The list of preferences which affect the initial history mode settings.
    * If the auto start private browsing mode pref is active, the initial
    * history mode would be set to "Don't remember anything".
--- a/browser/components/preferences/in-content/privacy.xul
+++ b/browser/components/preferences/in-content/privacy.xul
@@ -26,18 +26,17 @@
               type="bool"/>
 
   <!-- Location Bar -->
   <preference id="browser.urlbar.autocomplete.enabled"
               name="browser.urlbar.autocomplete.enabled"
               type="bool"/>
   <preference id="browser.urlbar.default.behavior"
               name="browser.urlbar.default.behavior"
-              type="int"
-              onchange="document.getElementById('browser.urlbar.autocomplete.enabled').updateElements();"/>
+              type="int"/>
 
   <!-- History -->
   <preference id="places.history.enabled"
               name="places.history.enabled"
               type="bool"/>
   <preference id="browser.formfill.enable"
               name="browser.formfill.enable"
               type="bool"/>
@@ -49,25 +48,23 @@
               name="network.cookie.lifetimePolicy"
               type="int"/>
   <preference id="network.cookie.blockFutureCookies"
               name="network.cookie.blockFutureCookies"
               type="bool"/>
   <!-- Clear Private Data -->
   <preference id="privacy.sanitize.sanitizeOnShutdown"
               name="privacy.sanitize.sanitizeOnShutdown"
-              onchange="gPrivacyPane._updateSanitizeSettingsButton();"
               type="bool"/>
   <preference id="privacy.sanitize.timeSpan"
               name="privacy.sanitize.timeSpan"
               type="int"/>
   <!-- Private Browsing -->
   <preference id="browser.privatebrowsing.autostart"
               name="browser.privatebrowsing.autostart"
-              onchange="gPrivacyPane.updatePrivacyMicroControls();"
               type="bool"/>
 
 </preferences>
 
 <hbox id="header-privacy"
       class="header"
       hidden="true"
       data-category="panePrivacy">
@@ -97,70 +94,62 @@
 <!-- History -->
 <groupbox id="historyGroup" data-category="panePrivacy" hidden="true">
   <caption><label>&history.label;</label></caption>
   <hbox align="center">
     <label id="historyModeLabel"
            control="historyMode"
            accesskey="&historyHeader.pre.accesskey;">&historyHeader.pre.label;
     </label>
-    <menulist id="historyMode"
-              oncommand="gPrivacyPane.updateHistoryModePane();
-                        gPrivacyPane.updateHistoryModePrefs();
-                        gPrivacyPane.updatePrivacyMicroControls();
-                        gPrivacyPane.updateAutostart();">
+    <menulist id="historyMode">
       <menupopup>
         <menuitem label="&historyHeader.remember.label;" value="remember"/>
         <menuitem label="&historyHeader.dontremember.label;" value="dontremember"/>
         <menuitem label="&historyHeader.custom.label;" value="custom"/>
       </menupopup>
     </menulist>
     <label>&historyHeader.post.label;</label>
   </hbox>
   <deck id="historyPane">
     <vbox align="center" id="historyRememberPane">
       <hbox align="center" flex="1">
         <spacer flex="1" class="indent"/>
         <vbox flex="2">
           <description>&rememberDescription.label;</description>
           <separator/>
           <description>&rememberActions.pre.label;<html:a
-          class="inline-link" href="#"
-          onclick="gPrivacyPane.clearPrivateDataNow(false); return false;"
+          class="inline-link" id="historyRememberClear" href="#"
           >&rememberActions.clearHistory.label;</html:a>&rememberActions.middle.label;<html:a
-          class="inline-link" href="#"
-          onclick="gPrivacyPane.showCookies(); return false;"
+          class="inline-link" id="historyRememberCookies" href="#"
           >&rememberActions.removeCookies.label;</html:a>&rememberActions.post.label;</description>
         </vbox>
         <spacer flex="1" class="indent"/>
       </hbox>
     </vbox>
     <vbox align="center" id="historyDontRememberPane">
       <hbox align="center" flex="1">
         <spacer flex="1" class="indent"/>
         <vbox flex="2">
           <description>&dontrememberDescription.label;</description>
           <separator/>
           <description>&dontrememberActions.pre.label;<html:a
-          class="inline-link" href="#"
-          onclick="gPrivacyPane.clearPrivateDataNow(true); return false;"
+          class="inline-link" id="historyDontRememberClear" href="#"
           >&dontrememberActions.clearHistory.label;</html:a>&dontrememberActions.post.label;</description>
         </vbox>
         <spacer flex="1" class="indent"/>
       </hbox>
     </vbox>
     <vbox id="historyCustomPane">
       <separator class="thin"/>
       <vbox class="indent">
         <vbox align="start">
           <checkbox id="privateBrowsingAutoStart"
                     label="&privateBrowsingPermanent2.label;"
                     accesskey="&privateBrowsingPermanent2.accesskey;"
-                    preference="browser.privatebrowsing.autostart"
-                    oncommand="gPrivacyPane.updateAutostart()"/>
+                    preference="browser.privatebrowsing.autostart"/>
         </vbox>
         <vbox class="indent">
           <vbox align="start">
             <checkbox id="rememberHistory"
                       label="&rememberHistory2.label;"
                       accesskey="&rememberHistory2.accesskey;"
                       preference="places.history.enabled"/>
             <checkbox id="rememberForms"
@@ -170,17 +159,17 @@
           </vbox>
           <hbox id="cookiesBox">
             <checkbox id="acceptCookies" label="&acceptCookies.label;"
                       preference="network.cookie.cookieBehavior"
                       accesskey="&acceptCookies.accesskey;"
                       onsyncfrompreference="return gPrivacyPane.readAcceptCookies();"
                       onsynctopreference="return gPrivacyPane.writeAcceptCookies();"/>
             <spacer flex="1" />
-            <button id="cookieExceptions" oncommand="gPrivacyPane.showCookieExceptions();"
+            <button id="cookieExceptions"
                     label="&cookieExceptions.label;" accesskey="&cookieExceptions.accesskey;"
                     preference="pref.privacy.disable_button.cookie_exceptions"/>
           </hbox>
           <hbox id="acceptThirdPartyRow"
                 class="indent"
                 align="center">
             <label id="acceptThirdPartyLabel" control="acceptThirdPartyMenu"
                    accesskey="&acceptThirdParty.pre.accesskey;">&acceptThirdParty.pre.label;</label>
@@ -206,29 +195,27 @@
                 <menuitem label="&expire.label;" value="0"/>
                 <menuitem label="&close.label;" value="2"/>
                 <menuitem label="&askEachTime.label;" value="1"/>
               </menupopup>
             </menulist>
             <spacer flex="1"/>
             <button id="showCookiesButton"
                     label="&showCookies.label;" accesskey="&showCookies.accesskey;"
-                    oncommand="gPrivacyPane.showCookies();"
                     preference="pref.privacy.disable_button.view_cookies"/>
           </hbox>
           <hbox id="clearDataBox"
                 align="center">
             <checkbox id="alwaysClear"
                       preference="privacy.sanitize.sanitizeOnShutdown"
                       label="&clearOnClose.label;"
                       accesskey="&clearOnClose.accesskey;"/>
             <spacer flex="1"/>
             <button id="clearDataSettings" label="&clearOnCloseSettings.label;"
-                    accesskey="&clearOnCloseSettings.accesskey;"
-                    oncommand="gPrivacyPane.showClearPrivateDataSettings();"/>
+                    accesskey="&clearOnCloseSettings.accesskey;"/>
           </hbox>
         </vbox>
       </vbox>
     </vbox>
   </deck>
 </groupbox>
 
 <!-- Location Bar -->
--- a/browser/components/preferences/in-content/security.js
+++ b/browser/components/preferences/in-content/security.js
@@ -7,18 +7,35 @@ Components.utils.import("resource://gre/
 var gSecurityPane = {
   _pane: null,
 
   /**
    * Initializes master password UI.
    */
   init: function ()
   {
+    function setEventListener(aId, aEventType, aCallback)
+    {
+      document.getElementById(aId)
+              .addEventListener(aEventType, aCallback.bind(gSecurityPane));
+    }
+
     this._pane = document.getElementById("paneSecurity");
     this._initMasterPasswordUI();
+
+    setEventListener("addonExceptions", "command",
+      gSecurityPane.showAddonExceptions);
+    setEventListener("passwordExceptions", "command",
+      gSecurityPane.showPasswordExceptions);
+    setEventListener("useMasterPassword", "command",
+      gSecurityPane.updateMasterPasswordButton);
+    setEventListener("changeMasterPassword", "command",
+      gSecurityPane.changeMasterPassword);
+    setEventListener("showPasswords", "command",
+      gSecurityPane.showPasswords);
   },
 
   // ADD-ONS
 
   /*
    * Preferences:
    *
    * xpinstall.whitelist.required
--- a/browser/components/preferences/in-content/security.xul
+++ b/browser/components/preferences/in-content/security.xul
@@ -47,18 +47,17 @@
     <checkbox id="warnAddonInstall"
               label="&warnAddonInstall.label;"
               accesskey="&warnAddonInstall.accesskey;"
               preference="xpinstall.whitelist.required"
               onsyncfrompreference="return gSecurityPane.readWarnAddonInstall();"/>
     <spacer flex="1"/>
     <button id="addonExceptions"
             label="&addonExceptions.label;"
-            accesskey="&addonExceptions.accesskey;"
-            oncommand="gSecurityPane.showAddonExceptions();"/>
+            accesskey="&addonExceptions.accesskey;"/>
   </hbox>
 
   <separator class="thin"/>
   <vbox align="start">
     <checkbox id="blockAttackSites"
               label="&blockAttackSites.label;"
               accesskey="&blockAttackSites.accesskey;"
               preference="browser.safebrowsing.malware.enabled" />
@@ -77,31 +76,27 @@
     <checkbox id="savePasswords"
               label="&rememberPasswords.label;" accesskey="&rememberPasswords.accesskey;"
               preference="signon.rememberSignons"
               onsyncfrompreference="return gSecurityPane.readSavePasswords();"/>
     <spacer flex="1"/>
     <button id="passwordExceptions"
             label="&passwordExceptions.label;"
             accesskey="&passwordExceptions.accesskey;"
-            oncommand="gSecurityPane.showPasswordExceptions();"
             preference="pref.privacy.disable_button.view_passwords_exceptions"/>
   </hbox>
   <hbox id="masterPasswordBox">
     <checkbox id="useMasterPassword"
-              oncommand="gSecurityPane.updateMasterPasswordButton();"
               label="&useMasterPassword.label;"
               accesskey="&useMasterPassword.accesskey;"/>
     <spacer flex="1"/>
     <button id="changeMasterPassword"
             label="&changeMasterPassword.label;"
-            accesskey="&changeMasterPassword.accesskey;"
-            oncommand="gSecurityPane.changeMasterPassword();"/>
+            accesskey="&changeMasterPassword.accesskey;"/>
   </hbox>
 
   <hbox id="showPasswordsBox">
     <spacer flex="1"/>
     <button id="showPasswords"
             label="&savedPasswords.label;" accesskey="&savedPasswords.accesskey;"
-            oncommand="gSecurityPane.showPasswords();"
             preference="pref.privacy.disable_button.view_passwords"/>
   </hbox>
 </groupbox>
--- a/browser/components/preferences/in-content/sync.js
+++ b/browser/components/preferences/in-content/sync.js
@@ -44,16 +44,18 @@ let gSyncPane = {
   needsUpdate: function () {
     this.page = PAGE_NEEDS_UPDATE;
     let label = document.getElementById("loginError");
     label.textContent = 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)
                                 .wrappedJSObject;
 
     if (xps.ready) {
       this._init();
       return;
@@ -102,16 +104,101 @@ let gSyncPane = {
       }, gSyncPane);
     }, false);
 
     this._stringBundle =
       Services.strings.createBundle("chrome://browser/locale/preferences/preferences.properties");
     this.updateWeavePrefs();
   },
 
+  _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("syncViewQuota", "command", gSyncPane.openQuotaDialog);
+    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 () {
+      gSyncUtils.changeName(this);
+    });
+    setEventListener("unlinkDevice", "click", function () {
+      gSyncPane.startOver(true);
+      return false;
+    });
+    setEventListener("tosPP-normal-ToS", "click", gSyncPane.openToS);
+    setEventListener("tosPP-normal-PP", "click", gSyncPane.openPrivacyPolicy);
+    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", "click", function () {
+      gSyncPane.signUp();
+      return false;
+    });
+    setEventListener("noFxaSignIn", "click", function () {
+      gSyncPane.signIn();
+      return false;
+    });
+    setEventListener("noFxaUseOldSync", "click", function () {
+      gSyncPane.openOldSyncSupportPage();
+      return false;
+    });
+    setEventListener("verifiedManage", "command",
+      gSyncPane.manageFirefoxAccount);
+    setEventListener("fxaUnlinkButton", "click", function () {
+      gSyncPane.unlinkFirefoxAccount(true);
+    });
+    setEventListener("verifyFxaAccount", "command",
+      gSyncPane.verifyFirefoxAccount);
+    setEventListener("unverifiedUnlinkFxaAccount", "click", function () {
+      /* no warning as account can't have previously synced */
+      gSyncPane.unlinkFirefoxAccount(false);
+    });
+    setEventListener("rejectReSignIn", "command",
+      gSyncPane.reSignIn);
+    setEventListener("rejectUnlinkFxaAccount", "click", function () {
+      gSyncPane.unlinkFirefoxAccount(true);
+    });
+    setEventListener("fxaSyncComputerName", "change", function () {
+      gSyncUtils.changeName(this);
+    });
+    setEventListener("tosPP-small-ToS", "click", gSyncPane.openToS);
+    setEventListener("tosPP-small-PP", "click", gSyncPane.openPrivacyPolicy);
+  },
+
   updateWeavePrefs: function () {
     let service = Components.classes["@mozilla.org/weave/service;1"]
                   .getService(Components.interfaces.nsISupports)
                   .wrappedJSObject;
     // service.fxAccountsEnabled is false iff sync is already configured for
     // the legacy provider.
     if (service.fxAccountsEnabled) {
       // determine the fxa status...
@@ -166,17 +253,17 @@ let gSyncPane = {
     // 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("syncComputerName").value = Weave.Service.clientsEngine.localName;
-      document.getElementById("tosPP").hidden = this._usingCustomServer;
+      document.getElementById("tosPP-normal").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_DEFAULT;
@@ -246,16 +333,27 @@ let gSyncPane = {
       // always use that as it prefers to open a new window rather than use
       // an existing one.
       gSyncUtils._openLink(url);
       return;
     }
     win.openUILinkIn(url, "tab");
   },
 
+
+  openPrivacyPolicy: function(aEvent) {
+    aEvent.stopPropagation();
+    gSyncUtils.openPrivacyPolicy();
+  },
+
+  openToS: function(aEvent) {
+    aEvent.stopPropagation();
+    gSyncUtils.openToS();
+  },
+
   signUp: function() {
     this.openContentInBrowser("about:accounts?action=signup");
   },
 
   signIn: function() {
     this.openContentInBrowser("about:accounts?action=signin");
   },
 
--- a/browser/components/preferences/in-content/sync.xul
+++ b/browser/components/preferences/in-content/sync.xul
@@ -40,24 +40,22 @@
 <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 class="text-link"
-           onclick="event.stopPropagation(); gSyncPane.openSetup(null);">
+    <label id="noAccountSetup" class="text-link">
       &setupButton.label;
     </label>
     <vbox id="pairDevice">
       <separator/>
-      <label class="text-link"
-             onclick="event.stopPropagation(); gSyncPane.openSetup('pair');">
+      <label id="noAccountPair" class="text-link">
         &pairDevice.label;
       </label>
     </vbox>
     <spacer flex="3"/>
   </vbox>
 
   <vbox id="hasAccount">
     <groupbox class="syncGroupBox">
@@ -67,43 +65,37 @@
         <label id="accountName"/>
       </caption>
 
       <hbox>
         <button type="menu"
                 label="&manageAccount.label;"
                 accesskey="&manageAccount.accesskey;">
           <menupopup>
-            <menuitem label="&viewQuota.label;"
-                      oncommand="gSyncPane.openQuotaDialog();"/>
+            <menuitem id="syncViewQuota" label="&viewQuota.label;"/>
             <menuseparator/>
-            <menuitem label="&changePassword2.label;"
-                      oncommand="gSyncUtils.changePassword();"/>
-            <menuitem label="&myRecoveryKey.label;"
-                      oncommand="gSyncUtils.resetPassphrase();"/>
+            <menuitem id="syncChangePassword" label="&changePassword2.label;"/>
+            <menuitem id="syncResetPassphrase" label="&myRecoveryKey.label;"/>
             <menuseparator/>
-            <menuitem label="&resetSync2.label;"
-                      oncommand="gSyncPane.resetSync();"/>
+            <menuitem id="syncReset" label="&resetSync2.label;"/>
           </menupopup>
         </button>
       </hbox>
 
       <hbox>
         <label id="syncAddDeviceLabel"
-               class="text-link"
-               onclick="gSyncPane.openAddDevice(); return false;">
+               class="text-link">
           &pairDevice.label;
         </label>
       </hbox>
 
       <vbox>
         <label>&syncMy.label;</label>
         <richlistbox id="syncEnginesList"
-                     orient="vertical"
-                     onselect="if (this.selectedCount) this.clearSelection();">
+                     orient="vertical">
           <richlistitem>
             <checkbox label="&engine.addons.label;"
                       accesskey="&engine.addons.accesskey;"
                       preference="engine.addons"/>
           </richlistitem>
           <richlistitem>
             <checkbox label="&engine.bookmarks.label;"
                       accesskey="&engine.bookmarks.accesskey;"
@@ -140,130 +132,117 @@
           <column flex="1"/>
         </columns>
         <rows>
           <row align="center">
             <label accesskey="&syncDeviceName.accesskey;"
                    control="syncComputerName">
               &syncDeviceName.label;
             </label>
-            <textbox id="syncComputerName"
-                     onchange="gSyncUtils.changeName(this)"/>
+            <textbox id="syncComputerName"/>
           </row>
         </rows>
       </grid>
       <hbox>
-        <label class="text-link"
-               onclick="gSyncPane.startOver(true); return false;">
+        <label id="unlinkDevice" class="text-link">
           &unlinkDevice.label;
         </label>
       </hbox>
     </groupbox>
-    <hbox id="tosPP" pack="center">
-      <label class="text-link"
-             onclick="event.stopPropagation();gSyncUtils.openToS();">
+    <hbox id="tosPP-normal" pack="center">
+      <label id="tosPP-normal-ToS" class="text-link">
         &prefs.tosLink.label;
       </label>
-      <label class="text-link"
-             onclick="event.stopPropagation();gSyncUtils.openPrivacyPolicy();">
+      <label id="tosPP-normal-PP" class="text-link">
         &prefs.ppLink.label;
       </label>
     </hbox>
   </vbox>
 
   <vbox id="needsUpdate" align="center" pack="center">
     <hbox>
       <label id="loginError"/>
-      <label class="text-link"
-             onclick="gSyncPane.updatePass(); return false;">
+      <label id="loginErrorUpdatePass" class="text-link">
         &updatePass.label;
       </label>
-      <label class="text-link"
-             onclick="gSyncPane.resetPass(); return false;">
+      <label id="loginErrorResetPass" class="text-link">
         &resetPass.label;
       </label>
     </hbox>
-    <label class="text-link"
-           onclick="gSyncPane.startOver(true); return false;">
+    <label id="loginErrorStartOver" class="text-link">
       &unlinkDevice.label;
     </label>
   </vbox>
 
   <!-- These panels are for the Firefox Accounts identity provider -->
   <vbox id="fxaDeterminingStatus" align="center">
     <spacer flex="1"/>
     <label>&determiningAcctStatus.label;</label>
     <spacer flex="1"/>
   </vbox>
 
   <vbox id="noFxaAccount" align="start">
     <label>&welcome.description;</label>
-    <label class="text-link"
-           onclick="gSyncPane.signUp(); return false;">
+    <label id="noFxaSignUp" class="text-link">
       &welcome.createAccount.label;
     </label>
-    <label class="text-link"
-           onclick="gSyncPane.signIn(); return false;">
+    <label id="noFxaSignIn" class="text-link">
       &welcome.signIn.label;
     </label>
     <separator/>
-    <label class="text-link"
-           onclick="gSyncPane.openOldSyncSupportPage(); return false;">
+    <label id="noFxaUseOldSync" class="text-link">
       &welcome.useOldSync.label;
     </label>
   </vbox>
 
   <vbox id="hasFxaAccount">
     <groupbox id="fxaGroup">
       <caption><label>&syncBrand.fxAccount.label;</label></caption>
 
       <deck id="fxaLoginStatus">
 
         <!-- logged in and verified and all is good -->
         <hbox align="center">
           <label id="fxaEmailAddress1"/>
           <spacer flex="1"/>
-          <button oncommand="gSyncPane.manageFirefoxAccount();"
+          <button id="verifiedManage"
                   label="&manage.label;"/>
           <button id="fxaUnlinkButton"
-                  oncommand="gSyncPane.unlinkFirefoxAccount(true);"
                   label="&disconnect.label;"/>
         </hbox>
 
         <!-- logged in to an unverified account -->
         <hbox flex="1">
           <description>
             &signedInUnverified.beforename.label;
             <label id="fxaEmailAddress2"/>
             &signedInUnverified.aftername.label;
           </description>
           <spacer flex="1"/>
           <vbox align="end">
-            <button oncommand="gSyncPane.verifyFirefoxAccount();"
+            <button id="verifyFxaAccount"
                     label="&verify.label;"/>
-            <label class="text-link"
-                   onclick="/* no warning as account can't have previously synced */ gSyncPane.unlinkFirefoxAccount(false);">
+            <label id="unverifiedUnlinkFxaAccount" class="text-link">
               &forget.label;
             </label>
           </vbox>
         </hbox>
 
         <!-- logged in locally but server rejected credentials -->
         <hbox flex="1">
           <description>
             &signedInLoginFailure.beforename.label;
             <label id="fxaEmailAddress3"/>
             &signedInLoginFailure.aftername.label;
           </description>
           <spacer flex="1"/>
           <vbox align="end">
-            <button oncommand="gSyncPane.reSignIn();"
+            <button id="rejectReSignIn"
                     label="&signIn.label;"/>
-            <label class="text-link"
-                    onclick="gSyncPane.unlinkFirefoxAccount(true);">
+            <label id="rejectUnlinkFxaAccount" class="text-link">
               &forget.label;
             </label>
           </vbox>
         </hbox>
       </deck>
     </groupbox>
 
     <groupbox id="syncOptions">
@@ -293,24 +272,21 @@
       </hbox>
     </groupbox>
     <hbox align="center">
       <label accesskey="&syncDeviceName.accesskey;"
              control="syncComputerName">
         &syncDeviceName.label;
       </label>
       <textbox id="fxaSyncComputerName"
-                flex="1"
-                onchange="gSyncUtils.changeName(this)"/>
+                flex="1"/>
     </hbox>
     <spacer flex="1"/>
-    <hbox id="tosPP" pack="center">
-      <label class="text-link small"
-             onclick="event.stopPropagation();gSyncUtils.openToS();">
+    <hbox id="tosPP-small" pack="center">
+      <label id="tosPP-small-ToS" class="text-link small">
         &prefs.tosLink.label;
       </label>
-      <label class="text-link small"
-              onclick="event.stopPropagation();gSyncUtils.openPrivacyPolicy();">
+      <label id="tosPP-small-PP" class="text-link small">
         &fxaPrivacyNotice.link.label;
       </label>
     </hbox>
   </vbox>
 </deck>
--- a/browser/components/preferences/sync.js
+++ b/browser/components/preferences/sync.js
@@ -166,17 +166,17 @@ let gSyncPane = {
     // 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").value = Weave.Service.identity.account;
       document.getElementById("syncComputerName").value = Weave.Service.clientsEngine.localName;
-      document.getElementById("tosPP").hidden = this._usingCustomServer;
+      document.getElementById("tosPP-normal").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_DEFAULT;
--- a/browser/components/preferences/sync.xul
+++ b/browser/components/preferences/sync.xul
@@ -148,17 +148,17 @@
               </rows>
             </grid>
             <hbox>
               <label class="text-link"
                      onclick="gSyncPane.startOver(true); return false;"
                      value="&unlinkDevice.label;"/>
             </hbox>
           </groupbox>
-          <hbox id="tosPP" pack="center">
+          <hbox id="tosPP-normal" 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>
@@ -285,17 +285,17 @@
             <label value="&syncDeviceName.label;"
                    accesskey="&syncDeviceName.accesskey;"
                    control="syncComputerName"/>
             <textbox id="fxaSyncComputerName"
                      flex="1"
                      onchange="gSyncUtils.changeName(this)"/>
           </hbox>
           <spacer flex="1"/>
-          <hbox id="tosPP" pack="center">
+          <hbox id="tosPP-small" pack="center">
             <label class="text-link small"
                    onclick="event.stopPropagation();gSyncUtils.openToS();"
                    value="&prefs.tosLink.label;"/>
             <label class="text-link small"
                    onclick="event.stopPropagation();gSyncUtils.openPrivacyPolicy();"
                    value="&fxaPrivacyNotice.link.label;"/>
           </hbox>
         </vbox>
--- a/browser/locales/en-US/chrome/browser/preferences/preferences.properties
+++ b/browser/locales/en-US/chrome/browser/preferences/preferences.properties
@@ -89,16 +89,17 @@ can=Allow
 canAccessFirstParty=Allow first party only
 canSession=Allow for Session
 cannot=Block
 noCookieSelected=<no cookie selected>
 cookiesAll=The following cookies are stored on your computer:
 cookiesFiltered=The following cookies match your search:
 
 #### Offline apps
+offlineAppsList.height=7em
 offlineAppRemoveTitle=Remove offline website data
 offlineAppRemovePrompt=After removing this data, %S will not be available offline.  Are you sure you want to remove this offline website?
 offlineAppRemoveConfirm=Remove offline data
 
 # LOCALIZATION NOTE: The next string is for the disk usage of the
 # offline application
 #   e.g. offlineAppUsage : "50.23 MB"
 #   %1$S = size (in bytes or megabytes, ...)
--- a/browser/themes/shared/incontentprefs/preferences.css
+++ b/browser/themes/shared/incontentprefs/preferences.css
@@ -126,16 +126,22 @@ prefpane {
   color: #333333;
   border: 1px solid #C1C1C1;
   border-radius: 2px;
   background-color: #FBFBFB;
   overflow-y: auto;
   height: 500px;
 }
 
+#handlersView > listheader {
+  -moz-appearance: none;
+  border: 0;
+  padding: 0;
+}
+
 #typeColumn,
 #actionColumn {
   -moz-appearance: none;
   line-height: 20px;
   color: #333333;
   height: 36px;
   padding: 0 10px;
   background-color: #FBFBFB;
@@ -239,17 +245,18 @@ description > html|a {
   margin: 0;
 }
 
 #weavePrefsDeck > vbox > label,
 #weavePrefsDeck > vbox > groupbox,
 #weavePrefsDeck > vbox > description,
 #weavePrefsDeck > vbox > #pairDevice > label,
 #weavePrefsDeck > #needsUpdate > hbox > #loginError,
-#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP) > label {
+#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label,
+#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-small) > label {
   /* no margin-start for elements at the begin of a line */
   -moz-margin-start: 0;
 }
 
 #advancedPrefs {
   padding-bottom: 0; /* no padding needed in inContent prefs */
 }