[FIX] web_editor: fix background layers buttons

Example to reproduce:

Drop the "Cover" snippet and try to remove the background
image. Clicking on image button has to be done 3 times to land on the
correct result:

- First click removes image, but not filter and leaves both buttons
  checked
- Second click removes the filter and unchecks its button.
- Third click unchecks the image button.

It should be one click to remove image, filter and uncheck both buttons.

The goal of this commit is to prevent _applyOptions() from setting
background-image values if image is not optimizable. This filter will
solve the issues since empty values (badly parsed by getBgImageURL())
won't be added as background urls.

task-2312878

closes odoo/odoo#62984

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 17 insertions, 8 deletions

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 d3365f607ef..40da59577a1 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3315,7 +3315,9 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
         $weight.find('b').text(`${(weight / 1024).toFixed(1)} kb`);
         $weight.removeClass('d-none');
         img.classList.add('o_modified_image_to_save');
-        return loadImage(dataURL, img);
+        const loadedImg = await loadImage(dataURL, img);
+        this._applyImage(loadedImg);
+        return loadedImg;
     },
     /**
      * Loads the image's attachment info.
@@ -3361,6 +3363,14 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
      * @returns {Int} the maximum width at which the image can be displayed
      */
     _computeMaxDisplayWidth() {},
+    /**
+     * Use the processed image when it's needed in the DOM.
+     *
+     * @private
+     * @abstract
+     * @param {HTMLImageElement} img
+     */
+    _applyImage(img) {},
 });
 
 /**
@@ -3492,13 +3502,6 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
         return 1920;
     },
     /**
-     * @override
-     */
-    async _applyOptions() {
-        await this._super(...arguments);
-        this.$target.css('background-image', `url('${this._getImg().getAttribute('src')}')`);
-    },
-    /**
      * Initializes this.img to an image with the background image url as src.
      *
      * @override
@@ -3513,6 +3516,12 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
         this.img.src = src.startsWith('/') ? src : '';
         return await this._super(...arguments);
     },
+    /**
+     * @override
+     */
+    _applyImage(img) {
+        this.$target.css('background-image', `url('${img.getAttribute('src')}')`);
+    },
 
     //--------------------------------------------------------------------------
     // Handlers