Bug 872780 - Prevent cssthrobbers from animating while hidden. r=mbrubeck

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

@@ -4,6 +4,8 @@
    - 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/. -->
 
+<!-- When not in use, make sure you disable this or it will run continuously
+     in the background sucking up cpu. -->
 <bindings
     xmlns="http://www.mozilla.org/xbl"
     xmlns:xbl="http://www.mozilla.org/xbl"
@@ -11,7 +13,7 @@
     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 anonid="container" id="container" class="progressContainer">
         <html:div class="progressBall" />
         <html:div class="progressBall" />
         <html:div class="progressBall" />
@@ -19,5 +21,20 @@
         <html:div class="progressBall" />
       </html:div>
     </content>
+    <implementation>
+      <field name="container" readonly="true">document.getAnonymousElementByAttribute(this, "anonid", "container");</field>
+      <property name="enabled">
+        <setter>
+          <![CDATA[
+            if (val) {
+              this.container.setAttribute("enabled", true);
+            } else {
+              this.container.removeAttribute("enabled");
+            }
+            return val;
+          ]]>
+        </setter>
+      </property>
+    </implementation>
   </binding>
 </bindings>

browser/metro/base/content/browser.xul

@@ -446,10 +446,10 @@
           <button label="&sync.setup.remove;" oncommand="Sync.disconnect();" />
         </hbox>
       </vbox>
-      <vbox id="sync-disconnectthrobber" collapsed="true">
+      <vbox id="sync-disconnectpanel">
         <hbox>
           <spacer flex="1" />
-          <cssthrobber id="syncdisconnectthrobber" />
+          <cssthrobber id="sync-disconnectthrobber"/>
           <label>&sync.removethrobber.label;</label>
           <spacer flex="1" />
         </hbox>
@@ -492,8 +492,7 @@
           <deck id="clear-notification" flex="2" selectedIndex="0" align="center">
             <spacer id="clear-notification-empty"/>
             <hbox id="clear-notification-clearing" align="center">
-              <!-- TODO: we need a more metro-y throbber. See bug 852622 -->
-              <image src="chrome://browser/skin/images/throbber.png" />
+              <cssthrobber id="clearprivacythrobber"/>
             </hbox>
             <description id="clear-notification-done">&clearPrivateData.done;</description>
           </deck>

browser/metro/base/content/sanitizeUI.js

@@ -39,6 +39,7 @@ var SanitizeUI = {
       checkbox.disabled = true;
     }
     clearNotificationDeck.selectedPanel = clearNotificationClearing;
+    document.getElementById("clearprivacythrobber").enabled = true;
 
     // Run asynchronously to let UI update
     setTimeout(function() {
@@ -57,6 +58,7 @@ var SanitizeUI = {
         checkbox.disabled = false;
       }
       clearNotificationDeck.selectedPanel = clearNotificationDone;
+      document.getElementById("clearprivacythrobber").enabled = false;
 
       // Clear notifications after 4 seconds
       clearTimeout(SanitizeUI._clearNotificationTimeout);

browser/metro/base/content/sync.js

@@ -448,8 +448,8 @@ let Sync = {
     });
 
     let settingids = ["device", "connect", "connected", "disconnect", "lastsync", "pairdevice",
-                      "errordescription", "accountinfo", "disconnectwarnpanel", "disconnectthrobber",
-                      "disconnectwarntitle", "description"];
+                      "errordescription", "accountinfo", "disconnectwarnpanel", "disconnectpanel",
+                      "disconnectthrobber", "disconnectwarntitle", "description"];
     settingids.forEach(function(id) {
       elements[id] = document.getElementById("sync-" + id);
     });
@@ -471,6 +471,7 @@ let Sync = {
     let pairdevice = this._elements.pairdevice;
     let accountinfo = this._elements.accountinfo;
     let description = this._elements.description;
+    let disconnectpanel = this._elements.disconnectpanel;
     let disconnectthrobber = this._elements.disconnectthrobber;
 
     // This gets updated when an error occurs
@@ -481,10 +482,11 @@ let Sync = {
     // If we're in the process of disconnecting we are no longer configured.
     if (this._disconnecting) {
       isConfigured = false;
-      // display the throbber with the appropriate message
-      disconnectthrobber.collapsed = false;
+      disconnectpanel.collapsed = false;
+      disconnectthrobber.enabled = true;
     } else {
-      disconnectthrobber.collapsed = true;
+      disconnectpanel.collapsed = true;
+      disconnectthrobber.enabled = false;
     }
 
     connect.collapsed = isConfigured;

browser/metro/theme/browser.css

@@ -561,26 +561,21 @@ flyoutpanel > settings:first-child {
   width: 400px;
 }
 
+#sync-disconnectpanel {
+  margin-top: 25px;
+}
+
 #sync-disconnectwarntitle {
   font-weight: bold;
 }
 
-#sync-disconnectthrobber {
-  margin-top: 25px;
-}
-
-#disconnectthrobber {
-  width: 25px;
-  height: 25px;
-}
-
-#syncdisconnectthrobber .progressContainer {
+#sync-disconnectthrobber .progressContainer {
   width: 25px;
   height: 25px;
   margin-right: 10px;
 }
 
-#syncdisconnectthrobber .progressBall {
+#sync-disconnectthrobber .progressBall {
   margin: 2px;
   width: 22px;
   height: 22px;
@@ -712,6 +707,21 @@ setting[type="radio"] > vbox {
   width: 50%;
 }
 
+#clear-notification {
+  max-height: 25px;
+}
+
+#clearprivacythrobber .progressContainer {
+  width: 25px;
+  height: 25px;
+}
+
+#clearprivacythrobber .progressBall {
+  margin: 2px;
+  width: 22px;
+  height: 22px;
+}
+
 #clear-notification-done {
   font-weight: bold;
 }

browser/metro/theme/cssthrobber.css

@@ -5,41 +5,38 @@
 %filter substitution
 %include defines.inc
 
-.progressContainer {
-}
-
-.progressBall {
+#container[enabled] .progressBall {
   position: absolute;
   opacity: 0;
   transform: rotate(225deg);
   animation: orbit 7.15s infinite;
 }
 
-.progressBall:nth-child(1) {
+#container[enabled] .progressBall:nth-child(1) {
   animation-delay: 1.56s;
 }
 
-.progressBall:nth-child(2) {
+#container[enabled] .progressBall:nth-child(2) {
   animation-delay: 0.31s;
 }
 
-.progressBall:nth-child(3) {
+#container[enabled] .progressBall:nth-child(3) {
   animation-delay: 0.62s;
 }
 
-.progressBall:nth-child(4) {
+#container[enabled] .progressBall:nth-child(4) {
   animation-delay: 0.94s;
 }
 
-.progressBall:nth-child(5) {
+#container[enabled] .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 {
+#container[enabled] .progressBall:nth-child(1)::after,
+#container[enabled] .progressBall:nth-child(2)::after,
+#container[enabled] .progressBall:nth-child(3)::after,
+#container[enabled] .progressBall:nth-child(4)::after,
+#container[enabled] .progressBall:nth-child(5)::after {
   content: "";
   display: block;
   width: 5px;

browser/metro/theme/jar.mn

@@ -70,7 +70,6 @@ chrome.jar:
   skin/images/errorpage-warning.png         (images/errorpage-warning.png)
   skin/images/errorpage-larry-white.png     (images/errorpage-larry-white.png)
   skin/images/errorpage-larry-black.png     (images/errorpage-larry-black.png)
-  skin/images/throbber.png                  (images/throbber.png)
   skin/images/alert-downloads-30.png        (images/alert-downloads-30.png)
   skin/images/identity-default-hdpi.png     (images/identity-default-hdpi.png)
   skin/images/identity-ssl-hdpi.png         (images/identity-ssl-hdpi.png)