Bug 1013537 - Implement animated translation icon for "Translation in Progress" infobar, r=felipe.

browser/components/translation/translation-infobar.xml

@@ -21,7 +21,7 @@
     <content>
       <xul:hbox class="notification-inner outset" flex="1" xbl:inherits="type">
         <xul:hbox anonid="details" align="center" flex="1">
-          <xul:image anonid="messageImage" class="messageImage" xbl:inherits="src=image,type,value"/>
+          <xul:image anonid="messageImage" class="messageImage"/>
           <xul:deck anonid="translationStates" selectedIndex="0">
 
             <!-- offer to translate -->
@@ -107,6 +107,15 @@
           if (activeElt && deck.contains(activeElt))
             activeElt.blur();
 
+          let stateName;
+          for (let name of ["OFFER", "TRANSLATING", "TRANSLATED", "ERROR"]) {
+            if (this.translation["STATE_" + name] == val) {
+              stateName = name.toLowerCase();
+              break;
+            }
+          }
+          this.setAttribute("state", stateName);
+
           deck.selectedIndex = val;
           ]]>
         </setter>

browser/themes/linux/jar.mn

@@ -180,6 +180,7 @@ browser.jar:
   skin/classic/browser/tabview/stack-expander.png     (tabview/stack-expander.png)
   skin/classic/browser/tabview/tabview.png            (tabview/tabview.png)
   skin/classic/browser/tabview/tabview.css            (tabview/tabview.css)
+  skin/classic/browser/translating-16.png             (../shared/translation/translating-16.png)
   skin/classic/browser/translation-16.png             (../shared/translation/translation-16.png)
 * skin/classic/browser/devtools/common.css            (../shared/devtools/common.css)
 * skin/classic/browser/devtools/dark-theme.css        (../shared/devtools/dark-theme.css)

browser/themes/osx/jar.mn

@@ -297,6 +297,8 @@ browser.jar:
   skin/classic/browser/tabview/stack-expander.png           (tabview/stack-expander.png)
   skin/classic/browser/tabview/tabview.png                  (tabview/tabview.png)
   skin/classic/browser/tabview/tabview.css                  (tabview/tabview.css)
+  skin/classic/browser/translating-16.png                   (../shared/translation/translating-16.png)
+  skin/classic/browser/translating-16@2x.png                (../shared/translation/translating-16@2x.png)
   skin/classic/browser/translation-16.png                   (../shared/translation/translation-16.png)
   skin/classic/browser/translation-16@2x.png                (../shared/translation/translation-16@2x.png)
 * skin/classic/browser/devtools/common.css                  (../shared/devtools/common.css)

browser/themes/shared/translation/infobar.inc.css

@@ -15,6 +15,17 @@ notification[value="translation"] .messageImage {
   }
 }
 
+notification[value="translation"][state="translating"] .messageImage {
+  list-style-image: url(chrome://browser/skin/translating-16.png);
+  -moz-image-region: auto;
+}
+
+@media (min-resolution: 1.25dppx) {
+  notification[value="translation"][state="translating"] .messageImage {
+    list-style-image: url(chrome://browser/skin/translating-16@2x.png);
+  }
+}
+
 notification[value="translation"] {
   min-height: 40px;
 }

browser/themes/windows/jar.mn

@@ -217,6 +217,7 @@ browser.jar:
         skin/classic/browser/tabview/tabview.png                    (tabview/tabview.png)
         skin/classic/browser/tabview/tabview-inverted.png           (tabview/tabview-inverted.png)
         skin/classic/browser/tabview/tabview.css                    (tabview/tabview.css)
+        skin/classic/browser/translating-16.png                     (../shared/translation/translating-16.png)
         skin/classic/browser/translation-16.png                     (../shared/translation/translation-16.png)
 *       skin/classic/browser/devtools/common.css                    (../shared/devtools/common.css)
 *       skin/classic/browser/devtools/dark-theme.css                (../shared/devtools/dark-theme.css)
@@ -607,6 +608,7 @@ browser.jar:
         skin/classic/aero/browser/tabview/tabview.png                (tabview/tabview.png)
         skin/classic/aero/browser/tabview/tabview-inverted.png       (tabview/tabview-inverted.png)
         skin/classic/aero/browser/tabview/tabview.css                (tabview/tabview.css)
+        skin/classic/aero/browser/translating-16.png                 (../shared/translation/translating-16.png)
         skin/classic/aero/browser/translation-16.png                 (../shared/translation/translation-16.png)
 *       skin/classic/aero/browser/devtools/common.css                (../shared/devtools/common.css)
 *       skin/classic/aero/browser/devtools/dark-theme.css            (../shared/devtools/dark-theme.css)