settings: Update name and gravatar without a reload.

(imported from commit 961c9f64d7c39b4345ece036062854e8d474d2c0)

templates/zephyr/index.html

@@ -84,9 +84,9 @@ var people_list = [
           <div class="row">
             <div class="span3 sidebar-nav affix">
               <span>
-                <img class="img-rounded hidden-phone"
+                <img class="img-rounded hidden-phone gravatar-profile"
                      src="https://secure.gravatar.com/avatar/{{ email_hash }}?d=identicon&s=60" />
-                <img class="img-rounded visible-phone"
+                <img class="img-rounded visible-phone gravatar-profile"
                      src="https://secure.gravatar.com/avatar/{{ email_hash }}?d=identicon&s=30" />
               </span>
               <span class="my_fullname">{{ user_profile.full_name }}</span>

templates/zephyr/settings.html

@@ -25,8 +25,8 @@
       </div>
       <div id="Photo">
         <label>Photo</label>
-        <img class="img-rounded" src="https://secure.gravatar.com/avatar/{{ email_hash }}?d=identicon&s=80"/>
-        <a href="https://en.gravatar.com/emails" target="_blank">(change at Gravatar.com)</a>
+        <img class="img-rounded gravatar-profile" src="https://secure.gravatar.com/avatar/{{ email_hash }}?d=identicon&s=80"/>
+        <a href="https://en.gravatar.com/emails" target="_blank" onclick="wait_for_gravatar();">(change at Gravatar.com)</a>
         <br />
       </div>
       <br /><br />

tools/jslint/check-all.js

@@ -42,7 +42,7 @@ var globals =
     // ui.js
     + ' register_onclick hide_email show_email'
     + ' report_error report_success report_message clicking mouse_moved'
-    + ' userinfo_currently_popped'
+    + ' userinfo_currently_popped update_gravatars'
 
     // zephyr.js
     + ' message_array message_dict get_updates_params'

zephyr/static/js/ui.js

@@ -384,9 +384,12 @@ $(function () {
         success: function (resp, statusText, xhr, form) {
             var message = "Updated settings!";
             var result = $.parseJSON(xhr.responseText);
-            if ((result.full_name !== undefined) || (result.short_name !== undefined)) {
-                message = "Updated settings!  You will need to reload the page for your changes to take effect.";
+
+            if (result.full_name !== undefined) {
+                $(".my_fullname").text(result.full_name);
             }
+            update_gravatars();
+
             settings_status.removeClass(status_classes)
                 .addClass('alert-success')
                 .text(message).stop(true).fadeTo(0,1);
@@ -455,3 +458,40 @@ $(function () {
         }
     });
 });
+
+function update_gravatars() {
+    $.each($(".gravatar-profile"), function(index, profile) {
+        $(this).attr('src', $(this).attr('src') + '?' + $.now());
+    });
+}
+
+function poll_for_gravatar_update(start_time, url) {
+    var updated = false;
+
+    $.ajax({
+        type: "HEAD",
+        url: url,
+        async: false,
+        cache: false,
+        success: function (resp, statusText, xhr) {
+            if (new Date(xhr.getResponseHeader('Last-Modified')) > start_time) {
+                update_gravatars();
+                updated = true;
+            }
+        }
+    });
+
+    // Give users 5 minutes to update their picture on gravatar.com,
+    // during which we try to auto-update their image on our site. If
+    // they take longer than that, we'll update when they press the
+    // save button.
+    if (!updated && (($.now() - start_time) < 1000 * 60 * 5)) {
+        setTimeout(function() {
+            poll_for_gravatar_update(start_time, url);
+        }, 1500);
+    }
+}
+
+function wait_for_gravatar() {
+    poll_for_gravatar_update($.now(), $(".gravatar-profile").attr("src"));
+}