Fixes #198 Squished avatars

Refactor all avatar views to use a shared partial, then change it to a
background image. Requires allowing unsafe-inline styles in the CSP.

background.html

@@ -53,7 +53,7 @@
   </script>
   <script type='text/x-tmpl-mustache' id='message'>
       <div class='sender'>{{ sender }}</div>
-      <span class='avatar'><img src='{{ avatar_url }}' /></span>
+      {{> avatar }}
       <div class="bubble">
           <p class="content">{{ message }}</p>
           <div class='attachments'></div>
@@ -74,7 +74,7 @@
           <div class='clearfix'>
             <div class='group-avatar'>
               <div class='thumbnail'>
-                <span class='default avatar'><img src='{{ avatar_url }}' /></span>
+                {{> avatar }}
               </div>
               <input type='file' name='avatar' class='file-input'>
             </div>
@@ -85,11 +85,14 @@
         </div>
       </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='avatar'>
+      <span class='avatar' style='background-image: url("{{ avatar_url }}");' ></span>
+  </script>
   <script type='text/x-tmpl-mustache' id='contact_pill'>
     <span>{{ name }}</span><span class='remove'>x</span>
   </script>
   <script type='text/x-tmpl-mustache' id='contact'>
-      <span class='avatar'><img src='{{ avatar_url }}' /></span>
+      {{> avatar }}
       <div class='contact-details'>
           <h3 class='contact-name'>
           {{ contact_name }}
@@ -206,7 +209,7 @@
   </script>
   <script type='text/x-tmpl-mustache' id='contact-detail'>
       <div>
-        <span class='avatar'><img src='{{ avatar_url }}' /></span>
+        {{> avatar }}
         <span class='name'>{{ name }}</span>
         {{ #conflict }}
             <button class='conflict'><span>Verify</span></button>

js/views/conversation_list_item_view.js

@@ -46,7 +46,7 @@
                     last_message_timestamp: moment(this.model.get('timestamp')).format('MMM D'),
                     number: this.model.getNumber(),
                     avatar_url: this.model.getAvatarUrl()
-                })
+                }, this.render_partials())
             );
 
             twemoji.parse(this.el, { base: '/images/twemoji/', size: 16 });

js/views/message_detail_view.js

@@ -17,11 +17,10 @@
     'use strict';
     window.Whisper = window.Whisper || {};
 
-    var ContactView = Backbone.View.extend({
+    var ContactView = Whisper.View.extend({
         className: 'contact-detail',
+        template: $('#contact-detail').html(),
         initialize: function(options) {
-            this.template = $('#contact-detail').html();
-            Mustache.parse(this.template);
             this.conflict = options.conflict;
         },
         events: {
@@ -30,13 +29,12 @@
         triggerConflict: function() {
             this.$el.trigger('conflict', {conflict: this.conflict});
         },
-        render: function() {
-            this.$el.html(Mustache.render(this.template, {
+        render_attributes: function() {
+            return {
                 name       : this.model.getTitle(),
                 avatar_url : this.model.getAvatarUrl(),
                 conflict   : this.conflict
-            }));
-            return this;
+            };
         }
     });
 

js/views/message_view.js

@@ -41,7 +41,7 @@
                     timestamp: moment(this.model.get('received_at')).fromNow(),
                     sender: (contact && contact.getTitle()) || '',
                     avatar_url: (contact && contact.getAvatarUrl())
-                })
+                }, this.render_partials())
             );
 
             twemoji.parse(this.el, { base: '/images/twemoji/', size: 16 });

js/views/new_group_update_view.js

@@ -29,6 +29,7 @@
 
             this.recipients_view = new Whisper.RecipientsInputView();
             this.$el.find('.scrollable').append(this.recipients_view.el);
+            this.$el.find('.avatar').addClass('default');
         },
         events: {
             'click .back': 'goBack',

js/views/whisper_view.js

@@ -25,11 +25,18 @@
         render_attributes: function() {
             return _.result(this.model, 'attributes', {});
         },
+        render_partials: function() {
+            return {
+                avatar: this.avatar_template
+            };
+        },
         render: function() {
             var attrs = _.result(this, 'render_attributes', {});
             var template = _.result(this, 'template', '');
-            this.$el.html(Mustache.render(template, attrs));
+            var partials = _.result(this, 'render_partials', '');
+            this.$el.html(Mustache.render(template, attrs, partials));
             return this;
-        }
+        },
+        avatar_template: $('#avatar').html()
     });
 })();

manifest.json

@@ -26,6 +26,6 @@
     "options_page": "options.html",
 
   "content_security_policy":
-    "default-src 'self'; img-src 'self' data:; connect-src https://textsecure-service-staging.whispersystems.org wss://textsecure-service-staging.whispersystems.org https://whispersystems-textsecure-attachments-staging.s3.amazonaws.com"
+    "default-src 'self'; img-src 'self' data:; connect-src https://textsecure-service-staging.whispersystems.org wss://textsecure-service-staging.whispersystems.org https://whispersystems-textsecure-attachments-staging.s3.amazonaws.com; style-src 'self' 'unsafe-inline'"
 
 }

stylesheets/_conversation.scss

@@ -53,10 +53,6 @@
     }
   }
 
-  .avatar img {
-    vertical-align: middle;
-  }
-
   .conflict {
     border: none;
     border-radius: 5px;
@@ -240,11 +236,9 @@
     display: none;
   }
 
-  .avatar img {
+  .avatar {
     height: 36px;
     width: 36px;
-    background: $grey_l;
-    border-radius: (36px / 2);
   }
 
   .meta {

stylesheets/_global.scss

@@ -161,6 +161,16 @@ img.emoji {
    vertical-align: -0.1em;
 }
 
+.avatar {
+  display: inline-block;
+  height: 44px;
+  width: 44px;
+  background: $grey_l url('/images/default.png') no-repeat center;
+  border-radius: 50%;
+  background-size: cover;
+  vertical-align: middle;
+}
+
 .new-group-update-form {
   background: white;
 
@@ -241,13 +251,6 @@ img.emoji {
     }
   }
 
-  .avatar img {
-    height: 44px;
-    width: 44px;
-    background: $grey_l;
-    border-radius: (44px / 2);
-  }
-
   .contact-details {
     vertical-align: top;
     display: inline-block;

stylesheets/manifest.css

@@ -144,6 +144,15 @@ img.emoji {
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em; }
 
+.avatar {
+  display: inline-block;
+  height: 44px;
+  width: 44px;
+  background: #f3f3f3 url("/images/default.png") no-repeat center;
+  border-radius: 22px;
+  background-size: cover;
+  vertical-align: middle; }
+
 .new-group-update-form {
   background: white; }
   .new-group-update-form .group-avatar {
@@ -201,11 +210,6 @@ img.emoji {
     box-shadow: 0 1px 3px rgba(170, 170, 170, 0.8); }
     .contact:last-child::after {
       display: none; }
-  .contact .avatar img {
-    height: 44px;
-    width: 44px;
-    background: #f3f3f3;
-    border-radius: 22px; }
   .contact .contact-details {
     vertical-align: top;
     display: inline-block;
@@ -383,8 +387,6 @@ input.search {
       text-align: right;
       font-weight: bold;
       padding-right: 1em; }
-  .message-detail .avatar img {
-    vertical-align: middle; }
   .message-detail .conflict {
     border: none;
     border-radius: 5px;
@@ -526,12 +528,10 @@ input.search {
   .message-detail .outgoing .avatar,
   .message-list .outgoing .avatar {
     display: none; }
-  .message-detail .avatar img,
-  .message-list .avatar img {
+  .message-detail .avatar,
+  .message-list .avatar {
     height: 36px;
-    width: 36px;
-    background: #f3f3f3;
-    border-radius: 18px; }
+    width: 36px; }
   .message-detail .meta,
   .message-list .meta {
     margin-top: 3px;