Bug 738796 - Update category navigation. r=jaws

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

@@ -32,10 +32,8 @@ function init_all() {
 
   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);
@@ -49,38 +47,9 @@ function selectCategory(name) {
 }
 
 function gotoPref(page) {
-  if (history.state != page) {
-    window.history.pushState(page, document.title);
-  }
-
-  updateCommands();
+  window.history.replaceState(page, document.title);
   search(page, "data-category");
 }
- 
-function cmd_back() {
-  window.history.back();
-}
- 
-function cmd_forward() {
-  window.history.forward();
-}
-
-function updateCommands() {
-  document.getElementById("back-btn").disabled = !canGoBack();
-  document.getElementById("forward-btn").disabled = !canGoForward();
-}
-
-function canGoBack() {
-  return window.QueryInterface(Ci.nsIInterfaceRequestor)
-               .getInterface(Ci.nsIWebNavigation)
-               .canGoBack;
-}
-
-function canGoForward() {
-  return window.QueryInterface(Ci.nsIInterfaceRequestor)
-               .getInterface(Ci.nsIWebNavigation)
-               .canGoForward;
-}
 
 function search(aQuery, aAttribute) {
   let elements = document.getElementById("mainPrefPane").children;

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

@@ -74,15 +74,6 @@
                   src="chrome://browser/locale/preferences/applicationManager.properties"/>
   </stringbundleset>
 
-  <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 flex="1">
 
     <!-- category list -->

browser/themes/linux/jar.mn

@@ -105,6 +105,7 @@ browser.jar:
   skin/classic/browser/feeds/audioFeedIcon16.png      (feeds/feedIcon16.png)
   skin/classic/browser/feeds/subscribe.css            (feeds/subscribe.css)
   skin/classic/browser/feeds/subscribe-ui.css         (feeds/subscribe-ui.css)
+  skin/classic/browser/fonts/ClearSans-Regular.ttf    (../shared/ClearSans-Regular.ttf)
   skin/classic/browser/newtab/newTab.css              (newtab/newTab.css)
   skin/classic/browser/newtab/controls.png            (newtab/controls.png)
   skin/classic/browser/places/bookmarksMenu.png       (places/bookmarksMenu.png)
@@ -133,7 +134,8 @@ 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/in-content/icons.png (preferences/in-content/icons.png)
   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/in-content/preferences.css

@@ -2,12 +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/. */
 
-@import url("chrome://global/skin/inContentUI.css");
-
 @namespace html "http://www.w3.org/1999/xhtml";
 
-#header {
-  margin-bottom: 18px;
+@font-face {
+  font-family: "Clear Sans";
+  src: url("chrome://browser/skin/fonts/ClearSans-Regular.ttf");
 }
 
 caption {
@@ -26,94 +25,107 @@ prefpane > .content-box {
 
 #categories {
   -moz-appearance: none;
-  border: none;
-  -moz-margin-end: -1px;
-  background-color: transparent;
-  position: relative;
-  margin-top: 41px;
+  background-color: #424e5a;
+  -moz-border-end: 1px solid rgba(0,0,0,0.20);
+  padding-top: 39px;
+  margin: 0;
 }
 
 .category {
   -moz-appearance: none;
-  border-width: 1px;
+  color: rgba(241,241,241,0.70);
+  border: 1px solid transparent;
   -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;
+  -moz-padding-start: 14px;
+  -moz-padding-end: 21px;
+  margin-bottom: -1px;
+  min-height: 40px;
 }
 
-.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:hover {
+  background-color: rgba(255,255,255,0.15);
+  border-color: rgba(255,255,255,0.20);
 }
 
 .category[selected] {
-  background-color: -moz-Field;
-  color: -moz-FieldText;
-  border-color: ThreeDShadow;
+  background-color: rgba(0,0,0,0.20);
+  border-color: rgba(255,255,255,0.20);
+  -moz-border-start-width: 3px;
+  -moz-border-start-color: #ff9500;
+  -moz-padding-start: 12px;
+  color: #f1f1f1;
 }
 
 .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;
-  }
+  line-height: 22px;
+  font-family: "Clear Sans", sans-serif;
+  font-size: 1.25rem;
+  padding-bottom: 2px;
+  -moz-padding-start: 9px;
+  margin: 0;
 }
 
 .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");
+  width: 24px;
+  height: 24px;
+  list-style-image: url("chrome://browser/skin/preferences/in-content/icons.png");
 }
 
 #category-general > .category-icon {
-  -moz-image-region: rect(0, 32px, 32px, 0);
+  -moz-image-region: rect(0, 24px, 24px, 0);
+}
+
+#category-general[selected] > .category-icon {
+  -moz-image-region: rect(24px, 24px, 48px, 0);
 }
 
 #category-content > .category-icon {
-  -moz-image-region: rect(0, 96px,  32px, 64px)
+  -moz-image-region: rect(0, 48px, 24px, 24px);
+}
+
+#category-content[selected] > .category-icon {
+  -moz-image-region: rect(24px, 48px, 48px, 24px);
 }
 
 #category-application > .category-icon {
-  -moz-image-region: rect(0, 128px,  32px, 96px)
+  -moz-image-region: rect(0, 72px, 24px, 48px);
+}
+
+#category-application[selected] > .category-icon {
+  -moz-image-region: rect(24px, 72px, 48px, 48px);
 }
 
 #category-privacy > .category-icon {
-  -moz-image-region: rect(0, 160px,  32px, 128px)
+  -moz-image-region: rect(0, 96px, 24px, 72px);
+}
+
+#category-privacy[selected] > .category-icon {
+  -moz-image-region: rect(24px, 96px, 48px, 72px);
 }
 
 #category-security > .category-icon {
-  -moz-image-region: rect(0, 192px,  32px, 160px)
+  -moz-image-region: rect(0, 120px, 24px, 96px);
+}
+
+#category-security[selected] > .category-icon {
+  -moz-image-region: rect(24px, 120px, 48px, 96px);
+}
+
+#category-sync > .category-icon {
+  -moz-image-region: rect(0, 144px, 24px, 120px);
+}
+
+#category-sync[selected] > .category-icon {
+  -moz-image-region: rect(24px, 144px, 48px, 120px);
 }
 
 #category-advanced > .category-icon {
-  -moz-image-region: rect(0, 224px, 32px, 192px)
+  -moz-image-region: rect(0, 168px, 24px, 144px);
 }
 
-%ifdef MOZ_SERVICES_SYNC
-#category-sync > .category-icon {
-  list-style-image: url("chrome://browser/skin/preferences/Options-sync.png");
+#category-advanced[selected] > .category-icon {
+  -moz-image-region: rect(24px, 168px, 48px, 144px);
 }
-%endif
 
 /* Applications Pane Styles */
 

browser/themes/osx/jar.mn

@@ -168,6 +168,7 @@ browser.jar:
   skin/classic/browser/feeds/videoFeedIcon16.png            (feeds/feedIcon16.png)
   skin/classic/browser/feeds/audioFeedIcon.png              (feeds/feedIcon.png)
   skin/classic/browser/feeds/audioFeedIcon16.png            (feeds/feedIcon16.png)
+  skin/classic/browser/fonts/ClearSans-Regular.ttf          (../shared/ClearSans-Regular.ttf)
   skin/classic/browser/newtab/newTab.css                    (newtab/newTab.css)
   skin/classic/browser/newtab/controls.png                  (newtab/controls.png)
   skin/classic/browser/newtab/controls@2x.png               (newtab/controls@2x.png)
@@ -223,6 +224,8 @@ browser.jar:
   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/icons.png     (preferences/in-content/icons.png)
+  skin/classic/browser/preferences/in-content/icons@2x.png  (preferences/in-content/icons@2x.png)
   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/in-content/preferences.css

@@ -4,12 +4,11 @@
 
 %include ../../shared.inc
 
-@import url("chrome://global/skin/inContentUI.css");
-
 @namespace html "http://www.w3.org/1999/xhtml";
 
-#header {
-  margin-bottom: 18px;
+@font-face {
+  font-family: "Clear Sans";
+  src: url("chrome://browser/skin/fonts/ClearSans-Regular.ttf");
 }
 
 caption {
@@ -28,92 +27,169 @@ prefpane > .content-box {
 
 #categories {
   -moz-appearance: none;
-  border: none;
-  -moz-margin-end: -1px;
-  background-color: transparent;
-  position: relative;
-  margin-top: 31px;
+  background-color: #424e5a;
+  -moz-border-end: 1px solid rgba(0,0,0,0.20);
+  padding-top: 39px;
+  margin: 0;
 }
 
 .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;
+  color: rgba(241,241,241,0.70);
+  border: 1px solid transparent;
+  -moz-border-end-width: 0;
+  -moz-padding-start: 14px;
+  -moz-padding-end: 21px;
+  margin-bottom: -1px;
+  min-height: 40px;
 }
 
-.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:hover {
+  background-color: rgba(255,255,255,0.15);
+  border-color: rgba(255,255,255,0.20);
 }
 
 .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;
+  background-color: rgba(0,0,0,0.20);
+  border-color: rgba(255,255,255,0.20);
+  -moz-border-start-width: 3px;
+  -moz-border-start-color: #ff9500;
+  -moz-padding-start: 12px;
+  color: #f1f1f1;
 }
 
 .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;
-  }
+  line-height: 22px;
+  font-family: "Clear Sans", sans-serif;
+  font-size: 1.25rem;
+  padding-bottom: 2px;
+  -moz-padding-start: 9px;
+  margin: 0;
 }
 
 .category-icon {
-  width: 32px;
-  height: 32px;
-  -moz-margin-start: 6px;
-  list-style-image: url("chrome://browser/skin/preferences/Options.png");
+  width: 24px;
+  height: 24px;
+  list-style-image: url("chrome://browser/skin/preferences/in-content/icons.png");
 }
 
 #category-general > .category-icon {
-  -moz-image-region: rect(0, 32px, 32px, 0);
+  -moz-image-region: rect(0, 24px, 24px, 0);
+}
+
+#category-general[selected] > .category-icon {
+  -moz-image-region: rect(24px, 24px, 48px, 0);
 }
 
 #category-content > .category-icon {
-  -moz-image-region: rect(0, 96px,  32px, 64px)
+  -moz-image-region: rect(0, 48px, 24px, 24px);
+}
+
+#category-content[selected] > .category-icon {
+  -moz-image-region: rect(24px, 48px, 48px, 24px);
 }
 
 #category-application > .category-icon {
-  -moz-image-region: rect(0, 128px,  32px, 96px)
+  -moz-image-region: rect(0, 72px, 24px, 48px);
+}
+
+#category-application[selected] > .category-icon {
+  -moz-image-region: rect(24px, 72px, 48px, 48px);
 }
 
 #category-privacy > .category-icon {
-  -moz-image-region: rect(0, 160px,  32px, 128px)
+  -moz-image-region: rect(0, 96px, 24px, 72px);
+}
+
+#category-privacy[selected] > .category-icon {
+  -moz-image-region: rect(24px, 96px, 48px, 72px);
 }
 
 #category-security > .category-icon {
-  -moz-image-region: rect(0, 192px,  32px, 160px)
+  -moz-image-region: rect(0, 120px, 24px, 96px);
+}
+
+#category-security[selected] > .category-icon {
+  -moz-image-region: rect(24px, 120px, 48px, 96px);
+}
+
+#category-sync > .category-icon {
+  -moz-image-region: rect(0, 144px, 24px, 120px);
+}
+
+#category-sync[selected] > .category-icon {
+  -moz-image-region: rect(24px, 144px, 48px, 120px);
 }
 
 #category-advanced > .category-icon {
-  -moz-image-region: rect(0, 224px, 32px, 192px)
+  -moz-image-region: rect(0, 168px, 24px, 144px);
 }
 
-%ifdef MOZ_SERVICES_SYNC
-#category-sync > .category-icon {
-  list-style-image: url("chrome://browser/skin/preferences/Options-sync.png");
+#category-advanced[selected] > .category-icon {
+  -moz-image-region: rect(24px, 168px, 48px, 144px);
+}
+
+@media (min-resolution: 2dppx) {
+  .category-icon {
+    list-style-image: url("chrome://browser/skin/preferences/in-content/icons@2x.png");
+  }
+
+  #category-general > .category-icon {
+    -moz-image-region: rect(0, 48px, 48px, 0);
+  }
+
+  #category-general[selected] > .category-icon {
+    -moz-image-region: rect(48px, 48px, 96px, 0);
+  }
+
+  #category-content > .category-icon {
+    -moz-image-region: rect(0, 96px, 48px, 48px);
+  }
+
+  #category-content[selected] > .category-icon {
+    -moz-image-region: rect(48px, 96px, 96px, 48px);
+  }
+
+  #category-application > .category-icon {
+    -moz-image-region: rect(0, 144px, 48px, 96px);
+  }
+
+  #category-application[selected] > .category-icon {
+    -moz-image-region: rect(48px, 144px, 96px, 96px);
+  }
+
+  #category-privacy > .category-icon {
+    -moz-image-region: rect(0, 192px, 48px, 144px);
+  }
+
+  #category-privacy[selected] > .category-icon {
+    -moz-image-region: rect(48px, 192px, 96px, 144px);
+  }
+
+  #category-security > .category-icon {
+    -moz-image-region: rect(0, 240px, 48px, 192px);
+  }
+
+  #category-security[selected] > .category-icon {
+    -moz-image-region: rect(48px, 240px, 96px, 192px);
+  }
+
+  #category-sync > .category-icon {
+    -moz-image-region: rect(0, 288px, 48px, 240px);
+  }
+
+  #category-sync[selected] > .category-icon {
+    -moz-image-region: rect(48px, 288px, 96px, 240px);
+  }
+
+  #category-advanced > .category-icon {
+    -moz-image-region: rect(0, 336px, 48px, 288px);
+  }
+
+  #category-advanced[selected] > .category-icon {
+    -moz-image-region: rect(48px, 336px, 96px, 288px);
+  }
 }
-%endif
 
 /* Applications Pane Styles */
 

browser/themes/windows/jar.mn

@@ -126,6 +126,7 @@ browser.jar:
         skin/classic/browser/feeds/videoFeedIcon16.png               (feeds/feedIcon16.png)
         skin/classic/browser/feeds/subscribe.css                     (feeds/subscribe.css)
         skin/classic/browser/feeds/subscribe-ui.css                  (feeds/subscribe-ui.css)
+        skin/classic/browser/fonts/ClearSans-Regular.ttf             (../shared/ClearSans-Regular.ttf)
         skin/classic/browser/newtab/newTab.css                       (newtab/newTab.css)
         skin/classic/browser/newtab/controls.png                     (newtab/controls.png)
         skin/classic/browser/places/places.css                       (places/places.css)
@@ -158,7 +159,9 @@ 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/in-content/icons.png        (preferences/in-content/icons.png)
+        skin/classic/browser/preferences/in-content/icons@2x.png     (preferences/in-content/icons@2x.png)
         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)
@@ -466,6 +469,7 @@ browser.jar:
         skin/classic/aero/browser/feeds/videoFeedIcon16.png          (feeds/feedIcon16-aero.png)
         skin/classic/aero/browser/feeds/subscribe.css                (feeds/subscribe.css)
         skin/classic/aero/browser/feeds/subscribe-ui.css             (feeds/subscribe-ui.css)
+        skin/classic/aero/browser/fonts/ClearSans-Regular.ttf        (../shared/ClearSans-Regular.ttf)
         skin/classic/aero/browser/newtab/newTab.css                  (newtab/newTab.css)
         skin/classic/aero/browser/newtab/controls.png                (newtab/controls.png)
 *       skin/classic/aero/browser/places/places.css                  (places/places-aero.css)
@@ -498,7 +502,9 @@ 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/in-content/icons.png   (preferences/in-content/icons.png)
+        skin/classic/aero/browser/preferences/in-content/icons@2x.png (preferences/in-content/icons@2x.png)
         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/in-content/preferences.css

@@ -2,12 +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/. */
 
-@import url("chrome://global/skin/inContentUI.css");
-
 @namespace html "http://www.w3.org/1999/xhtml";
 
-#header {
-  margin-bottom: 18px;
+@font-face {
+  font-family: "Clear Sans";
+  src: url("chrome://browser/skin/fonts/ClearSans-Regular.ttf");
 }
 
 caption {
@@ -26,95 +25,169 @@ prefpane > .content-box {
 
 #categories {
   -moz-appearance: none;
-  border: none;
-  -moz-margin-end: -1px;
-  background-color: transparent;
-  position: relative;
-  margin-top: 31px;
+  background-color: #424e5a;
+  -moz-border-end: 1px solid rgba(0,0,0,0.20);
+  padding-top: 39px;
+  margin: 0;
 }
 
 .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;
+  color: rgba(241,241,241,0.70);
+  border: 1px solid transparent;
+  -moz-border-end-width: 0;
+  -moz-padding-start: 14px;
+  -moz-padding-end: 21px;
+  margin-bottom: -1px;
+  min-height: 40px;
 }
 
-.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:hover {
+  background-color: rgba(255,255,255,0.15);
+  border-color: rgba(255,255,255,0.20);
 }
 
 .category[selected] {
-  background-color: rgba(255, 255, 255, 0.4);
-  color: #252F3B;
-  border-color: #C3CEDF;
-  -moz-border-end-color: #E2E9F2;
+  background-color: rgba(0,0,0,0.20);
+  border-color: rgba(255,255,255,0.20);
+  -moz-border-start-width: 3px;
+  -moz-border-start-color: #ff9500;
+  -moz-padding-start: 12px;
+  color: #f1f1f1;
 }
 
 .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;
-  }
+  line-height: 22px;
+  font-family: "Clear Sans", sans-serif;
+  font-size: 1.25rem;
+  padding-bottom: 2px;
+  -moz-padding-start: 9px;
+  margin: 0;
 }
 
 .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");
+  width: 24px;
+  height: 24px;
+  list-style-image: url("chrome://browser/skin/preferences/in-content/icons.png");
 }
 
 #category-general > .category-icon {
-  -moz-image-region: rect(0, 32px, 32px, 0);
+  -moz-image-region: rect(0, 24px, 24px, 0);
+}
+
+#category-general[selected] > .category-icon {
+  -moz-image-region: rect(24px, 24px, 48px, 0);
 }
 
 #category-content > .category-icon {
-  -moz-image-region: rect(0, 96px,  32px, 64px)
+  -moz-image-region: rect(0, 48px, 24px, 24px);
+}
+
+#category-content[selected] > .category-icon {
+  -moz-image-region: rect(24px, 48px, 48px, 24px);
 }
 
 #category-application > .category-icon {
-  -moz-image-region: rect(0, 128px,  32px, 96px)
+  -moz-image-region: rect(0, 72px, 24px, 48px);
+}
+
+#category-application[selected] > .category-icon {
+  -moz-image-region: rect(24px, 72px, 48px, 48px);
 }
 
 #category-privacy > .category-icon {
-  -moz-image-region: rect(0, 160px,  32px, 128px)
+  -moz-image-region: rect(0, 96px, 24px, 72px);
+}
+
+#category-privacy[selected] > .category-icon {
+  -moz-image-region: rect(24px, 96px, 48px, 72px);
 }
 
 #category-security > .category-icon {
-  -moz-image-region: rect(0, 192px,  32px, 160px)
+  -moz-image-region: rect(0, 120px, 24px, 96px);
+}
+
+#category-security[selected] > .category-icon {
+  -moz-image-region: rect(24px, 120px, 48px, 96px);
+}
+
+#category-sync > .category-icon {
+  -moz-image-region: rect(0, 144px, 24px, 120px);
+}
+
+#category-sync[selected] > .category-icon {
+  -moz-image-region: rect(24px, 144px, 48px, 120px);
 }
 
 #category-advanced > .category-icon {
-  -moz-image-region: rect(0, 224px, 32px, 192px)
+  -moz-image-region: rect(0, 168px, 24px, 144px);
 }
 
-%ifdef MOZ_SERVICES_SYNC
-#category-sync > .category-icon {
-  list-style-image: url("chrome://browser/skin/preferences/Options-sync.png");
+#category-advanced[selected] > .category-icon {
+  -moz-image-region: rect(24px, 168px, 48px, 144px);
+}
+
+@media (min-resolution: 2dppx) {
+  .category-icon {
+    list-style-image: url("chrome://browser/skin/preferences/in-content/icons@2x.png");
+  }
+
+  #category-general > .category-icon {
+    -moz-image-region: rect(0, 48px, 48px, 0);
+  }
+
+  #category-general[selected] > .category-icon {
+    -moz-image-region: rect(48px, 48px, 96px, 0);
+  }
+
+  #category-content > .category-icon {
+    -moz-image-region: rect(0, 96px, 48px, 48px);
+  }
+
+  #category-content[selected] > .category-icon {
+    -moz-image-region: rect(48px, 96px, 96px, 48px);
+  }
+
+  #category-application > .category-icon {
+    -moz-image-region: rect(0, 144px, 48px, 96px);
+  }
+
+  #category-application[selected] > .category-icon {
+    -moz-image-region: rect(48px, 144px, 96px, 96px);
+  }
+
+  #category-privacy > .category-icon {
+    -moz-image-region: rect(0, 192px, 48px, 144px);
+  }
+
+  #category-privacy[selected] > .category-icon {
+    -moz-image-region: rect(48px, 192px, 96px, 144px);
+  }
+
+  #category-security > .category-icon {
+    -moz-image-region: rect(0, 240px, 48px, 192px);
+  }
+
+  #category-security[selected] > .category-icon {
+    -moz-image-region: rect(48px, 240px, 96px, 192px);
+  }
+
+  #category-sync > .category-icon {
+    -moz-image-region: rect(0, 288px, 48px, 240px);
+  }
+
+  #category-sync[selected] > .category-icon {
+    -moz-image-region: rect(48px, 288px, 96px, 240px);
+  }
+
+  #category-advanced > .category-icon {
+    -moz-image-region: rect(0, 336px, 48px, 288px);
+  }
+
+  #category-advanced[selected] > .category-icon {
+    -moz-image-region: rect(48px, 336px, 96px, 288px);
+  }
 }
-%endif
 
 /* Applications Pane Styles */