Bug 988536 - InContent preferences needs icons for headers and arrows. r=jaws

--HG--
rename : browser/themes/osx/preferences/in-content/check.png => browser/themes/shared/incontentprefs/check.png
rename : browser/themes/osx/preferences/in-content/check@2x.png => browser/themes/shared/incontentprefs/check@2x.png
rename : browser/themes/osx/preferences/in-content/dropdown-disabled.png => browser/themes/shared/incontentprefs/dropdown-disabled.png
rename : browser/themes/osx/preferences/in-content/dropdown.png => browser/themes/shared/incontentprefs/dropdown.png
rename : browser/themes/osx/preferences/in-content/icons.png => browser/themes/shared/incontentprefs/icons.png
rename : browser/themes/osx/preferences/in-content/icons@2x.png => browser/themes/shared/incontentprefs/icons@2x.png
rename : browser/themes/shared/in-content/preferences.css => browser/themes/shared/incontentprefs/preferences.css
rename : browser/themes/osx/preferences/in-content/sorter.png => browser/themes/shared/incontentprefs/sorter.png

browser/themes/linux/jar.mn

@@ -135,12 +135,18 @@ browser.jar:
 #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/check.png (preferences/in-content/check.png)
-  skin/classic/browser/preferences/in-content/icons.png (preferences/in-content/icons.png)
-  skin/classic/browser/preferences/in-content/header.png   (preferences/in-content/header.png)
-  skin/classic/browser/preferences/in-content/dropdown.png (preferences/in-content/dropdown.png)
-  skin/classic/browser/preferences/in-content/sorter.png   (preferences/in-content/sorter.png)
-  skin/classic/browser/preferences/in-content/dropdown-disabled.png (preferences/in-content/dropdown-disabled.png)
+  skin/classic/browser/preferences/in-content/check.png       (../shared/incontentprefs/check.png)
+  skin/classic/browser/preferences/in-content/check@2x.png    (../shared/incontentprefs/check@2x.png)
+  skin/classic/browser/preferences/in-content/icons.png       (../shared/incontentprefs/icons.png)
+  skin/classic/browser/preferences/in-content/icons@2x.png    (../shared/incontentprefs/icons@2x.png)
+  skin/classic/browser/preferences/in-content/header.png      (../shared/incontentprefs/header.png)
+  skin/classic/browser/preferences/in-content/header@2x.png   (../shared/incontentprefs/header@2x.png)
+  skin/classic/browser/preferences/in-content/dropdown.png    (../shared/incontentprefs/dropdown.png)
+  skin/classic/browser/preferences/in-content/dropdown@2x.png (../shared/incontentprefs/dropdown@2x.png)
+  skin/classic/browser/preferences/in-content/sorter.png      (../shared/incontentprefs/sorter.png)
+  skin/classic/browser/preferences/in-content/sorter@2x.png   (../shared/incontentprefs/sorter@2x.png)
+  skin/classic/browser/preferences/in-content/dropdown-disabled.png    (../shared/incontentprefs/dropdown-disabled.png)
+  skin/classic/browser/preferences/in-content/dropdown-disabled@2x.png (../shared/incontentprefs/dropdown-disabled@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/linux/preferences/in-content/preferences.css

@@ -2,7 +2,7 @@
    - 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/in-content/preferences.css
+%include ../../../shared/incontentprefs/preferences.css
 
 button > .button-box,
 menulist > .menulist-label-box {

browser/themes/osx/jar.mn

@@ -223,14 +223,18 @@ 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/check.png     (preferences/in-content/check.png)
-  skin/classic/browser/preferences/in-content/check@2x.png  (preferences/in-content/check@2x.png)
-  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/in-content/header.png    (preferences/in-content/icons@2x.png)
-  skin/classic/browser/preferences/in-content/sorter.png    (preferences/in-content/sorter.png)
-  skin/classic/browser/preferences/in-content/dropdown.png  (preferences/in-content/dropdown.png)
-  skin/classic/browser/preferences/in-content/dropdown-disabled.png  (preferences/in-content/dropdown-disabled.png)
+  skin/classic/browser/preferences/in-content/check.png       (../shared/incontentprefs/check.png)
+  skin/classic/browser/preferences/in-content/check@2x.png    (../shared/incontentprefs/check@2x.png)
+  skin/classic/browser/preferences/in-content/icons.png       (../shared/incontentprefs/icons.png)
+  skin/classic/browser/preferences/in-content/icons@2x.png    (../shared/incontentprefs/icons@2x.png)
+  skin/classic/browser/preferences/in-content/header.png      (../shared/incontentprefs/header.png)
+  skin/classic/browser/preferences/in-content/header@2x.png   (../shared/incontentprefs/header@2x.png)
+  skin/classic/browser/preferences/in-content/sorter.png      (../shared/incontentprefs/sorter.png)
+  skin/classic/browser/preferences/in-content/sorter@2x.png   (../shared/incontentprefs/sorter@2x.png)
+  skin/classic/browser/preferences/in-content/dropdown.png    (../shared/incontentprefs/dropdown.png)
+  skin/classic/browser/preferences/in-content/dropdown@2x.png (../shared/incontentprefs/dropdown@2x.png)
+  skin/classic/browser/preferences/in-content/dropdown-disabled.png    (../shared/incontentprefs/dropdown-disabled.png)
+  skin/classic/browser/preferences/in-content/dropdown-disabled@2x.png (../shared/incontentprefs/dropdown-disabled@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

@@ -2,7 +2,7 @@
    - 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/in-content/preferences.css
+%include ../../../shared/incontentprefs/preferences.css
 
 menulist:not([editable="true"]) > .menulist-dropmarker {
   display: -moz-box;
@@ -61,75 +61,3 @@ description {
   font-size: 1.25rem;
   line-height: 22px;
 }
-
-@media (min-resolution: 2dppx) {
-  checkbox:hover::before,
-  checkbox[checked]::before {
-    background-size: cover;
-    background-image: -moz-image-rect(url("chrome://browser/skin/preferences/in-content/check@2x.png"), 0, 30, 30, 0);
-  }
-
-  checkbox[checked]::before {
-    background-image: -moz-image-rect(url("chrome://browser/skin/preferences/in-content/check@2x.png"), 0, 60, 30, 30);
-  }
-
-  .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);
-  }
-}

browser/themes/shared/incontentprefs/preferences.css

@@ -178,10 +178,10 @@ button[type="menu"] > .button-box > .button-menu-dropmarker {
   -moz-margin-start: 10px;
   padding: 0;
   width: 10px;
-  height: 15px;
+  height: 16px;
   border: none;
   background-color: transparent;
-  list-style-image: url("chrome://browser/skin/preferences/in-content/dropdown.png")
+  list-style-image: url("chrome://browser/skin/preferences/in-content/dropdown.png");
 }
 
 .spinbuttons-button {
@@ -232,6 +232,23 @@ menulist[disabled="true"]:not([editable="true"]) > .menulist-dropmarker {
   list-style-image: url("chrome://browser/skin/preferences/in-content/dropdown-disabled.png")
 }
 
+@media (min-resolution: 2dppx) {
+  menulist:not([editable="true"]) > .menulist-dropmarker,
+  button[type="menu"] > .button-box > .button-menu-dropmarker {
+    list-style-image: url("chrome://browser/skin/preferences/in-content/dropdown@2x.png");
+  }
+
+  menulist[disabled="true"]:not([editable="true"]) > .menulist-dropmarker {
+    list-style-image: url("chrome://browser/skin/preferences/in-content/dropdown-disabled@2x.png")
+  }
+
+  menulist:not([editable="true"]) > .menulist-dropmarker > .dropmarker-icon,
+  button[type="menu"] > .button-box > .button-menu-dropmarker > .dropmarker-icon {
+    width: 10px;
+    height: 16px;
+  }
+}
+
 menulist > menupopup,
 button[type="menu"] > menupopup {
   -moz-appearance: none;
@@ -365,6 +382,18 @@ checkbox[checked]::before {
   background-position: -15px 0;
 }
 
+@media (min-resolution: 2dppx) {
+  checkbox:hover::before {
+    background-size: cover;
+    background-image: -moz-image-rect(url("chrome://browser/skin/preferences/in-content/check@2x.png"), 0, 30, 30, 0);
+  }
+
+  checkbox[checked]::before {
+    background-size: cover;
+    background-image: -moz-image-rect(url("chrome://browser/skin/preferences/in-content/check@2x.png"), 0, 60, 30, 30);
+  }
+}
+
 .radio-check {
   -moz-appearance: none;
   width: 23px;
@@ -509,6 +538,68 @@ radio[selected]::before {
   -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);
+  }
+}
+
 /* header */
 
 .header {
@@ -530,31 +621,65 @@ radio[selected]::before {
 }
 
 #header-general > .header-icon {
-  -moz-image-region: rect(3px, 45px, 45px, 3px);
+  -moz-image-region: rect(0, 40px, 40px, 0);
 }
 
 #header-content > .header-icon {
-  -moz-image-region: rect(3px, 93px, 45px, 51px);
+  -moz-image-region: rect(0, 80px, 40px, 40px);
 }
 
 #header-application > .header-icon {
-  -moz-image-region: rect(3px, 141px, 45px, 99px);
+  -moz-image-region: rect(0, 120px, 40px, 80px);
 }
 
 #header-privacy > .header-icon {
-  -moz-image-region: rect(3px, 189px, 45px, 147px);
+  -moz-image-region: rect(0, 160px, 40px, 120px);
 }
 
 #header-security > .header-icon {
-  -moz-image-region: rect(3px, 237px, 45px, 195px);
+  -moz-image-region: rect(0, 200px, 40px, 160px);
 }
 
 #header-sync > .header-icon {
-  -moz-image-region: rect(3px, 285px, 45px, 243px);
+  -moz-image-region: rect(0, 240px, 40px, 200px);
 }
 
 #header-advanced > .header-icon {
-  -moz-image-region: rect(3px, 333px, 45px, 291px);
+  -moz-image-region: rect(0, 280px, 40px, 240px);
+}
+
+@media (min-resolution: 2dppx) {
+  .header-icon {
+    list-style-image: url("chrome://browser/skin/preferences/in-content/header@2x.png");
+  }
+
+  #header-general > .header-icon {
+    -moz-image-region: rect(0, 80px, 80px, 0);
+  }
+
+  #header-content > .header-icon {
+    -moz-image-region: rect(0, 160px, 80px, 80px);
+  }
+
+  #header-application > .header-icon {
+    -moz-image-region: rect(0, 240px, 80px, 160px);
+  }
+
+  #header-privacy > .header-icon {
+    -moz-image-region: rect(0, 320px, 80px, 240px);
+  }
+
+  #header-security > .header-icon {
+    -moz-image-region: rect(0, 400px, 80px, 320px);
+  }
+
+  #header-sync > .header-icon {
+    -moz-image-region: rect(0, 480px, 80px, 400px);
+  }
+
+  #header-advanced > .header-icon {
+    -moz-image-region: rect(0, 560px, 80px, 480px);
+  }
 }
 
 .indent {
@@ -645,7 +770,7 @@ filefield {
 #typeColumn > .treecol-sortdirection[sortDirection=ascending],
 #actionColumn > .treecol-sortdirection[sortDirection=ascending],
 #typeColumn > .treecol-sortdirection[sortDirection=descending],
-#actionColumn > .treecol-sortdirection[sortDirection=descending]  {
+#actionColumn > .treecol-sortdirection[sortDirection=descending] {
   -moz-appearance: none;
   list-style-image: url("chrome://browser/skin/preferences/in-content/sorter.png");
 }
@@ -655,6 +780,17 @@ filefield {
   transform: scaleY(-1);
 }
 
+@media (min-resolution: 2dppx) {
+  #typeColumn > .treecol-sortdirection[sortDirection=ascending],
+  #actionColumn > .treecol-sortdirection[sortDirection=ascending],
+  #typeColumn > .treecol-sortdirection[sortDirection=descending],
+  #actionColumn > .treecol-sortdirection[sortDirection=descending] {
+    width: 12px;
+    height: 8px;
+    list-style-image: url("chrome://browser/skin/preferences/in-content/sorter@2x.png");
+  }
+}
+
 #handlersView > richlistitem {
   min-height: 40px !important;
 }

browser/themes/windows/jar.mn

@@ -160,14 +160,18 @@ 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/check.png        (preferences/in-content/check.png)
-        skin/classic/browser/preferences/in-content/check@2x.png     (preferences/in-content/check@2x.png)
-        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/in-content/header.png       (preferences/in-content/icons@2x.png)
-        skin/classic/browser/preferences/in-content/sorter.png       (preferences/in-content/sorter.png)
-        skin/classic/browser/preferences/in-content/dropdown.png     (preferences/in-content/dropdown.png)
-        skin/classic/browser/preferences/in-content/dropdown-disabled.png     (preferences/in-content/dropdown-disabled.png)
+        skin/classic/browser/preferences/in-content/check.png        (../shared/incontentprefs/check.png)
+        skin/classic/browser/preferences/in-content/check@2x.png     (../shared/incontentprefs/check@2x.png)
+        skin/classic/browser/preferences/in-content/icons.png        (../shared/incontentprefs/icons.png)
+        skin/classic/browser/preferences/in-content/icons@2x.png     (../shared/incontentprefs/icons@2x.png)
+        skin/classic/browser/preferences/in-content/header.png       (../shared/incontentprefs/header.png)
+        skin/classic/browser/preferences/in-content/header@2x.png    (../shared/incontentprefs/header@2x.png)
+        skin/classic/browser/preferences/in-content/sorter.png       (../shared/incontentprefs/sorter.png)
+        skin/classic/browser/preferences/in-content/sorter@2x.png    (../shared/incontentprefs/sorter@2x.png)
+        skin/classic/browser/preferences/in-content/dropdown.png     (../shared/incontentprefs/dropdown.png)
+        skin/classic/browser/preferences/in-content/dropdown@2x.png  (../shared/incontentprefs/dropdown@2x.png)
+        skin/classic/browser/preferences/in-content/dropdown-disabled.png     (../shared/incontentprefs/dropdown-disabled.png)
+        skin/classic/browser/preferences/in-content/dropdown-disabled@2x.png  (../shared/incontentprefs/dropdown-disabled@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)
@@ -511,14 +515,18 @@ browser.jar:
         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/check.png   (preferences/in-content/check.png)
-        skin/classic/aero/browser/preferences/in-content/check@2x.png (preferences/in-content/check@2x.png)
-        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/in-content/header.png   (preferences/in-content/icons@2x.png)
-        skin/classic/aero/browser/preferences/in-content/sorter.png   (preferences/in-content/sorter.png)
-        skin/classic/aero/browser/preferences/in-content/dropdown.png (preferences/in-content/dropdown.png)
-        skin/classic/aero/browser/preferences/in-content/dropdown-disabled.png (preferences/in-content/dropdown-disabled.png)
+        skin/classic/aero/browser/preferences/in-content/check.png       (../shared/incontentprefs/check.png)
+        skin/classic/aero/browser/preferences/in-content/check@2x.png    (../shared/incontentprefs/check@2x.png)
+        skin/classic/aero/browser/preferences/in-content/icons.png       (../shared/incontentprefs/icons.png)
+        skin/classic/aero/browser/preferences/in-content/icons@2x.png    (../shared/incontentprefs/icons@2x.png)
+        skin/classic/aero/browser/preferences/in-content/header.png      (../shared/incontentprefs/header.png)
+        skin/classic/aero/browser/preferences/in-content/header@2x.png   (../shared/incontentprefs/header@2x.png)
+        skin/classic/aero/browser/preferences/in-content/sorter.png      (../shared/incontentprefs/sorter.png)
+        skin/classic/aero/browser/preferences/in-content/sorter@2x.png   (../shared/incontentprefs/sorter@2x.png)
+        skin/classic/aero/browser/preferences/in-content/dropdown.png    (../shared/incontentprefs/dropdown.png)
+        skin/classic/aero/browser/preferences/in-content/dropdown@2x.png (../shared/incontentprefs/dropdown@2x.png)
+        skin/classic/aero/browser/preferences/in-content/dropdown-disabled.png    (../shared/incontentprefs/dropdown-disabled.png)
+        skin/classic/aero/browser/preferences/in-content/dropdown-disabled@2x.png (../shared/incontentprefs/dropdown-disabled@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,7 +2,7 @@
    - 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/in-content/preferences.css
+%include ../../../shared/incontentprefs/preferences.css
 
 menulist:not([editable="true"]) > .menulist-dropmarker {
   margin-top: 1px;
@@ -30,75 +30,3 @@ radio[selected]::before {
 .actionsMenu > .menulist-label-box > .menulist-icon {
   -moz-margin-end: 9px;
 }
-
-@media (min-resolution: 2dppx) {
-  checkbox:hover::before,
-  checkbox[checked]::before {
-    background-size: cover;
-    background-image: -moz-image-rect(url("chrome://browser/skin/preferences/in-content/check@2x.png"), 0, 30, 30, 0);
-  }
-
-  checkbox[checked]::before {
-    background-image: -moz-image-rect(url("chrome://browser/skin/preferences/in-content/check@2x.png"), 0, 60, 30, 30);
-  }
-
-  .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);
-  }
-}