Bug 631502 - Use an SVG filter for the pressed icon state in preferences windows and remove unnecessary icon images. r=dao, a=dtownsend

--HG--
extra : rebase_source : 6606a942526e9b8259d0190411bb6d38b7726747

browser/themes/pinstripe/browser/preferences/preferences.css

@@ -54,10 +54,6 @@ radio[pane=paneGeneral],
 radio[pane=paneMain] {
   -moz-image-region: rect(0px, 32px, 32px, 0px);
 } 
-radio[pane=paneGeneral]:active,
-radio[pane=paneMain]:active:hover {
-  -moz-image-region: rect(32px, 32px, 64px, 0px);
-}
 
 /* ----- TABS BUTTON ----- */
 
@@ -65,60 +61,36 @@ radio[pane=paneTabs] {
   -moz-image-region: rect(0px, 64px, 32px, 32px);
 }
 
-radio[pane=paneTabs]:active:hover {
-  -moz-image-region: rect(32px, 64px, 64px, 32px);
-}
-
 /* ----- CONTENT BUTTON ----- */
 
 radio[pane=paneContent] {
   -moz-image-region: rect(0px, 96px, 32px, 64px);
 }
 
-radio[pane=paneContent]:active:hover {
-  -moz-image-region: rect(32px, 96px, 64px, 64px);
-}
-
 /* ----- APPLICATIONS BUTTON ----- */
 
 radio[pane=paneApplications] {
   -moz-image-region: rect(0px, 128px, 32px, 96px);
 }
 
-radio[pane=paneApplications]:active:hover {
-  -moz-image-region: rect(32px, 128px, 64px, 96px);
-}
-
 /* ----- PRIVACY BUTTON ----- */
 
 radio[pane=panePrivacy] {
   -moz-image-region: rect(0px, 160px, 32px, 128px);
 }
 
-radio[pane=panePrivacy]:active:hover {
-  -moz-image-region: rect(32px, 160px, 64px, 128px);
-}
-
 /* ----- SECURITY BUTTON ----- */
 
 radio[pane=paneSecurity] {
   -moz-image-region: rect(0px, 192px, 32px, 160px);
 }
 
-radio[pane=paneSecurity]:active:hover {
-  -moz-image-region: rect(32px, 192px, 64px, 160px);
-}
-
 /* ----- ADVANCED BUTTON ----- */
 
 radio[pane=paneAdvanced] {
   -moz-image-region: rect(0px, 224px, 32px, 192px);
 }
 
-radio[pane=paneAdvanced]:active:hover {
-  -moz-image-region: rect(32px, 224px, 64px, 192px);
-}
-
 %ifdef MOZ_SERVICES_SYNC
 /* ----- SYNC BUTTON ----- */
 

browser/themes/winstripe/browser/preferences/preferences.css

@@ -47,58 +47,30 @@
 radio[pane=paneMain] {
   -moz-image-region: rect(0, 32px,  32px, 0);
 }
-radio[pane=paneMain]:hover,
-radio[pane=paneMain][selected="true"] {
-  -moz-image-region: rect(32px, 32px,  64px, 0);
-}
 
 radio[pane=paneTabs] {
   -moz-image-region: rect(0, 64px, 32px, 32px);
 }
-radio[pane=paneTabs]:hover,
-radio[pane=paneTabs][selected="true"] {
-  -moz-image-region: rect(32px, 64px, 64px, 32px);
-}
 
 radio[pane=paneContent] {
   -moz-image-region: rect(0, 96px,  32px, 64px);
 }
-radio[pane=paneContent]:hover,
-radio[pane=paneContent][selected="true"] {
-  -moz-image-region: rect(32px, 96px,  64px, 64px);
-}
 
 radio[pane=paneApplications] {
   -moz-image-region: rect(0, 128px,  32px, 96px);
 }
-radio[pane=paneApplications]:hover,
-radio[pane=paneApplications][selected="true"] {
-  -moz-image-region: rect(32px, 128px,  64px, 96px);
-}
 
 radio[pane=panePrivacy] {
   -moz-image-region: rect(0, 160px,  32px, 128px);
 }
-radio[pane=panePrivacy]:hover,
-radio[pane=panePrivacy][selected="true"] {
-  -moz-image-region: rect(32px, 160px,  64px, 128px);
-}
 
 radio[pane=paneSecurity] {
   -moz-image-region: rect(0, 192px,  32px, 160px);
 }
-radio[pane=paneSecurity]:hover,
-radio[pane=paneSecurity][selected="true"] {
-  -moz-image-region: rect(32px, 192px,  64px, 160px);
-}
 
 radio[pane=paneAdvanced] {
   -moz-image-region: rect(0, 224px, 32px, 192px);
 }
-radio[pane=paneAdvanced]:hover,
-radio[pane=paneAdvanced][selected="true"] {
-  -moz-image-region: rect(32px, 224px, 64px, 192px);
-}
 
 %ifdef MOZ_SERVICES_SYNC
 radio[pane=paneSync] {

toolkit/themes/pinstripe/global/filters.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <filter id="iconPressed" color-interpolation-filters="sRGB">
+    <!-- Multiply all components with 0.55. -->
+    <feComponentTransfer>
+      <feFuncR type="linear" slope=".55"/>
+      <feFuncG type="linear" slope=".55"/>
+      <feFuncB type="linear" slope=".55"/>
+    </feComponentTransfer>
+  </filter>
+</svg>

toolkit/themes/pinstripe/global/jar.mn

@@ -20,6 +20,7 @@ toolkit.jar:
   skin/classic/global/dropmarker.css
   skin/classic/global/filefield.css
   skin/classic/global/filepicker.css
+  skin/classic/global/filters.svg
 * skin/classic/global/findBar.css
 * skin/classic/global/global.css
   skin/classic/global/groupbox.css

toolkit/themes/pinstripe/global/preferences.css

@@ -75,6 +75,15 @@ radio[pane]:active:hover {
   text-shadow: none;
 }
 
+radio[pane] > .paneButtonIcon {
+  /* preload external filter file */
+  background-image: url("chrome://global/skin/filters.svg");
+}
+
+radio[pane]:active:hover > .paneButtonIcon {
+  filter: url("chrome://global/skin/filters.svg#iconPressed");
+}
+
 radio[pane][selected="true"] {
   -moz-border-image: url("chrome://global/skin/icons/panebutton-active.png") 0 2 repeat stretch;
 }