From 5f24a9789179f7f59ab8ab64c5a370dd5996231a Mon Sep 17 00:00:00 2001
From: Tim Taubert <ttaubert@mozilla.com>
Date: Thu, 17 Oct 2013 16:42:31 -0700
Subject: [PATCH] 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        |  46 +++--
 browser/components/nsBrowserContentHandler.js |   6 +-
 browser/components/preferences/handlers.css   |   4 +-
 .../preferences/in-content/advanced.xul       |   5 -
 .../preferences/in-content/applications.xul   |   5 -
 .../preferences/in-content/content.xul        |   7 +-
 .../components/preferences/in-content/jar.mn  |   1 -
 .../preferences/in-content/landing.xul        |  55 ------
 .../preferences/in-content/main.xul           |  11 +-
 .../preferences/in-content/preferences.js     |  37 +++-
 .../preferences/in-content/preferences.xul    |  64 ++++++-
 .../preferences/in-content/privacy.xul        |   5 -
 .../preferences/in-content/security.xul       |   7 +-
 .../preferences/in-content/sync.xul           |   5 -
 .../chrome/browser/preferences/content.dtd    |   2 +
 .../chrome/browser/preferences/security.dtd   |   2 +
 browser/themes/linux/jar.mn                   |   2 +-
 .../themes/linux/preferences/applications.css |   4 +-
 .../preferences/in-content/preferences.css    | 172 +++++++++--------
 browser/themes/osx/jar.mn                     |   2 +-
 .../themes/osx/preferences/applications.css   |   4 +-
 .../preferences/in-content/preferences.css    | 175 +++++++++--------
 browser/themes/windows/jar.mn                 |   4 +-
 .../windows/preferences/applications.css      |   4 +-
 .../preferences/in-content/preferences.css    | 176 ++++++++++--------
 25 files changed, 434 insertions(+), 371 deletions(-)
 delete mode 100644 browser/components/preferences/in-content/landing.xul

diff --git a/browser/base/content/utilityOverlay.js b/browser/base/content/utilityOverlay.js
index 8c5e9fa72140..7046a56e20c1 100644
--- a/browser/base/content/utilityOverlay.js
+++ b/browser/base/content/utilityOverlay.js
@@ -473,8 +473,37 @@ function openAboutDialog() {
 
 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");
@@ -487,16 +516,11 @@ function openPreferences(paneID, extraArgs)
         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);
   }
 }
 
diff --git a/browser/components/nsBrowserContentHandler.js b/browser/components/nsBrowserContentHandler.js
index f129168609b0..1624089522b4 100644
--- a/browser/components/nsBrowserContentHandler.js
+++ b/browser/components/nsBrowserContentHandler.js
@@ -452,8 +452,10 @@ nsBrowserContentHandler.prototype = {
     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 {
diff --git a/browser/components/preferences/handlers.css b/browser/components/preferences/handlers.css
index 9a1d47446d09..abac7d575e9f 100644
--- a/browser/components/preferences/handlers.css
+++ b/browser/components/preferences/handlers.css
@@ -2,11 +2,11 @@
  * 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");
 }
 
diff --git a/browser/components/preferences/in-content/advanced.xul b/browser/components/preferences/in-content/advanced.xul
index 40781fe7e31b..9231fe4972c9 100644
--- a/browser/components/preferences/in-content/advanced.xul
+++ b/browser/components/preferences/in-content/advanced.xul
@@ -128,11 +128,6 @@
 #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();">
diff --git a/browser/components/preferences/in-content/applications.xul b/browser/components/preferences/in-content/applications.xul
index 9757ce8f12af..4c6507d11f8b 100644
--- a/browser/components/preferences/in-content/applications.xul
+++ b/browser/components/preferences/in-content/applications.xul
@@ -55,11 +55,6 @@
   <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"
diff --git a/browser/components/preferences/in-content/content.xul b/browser/components/preferences/in-content/content.xul
index 41c0b289d09a..c45c6cee20b5 100644
--- a/browser/components/preferences/in-content/content.xul
+++ b/browser/components/preferences/in-content/content.xul
@@ -21,12 +21,9 @@
 <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;"/>
+
   <grid id="contentGrid">
     <columns>
       <column flex="1"/>
diff --git a/browser/components/preferences/in-content/jar.mn b/browser/components/preferences/in-content/jar.mn
index f3e4363bc31d..7f51505ffca1 100644
--- a/browser/components/preferences/in-content/jar.mn
+++ b/browser/components/preferences/in-content/jar.mn
@@ -4,7 +4,6 @@
 
 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
diff --git a/browser/components/preferences/in-content/landing.xul b/browser/components/preferences/in-content/landing.xul
deleted file mode 100644
index cee0754f5857..000000000000
--- 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>
diff --git a/browser/components/preferences/in-content/main.xul b/browser/components/preferences/in-content/main.xul
index f960ea71579a..dec07e3f0dc7 100644
--- a/browser/components/preferences/in-content/main.xul
+++ b/browser/components/preferences/in-content/main.xul
@@ -92,13 +92,8 @@
 #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">
@@ -157,7 +152,7 @@
 </groupbox>
 
 <!-- Downloads -->
-<groupbox id="downloadsGroup" data-category="paneGeneral" hidden="true">
+<groupbox id="downloadsGroup" data-category="paneGeneral">
   <caption label="&downloads.label;"/>
 
   <checkbox id="showWhenDownloading"
@@ -209,7 +204,7 @@
 </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;"
diff --git a/browser/components/preferences/in-content/preferences.js b/browser/components/preferences/in-content/preferences.js
index d281151e4a44..89cac4227626 100644
--- a/browser/components/preferences/in-content/preferences.js
+++ b/browser/components/preferences/in-content/preferences.js
@@ -12,11 +12,13 @@ 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();
@@ -27,12 +29,32 @@ function init_all() {
   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) {
-  search(page, "data-category");
-  window.history.pushState(page, document.title);
+  if (history.state != page) {
+    window.history.pushState(page, document.title);
+  }
+
   updateCommands();
+  search(page, "data-category");
 }
  
 function cmd_back() {
@@ -43,11 +65,6 @@ 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();
diff --git a/browser/components/preferences/in-content/preferences.xul b/browser/components/preferences/in-content/preferences.xul
index 802e4ff2659e..ccc9f9b0e0e0 100644
--- a/browser/components/preferences/in-content/preferences.xul
+++ b/browser/components/preferences/in-content/preferences.xul
@@ -54,8 +54,7 @@
 #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;">
@@ -86,10 +85,58 @@
                    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
@@ -99,7 +146,8 @@
 #ifdef MOZ_SERVICES_SYNC
 #include sync.xul
 #endif
-    </prefpane>
+      </prefpane>
+    </box>
+
   </hbox>
-  
 </page>
diff --git a/browser/components/preferences/in-content/privacy.xul b/browser/components/preferences/in-content/privacy.xul
index 514c35626bfb..b3900e053ec9 100644
--- a/browser/components/preferences/in-content/privacy.xul
+++ b/browser/components/preferences/in-content/privacy.xul
@@ -65,11 +65,6 @@
 
 </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;"/>
diff --git a/browser/components/preferences/in-content/security.xul b/browser/components/preferences/in-content/security.xul
index 25d967d61092..995855dc0514 100644
--- a/browser/components/preferences/in-content/security.xul
+++ b/browser/components/preferences/in-content/security.xul
@@ -30,13 +30,10 @@
 
 </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;"
diff --git a/browser/components/preferences/in-content/sync.xul b/browser/components/preferences/in-content/sync.xul
index 1b39735a33ab..e8b1f16eba97 100644
--- a/browser/components/preferences/in-content/sync.xul
+++ b/browser/components/preferences/in-content/sync.xul
@@ -28,11 +28,6 @@
 <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"/>
diff --git a/browser/locales/en-US/chrome/browser/preferences/content.dtd b/browser/locales/en-US/chrome/browser/preferences/content.dtd
index a504f4926ed4..2e881e470d56 100644
--- a/browser/locales/en-US/chrome/browser/preferences/content.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/content.dtd
@@ -2,6 +2,8 @@
    - 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…">
diff --git a/browser/locales/en-US/chrome/browser/preferences/security.dtd b/browser/locales/en-US/chrome/browser/preferences/security.dtd
index 2e7c73a09d70..b03560d97b80 100644
--- a/browser/locales/en-US/chrome/browser/preferences/security.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/security.dtd
@@ -2,6 +2,8 @@
    - 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">
 
diff --git a/browser/themes/linux/jar.mn b/browser/themes/linux/jar.mn
index 9742088b4cc3..e348274a9010 100644
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -105,7 +105,7 @@ browser.jar:
   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)
diff --git a/browser/themes/linux/preferences/applications.css b/browser/themes/linux/preferences/applications.css
index c9d1b8c8ae7d..345fe75f435a 100644
--- a/browser/themes/linux/preferences/applications.css
+++ b/browser/themes/linux/preferences/applications.css
@@ -21,12 +21,12 @@
   -moz-margin-end: 3px;
 }
 
-richlistitem label {
+#handlersView > richlistitem label {
   -moz-margin-start: 1px;
   margin-top: 2px;
 }
 
-richlistitem {
+#handlersView > richlistitem {
   min-height: 25px;
 }
 
diff --git a/browser/themes/linux/preferences/in-content/preferences.css b/browser/themes/linux/preferences/in-content/preferences.css
index f026f38aef9e..eef87516d661 100644
--- a/browser/themes/linux/preferences/in-content/preferences.css
+++ b/browser/themes/linux/preferences/in-content/preferences.css
@@ -6,95 +6,115 @@
 
 @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;
-}
-
-.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;
+  font-size: 1.667rem;
 }
 
-.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 {
diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn
index 0c43f78da8ac..8d0c145c1d2f 100644
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -169,7 +169,7 @@ browser.jar:
 #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)
diff --git a/browser/themes/osx/preferences/applications.css b/browser/themes/osx/preferences/applications.css
index 2a2d96c7b26e..0e4e6c5c1dee 100644
--- a/browser/themes/osx/preferences/applications.css
+++ b/browser/themes/osx/preferences/applications.css
@@ -14,12 +14,12 @@
   margin-bottom: -1px;
 }
 
-richlistitem label {
+#handlersView > richlistitem label {
   -moz-margin-start: 3px;
   margin-top: 2px;
 }
 
-richlistitem {
+#handlersView > richlistitem {
   min-height: 22px;
 }
 
diff --git a/browser/themes/osx/preferences/in-content/preferences.css b/browser/themes/osx/preferences/in-content/preferences.css
index fa8b2d479361..6ad6a35e2338 100644
--- a/browser/themes/osx/preferences/in-content/preferences.css
+++ b/browser/themes/osx/preferences/in-content/preferences.css
@@ -2,102 +2,119 @@
    - 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;
-}
-
-.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;
+  font-size: 1.667rem;
 }
 
-.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 {
diff --git a/browser/themes/windows/jar.mn b/browser/themes/windows/jar.mn
index b927873dfd2c..b4765bb67a33 100644
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -125,7 +125,7 @@ browser.jar:
 #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)
@@ -402,7 +402,7 @@ browser.jar:
 #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)
diff --git a/browser/themes/windows/preferences/applications.css b/browser/themes/windows/preferences/applications.css
index 80699b463533..b42da41abf06 100644
--- a/browser/themes/windows/preferences/applications.css
+++ b/browser/themes/windows/preferences/applications.css
@@ -21,12 +21,12 @@
   -moz-margin-end: 3px;
 }
 
-richlistitem label {
+#handlersView > richlistitem label {
   -moz-margin-start: 1px;
   margin-top: 2px;
 }
 
-richlistitem {
+#handlersView > richlistitem {
   min-height: 22px;
 }
 
diff --git a/browser/themes/windows/preferences/in-content/preferences.css b/browser/themes/windows/preferences/in-content/preferences.css
index eb0b0b8191dd..95f355eaf3c3 100644
--- a/browser/themes/windows/preferences/in-content/preferences.css
+++ b/browser/themes/windows/preferences/in-content/preferences.css
@@ -6,98 +6,116 @@
 
 @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;
-}
-
-.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;
+  font-size: 1.667rem;
 }
 
-.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 {