The Gmail Counter

Right now, Gmail gives you exactly 2000 MB of storage space.

Have you ever wondered how the Gmail storage counter really works? I was bored one day and decided to investigate a bit. Turns out the counter doesn't really do much except get the current system time and compare it against several present time points. It then calculates what the max storage would be if it was indeed being increased at a constant rate. Kind of slick, but not entirely a surprise. And it's all done with Javascript (yuck!). ;-)

Anyway, here's the code I pulled out of Google's page if anyone's interested. This first part goes inside the <head> tag:

     <script type=text/javascript>
     <!--
     var CP = [
      [ 1136102400000, 2680 ],
      [ 1149145200000, 2730 ],
      [ 1167638400000, 2800 ]
     ];
     var quota;
     var PAD = '.000000'; 
     function el(id) {
       if (document.getElementById) {
         return document.getElementById(id);
       } else if (window[id]) {
         return window[id];
       }
       return null;
     }
     function OnLoad() {
       if (!quota) {
         quota = el("quota");
         updateQuota();
       }
     }
     function updateQuota() { 
       if (!quota) {
         return;
       }
       var now = (new Date()).getTime(); 
       var i;
       for (i = 0; i < CP.length; i++) {
         if (now < CP[i][0]) {
           break;
         }
       }
       if (i == 0) {
         setTimeout(updateQuota, 1000); 
       } else if (i == CP.length) {
         quota.innerHTML = CP[i - 1][1];
       } else {
         var ts = CP[i - 1][0];
         var bs = CP[i - 1][1];
         quota.innerHTML = format(((now-ts) / (CP[i][0]-ts) * (CP[i][1]-bs)) + bs); 
         setTimeout(updateQuota, 1000); 
       } 
     } 
     function format(num) { 
       var str = String(num); 
       var dot = str.indexOf('.'); 
       if (dot < 0) { 
          return str + PAD; 
       } if (PAD.length > (str.length - dot)) { 
         return str + PAD.substring(str.length - dot); 
       } else { 
         return str.substring(0, dot + PAD.length); 
       } 
     } 
     // -->
     </script>

This second part goes wherever you want the counter:

     <span id=quota>2000</span>
     <script>
     <!--
     quota = el("quota");
     updateQuota();
     // -->
     </script>

The "2000" is a default value in case the user has Javascript turned off. The other bit activates the update function, which re-activates itself on a timer each time it executes.

Kinda cool, eh? Yeah, I know, not really... Also, since everything is hard-coded, this explanation will most likely be outdated as soon as Google changes their Gmail front page (for instance, to do a surprise one-time storage increase). The concept will probably remain similar, though, even if the exactly times and values change.

Anyway, all of the above code is also in the source for this document. Yes, you can check. In FireFox, it's View->Page Source and in IE it's just View->Source. You might also learn a thing or two about how I coded this site. Not that it's a good model in any way. If you do investigate, please remember that PHP is processed server-side, so you're really not seeing my original source code, but only what the PHP processor feeds you. Mwa-ha-ha-ha!!! :-)