[IMP] web_editor: add unique to image URLs to leverage browser caching

Previously, image urls did not contain the unique parameter, this
resulted in all browser caching for images being dependent on etag
headers. This commit changes the url format used by images in the
web_editor to use the /id-checksum/ format instead of only the id, this
in turn makes it so that the 'Max-age' header is set to 1 year. This
also solves some browser caching issues when changing the optimization
level of an image in place in the media-dialog.

For binary attachments with an url (eg, unsplash images) the unique is
added as a search parameter (?unique=checksum) as a cachebuster
mechanism, but currently doesn't set the max-age header, which may or
may not be done at a later date.

task-2091417

2 files changed, 20 insertions, 5 deletions

diff --git a/addons/web_editor/models/ir_attachment.py b/addons/web_editor/models/ir_attachment.py
index 36c44320c48..7a7d9f83111 100644
--- a/addons/web_editor/models/ir_attachment.py
+++ b/addons/web_editor/models/ir_attachment.py
@@ -26,13 +26,23 @@ class IrAttachment(models.Model):
     @api.depends('mimetype', 'url', 'name')
     def _compute_image_src(self):
         for attachment in self:
+            # Only add a src for supported images
             if attachment.mimetype not in ['image/gif', 'image/jpe', 'image/jpeg', 'image/jpg', 'image/gif', 'image/png', 'image/svg+xml']:
                 attachment.image_src = False
+                continue
+
+            if attachment.type == 'url':
+                attachment.image_src = attachment.url
             else:
-                attachment.image_src = attachment.url or '/web/image/%s/%s' % (
-                    attachment.id,
-                    url_quote(attachment.name or ''),
-                )
+                # Adding unique in URLs for cache-control
+                unique = attachment.checksum[:8]
+                if attachment.url:
+                    # For attachments-by-url, unique is used as a cachebuster. They
+                    # currently do not leverage max-age headers.
+                    attachment.image_src = '%s?unique=%s' % (attachment.url, unique)
+                else:
+                    name = url_quote(attachment.name)
+                    attachment.image_src = '/web/image/%s-%s/%s' % (attachment.id, unique, name)
 
     @api.depends('datas')
     def _compute_image_size(self):
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
index 87fac3cd640..3ccc9016a02 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
@@ -379,7 +379,12 @@ var FileWidget = SearchableMediaWidget.extend({
             }).open();
             optimizeDialog.on('attachment_updated', self, function (ev) {
                 optimizeDialog.off('closed');
-                resolve(ev.data);
+                if (self.$media[0].getAttribute('src') === attachment.image_src) {
+                    self.$media[0].src = ev.data.image_src;
+                }
+                Object.assign(attachment, ev.data);
+                $attachmentCell.find('img')[0].src = attachment.image_src;
+                resolve(attachment);
             });
             optimizeDialog.on('closed', self, function () {
                 self.noSave = true;