[IMP] *: remove image_64 and clean views

There are too many image sizes. Since they are stored resized this takes time to
generate when saving a new image, it's more rows on the attachment table, more
files on the disk, ...

64px is close enough to 128px that it can be removed without a big impact on
download size.

It will even reduce download and number of requests when both images are
displayed because now only one has to be downloaded and then benefit from cache.

The difference between the two is typically around 1.5kB which is negligible
these days, especially when the request overhead is around 0.5kB already, not
even taking into account other factors such as latency.

If a 64px image must absolutely be returned, it is still possible to pass the
size parameters to the image route. But the current guideline is to handle
resizing in the views when necessary.

Views
=====

- remove width and height attributes when existing CSS rules are overriding them
  (eg. `.oe_kanban_avatar` in the right context)
- add CSS rules instead of width and height attributes when possible
- use `object-fit: cover;` where width and height are forced to avoid distortion
  of non-square images
- for products, use `object-fit: contain;` instead, keep ratio but without crop
- add new CSS rules where the expected size was max 64px*64px before due to the
  image size itself
- remove `img-fluid` where using size classes to avoid conflicting rules

task-2060865

closes odoo/odoo#36147

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>

12 files changed, 20 insertions, 12 deletions

diff --git a/addons/mail/static/src/js/composers/basic_composer.js b/addons/mail/static/src/js/composers/basic_composer.js
index d79a7c93028..bfd97028a2d 100644
--- a/addons/mail/static/src/js/composers/basic_composer.js
+++ b/addons/mail/static/src/js/composers/basic_composer.js
@@ -100,7 +100,7 @@ var BasicComposer = Widget.extend({
 
         this.avatarURL = session.uid > 0 ? session.url('/web/image', {
             model: 'res.users',
-            field: 'image_64',
+            field: 'image_128',
             id: session.uid,
         }) : '/web/static/src/img/user_menu_avatar.png';
     },
diff --git a/addons/mail/static/src/js/followers.js b/addons/mail/static/src/js/followers.js
index 78783ad2386..cbe20ba240e 100644
--- a/addons/mail/static/src/js/followers.js
+++ b/addons/mail/static/src/js/followers.js
@@ -36,7 +36,7 @@ var Followers = AbstractField.extend({
     init: function (parent, name, record, options) {
         this._super.apply(this, arguments);
 
-        this.image = this.attrs.image || 'image_64';
+        this.image = this.attrs.image || 'image_128';
         this.comment = this.attrs.help || false;
 
         this.followers = [];
@@ -120,7 +120,7 @@ var Followers = AbstractField.extend({
             }
 
             $follower_li = $(QWeb.render('mail.Followers.partner', {
-                'record': _.extend(record, {'avatar_url': '/web/image/' + record.res_model + '/' + record.res_id + '/image_64'}),
+                'record': _.extend(record, {'avatar_url': '/web/image/' + record.res_model + '/' + record.res_id + '/image_128'}),
                 'widget': self})
             );
             $follower_li.appendTo($followers_list);
diff --git a/addons/mail/static/src/js/models/messages/message.js b/addons/mail/static/src/js/models/messages/message.js
index e5470d219a2..8327f4011fd 100644
--- a/addons/mail/static/src/js/models/messages/message.js
+++ b/addons/mail/static/src/js/models/messages/message.js
@@ -95,7 +95,7 @@ var Message =  AbstractMessage.extend(Mixins.EventDispatcherMixin, ServicesMixin
         if (this._isOdoobotAuthor()) {
             return '/mail/static/src/img/odoobot.png';
         } else if (this.hasAuthor()) {
-            return '/web/image/res.partner/' + this.getAuthorID() + '/image_64';
+            return '/web/image/res.partner/' + this.getAuthorID() + '/image_128';
         } else if (this.getType() === 'email') {
             return '/mail/static/src/img/email_icon.png';
         }
diff --git a/addons/mail/static/src/js/models/threads/dm_chat.js b/addons/mail/static/src/js/models/threads/dm_chat.js
index b53637e614b..6b56cd2c80d 100644
--- a/addons/mail/static/src/js/models/threads/dm_chat.js
+++ b/addons/mail/static/src/js/models/threads/dm_chat.js
@@ -91,7 +91,7 @@ var DMChat = TwoUserChannel.extend(ChannelSeenMixin, {
      */
     getPreview: function () {
         var result = this._super.apply(this, arguments);
-        result.imageSRC = '/web/image/res.partner/' + this.getDirectPartnerID() + '/image_64';
+        result.imageSRC = '/web/image/res.partner/' + this.getDirectPartnerID() + '/image_128';
         return result;
     },
     /**
diff --git a/addons/mail/static/src/scss/discuss.scss b/addons/mail/static/src/scss/discuss.scss
index b56d7747e8e..21ff765dfdb 100644
--- a/addons/mail/static/src/scss/discuss.scss
+++ b/addons/mail/static/src/scss/discuss.scss
@@ -350,6 +350,7 @@
             width: 100%;
             height: 100%;
             border-radius: 50%;
+            object-fit: cover;
         }
         &.o_mail_preview_app > img {
             border-radius: 2px;
diff --git a/addons/mail/static/src/scss/followers.scss b/addons/mail/static/src/scss/followers.scss
index edb38cc133a..031affb6e52 100644
--- a/addons/mail/static/src/scss/followers.scss
+++ b/addons/mail/static/src/scss/followers.scss
@@ -69,6 +69,8 @@
 
             img {
                 width: $o-mail-partner-avatar-size;
+                height: $o-mail-partner-avatar-size;
+                object-fit: cover;
             }
         }
 
diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss
index 16ad01a83b0..9f2a9f7002b 100644
--- a/addons/mail/static/src/scss/mail_activity.scss
+++ b/addons/mail/static/src/scss/mail_activity.scss
@@ -46,12 +46,14 @@
                     img {
                         width: 31px;
                         height: 31px;
+                        object-fit: cover;
                     }
 
                     .o_avatar_icon {
                         @include o-position-absolute($right: -5px, $bottom: -5px);
                         width: 25px;
                         height: 25px;
+                        object-fit: cover;
                         padding: 6px 5px;
                         text-align: center;
                         line-height: 1.2;
diff --git a/addons/mail/static/src/scss/systray.scss b/addons/mail/static/src/scss/systray.scss
index 6b57aa5a9a6..8330906c737 100644
--- a/addons/mail/static/src/scss/systray.scss
+++ b/addons/mail/static/src/scss/systray.scss
@@ -75,6 +75,7 @@
                     .o_mail_preview_image {
                         width: 40px;
                         height: 40px;
+                        object-fit: cover;
 
                         .fa-circle-o {
                             display: none;
diff --git a/addons/mail/static/src/scss/thread.scss b/addons/mail/static/src/scss/thread.scss
index 3931c06004a..05f5517f404 100644
--- a/addons/mail/static/src/scss/thread.scss
+++ b/addons/mail/static/src/scss/thread.scss
@@ -92,7 +92,9 @@
             }
 
             .o_thread_message_avatar {
-                max-width: $o-mail-thread-avatar-size;
+                width: $o-mail-thread-avatar-size;
+                height: $o-mail-thread-avatar-size;
+                object-fit: cover;
             }
             .o_thread_message_side_date {
                 display: none;
diff --git a/addons/mail/static/src/xml/activity.xml b/addons/mail/static/src/xml/activity.xml
index a915fccdf2e..8d41c15093b 100644
--- a/addons/mail/static/src/xml/activity.xml
+++ b/addons/mail/static/src/xml/activity.xml
@@ -17,7 +17,7 @@
                 <div class="o_thread_message" style="margin-bottom: 10px">
                     <div class="o_thread_message_sidebar">
                         <div class="o_avatar_stack">
-                            <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_64') : ''}" class="o_thread_message_avatar rounded-circle mb8" t-att-title="activity.user_id[1]" t-att-alt="activity.user_id[1]"/>
+                            <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_128') : ''}" class="o_thread_message_avatar rounded-circle mb8" t-att-title="activity.user_id[1]" t-att-alt="activity.user_id[1]"/>
                             <i t-att-class="'o_avatar_icon fa ' + activity.icon + ' bg-' + (activity.state == 'planned'? 'success' : (activity.state == 'today'? 'warning' : 'danger')) + '-full'"
                                t-att-title="activity.activity_type_id[1]"/>
                         </div>
@@ -42,16 +42,16 @@
                                     <dd class="mb8">
                                         <t t-esc="activity.create_date.format(datetimeFormat)"/>
                                         by
-                                        <img t-attf-src="/web/image#{activity.create_uid[0] >= 0 ? ('/res.users/' + activity.create_uid[0] + '/image_64') : ''}"
+                                        <img t-attf-src="/web/image#{activity.create_uid[0] >= 0 ? ('/res.users/' + activity.create_uid[0] + '/image_128') : ''}"
                                             height="18" width="18"
-                                            class="rounded-circle mr4"
+                                            class="o_object_fit_cover rounded-circle mr4"
                                             t-att-title="activity.create_uid[1]"
                                             t-att-alt="activity.create_uid[1]"/>
                                         <b><t t-esc="activity.create_uid[1]"/></b>
                                     </dd>
                                     <dt>Assigned to</dt>
                                     <dd class="mb8">
-                                        <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_64') : ''}" height="18" width="18" class="rounded-circle mr4" t-att-title="activity.user_id[1]" t-att-alt="activity.user_id[1]"/>
+                                        <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_128') : ''}" height="18" width="18" class="o_object_fit_cover rounded-circle mr4" t-att-title="activity.user_id[1]" t-att-alt="activity.user_id[1]"/>
                                         <b><t t-esc="activity.user_id[1]"/></b>
                                         <em>, due on </em><span t-attf-class="o_activity_color_#{activity.state}"><t t-esc="activity.date_deadline.format(dateFormat)"/></span>
                                     </dd>
diff --git a/addons/mail/static/src/xml/composer.xml b/addons/mail/static/src/xml/composer.xml
index 83ce49a7021..071a8023e83 100644
--- a/addons/mail/static/src/xml/composer.xml
+++ b/addons/mail/static/src/xml/composer.xml
@@ -6,7 +6,7 @@
             <h4>Drag Files Here <span class="fa fa-download"/></h4>
          </div>
          <div class="o_composer_container">
-             <img t-if="widget.avatarURL" height="36" width="36" class="o_thread_message_sidebar o_chatter_avatar rounded-circle" t-att-src="widget.avatarURL" alt="Avatar"/>
+             <img t-if="widget.avatarURL" height="36" width="36" class="o_thread_message_sidebar o_chatter_avatar o_object_fit_cover rounded-circle" t-att-src="widget.avatarURL" alt="Avatar"/>
              <div t-if="widget.extended" class="o_composer_subject">
                  <input tabindex="1" type="text" placeholder="Subject" class="o_input"/>
              </div>
diff --git a/addons/mail/static/src/xml/followers.xml b/addons/mail/static/src/xml/followers.xml
index be85bbb64bc..8a0914737a2 100644
--- a/addons/mail/static/src/xml/followers.xml
+++ b/addons/mail/static/src/xml/followers.xml
@@ -36,7 +36,7 @@
                 t-att-title="record.title"
                 t-att-data-oe-model="record.res_model"
                 t-att-data-oe-id="record.res_id">
-                <img t-att-src="record.avatar_url" alt="Avatar"/>
+                <img t-att-src="record.avatar_url" alt="Avatar" class="o_image_64_cover"/>
                 <t t-esc="record.name"/>
             </a>
             <button t-if="record.is_editable"