From 1dcfeefd69d00a3f2bb3a052076bfc906ac3251e Mon Sep 17 00:00:00 2001
From: Ben Turner <bent.mozilla@gmail.com>
Date: Mon, 16 Aug 2010 17:06:29 -0700
Subject: [PATCH] Bug 587876 - 'Undetermined progress bars should use
 mozRequestAnimationFrame'. r=roc

---
 toolkit/content/widgets/progressmeter.xml | 49 +++++++++++++----------
 1 file changed, 28 insertions(+), 21 deletions(-)
diff --git a/toolkit/content/widgets/progressmeter.xml b/toolkit/content/widgets/progressmeter.xml
index e27d0375ce5..fe4e3720a98 100644
--- a/toolkit/content/widgets/progressmeter.xml
+++ b/toolkit/content/widgets/progressmeter.xml
@@ -72,41 +72,48 @@
       <field name="_alive">true</field>
       <method name="_init">
         <body><![CDATA[
-          var stack = document.getAnonymousElementByAttribute(this, "anonid", "stack");
-          var spacer = document.getAnonymousElementByAttribute(this, "anonid", "spacer");
+          var stack =
+            document.getAnonymousElementByAttribute(this, "anonid", "stack");
+          var spacer =
+            document.getAnonymousElementByAttribute(this, "anonid", "spacer");
+          var isLTR =
+           document.defaultView.getComputedStyle(this, null).direction == "ltr";
+          var startTime = window.mozAnimationStartTime;
           var self = this;
 
-          var isLTR = 
-           document.defaultView.getComputedStyle(this, null).direction == "ltr";
-
-          var position = isLTR ? 4 : -1;
-          var interval = setInterval(function nextStep() {
+          function nextStep(event) {
             try {
               var width = stack.boxObject.width;
               if (!width) {
                 // Maybe we've been removed from the document.
-                if (!self._alive)
-                  clearInterval(interval);
+                if (self._alive)
+                  mozRequestAnimationFrame();
+                else
+                  window.removeEventListener("MozBeforePaint", nextStep, false);
                 return;
               }
+
+              var elapsedTime = event.timeStamp - startTime;
+
+              // Width of chunk is 1/5 (determined by the ratio 2000:400) of the
+              // total width of the progress bar. The left edge of the chunk
+              // starts at -1 and moves all the way to 4. It covers the distance
+              // in 2 seconds.
+              var position = isLTR ? ((elapsedTime % 2000) / 400) - 1 :
+                                     ((elapsedTime % 2000) / -400) + 4;
+
               width = width >> 2;
               spacer.height = stack.boxObject.height;
               spacer.width = width;
               spacer.left = width * position;
-              if (isLTR) {
-                position += 15 / (width + 150);
-                if (position >= 4)
-                  position = -1;
-              }
-              else {
-                position -= 15 / (width + 150);
-                if (position < 0)
-                  position = 4;
-              }
+
+              mozRequestAnimationFrame();
             } catch (e) {
-              clearInterval(interval);
+              window.removeEventListener("MozBeforePaint", nextStep, false);
             }
-          }, 20);
+          }
+          window.addEventListener("MozBeforePaint", nextStep, false);
+          mozRequestAnimationFrame();
         ]]></body>
       </method>
 
