From 2fbb4cc9f2331afe349560cbf46220b7288879b8 Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Fri, 9 Oct 2020 09:05:48 +0000
Subject: [PATCH] [FIX] web_editor: fix background-images not being
 auto-optimized on drop

Previously, background-images were not properly optimized when inserted,
whereas they should be just like regular images. This commit fixes that.
It also changes the default quality (used for automatic optimization) to
75 as the difference is not usually very noticeable but can bring a big
decrease in image size.

task-2357332

closes odoo/odoo#59779

X-original-commit: 5d8c0aa0f7678f51e0a0931b0410a0273c7c7d1f
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/editor/image_processing.js  |  2 +-
 .../static/src/js/editor/snippets.options.js  | 23 ++++++++++++-------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/image_processing.js b/addons/web_editor/static/src/js/editor/image_processing.js
index baafd5f9903..7a30b60346e 100644
--- a/addons/web_editor/static/src/js/editor/image_processing.js
+++ b/addons/web_editor/static/src/js/editor/image_processing.js
@@ -201,7 +201,7 @@ async function applyModifications(img) {
     const data = Object.assign({
         glFilter: '',
         filter: '#0000',
-        quality: '95',
+        quality: '75',
     }, img.dataset);
     let {
         width,
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 2120cdb5e4c..e9a2ce3e781 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3184,7 +3184,7 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
             case 'glFilter':
                 return img.dataset.glFilter || "";
             case 'setQuality':
-                return img.dataset.quality || 95;
+                return img.dataset.quality || 75;
             case 'customFilter': {
                 const {filterProperty} = params;
                 const options = JSON.parse(img.dataset.filterOptions || "{}");
@@ -3278,6 +3278,18 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
         this.originalId = img.dataset.originalId;
         this.originalSrc = img.dataset.originalSrc;
     },
+    /**
+     * Sets the image's width to its suggested size.
+     *
+     * @private
+     */
+    async _autoOptimizeImage() {
+        await this._loadImageInfo();
+        await this._rerenderXML();
+        this._getImg().dataset.resizeWidth = this.optimizedWidth;
+        await this._applyOptions();
+        await this.updateUI();
+    },
     /**
      * Returns the image that is currently being modified.
      *
@@ -3358,11 +3370,7 @@ registry.ImageOptimize = ImageHandlerOption.extend({
      */
     async _onImageChanged(ev) {
         this.trigger_up('snippet_edition_request', {exec: async () => {
-            await this._loadImageInfo();
-            await this._rerenderXML();
-            this._getImg().dataset.resizeWidth = this.optimizedWidth;
-            await this._applyOptions();
-            await this.updateUI();
+            await this._autoOptimizeImage();
             this.trigger_up('cover_update');
         }});
     },
@@ -3463,8 +3471,7 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
     async _onBackgroundChanged(ev, previewMode) {
         if (!previewMode) {
             this.trigger_up('snippet_edition_request', {exec: async () => {
-                await this._loadImageInfo();
-                await this._rerenderXML();
+                await this._autoOptimizeImage();
             }});
         }
     },