Bug 852622 - Add a css based ring throbber. r=fryn

browser/metro/base/content/bindings/cssthrobber.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0"?>
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - 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/. -->
+
+<bindings
+    xmlns="http://www.mozilla.org/xbl"
+    xmlns:xbl="http://www.mozilla.org/xbl"
+    xmlns:html="http://www.w3.org/1999/xhtml"
+    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <binding id="cssthrobberBinding" extends="xul:box">
+    <content>
+      <html:div class="progressContainer">
+        <html:div class="progressBall progressBall" />
+        <html:div class="progressBall progressBall" />
+        <html:div class="progressBall progressBall" />
+        <html:div class="progressBall progressBall" />
+        <html:div class="progressBall progressBall" />
+      </html:div>
+    </content>
+  </binding>
+</bindings>

browser/metro/base/content/browser.css

@@ -30,6 +30,10 @@ flyoutpanel {
   -moz-binding: url('chrome://browser/content/bindings/flyoutpanel.xml#flyoutpanelBinding');
 }
 
+cssthrobber {
+  -moz-binding: url('chrome://browser/content/bindings/cssthrobber.xml#cssthrobberBinding');
+}
+
 settings {
   -moz-binding: url("chrome://mozapps/content/extensions/setting.xml#settings");
 }

browser/metro/base/jar.mn

@@ -26,6 +26,7 @@ chrome.jar:
   content/bindings/appbar.xml                  (content/bindings/appbar.xml)
   content/bindings/flyoutpanel.xml             (content/bindings/flyoutpanel.xml)
   content/bindings/selectionoverlay.xml        (content/bindings/selectionoverlay.xml)
+  content/bindings/cssthrobber.xml             (content/bindings/cssthrobber.xml)
 
   content/prompt/alert.xul                     (content/prompt/alert.xul)
   content/prompt/confirm.xul                   (content/prompt/confirm.xul)

browser/metro/theme/cssthrobber.css

@@ -0,0 +1,102 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+%filter substitution
+%include defines.inc
+
+.progressContainer {
+}
+
+.progressBall {
+  position: absolute;
+  opacity: 0;
+  transform: rotate(225deg);
+  animation: orbit 7.15s infinite;
+}
+
+.progressBall:nth-child(1) {
+  animation-delay: 1.56s;
+}
+
+.progressBall:nth-child(2) {
+  animation-delay: 0.31s;
+}
+
+.progressBall:nth-child(3) {
+  animation-delay: 0.62s;
+}
+
+.progressBall:nth-child(4) {
+  animation-delay: 0.94s;
+}
+
+.progressBall:nth-child(5) {
+  animation-delay: 1.25s;
+}
+
+.progressBall:nth-child(1)::after,
+.progressBall:nth-child(2)::after,
+.progressBall:nth-child(3)::after,
+.progressBall:nth-child(4)::after,
+.progressBall:nth-child(5)::after {
+  content: "";
+  display: block;
+  width: 5px;
+  height: 5px;
+  border-radius: 5px;
+  position: absolute;
+  background: #0095dd;
+  left:0px;
+  top:0px;
+}
+
+
+@keyframes orbit {
+  0% {
+    opacity: 1;
+    z-index:99;
+    transform: rotate(180deg);
+    animation-timing-function: ease-out;
+  }
+
+  7% {
+    opacity: 1;
+    transform: rotate(300deg);
+    animation-timing-function: linear;
+    origin:0%;
+  }
+
+  30% {
+    opacity: 1;
+    transform:rotate(410deg);
+    animation-timing-function: ease-in-out;
+    origin:7%;
+  }
+
+  39% {
+    opacity: 1;
+    transform: rotate(645deg);
+    animation-timing-function: linear;
+    origin:30%;
+  }
+
+  70% {
+    opacity: 1;
+    transform: rotate(770deg);
+    animation-timing-function: ease-out;
+    origin:39%;
+  }
+
+  75% {
+    opacity: 1;
+    transform: rotate(900deg);
+    animation-timing-function: ease-out;
+    origin:70%;
+  }
+
+  76%, 100% {
+    opacity: 0;
+    transform:rotate(900deg);
+  }
+}

browser/metro/theme/jar.mn

@@ -9,6 +9,7 @@ chrome.jar:
   skin/aboutPage.css                        (aboutPage.css)
   skin/about.css                            (about.css)
 * skin/flyoutpanel.css                      (flyoutpanel.css)
+* skin/cssthrobber.css                      (cssthrobber.css)
 * skin/browser.css                          (browser.css)
 * skin/content.css                          (content.css)
   skin/config.css                           (config.css)