Make some improvements to the user info popup.

Review Request #2123 — Created Feb. 13, 2011 and submitted


Review Board


Make some improvements to the user info popup.

This improves a few aspects of the new popup:

1) Instead of using an image to define the shape and dimensions of the
   popup, we now use CSS3's drop shadows and rounded corners, and we
   set the width/height in ems. This makes things look nicer when zoomed
   in, and should let us easily change the shape.

2) Changed the contents to be less key/value-ish. It now shows
   the username, full name, and e-mail with no labels, and then some
   human-readable "Last logged in blah blah" and "Joined blah blah."

3) Instead of loading the popup every time we mouse over, we now load it
   once and keep it around. This could use some improving still. I'd like
   to have a $.fn.userInfoBubble() or something that manages all this,
   and to keep one bubble with the info cached, as that'll be more
   efficient if we add popups for submitters on the review request pages,
   but that can come later.

4) Use etags for the info bubble, so we can avoid rendering and transferring
   content if nothing's changed.

5) Make use of the hcard semantics for the content in user_infobox.html.
Made sure the popup worked in the existing cases and looked how I expected.

Zoomed the text and saw that things looked better at larger sizes than with
the bubble.png.

Verified the etag was working.

Tested the bubble with a long delay, and saw that it had a spinner and filled
in once the data could be loaded. (Single-threaded dev server makes this really
easy, sadly).