Bug 1206911 - Use CSS Filters to gray out whimsycorn rather than using a separate asset. r=dao

browser/themes/shared/customizableui/panelUIOverlay.inc.css

@@ -30,7 +30,8 @@
 
 #PanelUI-popup #PanelUI-contents:empty::before {
   content: "";
-  background-image: url(chrome://browser/skin/customizableui/whimsy-bw.png);
+  background-image: url(chrome://browser/skin/customizableui/whimsy.png);
+  background-size: 64px 64px;
   display: block;
   width: 64px;
   height: 64px;
@@ -40,6 +41,10 @@
              whimsyMoveY 3.4s linear 0s infinite alternate;
 }
 
+#PanelUI-popup #PanelUI-contents:not(:hover):empty::before {
+  filter: grayscale(100%);
+}
+
 #PanelUI-popup #PanelUI-contents:active:empty::before {
   animation: whimsyMoveX 3.05s linear 0s infinite alternate,
              whimsyMoveY 3.4s linear 0s infinite alternate,
@@ -57,16 +62,8 @@
              whimsyRotate 1s linear 0s infinite normal;
 }
 
-#PanelUI-popup #PanelUI-contents:empty:hover::before {
-  background-image: url(chrome://browser/skin/customizableui/whimsy.png);
-}
-
 @media (min-resolution: 2dppx) {
   #PanelUI-popup #PanelUI-contents:empty::before {
-    background-image: url(chrome://browser/skin/customizableui/whimsy-bw@2x.png);
-    background-size: 64px 64px;
-  }
-  #PanelUI-popup #PanelUI-contents:empty:hover::before {
     background-image: url(chrome://browser/skin/customizableui/whimsy@2x.png);
   }
 }

browser/themes/shared/jar.inc.mn

@@ -51,8 +51,6 @@
   skin/classic/browser/customizableui/subView-arrow-back-inverted-rtl@2x.png  (../shared/customizableui/subView-arrow-back-inverted-rtl@2x.png)
   skin/classic/browser/customizableui/whimsy.png               (../shared/customizableui/whimsy.png)
   skin/classic/browser/customizableui/whimsy@2x.png            (../shared/customizableui/whimsy@2x.png)
-  skin/classic/browser/customizableui/whimsy-bw.png            (../shared/customizableui/whimsy-bw.png)
-  skin/classic/browser/customizableui/whimsy-bw@2x.png         (../shared/customizableui/whimsy-bw@2x.png)
   skin/classic/browser/downloads/contentAreaDownloadsView.css  (../shared/downloads/contentAreaDownloadsView.css)
   skin/classic/browser/drm-icon.svg                            (../shared/drm-icon.svg)
   skin/classic/browser/fullscreen/insecure.svg                 (../shared/fullscreen/insecure.svg)