Add sender avatar in message popover.

frontend_tests/node_tests/templates.js

@@ -662,17 +662,14 @@ function render(template_name, args) {
 
 (function message_info_popover_title() {
     var args = {
-        message: {
-            is_stream: true,
-            stream: 'devel',
-        },
+        sender_avatar: 'avatar/hamlet@zulip.com',
     };
 
     var html = render('message_info_popover_title', args);
     global.write_handlebars_output("message_info_popover_title", html);
 
     html = '<div>' + html + '</div>';
-    assert($(html).text().trim(), "Message to stream devel");
+    assert($(html).find('.popover-avatar').css('background-image'), "url(avatar/hamlet@zulip.com)");
 }());
 
 (function message_reaction() {

static/js/popovers.js

@@ -75,11 +75,18 @@ function show_message_info_popover(element, id) {
         elt.popover({
             placement: (ypos > (message_viewport.height() - 300)) ? 'top' : 'bottom',
             template:  templates.render('user_info_popover',   {class: "message-info-popover"}),
-            title:     templates.render('message_info_popover_title',   args),
+            title:     templates.render('message_info_popover_title', {sender_avatar: "avatar/" + sender_email}),
             content:   templates.render('message_info_popover_content', args),
             trigger:   "manual",
         });
         elt.popover("show");
+
+        var sender_avatar_medium = new Image();
+        sender_avatar_medium.src= "avatar/" + sender_email + "/medium";
+            $(sender_avatar_medium).load(function () {
+            $(".popover-avatar").css("background-image","url("+$(this).attr("src")+")");
+        });
+
         current_message_info_popover_elem = elt;
     }
 }

static/styles/zulip.css

@@ -2634,3 +2634,23 @@ ul.actions_popover i {
     text-align: center;
     margin-right: 3px;
 }
+
+.user_popover {
+    top: 100px!important;
+}
+
+.popover-inner {
+    width: 240px;
+}
+
+.popover-avatar {
+    height: 240px;
+    width: 240px;
+    background-size: cover;
+    background-position: center;
+    margin-top: -8px;
+    margin-left: -14px;
+    margin-right: -8px;
+    margin-bottom: -8px;
+    position: relative;
+}

static/templates/message_info_popover_title.handlebars

@@ -0,0 +1,2 @@
+<div class="popover-avatar" style="background-image: url('{{sender_avatar}}');" >
+</div>