Bug 754344 - Make in-content prefs navigation look like about:addons r=jaws
authorTim Taubert <ttaubert@mozilla.com>
Tue, 05 Nov 2013 13:21:28 +0100
changeset 153604 a3f771caf25dc2f5c829e78a0fa52556c573ff86
parent 153603 6b4807fd5d1edbad0e995b40c444a36656b1b762
child 153605 2ada3a06d5e76891913fb6c7772a71291f4c180d
child 153637 5571ab3a0493e4b726dccadf49c1f811705bbe4f
push id25595
push userryanvm@gmail.com
push dateTue, 05 Nov 2013 20:19:27 +0000
treeherdermozilla-central@2ada3a06d5e7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs754344
milestone28.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 754344 - Make in-content prefs navigation look like about:addons r=jaws From 8e5ce19d039052d06c099a87c2c315353bc589cf Mon Sep 17 00:00:00 2001
browser/base/content/test/general/browser_bug735471.js
browser/base/content/test/general/head.js
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/test/general/browser_bug735471.js
+++ b/browser/base/content/test/general/browser_bug735471.js
@@ -10,34 +10,30 @@ function test() {
   registerCleanupFunction(function() {
     // Reset pref to its default
     Services.prefs.clearUserPref("browser.preferences.inContent");
   });
   
   // Verify that about:preferences tab is displayed when
   // browser.preferences.inContent is set to true
   Services.prefs.setBoolPref("browser.preferences.inContent", true);
-    
-  gBrowser.tabContainer.addEventListener("TabOpen", function(aEvent) {
-    
-    gBrowser.tabContainer.removeEventListener("TabOpen", arguments.callee, true);
-    let browser = aEvent.originalTarget.linkedBrowser;
-    browser.addEventListener("load", function(aEvent) {
-      browser.removeEventListener("load", arguments.callee, true);
-      
-      is(Services.prefs.getBoolPref("browser.preferences.inContent"), true, "In-content prefs are enabled");
-      is(browser.contentWindow.location.href, "about:preferences", "Checking if the preferences tab was opened");
-      
-      gBrowser.removeCurrentTab();
-      Services.prefs.setBoolPref("browser.preferences.inContent", false);
-      openPreferences();
-      
-    }, true);
-  }, true);
-  
+
+  // Open a new tab.
+  whenNewTabLoaded(window, testPreferences);
+}
+
+function testPreferences() {
+  whenTabLoaded(gBrowser.selectedTab, function () {
+    is(Services.prefs.getBoolPref("browser.preferences.inContent"), true, "In-content prefs are enabled");
+    is(content.location.href, "about:preferences", "Checking if the preferences tab was opened");
+
+    gBrowser.removeCurrentTab();
+    Services.prefs.setBoolPref("browser.preferences.inContent", false);
+    openPreferences();
+  });
   
   let observer = {
     observe: function(aSubject, aTopic, aData) {
       if (aTopic == "domwindowopened") {
         windowWatcher.unregisterNotification(observer);
         
         let win = aSubject.QueryInterface(Components.interfaces.nsIDOMWindow);
         win.addEventListener("load", function() {
--- a/browser/base/content/test/general/head.js
+++ b/browser/base/content/test/general/head.js
@@ -232,19 +232,24 @@ function whenNewTabLoaded(aWindow, aCall
   aWindow.BrowserOpenTab();
 
   let browser = aWindow.gBrowser.selectedBrowser;
   if (browser.contentDocument.readyState === "complete") {
     aCallback();
     return;
   }
 
+  whenTabLoaded(aWindow.gBrowser.selectedTab, aCallback);
+}
+
+function whenTabLoaded(aTab, aCallback) {
+  let browser = aTab.linkedBrowser;
   browser.addEventListener("load", function onLoad() {
     browser.removeEventListener("load", onLoad, true);
-    aCallback();
+    executeSoon(aCallback);
   }, true);
 }
 
 function addVisits(aPlaceInfo, aCallback) {
   let places = [];
   if (aPlaceInfo instanceof Ci.nsIURI) {
     places.push({ uri: aPlaceInfo });
   } else if (Array.isArray(aPlaceInfo)) {
--- 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
@@ -80,23 +80,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">
@@ -145,17 +140,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;"/>
 
   <radiogroup id="saveWhere"
               preference="browser.download.useDownloadDir"
               onsyncfrompreference="return gMainPane.readUseDownloadDir();">
     <hbox id="saveToRow">
       <radio id="saveTo"
              value="true"
@@ -184,17 +179,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)
@@ -398,17 +398,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;