Bug 759252 - Switch to using CSS animations for loading & connecting throbbers. r=fryn

browser/themes/gnomestripe/browser.css

@@ -1558,10 +1558,28 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 
 .tab-throbber {
   list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
+  -moz-animation-duration: 960ms;
+  -moz-animation-iteration-count: infinite;
+  -moz-animation-name: rotate-counterclockwise;
+  -moz-animation-timing-function: linear;
 }
 
 .tab-throbber[progress] {
   list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
+  -moz-animation-duration: 800ms;
+  -moz-animation-name: rotate-clockwise;
+}
+
+@-moz-keyframes rotate-clockwise {
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes rotate-counterclockwise {
+  to {
+    -moz-transform: rotate(-360deg);
+  }
 }
 
 .tab-throbber[pinned],

browser/themes/pinstripe/browser.css

@@ -1666,10 +1666,28 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
 
 .tab-throbber {
   list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
+  -moz-animation-duration: 960ms;
+  -moz-animation-iteration-count: infinite;
+  -moz-animation-name: rotate-counterclockwise;
+  -moz-animation-timing-function: linear;
 }
 
 .tab-throbber[progress] {
   list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
+  -moz-animation-duration: 800ms;
+  -moz-animation-name: rotate-clockwise;
+}
+
+@-moz-keyframes rotate-clockwise {
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes rotate-counterclockwise {
+  to {
+    -moz-transform: rotate(-360deg);
+  }
 }
 
 .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected="true"]) {

browser/themes/winstripe/browser.css

@@ -1867,10 +1867,28 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-
 
 .tab-throbber {
   list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
+  -moz-animation-duration: 960ms;
+  -moz-animation-iteration-count: infinite;
+  -moz-animation-name: rotate-counterclockwise;
+  -moz-animation-timing-function: linear;
 }
 
 .tab-throbber[progress] {
   list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
+  -moz-animation-duration: 800ms;
+  -moz-animation-name: rotate-clockwise;
+}
+
+@-moz-keyframes rotate-clockwise {
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes rotate-counterclockwise {
+  to {
+    -moz-transform: rotate(-360deg);
+  }
 }
 
 #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {