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

@@ -473,8 +473,37 @@ function openAboutDialog() {
 
 function openPreferences(paneID, extraArgs)
 {
-  if (Services.prefs.getBoolPref("browser.preferences.inContent")) {
+  function switchToAdvancedSubPane(doc) {
-    openUILinkIn("about:preferences", "tab");
+    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"]) {
+      switchToAdvancedSubPane(win.document);
-        var advancedPaneTabs = win.document.getElementById("advancedPrefs");
+    } else {
-        advancedPaneTabs.selectedTab = win.document.getElementById(extraArgs["advancedTab"]);
+      openDialog("chrome://browser/content/preferences/preferences.xul",
-      }
+                 "Preferences", features, paneID, extraArgs);
-
-     return;
     }
-
-    openDialog("chrome://browser/content/preferences/preferences.xul",
-               "Preferences", features, paneID, extraArgs);
   }
 }
 

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)
+      // Handle old preference dialog URLs.
-      if (chromeParam == "chrome://browser/content/pref/pref.xul") {
+      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 {

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");
 }
 

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();">

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"

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"/>

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

browser/components/preferences/in-content/landing.xul

@@ -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>

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;"

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");
+  if (history.state != page) {
-  window.history.pushState(page, document.title);
+    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();

browser/components/preferences/in-content/preferences.xul

@@ -54,8 +54,7 @@
 #define USE_WIN_TITLE_STYLE
 #endif
 
-<page onload="init_all();"
+<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-      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;">
@@ -87,9 +86,57 @@
                    disabled="true"/>
   </hbox>
 
-  <hbox class="main-content" flex="1">
+  <hbox flex="1">
-    <prefpane flex="1" id="mainPrefPane">
+
-#include landing.xul
+    <!-- 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>
-  </hbox>
+    </box>
 
+  </hbox>
 </page>

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;"/>

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;"

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"/>

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…">

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">
 

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)

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;
 }
 

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 {
+.main-content {
-  height: 50px;
+  max-width: 800px;
-  background-color: rgba(192,199,210,0.7);
-  border-radius: 5px 5px 0 0;
-  margin-bottom: 15px;
-  -moz-box-align: center;
 }
 
 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 {

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)

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;
 }
 

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 {
+.main-content {
-  height: 50px;
+  max-width: 800px;
-  background-color: rgba(192,199,210,0.7);
-  border-radius: 5px 5px 0 0;
-  margin-bottom: 15px;
-  -moz-box-align: center;
 }
 
 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 {

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)

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;
 }
 

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 {
+.main-content {
-  height: 50px;
+  max-width: 800px;
-  background-color: rgba(192,199,210,0.7);
-  border-radius: 5px 5px 0 0;
-  margin-bottom: 15px;
-  -moz-box-align: center;
 }
 
 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 {