Bug 754344 - Make in-content prefs navigation look like about:addons r=jaws
☠☠ backed out by 6f04b612353d ☠ ☠
authorTim Taubert <ttaubert@mozilla.com>
Thu, 17 Oct 2013 16:42:31 -0700
changeset 152944 109710b0f5f6cc3646298e25652f911bd8500f6a
parent 152943 7c01f509b0b6678fde37626af799cd29e81f60d3
child 152945 7c8790d032b53ef12f1a175b8a66d48039406375
push id3278
push userttaubert@mozilla.com
push dateFri, 01 Nov 2013 09:47:44 +0000
treeherderfx-team@109710b0f5f6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs754344
milestone28.0a1
Bug 754344 - Make in-content prefs navigation look like about:addons r=jaws From 958cacee91f0730b407bf35a65dd0bc9116cdd9e Mon Sep 17 00:00:00 2001
browser/base/content/utilityOverlay.js
browser/components/nsBrowserContentHandler.js
browser/components/preferences/handlers.css
browser/components/preferences/in-content/advanced.xul
browser/components/preferences/in-content/applications.xul
browser/components/preferences/in-content/content.xul
browser/components/preferences/in-content/jar.mn
browser/components/preferences/in-content/landing.xul
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.xul
browser/components/preferences/in-content/security.xul
browser/components/preferences/in-content/sync.xul
browser/locales/en-US/chrome/browser/preferences/content.dtd
browser/locales/en-US/chrome/browser/preferences/security.dtd
browser/themes/linux/jar.mn
browser/themes/linux/preferences/applications.css
browser/themes/linux/preferences/in-content/preferences.css
browser/themes/osx/jar.mn
browser/themes/osx/preferences/applications.css
browser/themes/osx/preferences/in-content/preferences.css
browser/themes/windows/jar.mn
browser/themes/windows/preferences/applications.css
browser/themes/windows/preferences/in-content/preferences.css
--- a/browser/base/content/utilityOverlay.js
+++ b/browser/base/content/utilityOverlay.js
@@ -468,40 +468,64 @@ function openAboutDialog() {
 #else
   var features = "chrome,centerscreen,dependent,dialog=no";
 #endif
   window.openDialog("chrome://browser/content/aboutDialog.xul", "", features);
 }
 
 function openPreferences(paneID, extraArgs)
 {
-  if (Services.prefs.getBoolPref("browser.preferences.inContent")) {
-    openUILinkIn("about:preferences", "tab");
+  function switchToAdvancedSubPane(doc) {
+    if (extraArgs && extraArgs["advancedTab"]) {
+      let advancedPaneTabs = doc.getElementById("advancedPrefs");
+      advancedPaneTabs.selectedTab = doc.getElementById(extraArgs["advancedTab"]);
+    }
+  }
+
+  if (getBoolPref("browser.preferences.inContent")) {
+    let win = Services.wm.getMostRecentWindow("navigator:browser");
+    if (!win) {
+      return;
+    }
+
+    let newLoad = !win.switchToTabHavingURI("about:preferences", true);
+    let browser = win.gBrowser.selectedBrowser;
+
+    function switchToPane() {
+      if (paneID) {
+        browser.contentWindow.selectCategory(paneID);
+      }
+      switchToAdvancedSubPane(browser.contentDocument);
+    }
+
+    if (newLoad) {
+      browser.addEventListener("load", function onload() {
+        browser.removeEventListener("load", onload, true);
+        switchToPane();
+      }, true);
+    } else {
+      switchToPane();
+    }
   } else {
     var instantApply = getBoolPref("browser.preferences.instantApply", false);
     var features = "chrome,titlebar,toolbar,centerscreen" + (instantApply ? ",dialog=no" : ",modal");
 
     var win = Services.wm.getMostRecentWindow("Browser:Preferences");
     if (win) {
       win.focus();
       if (paneID) {
         var pane = win.document.getElementById(paneID);
         win.document.documentElement.showPane(pane);
       }
 
-      if (extraArgs && extraArgs["advancedTab"]) {
-        var advancedPaneTabs = win.document.getElementById("advancedPrefs");
-        advancedPaneTabs.selectedTab = win.document.getElementById(extraArgs["advancedTab"]);
-      }
-
-     return;
+      switchToAdvancedSubPane(win.document);
+    } else {
+      openDialog("chrome://browser/content/preferences/preferences.xul",
+                 "Preferences", features, paneID, extraArgs);
     }
-
-    openDialog("chrome://browser/content/preferences/preferences.xul",
-               "Preferences", features, paneID, extraArgs);
   }
 }
 
 function openAdvancedPreferences(tabID)
 {
   openPreferences("paneAdvanced", { "advancedTab" : tabID });
 }
 
--- a/browser/components/nsBrowserContentHandler.js
+++ b/browser/components/nsBrowserContentHandler.js
@@ -447,18 +447,20 @@ nsBrowserContentHandler.prototype = {
     }
     catch (e) {
       Components.utils.reportError(e);
     }
 
     var chromeParam = cmdLine.handleFlagWithParam("chrome", false);
     if (chromeParam) {
 
-      // Handle the old preference dialog URL separately (bug 285416)
-      if (chromeParam == "chrome://browser/content/pref/pref.xul") {
+      // Handle old preference dialog URLs.
+      if (chromeParam == "chrome://browser/content/pref/pref.xul" ||
+          (Services.prefs.getBoolPref("browser.preferences.inContent") &&
+           chromeParam == "chrome://browser/content/preferences/preferences.xul")) {
         openPreferences();
         cmdLine.preventDefault = true;
       } else try {
         // only load URIs which do not inherit chrome privs
         var features = "chrome,dialog=no,all" + this.getFeatures(cmdLine);
         var uri = resolveURIInternal(cmdLine, chromeParam);
         var netutil = Components.classes["@mozilla.org/network/util;1"]
                                 .getService(nsINetUtil);
--- a/browser/components/preferences/handlers.css
+++ b/browser/components/preferences/handlers.css
@@ -1,17 +1,17 @@
 /* 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/. */
 
-richlistitem {
+#handlersView > richlistitem {
   -moz-binding: url("chrome://browser/content/preferences/handlers.xml#handler");
 }
 
-richlistitem[selected="true"] {
+#handlersView > richlistitem[selected="true"] {
   -moz-binding: url("chrome://browser/content/preferences/handlers.xml#handler-selected");
 }
 
 /**
  * Make the icons appear.
  * Note: we display the icon box for every item whether or not it has an icon
  * so the labels of all the items align vertically.
  */
--- a/browser/components/preferences/in-content/advanced.xul
+++ b/browser/components/preferences/in-content/advanced.xul
@@ -123,21 +123,16 @@
 </preferences>
 
 #ifdef HAVE_SHELL_SERVICE
   <stringbundle id="bundleShell" src="chrome://browser/locale/shellservice.properties"/>
   <stringbundle id="bundleBrand" src="chrome://branding/locale/brand.properties"/>
 #endif
   <stringbundle id="bundlePreferences" src="chrome://browser/locale/preferences/preferences.properties"/>
 
-<hbox class="heading" data-category="paneAdvanced" hidden="true">
-  <image class="preference-icon" type="advanced"/>
-  <html:h1>&paneAdvanced.title;</html:h1>
-</hbox>
-
 <tabbox id="advancedPrefs" flex="1"
         data-category="paneAdvanced" hidden="true"
         onselect="gAdvancedPane.tabSelectionChanged();">
 
   <tabs id="tabsElement">
     <tab id="generalTab" label="&generalTab.label;" helpTopic="prefs-advanced-general"/>
 #ifdef MOZ_DATA_REPORTING
     <tab id="dataChoicesTab" label="&dataChoicesTab.label;" helpTopic="prefs-advanced-data-choices"/>
--- a/browser/components/preferences/in-content/applications.xul
+++ b/browser/components/preferences/in-content/applications.xul
@@ -50,21 +50,16 @@
               type="bool"/>
 </preferences>
 
 <keyset>
   <key key="&focusSearch1.key;" modifiers="accel" oncommand="gApplicationsPane.focusFilterBox();"/>
   <key key="&focusSearch2.key;" modifiers="accel" oncommand="gApplicationsPane.focusFilterBox();"/>
 </keyset>
 
-<hbox class="heading" data-category="paneApplications" hidden="true">
-  <image class="preference-icon" type="applications"/>
-  <html:h1>&paneApplications.title;</html:h1>
-</hbox>
-
 <vbox data-category="paneApplications" hidden="true" flex="1">
   <hbox>
     <textbox id="filter" flex="1"
              type="search"
              placeholder="&filter.emptytext;"
              aria-controls="handlersView"
              oncommand="gApplicationsPane.filter();"/>
   </hbox>
--- a/browser/components/preferences/in-content/content.xul
+++ b/browser/components/preferences/in-content/content.xul
@@ -16,22 +16,19 @@
               onchange="gContentPane._rebuildFonts();"/>
 </preferences>
 
 <script type="application/javascript" 
         src="chrome://mozapps/content/preferences/fontbuilder.js"/>
 <script type="application/javascript" 
         src="chrome://browser/content/preferences/in-content/content.js"/>
 
-<hbox class="heading" data-category="paneContent" hidden="true">
-  <image class="preference-icon" type="content"/>
-  <html:h1>&paneContent.title;</html:h1>
-</hbox>
+<groupbox id="miscGroup" data-category="paneContent" hidden="true">
+  <caption label="&popups.label;"/>
 
-<groupbox id="miscGroup" data-category="paneContent" hidden="true">
   <grid id="contentGrid">
     <columns>
       <column flex="1"/>
       <column/>
     </columns>
     <rows id="contentRows-1">
       <row id="popupPolicyRow">
         <vbox align="start">
--- a/browser/components/preferences/in-content/jar.mn
+++ b/browser/components/preferences/in-content/jar.mn
@@ -1,15 +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/.
 
 browser.jar:
    content/browser/preferences/in-content/preferences.js
-   content/browser/preferences/in-content/landing.xul
 *  content/browser/preferences/in-content/preferences.xul
 *  content/browser/preferences/in-content/main.xul
 *  content/browser/preferences/in-content/main.js
    content/browser/preferences/in-content/privacy.xul
 *  content/browser/preferences/in-content/privacy.js
 *  content/browser/preferences/in-content/advanced.xul
 *  content/browser/preferences/in-content/advanced.js
    content/browser/preferences/in-content/applications.xul
deleted file mode 100644
--- a/browser/components/preferences/in-content/landing.xul
+++ /dev/null
@@ -1,55 +0,0 @@
-<!-- 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/. -->
-
-<vbox data-category="landing">
-  <html:h1 class="indent-small">&brandShortName;</html:h1>
-
-  <hbox id="preferences-home" flex="1">
-
-    <button label="&paneGeneral.title;" class="landingButton"
-            oncommand="gotoPref('paneGeneral');">
-      <image class="landingButton-icon" type="general"/>
-      <label class="landingButton-label">&paneGeneral.title;</label>
-    </button>
-
-
-
-    <button label="&paneContent.title;" class="landingButton"
-            oncommand="gotoPref('paneContent');">
-      <image class="landingButton-icon" type="content"/>
-      <label class="landingButton-label">&paneContent.title;</label>
-    </button>
-
-    <button label="&paneApplications.title;" class="landingButton"
-            oncommand="gotoPref('paneApplications');">
-      <image class="landingButton-icon" type="applications"/>
-      <label class="landingButton-label">&paneApplications.title;</label>
-    </button>
-
-    <button label="&panePrivacy.title;" class="landingButton"
-            oncommand="gotoPref('panePrivacy');">
-      <image class="landingButton-icon" type="privacy"/>
-      <label class="landingButton-label">&panePrivacy.title;</label>
-    </button>
-
-    <button label="&paneSecurity.title;" class="landingButton"
-            oncommand="gotoPref('paneSecurity');">
-      <image class="landingButton-icon" type="security"/>
-      <label class="landingButton-label">&paneSecurity.title;</label>
-    </button>
-
-    <button label="&paneSync.title;" class="landingButton"
-            oncommand="gotoPref('paneSync');">
-      <image class="landingButton-icon" type="sync"/>
-      <label class="landingButton-label">&paneSync.title;</label>
-    </button>
-
-    <button label="&paneAdvanced.title;" class="landingButton"
-            oncommand="gotoPref('paneAdvanced');">
-      <image class="landingButton-icon" type="advanced"/>
-      <label class="landingButton-label">&paneAdvanced.title;</label>
-    </button>
-
-  </hbox>
-</vbox>
--- a/browser/components/preferences/in-content/main.xul
+++ b/browser/components/preferences/in-content/main.xul
@@ -87,23 +87,18 @@
                 type="bool"/>
 #ifdef XP_WIN
     <preference id="browser.taskbar.previews.enable"
                 name="browser.taskbar.previews.enable"
                 type="bool"/>
 #endif
 </preferences>
 
-<hbox class="heading" data-category="paneGeneral" hidden="true">
-  <image class="preference-icon" type="general"/>
-  <html:h1>&paneGeneral.title;</html:h1>
-</hbox>
-
 <!-- Startup -->
-<groupbox id="startupGroup" data-category="paneGeneral" hidden="true">
+<groupbox id="startupGroup" data-category="paneGeneral">
   <caption label="&startup.label;"/>
 
   <hbox align="center">
     <label value="&startupPage.label;"
            accesskey="&startupPage.accesskey;"
            control="browserStartupPage"/>
     <menulist id="browserStartupPage"
               preference="browser.startup.page">
@@ -152,17 +147,17 @@
             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" hidden="true">
+<groupbox id="downloadsGroup" data-category="paneGeneral">
   <caption label="&downloads.label;"/>
 
   <checkbox id="showWhenDownloading"
             label="&showWhenDownloading.label;"
             accesskey="&showWhenDownloading.accesskey;"
             preference="browser.download.manager.showWhenStarting"
             onsyncfrompreference="return gMainPane.readShowDownloadsWhenStarting();"/>
   <checkbox id="closeWhenDone"
@@ -204,17 +199,17 @@
     <radio id="alwaysAsk"
            value="false"
            label="&alwaysAsk.label;"
            accesskey="&alwaysAsk.accesskey;"/>
   </radiogroup>
 </groupbox>
 
 <!-- Tab preferences -->
-<groupbox data-category="paneGeneral" hidden="true">
+<groupbox data-category="paneGeneral">
     <caption label="&tabsGroup.label;"/>
     <checkbox id="linkTargeting" label="&newWindowsAsTabs.label;"
               accesskey="&newWindowsAsTabs.accesskey;"
               preference="browser.link.open_newwindow"
               onsyncfrompreference="return gMainPane.readLinkTarget();"
               onsynctopreference="return gMainPane.writeLinkTarget();"/>
 
     <checkbox id="warnCloseMultiple" label="&warnCloseMultipleTabs.label;"
--- a/browser/components/preferences/in-content/preferences.js
+++ b/browser/components/preferences/in-content/preferences.js
@@ -7,52 +7,69 @@
 const Cc = Components.classes;
 const Ci = Components.interfaces;
 const Cu = Components.utils;
 const Cr = Components.results;
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
 
+addEventListener("DOMContentLoaded", function onLoad() {
+  removeEventListener("DOMContentLoaded", onLoad);
+  init_all();
+});
+
 function init_all() {
   document.documentElement.instantApply = true;
-  window.history.replaceState("landing", document.title);
-  window.addEventListener("popstate", onStatePopped, true);
-  updateCommands();
   gMainPane.init();
   gPrivacyPane.init();
   gAdvancedPane.init();
   gApplicationsPane.init();
   gContentPane.init();
   gSyncPane.init();
   gSecurityPane.init();
   var initFinished = document.createEvent("Event");
   initFinished.initEvent("Initialized", true, true);
   document.dispatchEvent(initFinished);
+
+  let categories = document.getElementById("categories");
+  categories.addEventListener("select", event => gotoPref(event.target.value));
+  window.addEventListener("popstate", event => selectCategory(event.state));
+
+  if (history.length > 1 && history.state) {
+    updateCommands();
+    selectCategory(history.state);
+  } else {
+    history.replaceState("paneGeneral", document.title);
+  }
+}
+
+function selectCategory(name) {
+  let categories = document.getElementById("categories");
+  let item = categories.querySelector(".category[value=" + name + "]");
+  categories.selectedItem = item;
 }
 
 function gotoPref(page) {
+  if (history.state != page) {
+    window.history.pushState(page, document.title);
+  }
+
+  updateCommands();
   search(page, "data-category");
-  window.history.pushState(page, document.title);
-  updateCommands();
 }
  
 function cmd_back() {
   window.history.back();
 }
  
 function cmd_forward() {
   window.history.forward();
 }
 
-function onStatePopped(aEvent) {
-  updateCommands();
-  search(aEvent.state, "data-category");
-}
-
 function updateCommands() {
   document.getElementById("back-btn").disabled = !canGoBack();
   document.getElementById("forward-btn").disabled = !canGoForward();
 }
 
 function canGoBack() {
   return window.QueryInterface(Ci.nsIInterfaceRequestor)
                .getInterface(Ci.nsIWebNavigation)
--- a/browser/components/preferences/in-content/preferences.xul
+++ b/browser/components/preferences/in-content/preferences.xul
@@ -49,18 +49,17 @@
 
 #ifdef XP_WIN
 #define USE_WIN_TITLE_STYLE
 #endif
 #ifdef XP_OS2
 #define USE_WIN_TITLE_STYLE
 #endif
 
-<page onload="init_all();"
-      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       xmlns:html="http://www.w3.org/1999/xhtml"
 #ifdef USE_WIN_TITLE_STYLE
       title="&prefWindow.titleWin;">
 #else
       title="&prefWindow.titleGNOME;">
 #endif
 
   <script type="application/javascript"
@@ -81,25 +80,74 @@
   <hbox id="header">
     <toolbarbutton id="back-btn" class="nav-button header-button"
                    oncommand="cmd_back()" tooltiptext="&buttonBack.tooltip;"
                    disabled="true"/>
     <toolbarbutton id="forward-btn" class="nav-button header-button"
                    oncommand="cmd_forward()" tooltiptext="&buttonForward.tooltip;"
                    disabled="true"/>
   </hbox>
-  
-  <hbox class="main-content" flex="1">
-    <prefpane flex="1" id="mainPrefPane">
-#include landing.xul
+
+  <hbox flex="1">
+
+    <!-- category list -->
+    <richlistbox id="categories">
+      <richlistitem id="category-general" class="category" align="center"
+                    value="paneGeneral" tooltiptext="&paneGeneral.title;">
+        <image class="category-icon"/>
+        <label class="category-name" flex="1" value="&paneGeneral.title;"/>
+      </richlistitem>
+
+      <richlistitem id="category-content" class="category" align="center"
+                    value="paneContent" tooltiptext="&paneContent.title;">
+        <image class="category-icon"/>
+        <label class="category-name" flex="1" value="&paneContent.title;"/>
+      </richlistitem>
+
+      <richlistitem id="category-application" class="category" align="center"
+                    value="paneApplications" tooltiptext="&paneApplications.title;">
+        <image class="category-icon"/>
+        <label class="category-name" flex="1" value="&paneApplications.title;"/>
+      </richlistitem>
+
+      <richlistitem id="category-privacy" class="category" align="center"
+                    value="panePrivacy" tooltiptext="&panePrivacy.title;">
+        <image class="category-icon"/>
+        <label class="category-name" flex="1" value="&panePrivacy.title;"/>
+      </richlistitem>
+
+      <richlistitem id="category-security" class="category" align="center"
+                    value="paneSecurity" tooltiptext="&paneSecurity.title;">
+        <image class="category-icon"/>
+        <label class="category-name" flex="1" value="&paneSecurity.title;"/>
+      </richlistitem>
+
+#ifdef MOZ_SERVICES_SYNC
+      <richlistitem id="category-sync" class="category" align="center"
+                    value="paneSync" tooltiptext="&paneSync.title;">
+        <image class="category-icon"/>
+        <label class="category-name" flex="1" value="&paneSync.title;"/>
+      </richlistitem>
+#endif
+
+      <richlistitem id="category-advanced" class="category" align="center"
+                    value="paneAdvanced" tooltiptext="&paneAdvanced.title;">
+        <image class="category-icon"/>
+        <label class="category-name" flex="1" value="&paneAdvanced.title;"/>
+      </richlistitem>
+    </richlistbox>
+
+    <box class="main-content" flex="1">
+      <prefpane flex="1" id="mainPrefPane">
 #include main.xul
 #include privacy.xul
 #include advanced.xul
 #include applications.xul
 #include content.xul
 #include security.xul
 #ifdef MOZ_SERVICES_SYNC
 #include sync.xul
 #endif
-    </prefpane>
+      </prefpane>
+    </box>
+
   </hbox>
-  
 </page>
--- a/browser/components/preferences/in-content/privacy.xul
+++ b/browser/components/preferences/in-content/privacy.xul
@@ -60,21 +60,16 @@
   <!-- Private Browsing -->
   <preference id="browser.privatebrowsing.autostart"
               name="browser.privatebrowsing.autostart"
               onchange="gPrivacyPane.updatePrivacyMicroControls();"
               type="bool"/>
 
 </preferences>
 
-<hbox class="heading" data-category="panePrivacy" hidden="true">
-  <image class="preference-icon" type="privacy"/>
-  <html:h1>&panePrivacy.title;</html:h1>
-</hbox>
-
 <!-- Tracking -->
 <groupbox id="trackingGroup" data-category="panePrivacy" hidden="true" align="start">
   <caption label="&tracking.label;"/>
   <radiogroup id="doNotTrackSelection" orient="vertical"
               preference="privacy.donottrackheader.value"
               onsynctopreference="return gPrivacyPane.setTrackingPrefs()"
               onsyncfrompreference="return gPrivacyPane.getTrackingPrefs()">
     <radio id="dntnotrack" value="1" label="&dntTrackingNotOkay.label2;"
--- a/browser/components/preferences/in-content/security.xul
+++ b/browser/components/preferences/in-content/security.xul
@@ -25,23 +25,20 @@
               name="browser.safebrowsing.enabled"
               type="bool"/>
 
   <!-- Passwords -->
   <preference id="signon.rememberSignons" name="signon.rememberSignons" type="bool"/>
 
 </preferences>
 
-<hbox class="heading" data-category="paneSecurity" hidden="true">
-  <image class="preference-icon" type="security"/>
-  <html:h1>&paneSecurity.title;</html:h1>
-</hbox>
-
 <!-- addons, forgery (phishing) UI -->
 <groupbox id="addonsPhishingGroup" data-category="paneSecurity" hidden="true">
+  <caption label="&general.label;"/>
+
   <hbox id="addonInstallBox">
     <checkbox id="warnAddonInstall" flex="1"
               label="&warnAddonInstall.label;"
               accesskey="&warnAddonInstall.accesskey;"
               preference="xpinstall.whitelist.required"
               onsyncfrompreference="return gSecurityPane.readWarnAddonInstall();"/>
     <button id="addonExceptions"
             label="&addonExceptions.label;"
--- a/browser/components/preferences/in-content/sync.xul
+++ b/browser/components/preferences/in-content/sync.xul
@@ -23,21 +23,16 @@
               type="bool"/>
 </preferences>
 
 <script type="application/javascript"
         src="chrome://browser/content/preferences/in-content/sync.js"/>
 <script type="application/javascript"
         src="chrome://browser/content/sync/utils.js"/>
 
-<hbox class="heading" data-category="paneSync" hidden="true">
-  <image class="preference-icon" type="sync"/>
-  <html:h1>&paneSync.title;</html:h1>
-</hbox>
-
 <deck id="weavePrefsDeck" data-category="paneSync" hidden="true">
   <vbox id="noAccount" align="center">
     <spacer flex="1"/>
     <description id="syncDesc">
       &weaveDesc.label;
     </description>
     <separator/>
     <label class="text-link"
--- a/browser/locales/en-US/chrome/browser/preferences/content.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/content.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  popups.label                "Pop-ups">
+
 <!ENTITY  blockPopups.label           "Block pop-up windows">
 <!ENTITY  blockPopups.accesskey       "B">
 <!ENTITY  popupExceptions.label       "Exceptions…">
 <!ENTITY  popupExceptions.accesskey   "E">
 
 <!ENTITY  fontsAndColors.label        "Fonts &amp; Colors">
 
 <!ENTITY  defaultFont.label           "Default font:">
--- a/browser/locales/en-US/chrome/browser/preferences/security.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/security.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  general.label                 "General">
+
 <!ENTITY  warnAddonInstall.label        "Warn me when sites try to install add-ons">
 <!ENTITY  warnAddonInstall.accesskey    "W">
 
 <!-- LOCALIZATION NOTE (blockWebForgeries.label, blockAttackSites.label):
   The methods by which forged (phished) and attack sites will be detected by
   phishing providers will vary from human review to machine-based heuristics to a
   combination of both, so it's important that these strings and
   useDownloadedList.label convey the meaning "reported" (and not something like
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -100,17 +100,17 @@ browser.jar:
   skin/classic/browser/places/downloads.png           (places/downloads.png)
   skin/classic/browser/preferences/alwaysAsk.png      (preferences/alwaysAsk.png)
   skin/classic/browser/preferences/mail.png           (preferences/mail.png)
   skin/classic/browser/preferences/Options.png        (preferences/Options.png)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/preferences/Options-sync.png   (preferences/Options-sync.png)
 #endif
 * skin/classic/browser/preferences/preferences.css    (preferences/preferences.css)
-  skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
+* skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
   skin/classic/browser/preferences/applications.css   (preferences/applications.css)
   skin/classic/browser/preferences/aboutPermissions.css (preferences/aboutPermissions.css)
   skin/classic/browser/social/services-16.png         (social/services-16.png)
   skin/classic/browser/social/services-64.png         (social/services-64.png)
   skin/classic/browser/social/share-button.png        (social/share-button.png)
   skin/classic/browser/social/share-button-active.png (social/share-button-active.png)
   skin/classic/browser/social/chat-icons.png          (social/chat-icons.png)
   skin/classic/browser/tabbrowser/connecting.png      (tabbrowser/connecting.png)
--- a/browser/themes/linux/preferences/applications.css
+++ b/browser/themes/linux/preferences/applications.css
@@ -16,22 +16,22 @@
 }
 
 .typeIcon,
 .actionIcon {
   -moz-margin-start: 3px;
   -moz-margin-end: 3px;
 }
 
-richlistitem label {
+#handlersView > richlistitem label {
   -moz-margin-start: 1px;
   margin-top: 2px;
 }
 
-richlistitem {
+#handlersView > richlistitem {
   min-height: 25px;
 }
 
 richlistitem[appHandlerIcon="ask"],
 menuitem[appHandlerIcon="ask"] {
   list-style-image: url("chrome://browser/skin/preferences/alwaysAsk.png");
 }
 
--- a/browser/themes/linux/preferences/in-content/preferences.css
+++ b/browser/themes/linux/preferences/in-content/preferences.css
@@ -1,105 +1,125 @@
 /* - 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/. */
 
 @import url("chrome://global/skin/inContentUI.css");
 
 @namespace html "http://www.w3.org/1999/xhtml";
 
-#preferences-home {
-  display: block;
-}
-
 #header {
   margin-bottom: 18px;
 }
 
-.landingButton {
-  -moz-box-align: center;
-  -moz-box-orient: vertical;
-}
-
-.landingButton:hover {
-  cursor: pointer;
-}
-
-.landingButton-label {
-  margin-top: 4px;
-}
-
-.landingButton-icon {
-  display: block;
-  width: 32px;
-  height: 32px;
-  background-image: url("chrome://browser/skin/preferences/Options.png");
-  background-repeat: no-repeat;
-}
-
-.preference-icon {
-  display: block;
-  width: 32px;
-  height: 32px;
-  background-image: url("chrome://browser/skin/preferences/Options.png");
-  background-repeat: no-repeat;
-  margin: 0 20px;
-}
-
-.preference-icon[type="general"],
-.landingButton-icon[type="general"] {
-  background-position: 0 0;
+caption {
+  font-size: 1.667rem;
 }
 
-.preference-icon[type="content"],
-.landingButton-icon[type="content"] {
-  background-position: -64px 0;
-}
-
-.preference-icon[type="applications"],
-.landingButton-icon[type="applications"] {
-  background-position: -96px 0;
-}
-
-.preference-icon[type="privacy"],
-.landingButton-icon[type="privacy"] {
-  background-position: -128px 0;
-}
-
-.preference-icon[type="security"],
-.landingButton-icon[type="security"] {
-  background-position: -160px 0;
-}
-
-.preference-icon[type="advanced"],
-.landingButton-icon[type="advanced"] {
-  background-position: -192px 0;
-}
-
-.preference-icon[type="sync"],
-.landingButton-icon[type="sync"] {
-  background-image: url("chrome://browser/skin/preferences/Options-sync.png");
-}
-
-caption {
-  font-size: 20px;
-}
-
-.heading {
-  height: 50px;
-  background-color: rgba(192,199,210,0.7);
-  border-radius: 5px 5px 0 0;
-  margin-bottom: 15px;
-  -moz-box-align: center;
+.main-content {
+  max-width: 800px;
 }
 
 prefpane > .content-box {
   overflow: auto;
 }
 
+/* Category List */
+
+#categories {
+  -moz-appearance: none;
+  border: none;
+  -moz-margin-end: -1px;
+  background-color: transparent;
+  position: relative;
+  margin-top: 41px;
+}
+
+.category {
+  -moz-appearance: none;
+  border-width: 1px;
+  -moz-border-end-width: 0;
+  border-style: solid;
+  border-color: transparent;
+  padding: 9px 4px 10px;
+  -moz-padding-end: 8px;
+  -moz-box-align: center;
+  overflow: hidden;
+  min-height: 0;
+  color: WindowText;
+  height: 52px;
+}
+
+.category:-moz-locale-dir(ltr) {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.category:-moz-locale-dir(rtl) {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.category[selected] {
+  background-color: -moz-Field;
+  color: -moz-FieldText;
+  border-color: ThreeDShadow;
+}
+
+.category-name {
+  font-size: 1.5rem;
+  -moz-padding-end: 24px;
+}
+
+/* Maximize the size of the viewport when the window is small */
+@media (max-width: 800px) {
+  .category-name {
+    display: none;
+  }
+}
+
+.category-icon {
+  width: 32px;
+  height: 32px;
+  margin: 0 6px;
+  -moz-margin-start: 6px;
+  -moz-margin-end: 5px;
+  list-style-image: url("chrome://browser/skin/preferences/Options.png");
+}
+
+#category-general > .category-icon {
+  -moz-image-region: rect(0, 32px, 32px, 0);
+}
+
+#category-content > .category-icon {
+  -moz-image-region: rect(0, 96px,  32px, 64px)
+}
+
+#category-application > .category-icon {
+  -moz-image-region: rect(0, 128px,  32px, 96px)
+}
+
+#category-privacy > .category-icon {
+  -moz-image-region: rect(0, 160px,  32px, 128px)
+}
+
+#category-security > .category-icon {
+  -moz-image-region: rect(0, 192px,  32px, 160px)
+}
+
+#category-advanced > .category-icon {
+  -moz-image-region: rect(0, 224px, 32px, 192px)
+}
+
+%ifdef MOZ_SERVICES_SYNC
+#category-sync > .category-icon {
+  list-style-image: url("chrome://browser/skin/preferences/Options-sync.png");
+}
+%endif
+
 /* Applications Pane Styles */
 
 #applications-content {
   padding: 15px;
 }
 
 #handlersView {
   -moz-appearance: none;
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -164,17 +164,17 @@ browser.jar:
   skin/classic/browser/preferences/alwaysAsk.png            (preferences/alwaysAsk.png)
   skin/classic/browser/preferences/application.png          (preferences/application.png)
   skin/classic/browser/preferences/Options.png              (preferences/Options.png)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/preferences/Options-sync.png         (preferences/Options-sync.png)
 #endif
   skin/classic/browser/preferences/saveFile.png             (preferences/saveFile.png)
 * skin/classic/browser/preferences/preferences.css          (preferences/preferences.css)
-  skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
+* skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
   skin/classic/browser/preferences/applications.css         (preferences/applications.css)
   skin/classic/browser/preferences/aboutPermissions.css     (preferences/aboutPermissions.css)
   skin/classic/browser/social/services-16.png               (social/services-16.png)
   skin/classic/browser/social/services-16@2x.png            (social/services-16@2x.png)
   skin/classic/browser/social/services-64.png               (social/services-64.png)
   skin/classic/browser/social/services-64@2x.png            (social/services-64@2x.png)
   skin/classic/browser/social/share-button.png              (social/share-button.png)
   skin/classic/browser/social/share-button@2x.png           (social/share-button@2x.png)
--- a/browser/themes/osx/preferences/applications.css
+++ b/browser/themes/osx/preferences/applications.css
@@ -9,22 +9,22 @@
  * Also make sure the labels are the same distance away from the icons.
  */
 .actionsMenu {
   -moz-margin-start: -2px;
   margin-top: 0;
   margin-bottom: -1px;
 }
 
-richlistitem label {
+#handlersView > richlistitem label {
   -moz-margin-start: 3px;
   margin-top: 2px;
 }
 
-richlistitem {
+#handlersView > richlistitem {
   min-height: 22px;
 }
 
 .typeIcon,
 .actionIcon {
   -moz-margin-start: 3px;
 }
 
--- a/browser/themes/osx/preferences/in-content/preferences.css
+++ b/browser/themes/osx/preferences/in-content/preferences.css
@@ -1,108 +1,125 @@
 /* - 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/. */
 
+%include ../../shared.inc
+
 @import url("chrome://global/skin/inContentUI.css");
 
 @namespace html "http://www.w3.org/1999/xhtml";
 
-#preferences-home {
-  display: block;
-}
-
 #header {
   margin-bottom: 18px;
 }
 
-.landingButton {
-  -moz-box-align: center;
-  -moz-box-orient: vertical;
-  border: none;
-  background: none;
-  box-shadow: none;
-}
-
-.landingButton:hover {
-  cursor: pointer;
-}
-
-.landingButton-label {
-  margin-top: 4px;
-}
-
-.landingButton-icon {
-  display: block;
-  width: 32px;
-  height: 32px;
-  background-image: url("chrome://browser/skin/preferences/Options.png");
-  background-repeat: no-repeat;
-}
-
-.preference-icon {
-  display: block;
-  width: 32px;
-  height: 32px;
-  background-image: url("chrome://browser/skin/preferences/Options.png");
-  background-repeat: no-repeat;
-  margin: 0 20px;
-}
-
-.preference-icon[type="general"],
-.landingButton-icon[type="general"] {
-  background-position: 0 0;
+caption {
+  font-size: 1.667rem;
 }
 
-.preference-icon[type="content"],
-.landingButton-icon[type="content"] {
-  background-position: -64px 0;
-}
-
-.preference-icon[type="applications"],
-.landingButton-icon[type="applications"] {
-  background-position: -96px 0;
-}
-
-.preference-icon[type="privacy"],
-.landingButton-icon[type="privacy"] {
-  background-position: -128px 0;
-}
-
-.preference-icon[type="security"],
-.landingButton-icon[type="security"] {
-  background-position: -160px 0;
-}
-
-.preference-icon[type="advanced"],
-.landingButton-icon[type="advanced"] {
-  background-position: -192px 0;
-}
-
-.preference-icon[type="sync"],
-.landingButton-icon[type="sync"] {
-  background-image: url("chrome://browser/skin/preferences/Options-sync.png");
-}
-
-caption {
-  font-size: 20px;
-}
-
-.heading {
-  height: 50px;
-  background-color: rgba(192,199,210,0.7);
-  border-radius: 5px 5px 0 0;
-  margin-bottom: 15px;
-  -moz-box-align: center;
+.main-content {
+  max-width: 800px;
 }
 
 prefpane > .content-box {
   overflow: auto;
 }
 
+/* Category List */
+
+#categories {
+  -moz-appearance: none;
+  border: none;
+  -moz-margin-end: -1px;
+  background-color: transparent;
+  position: relative;
+  margin-top: 31px;
+}
+
+.category {
+  -moz-appearance: none;
+  color: #252F3B;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  padding: 10px 4px;
+  -moz-padding-end: 8px;
+  -moz-box-align: center;
+  overflow: hidden;
+  min-height: 0;
+  height: 52px;
+}
+
+.category:-moz-locale-dir(ltr) {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.category:-moz-locale-dir(rtl) {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.category[selected] {
+  background-color: rgba(255, 255, 255, 0.35);
+  color: -moz-dialogtext;
+  border-color: rgba(50, 65, 92, 0.4);
+  -moz-border-end-color: #C9CFD7;
+}
+
+.category-name {
+  font-size: 1.5rem;
+  -moz-padding-end: 24px;
+}
+
+/* Maximize the size of the viewport when the window is small */
+@media (max-width: 800px) {
+  .category-name {
+    display: none;
+  }
+}
+
+.category-icon {
+  width: 32px;
+  height: 32px;
+  -moz-margin-start: 6px;
+  list-style-image: url("chrome://browser/skin/preferences/Options.png");
+}
+
+#category-general > .category-icon {
+  -moz-image-region: rect(0, 32px, 32px, 0);
+}
+
+#category-content > .category-icon {
+  -moz-image-region: rect(0, 96px,  32px, 64px)
+}
+
+#category-application > .category-icon {
+  -moz-image-region: rect(0, 128px,  32px, 96px)
+}
+
+#category-privacy > .category-icon {
+  -moz-image-region: rect(0, 160px,  32px, 128px)
+}
+
+#category-security > .category-icon {
+  -moz-image-region: rect(0, 192px,  32px, 160px)
+}
+
+#category-advanced > .category-icon {
+  -moz-image-region: rect(0, 224px, 32px, 192px)
+}
+
+%ifdef MOZ_SERVICES_SYNC
+#category-sync > .category-icon {
+  list-style-image: url("chrome://browser/skin/preferences/Options-sync.png");
+}
+%endif
+
 /* Applications Pane Styles */
 
 #applications-content {
   padding: 15px;
 }
 
 #handlersView {
   -moz-appearance: none;
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -120,17 +120,17 @@ browser.jar:
         skin/classic/browser/preferences/application.png             (preferences/application.png)
         skin/classic/browser/preferences/mail.png                    (preferences/mail.png)
         skin/classic/browser/preferences/Options.png                 (preferences/Options.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/preferences/Options-sync.png            (preferences/Options-sync.png)
 #endif
         skin/classic/browser/preferences/saveFile.png                (preferences/saveFile.png)
 *       skin/classic/browser/preferences/preferences.css             (preferences/preferences.css)
-        skin/classic/browser/preferences/in-content/preferences.css  (preferences/in-content/preferences.css)
+*       skin/classic/browser/preferences/in-content/preferences.css  (preferences/in-content/preferences.css)
         skin/classic/browser/preferences/applications.css            (preferences/applications.css)
         skin/classic/browser/preferences/aboutPermissions.css        (preferences/aboutPermissions.css)
         skin/classic/browser/social/services-16.png                  (social/services-16.png)
         skin/classic/browser/social/services-64.png                  (social/services-64.png)
         skin/classic/browser/social/share-button.png                 (social/share-button.png)
         skin/classic/browser/social/share-button-active.png          (social/share-button-active.png)
         skin/classic/browser/social/chat-icons.png                   (social/chat-icons.png)
         skin/classic/browser/tabbrowser/newtab.png                   (tabbrowser/newtab.png)
@@ -397,17 +397,17 @@ browser.jar:
         skin/classic/aero/browser/preferences/application.png        (preferences/application-aero.png)
         skin/classic/aero/browser/preferences/mail.png               (preferences/mail-aero.png)
         skin/classic/aero/browser/preferences/Options.png            (preferences/Options-aero.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/aero/browser/preferences/Options-sync.png       (preferences/Options-sync.png)
 #endif
         skin/classic/aero/browser/preferences/saveFile.png           (preferences/saveFile-aero.png)
 *       skin/classic/aero/browser/preferences/preferences.css        (preferences/preferences.css)
-        skin/classic/aero/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
+*       skin/classic/aero/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
         skin/classic/aero/browser/preferences/applications.css       (preferences/applications.css)
         skin/classic/aero/browser/preferences/aboutPermissions.css   (preferences/aboutPermissions.css)
         skin/classic/aero/browser/social/services-16.png             (social/services-16.png)
         skin/classic/aero/browser/social/services-64.png             (social/services-64.png)
         skin/classic/aero/browser/social/share-button.png            (social/share-button.png)
         skin/classic/aero/browser/social/share-button-active.png     (social/share-button-active.png)
         skin/classic/aero/browser/social/chat-icons.png              (social/chat-icons.png)
         skin/classic/aero/browser/tabbrowser/newtab.png              (tabbrowser/newtab.png)
--- a/browser/themes/windows/preferences/applications.css
+++ b/browser/themes/windows/preferences/applications.css
@@ -16,22 +16,22 @@
 }
 
 .typeIcon,
 .actionIcon {
   -moz-margin-start: 3px;
   -moz-margin-end: 3px;
 }
 
-richlistitem label {
+#handlersView > richlistitem label {
   -moz-margin-start: 1px;
   margin-top: 2px;
 }
 
-richlistitem {
+#handlersView > richlistitem {
   min-height: 22px;
 }
 
 richlistitem[appHandlerIcon="ask"],
 menuitem[appHandlerIcon="ask"] {
   list-style-image: url("chrome://browser/skin/preferences/alwaysAsk.png");
 }
 
--- a/browser/themes/windows/preferences/in-content/preferences.css
+++ b/browser/themes/windows/preferences/in-content/preferences.css
@@ -1,108 +1,126 @@
 /* - 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/. */
 
 @import url("chrome://global/skin/inContentUI.css");
 
 @namespace html "http://www.w3.org/1999/xhtml";
 
-#preferences-home {
-  display: block;
-}
-
 #header {
   margin-bottom: 18px;
 }
 
-.landingButton {
-  -moz-box-align: center;
-  -moz-box-orient: vertical;
-  border: none;
-  background: none;
-  box-shadow: none;
-}
-
-.landingButton:hover {
-  cursor: pointer;
-}
-
-.landingButton-label {
-  margin-top: 4px;
-}
-
-.landingButton-icon {
-  display: block;
-  width: 32px;
-  height: 32px;
-  background-image: url("chrome://browser/skin/preferences/Options.png");
-  background-repeat: no-repeat;
-}
-
-.preference-icon {
-  display: block;
-  width: 32px;
-  height: 32px;
-  background-image: url("chrome://browser/skin/preferences/Options.png");
-  background-repeat: no-repeat;
-  margin: 0 20px;
-}
-
-.preference-icon[type="general"],
-.landingButton-icon[type="general"] {
-  background-position: 0 0;
+caption {
+  font-size: 1.667rem;
 }
 
-.preference-icon[type="content"],
-.landingButton-icon[type="content"] {
-  background-position: -64px 0;
-}
-
-.preference-icon[type="applications"],
-.landingButton-icon[type="applications"] {
-  background-position: -96px 0;
-}
-
-.preference-icon[type="privacy"],
-.landingButton-icon[type="privacy"] {
-  background-position: -128px 0;
-}
-
-.preference-icon[type="security"],
-.landingButton-icon[type="security"] {
-  background-position: -160px 0;
-}
-
-.preference-icon[type="advanced"],
-.landingButton-icon[type="advanced"] {
-  background-position: -192px 0;
-}
-
-.preference-icon[type="sync"],
-.landingButton-icon[type="sync"] {
-  background-image: url("chrome://browser/skin/preferences/Options-sync.png");
-}
-
-caption {
-  font-size: 20px;
-}
-
-.heading {
-  height: 50px;
-  background-color: rgba(192,199,210,0.7);
-  border-radius: 5px 5px 0 0;
-  margin-bottom: 15px;
-  -moz-box-align: center;
+.main-content {
+  max-width: 800px;
 }
 
 prefpane > .content-box {
   overflow: auto;
 }
 
+/* Category List */
+
+#categories {
+  -moz-appearance: none;
+  border: none;
+  -moz-margin-end: -1px;
+  background-color: transparent;
+  position: relative;
+  margin-top: 31px;
+}
+
+.category {
+  -moz-appearance: none;
+  background-color: transparent;
+  color: #252F3B;
+  padding: 10px 4px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  -moz-padding-end: 8px;
+  -moz-box-align: center;
+  overflow: hidden;
+  min-height: 0;
+  height: 52px;
+}
+
+.category:-moz-locale-dir(ltr) {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.category:-moz-locale-dir(rtl) {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.category[selected] {
+  background-color: rgba(255, 255, 255, 0.4);
+  color: #252F3B;
+  border-color: #C3CEDF;
+  -moz-border-end-color: #E2E9F2;
+}
+
+.category-name {
+  font-size: 1.5rem;
+  -moz-padding-end: 24px;
+}
+
+/* Maximize the size of the viewport when the window is small */
+@media (max-width: 800px) {
+  .category-name {
+    display: none;
+  }
+}
+
+.category-icon {
+  width: 32px;
+  height: 32px;
+  margin: 0 6px;
+  -moz-margin-start: 6px;
+  -moz-margin-end: 5px;
+  list-style-image: url("chrome://browser/skin/preferences/Options.png");
+}
+
+#category-general > .category-icon {
+  -moz-image-region: rect(0, 32px, 32px, 0);
+}
+
+#category-content > .category-icon {
+  -moz-image-region: rect(0, 96px,  32px, 64px)
+}
+
+#category-application > .category-icon {
+  -moz-image-region: rect(0, 128px,  32px, 96px)
+}
+
+#category-privacy > .category-icon {
+  -moz-image-region: rect(0, 160px,  32px, 128px)
+}
+
+#category-security > .category-icon {
+  -moz-image-region: rect(0, 192px,  32px, 160px)
+}
+
+#category-advanced > .category-icon {
+  -moz-image-region: rect(0, 224px, 32px, 192px)
+}
+
+%ifdef MOZ_SERVICES_SYNC
+#category-sync > .category-icon {
+  list-style-image: url("chrome://browser/skin/preferences/Options-sync.png");
+}
+%endif
+
 /* Applications Pane Styles */
 
 #applications-content {
   padding: 15px;
 }
 
 #handlersView {
   -moz-appearance: none;