[FIX] website, html_builder: various fixes

This commit contains multiple changes squashed together, coming from
various pull requests on master-mysterious-egg. These changes includes:

- No image in colorpicker and working gradient editor for preset background
- Clean carousel related tests, remove repeated ones and merge/rename files
- Fix logo adding/removing option
- Use only "color" tabs in countdown color picker options
- Add support for compact hex colors (e.g. #fff)
- Fix color styling
- Fix setExtraStep
- Auto-optimize image upon replace media
- Adapt extra product image to also rely on openMediaDialog
- Use correct mimetype fields from dataset
- Adapt tests
- Refresh Dynamic Snippet Carousel when scrolling mode is changed

Co-authored-by: Alessandro Lupo <[email protected]>
Co-authored-by: Benoit Socias <[email protected]>
Co-authored-by: divy-odoo <[email protected]>
Co-authored-by: emge-odoo <[email protected]>
Co-authored-by: FrancoisGe <[email protected]>
Co-authored-by: Jinjiu Liu <[email protected]>
Co-authored-by: Keval Bhatt <[email protected]>
Co-authored-by: Serhii Rubanskyi - seru <[email protected]>

Author: 8 people

addons/html_builder/static/src/core/core_builder_action_plugin.js

@@ -1,5 +1,10 @@
 import { Plugin } from "@html_editor/plugin";
-import { CSS_SHORTHANDS, applyNeededCss, areCssValuesEqual } from "@html_builder/utils/utils_css";
+import {
+    CSS_SHORTHANDS,
+    applyNeededCss,
+    areCssValuesEqual,
+    normalizeColor,
+} from "@html_builder/utils/utils_css";
 
 export function withoutTransition(editingElement, callback) {
     if (editingElement.classList.contains("o_we_force_no_transition")) {
@@ -263,17 +268,27 @@ const attributeAction = {
 };
 
 const dataAttributeAction = {
-    getValue: ({ editingElement, params: { mainParam: attributeName } = {} }) =>
-        editingElement.dataset[attributeName],
+    // if it's a color action, we have to normalize the value
+    getValue: ({ editingElement, params: { mainParam: attributeName } = {} }) => {
+        if (!/(^color|Color)($|(?=[A-Z]))/.test(attributeName)) {
+            return editingElement.dataset[attributeName];
+        }
+        const color = normalizeColor(editingElement.dataset[attributeName]);
+        return color;
+    },
     isApplied: ({ editingElement, params: { mainParam: attributeName } = {}, value }) => {
         if (value) {
+            const match = value.match(/^var\(--(.*)\)$/);
+            value = match ? match[1] : value;
             return editingElement.dataset[attributeName] === value;
         } else {
             return !(attributeName in editingElement.dataset);
         }
     },
     apply: ({ editingElement, params: { mainParam: attributeName } = {}, value }) => {
         if (value) {
+            const match = value.match(/^var\(--(.*)\)$/);
+            value = match ? match[1] : value;
             editingElement.dataset[attributeName] = value;
         } else {
             delete editingElement.dataset[attributeName];

addons/html_editor/static/src/main/font/color_plugin.js

@@ -23,6 +23,7 @@ import {
     rgbaToHex,
     COLOR_COMBINATION_CLASSES_REGEX,
 } from "@web/core/utils/colors";
+import { backgroundImageCssToParts } from "@html_editor/utils/image";
 import { ColorSelector } from "./color_selector";
 
 const RGBA_OPACITY = 0.6;
@@ -136,7 +137,8 @@ export class ColorPlugin extends Plugin {
     getElementColors(el) {
         const elStyle = getComputedStyle(el);
         const backgroundImage = elStyle.backgroundImage;
-        const hasGradient = isColorGradient(backgroundImage);
+        const gradient = backgroundImageCssToParts(backgroundImage).gradient;
+        const hasGradient = isColorGradient(gradient);
         const hasTextGradientClass = el.classList.contains("text-gradient");
 
         let backgroundColor = elStyle.backgroundColor;
@@ -155,9 +157,9 @@ export class ColorPlugin extends Plugin {
         }
 
         return {
-            color: hasGradient && hasTextGradientClass ? backgroundImage : rgbaToHex(elStyle.color),
+            color: hasGradient && hasTextGradientClass ? gradient : rgbaToHex(elStyle.color),
             backgroundColor:
-                hasGradient && !hasTextGradientClass ? backgroundImage : rgbaToHex(backgroundColor),
+                hasGradient && !hasTextGradientClass ? gradient : rgbaToHex(backgroundColor),
         };
     }
 

addons/html_editor/static/src/main/media/image_crop_plugin.js

@@ -42,10 +42,10 @@ export class ImageCropPlugin extends Plugin {
                 onSave: async (newDataset) => {
                     // todo: should use the mutex if there is one?
                     const updateImageAttributes =
-                        await this.dependencies.imagePostProcess.processImage(
-                            selectedImg,
-                            newDataset
-                        );
+                        await this.dependencies.imagePostProcess.processImage({
+                            img: selectedImg,
+                            newDataset,
+                        });
                     updateImageAttributes();
                     this.dependencies.history.addStep();
                 },

addons/html_editor/static/src/main/media/image_post_process_plugin.js

@@ -24,14 +24,21 @@ export class ImagePostProcessPlugin extends Plugin {
      *
      * @param {HTMLImageElement} img the image to which modifications are applied
      * @param {Object} newDataset an object containing the modifications to apply
+     * @param {Function} [onImageInfoLoaded] can be used to fill
+     * newDataset after having access to image info, return true to cancel call
      * @returns {Function} callback that sets dataURL of the image with the
      * applied modifications to `img` element
      */
-    async processImage(img, newDataset = {}) {
+    async processImage({ img, newDataset = {}, onImageInfoLoaded }) {
         const processContext = {};
         if (!newDataset.originalSrc || !newDataset.mimetypeBeforeConversion) {
             Object.assign(newDataset, await loadImageInfo(img));
         }
+        if (onImageInfoLoaded) {
+            if (await onImageInfoLoaded(newDataset)) {
+                return () => {};
+            }
+        }
         for (const cb of this.getResource("process_image_warmup_handlers")) {
             const addedContext = await cb(img, newDataset);
             if (addedContext) {

addons/html_editor/static/src/main/media/media_dialog/image_selector.js

@@ -94,7 +94,7 @@ export class ImageSelector extends FileSelector {
 
         this.fileMimetypes = IMAGE_MIMETYPES.join(",");
         this.isImageField =
-            !!this.props.media?.closest("[data-oe-type=image]") || !!this.env.addFieldImage;
+            !!this.props.media?.closest("[data-oe-type=image]") || !!this.props.addFieldImage;
     }
 
     get canLoadMore() {

addons/html_editor/static/src/main/media/media_dialog/media_dialog.js

@@ -133,6 +133,7 @@ export class MediaDialog extends Component {
             this.addTab(TABS.IMAGES, {
                 useMediaLibrary: this.props.useMediaLibrary,
                 multiSelect: this.props.multiImages,
+                addFieldImage: this.props.addFieldImage,
             });
         }
         if (!noIcons) {

addons/html_editor/static/src/main/media/media_plugin.js

@@ -126,13 +126,12 @@ export class MediaPlugin extends Plugin {
         }
     }
 
-    onSaveMediaDialog(element, { node }) {
+    async onSaveMediaDialog(element, { node }) {
         if (!element) {
             // @todo @phoenix to remove
             throw new Error("Element is required: onSaveMediaDialog");
             // return;
         }
-
         if (node) {
             const changedIcon = isIconElement(node) && isIconElement(element);
             if (changedIcon) {
@@ -151,11 +150,25 @@ export class MediaPlugin extends Plugin {
         // Collapse selection after the inserted/replaced element.
         const [anchorNode, anchorOffset] = rightPos(element);
         this.dependencies.selection.setSelection({ anchorNode, anchorOffset });
-        this.delegateTo("afer_save_media_dialog_handlers", element);
+        this.delegateTo("after_save_media_dialog_handlers", element);
         this.dependencies.history.addStep();
     }
 
     openMediaDialog(params = {}, editableEl = null) {
+        const oldSave =
+            params.save || ((element) => this.onSaveMediaDialog(element, { node: params.node }));
+        params.save = async (...args) => {
+            const selection = args[0];
+            const elements = selection
+                ? selection[Symbol.iterator]
+                    ? selection
+                    : [selection]
+                : [];
+            for (const onMediaDialogSaved of this.getResource("on_media_dialog_saved_handlers")) {
+                await onMediaDialogSaved(elements, { node: params.node });
+            }
+            return oldSave(...args);
+        };
         const { resModel, resId, field, type } = this.getRecordInfo(editableEl);
         const mediaDialogClosedPromise = this.dependencies.dialog.addDialog(MediaDialog, {
             resModel,
@@ -165,9 +178,6 @@ export class MediaPlugin extends Plugin {
                 ((resModel === "ir.ui.view" && field === "arch") || type === "html")
             ), // @todo @phoenix: should be removed and moved to config.mediaModalParams
             media: params.node,
-            save: (element) => {
-                this.onSaveMediaDialog(element, { node: params.node });
-            },
             onAttachmentChange: this.config.onAttachmentChange || (() => {}),
             noVideos: !this.config.allowMediaDialogVideo,
             noImages: !this.config.allowImage,

addons/html_editor/static/src/others/embedded_components/plugins/caption_plugin/caption_plugin.js

@@ -37,7 +37,7 @@ export class CaptionPlugin extends Plugin {
         clean_for_save_handlers: this.cleanForSave.bind(this),
         mount_component_handlers: this.setupNewCaption.bind(this),
         delete_image_handlers: this.handleDeleteImage.bind(this),
-        afer_save_media_dialog_handlers: this.onImageReplaced.bind(this),
+        after_save_media_dialog_handlers: this.onImageReplaced.bind(this),
         hints: [{ selector: "FIGCAPTION", text: _t("Write a caption...") }],
         unsplittable_node_predicates: [
             (node) => ["FIGURE", "FIGCAPTION"].includes(node.nodeName), // avoid merge

addons/web/static/src/core/utils/colors.js

@@ -217,6 +217,16 @@ export function convertCSSColorToRgba(cssColor) {
     }
 
     // Otherwise, check if cssColor is an hexadecimal code color
+    // first check if it's in its compact form (e.g. #FFF)
+    if (/^#([0-9a-f]{3})$/i.test(cssColor)) {
+        return {
+            red: parseInt(cssColor[1] + cssColor[1], 16),
+            green: parseInt(cssColor[2] + cssColor[2], 16),
+            blue: parseInt(cssColor[3] + cssColor[3], 16),
+            opacity: 100,
+        };
+    }
+
     if (/^#([0-9A-F]{6}|[0-9A-F]{8})$/i.test(cssColor)) {
         return {
             red: parseInt(cssColor.substr(1, 2), 16),

addons/website/static/src/builder/plugins/background_option/background_image_option_plugin.js

@@ -77,7 +77,7 @@ export class BackgroundImageOptionPlugin extends Plugin {
                     editingElement.querySelector(".o_we_bg_filter")?.remove();
                     this.applyReplaceBackgroundImage.bind(this)({
                         editingElement: editingElement,
-                        loadResult: "",
+                        loadResult: undefined,
                         params: { forceClean: true },
                     });
                     this.dispatchTo("on_bg_image_hide_handlers", editingElement);
@@ -134,31 +134,38 @@ export class BackgroundImageOptionPlugin extends Plugin {
             newEditingEl.classList.toggle("o_modified_image_to_save", isModifiedImage);
         }
     }
-    loadReplaceBackgroundImage() {
+    loadReplaceBackgroundImage({ editingElement }) {
         return new Promise((resolve) => {
             const onClose = this.dependencies.media.openMediaDialog({
                 onlyImages: true,
-                save: (imageEl) => {
-                    resolve(imageEl.getAttribute("src"));
+                node: editingElement,
+                save: async (imageEl) => {
+                    resolve(imageEl);
                 },
             });
             onClose.then(resolve);
         });
     }
     applyReplaceBackgroundImage({
         editingElement,
-        loadResult: imageSrc,
+        loadResult: imageEl,
         params: { forceClean = false },
     }) {
-        if (!forceClean && !imageSrc) {
+        if (!forceClean && !imageEl) {
             // Do nothing: no images has been selected on the media dialog
             return;
         }
-        this.setImageBackground(editingElement, imageSrc);
+        const src = imageEl?.src || "";
+        this.setImageBackground(editingElement, src);
         for (const attr of removeOnImageChangeAttrs) {
             delete editingElement.dataset[attr];
         }
-        // TODO: call _autoOptimizeImage of the ImageHandlersOption
+        if (imageEl) {
+            if (src.startsWith("data:")) {
+                editingElement.classList.add("o_modified_image_to_save");
+            }
+            Object.assign(editingElement.dataset, imageEl.dataset);
+        }
     }
     /**
      *