[FIX] web_editor, website, *: avoid implicit conversions when possible

agau-odoo · agau-odoo · commit 60e25f7e3a5d · 2024-08-21T13:09:54.000+02:00
*: website_event

This commit deals with implicit conversion when converting to webp isn't
available:
- When trying to generate alternative webp attachments, don't
- In website, suggest jpeg alternatives instead of webp. When the
  current image's format isn't available on this browser, display it in
  the options but don't allow selecting it. When applying a
  modification, use its same-size counterpart (webp &lt;=&gt; jpeg) instead.

task-3847470
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -32,6 +32,7 @@ import {
     getDataURLBinarySize,
 } from "@web_editor/js/editor/image_processing";
 import * as OdooEditorLib from "@web_editor/js/editor/odoo-editor/src/OdooEditor";
+import { canExportCanvasAsWebp } from "@web/core/utils/image_processing";
 import { pick } from "@web/core/utils/objects";
 import { _t } from "@web/core/l10n/translation";
 import {
@@ -6205,18 +6206,11 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
     /**
      * @see this.selectClass for parameters
      */
-    selectFormat(previewMode, widgetValue, params) {
-        const values = widgetValue.split(' ');
+    async selectFormat(previewMode, widgetValue, params) {
+        const [resizeWidth, mimetype] = widgetValue.split(" ");
         const image = this._getImg();
-        image.dataset.resizeWidth = values[0];
-        if (image.dataset.shape) {
-            // If the image has a shape, modify its originalMimetype attribute.
-            image.dataset.originalMimetype = values[1];
-        } else {
-            // If the image does not have a shape, modify its mimetype
-            // attribute.
-            image.dataset.mimetype = values[1];
-        }
+        image.dataset.resizeWidth = resizeWidth;
+        this._setImageMimetype(image, mimetype);
         return this._applyOptions();
     },
     /**
@@ -6285,17 +6279,8 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
         });
 
         switch (methodName) {
-            case "selectFormat": {
-                const currentImageMimetype = this._getImageMimetype(img);
-                const availableFormats = (await this._computeAvailableFormats()).map(
-                    ([value, [, targetFormat]]) => `${Math.round(value)} ${targetFormat}`
-                );
-                const currentFormatSize = img.naturalWidth.toString();
-                const currentFormat = `${currentFormatSize} ${currentImageMimetype}`;
-                return availableFormats.includes(currentFormat)
-                    ? currentFormat
-                    : availableFormats.find((format) => format.startsWith(currentFormatSize));
-            }
+            case 'selectFormat':
+                return this._getCurrentFormat(img);
             case 'setFilter':
                 return img.dataset.filter;
             case 'glFilter':
@@ -6324,9 +6309,16 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
             return;
         }
         const $select = $(uiFragment).find('we-select[data-name=format_select_opt]');
-        (await this._computeAvailableFormats()).forEach(([value, [label, targetFormat]]) => {
-            $select.append(`<we-button data-select-format="${Math.round(value)} ${targetFormat}" class="o_we_badge_at_end">${label} <span class="badge rounded-pill text-bg-dark">${targetFormat.split('/')[1]}</span></we-button>`);
-        });
+        (await this._computeAvailableFormats()).forEach(
+            ([value, [label, targetFormat, isDisabled]]) => {
+                const selectFormat = `${Math.round(value)} ${targetFormat}`;
+                const unavailableOptionDependencies = isDisabled ? ' data-dependencies="fake"' : "";
+                const mimetypeBadge = targetFormat.split("/")[1];
+                $select.append(
+                    `<we-button data-select-format="${selectFormat}" class="o_we_badge_at_end"${unavailableOptionDependencies}>${label} <span class="badge rounded-pill text-bg-dark">${mimetypeBadge}</span></we-button>`
+                );
+            }
+        );
 
         if (!['image/jpeg', 'image/webp'].includes(this._getImageMimetype(img))) {
             const optQuality = uiFragment.querySelector('we-range[data-set-quality]');
@@ -6346,28 +6338,53 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
             return [];
         }
         const img = this._getImg();
-        const original = await loadImage(this.originalSrc);
-        const maxWidth = img.dataset.width ? img.naturalWidth : original.naturalWidth;
-        const optimizedWidth = Math.min(maxWidth, this._computeMaxDisplayWidth());
+        const originalSize = await this._getOriginalSize();
+        const optimizedWidth = Math.min(originalSize, this._computeMaxDisplayWidth());
         this.optimizedWidth = optimizedWidth;
-        const widths = {
-            128: ['128px', 'image/webp'],
-            256: ['256px', 'image/webp'],
-            512: ['512px', 'image/webp'],
-            1024: ['1024px', 'image/webp'],
-            1920: ['1920px', 'image/webp'],
+        const optimizedMimetype = canExportCanvasAsWebp() ? "image/webp" : "image/jpeg";
+        const formatsByWidth = {
+            128: ["128px", optimizedMimetype],
+            256: ["256px", optimizedMimetype],
+            512: ["512px", optimizedMimetype],
+            1024: ["1024px", optimizedMimetype],
+            1920: ["1920px", optimizedMimetype],
         };
-        widths[img.naturalWidth] = [_t("%spx", img.naturalWidth), 'image/webp'];
-        widths[optimizedWidth] = [_t("%spx (Suggested)", optimizedWidth), 'image/webp'];
+        formatsByWidth[img.naturalWidth] = [_t("%spx", img.naturalWidth), optimizedMimetype];
+        formatsByWidth[optimizedWidth] = [
+            _t("%spx (Suggested)", optimizedWidth),
+            optimizedMimetype,
+        ];
         const mimetypeBeforeConversion = img.dataset.mimetypeBeforeConversion;
-        widths[maxWidth] = [_t("%spx (Original)", maxWidth), mimetypeBeforeConversion];
-        if (mimetypeBeforeConversion !== "image/webp") {
-            // Avoid a key collision by subtracting 0.1 - putting the webp
-            // above the original format one of the same size.
-            widths[maxWidth - 0.1] = [_t("%spx", maxWidth), 'image/webp'];
-        }
-        return Object.entries(widths)
-            .filter(([width]) => width <= maxWidth)
+        formatsByWidth[originalSize] = [
+            _t("%spx (Original)", originalSize),
+            mimetypeBeforeConversion,
+        ];
+        if (mimetypeBeforeConversion !== optimizedMimetype) {
+            // Avoid key collision and ensure the optimized format is above the
+            // original one of the same size.
+            formatsByWidth[originalSize - 0.1] = [_t("%spx", originalSize), optimizedMimetype];
+        }
+
+        // If the currently selected format is unavailable, add it as an
+        // unselectable option.
+        // This handles cases such as:
+        // - Switching between a browser where webp is available and one where
+        //   webp is not
+        // - Changing the specs of the available formats, where some previously
+        //   used format cannot be selected anymore
+        // - External modification of the format
+        const currentFormat = this._getCurrentFormat(img);
+        const [selectedSize, selectedMimetype] = currentFormat?.split(" ") || [];
+        if (
+            selectedSize &&
+            selectedMimetype &&
+            (!formatsByWidth[selectedSize] || formatsByWidth[selectedSize][1] !== selectedMimetype)
+        ) {
+            formatsByWidth[selectedSize - 0.2] = [_t("%spx", selectedSize), selectedMimetype, true];
+        }
+
+        return Object.entries(formatsByWidth)
+            .filter(([width]) => width <= originalSize)
             .sort(([v1], [v2]) => v1 - v2);
     },
     /**
@@ -6394,9 +6411,12 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
             delete img.dataset.mimetype;
             return;
         }
+        const targetMimetype = await this._getImageTargetMimetype();
         const { dataURL, mimetype } = await applyModifications(
             img,
-            { mimetype: this._getImageMimetype(img) },
+            {
+                mimetype: targetMimetype,
+            },
             true // TODO: remove in master
         );
         this._filesize = getDataURLBinarySize(dataURL) / 1024;
@@ -6438,12 +6458,12 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
         await this._loadImageInfo();
         await this._rerenderXML();
         const img = this._getImg();
-        if (!['image/gif', 'image/svg+xml'].includes(img.dataset.mimetype)) {
+        if (
+            !["image/gif", "image/svg+xml"].includes(img.dataset.mimetype) ||
+            (img.dataset.shape && img.dataset.originalMimetype !== "image/gif")
+        ) {
             // Convert to recommended format and width.
-            img.dataset.mimetype = 'image/webp';
-            img.dataset.resizeWidth = this.optimizedWidth;
-        } else if (img.dataset.shape && img.dataset.originalMimetype !== "image/gif") {
-            img.dataset.originalMimetype = "image/webp";
+            this._setImageMimetype(img, canExportCanvasAsWebp() ? "image/webp" : "image/jpeg");
             img.dataset.resizeWidth = this.optimizedWidth;
         }
         await this._applyOptions();
@@ -6530,6 +6550,70 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
             || params.optionsPossibleValues.setQuality
             || widgetName === 'format_select_opt';
     },
+    /**
+     * @param {HTMLImageElement} [image] Override image element.
+     * @return {string} The image's current width.
+     * @private
+     */
+    _getImageWidth(image = this._getImg()) {
+        return Math.trunc(
+            image.dataset.resizeWidth || image.dataset.width || image.naturalWidth
+        ).toString();
+    },
+    /**
+     * @return {Promise<number>} The image's original size.
+     * @private
+     */
+    async _getOriginalSize() {
+        const image = this._getImg();
+        const originalImage = await loadImage(this.originalSrc);
+        return image.dataset.width ? image.naturalWidth : originalImage.naturalWidth;
+    },
+    /**
+     * @param {HTMLImageElement} img
+     * @return {string} The image's current format (widget value).
+     * @private
+     */
+    _getCurrentFormat(img) {
+        return `${img.naturalWidth} ${this._getImageMimetype(img)}`;
+    },
+    /**
+     * Returns whether the format is the image's original format.
+     *
+     * @param {string} size
+     * @param {string} mimetype
+     * @param {HTMLImageElement} [image] Override image element.
+     * @return {Promise<boolean>}
+     * @private
+     */
+    async _isOriginalFormat(size, mimetype, image = this._getImg()) {
+        const originalMimetype = image.dataset.mimetypeBeforeConversion;
+        if (mimetype !== originalMimetype) {
+            return false;
+        }
+
+        const originalSize = await this._getOriginalSize();
+        return size.toString() === originalSize.toString();
+    },
+    /**
+     * Get the appropriate mimetype to applyModifications.
+     * Avoid implicit conversions.
+     * Only target available formats.
+     *
+     * @param {HTMLImageElement} [image] Override image element.
+     * @private
+     */
+    async _getImageTargetMimetype(image = this._getImg()) {
+        const currentSize = this._getImageWidth(image);
+        const currentMimetype = this._getImageMimetype(image);
+
+        const isOriginalFormat = await this._isOriginalFormat(currentSize, currentMimetype);
+        if (!isOriginalFormat && ["image/webp", "image/jpeg"].includes(currentMimetype)) {
+            return canExportCanvasAsWebp() ? "image/webp" : "image/jpeg";
+        } else {
+            return currentMimetype;
+        }
+    },
 });
 
 /**
@@ -6614,7 +6698,7 @@ registry.ImageTools = ImageHandlerOption.extend({
         await new Promise(resolve => {
             this.$target.one('image_cropper_destroyed', async () => {
                 if (isGif(this._getImageMimetype(img))) {
-                    img.dataset[img.dataset.shape ? 'originalMimetype' : 'mimetype'] = 'image/png';
+                    this._setImageMimetype(img, "image/png");
                 }
                 await this._reapplyCurrentShape();
                 resolve();
@@ -6678,6 +6762,7 @@ registry.ImageTools = ImageHandlerOption.extend({
         // temporarily into the body.
         const imageCropWrapperElement = document.createElement('div');
         document.body.append(imageCropWrapperElement);
+        img.dataset.targetMimetype = img.dataset.mimetypeBeforeConversion;
         const imageCropWrapper = await attachComponent(this, imageCropWrapperElement, ImageCrop, {
             rpc: this.rpc,
             activeOnStart: true,
@@ -6745,10 +6830,11 @@ registry.ImageTools = ImageHandlerOption.extend({
             }
         } else {
             // Re-applying the modifications and deleting the shapes
+            const targetMimetype = await this._getImageTargetMimetype();
             const { dataURL, mimetype } = await applyModifications(
                 img,
                 {
-                    mimetype: this._getImageMimetype(img),
+                    mimetype: targetMimetype,
                 },
                 true // TODO: remove in master
             );
@@ -7124,10 +7210,11 @@ registry.ImageTools = ImageHandlerOption.extend({
         // We will store the image in base64 inside the SVG.
         // applyModifications will return a dataURL with the current filters
         // and size options.
+        const targetMimetype = await this._getImageTargetMimetype(img);
         const { dataURL: imgDataURL, mimetype } = await applyModifications(
             img,
             {
-                mimetype: this._getImageMimetype(img),
+                mimetype: targetMimetype,
                 perspective: svg.dataset.imgPerspective || null,
                 imgAspectRatio: svg.dataset.imgAspectRatio || null,
                 svgAspectRatio: svgAspectRatio,
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -20,7 +20,7 @@ import weUtils from "@web_editor/js/common/utils";
 import { isSelectionInSelectors, peek } from '@web_editor/js/editor/odoo-editor/src/utils/utils';
 import { PeerToPeer, RequestError } from "@web_editor/js/wysiwyg/PeerToPeer";
 import { uniqueId } from "@web/core/utils/functions";
-import { convertCanvasToDataURL } from "@web/core/utils/image_processing";
+import { canExportCanvasAsWebp, convertCanvasToDataURL } from "@web/core/utils/image_processing";
 import { groupBy } from "@web/core/utils/arrays";
 import { debounce } from "@web/core/utils/timing";
 import { registry } from "@web/core/registry";
@@ -3526,13 +3526,15 @@ export class Wysiwyg extends Component {
 
                 const generateAltData = (mimetype) => {
                     const imageData = convertCanvasToDataURL(canvas, mimetype, 0.75);
-                    if (!altData[size]) {
-                        altData[size] = {};
+                    if (imageData.mimetype === mimetype) {
+                        if (!altData[size]) {
+                            altData[size] = {};
+                        }
+                        altData[size][imageData.mimetype] = imageData.base64Part;
                     }
-                    altData[size][imageData.mimetype] = imageData.base64Part;
                 };
                 generateAltData("image/jpeg");
-                if (size !== originalSize) {
+                if (size !== originalSize && canExportCanvasAsWebp()) {
                     generateAltData("image/webp");
                 }
             }
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
@@ -4,6 +4,7 @@ import { loadCSS } from "@web/core/assets";
 import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
 import { Dialog } from "@web/core/dialog/dialog";
 import { useChildRef } from "@web/core/utils/hooks";
+import { canExportCanvasAsWebp } from "@web/core/utils/image_processing";
 import weUtils from "@web_editor/js/common/utils";
 import options from "@web_editor/js/editor/snippets.options";
 import { NavbarLinkPopoverWidget } from "@website/js/widgets/link_popover_widget";
@@ -2991,7 +2992,7 @@ options.registry.CoverProperties = options.Class.extend({
                     "image/gif",
                     "image/svg+xml",
                     "image/webp",
-                ].includes(originalMimetype)) {
+                ].includes(originalMimetype) && canExportCanvasAsWebp()) {
                     // Convert to webp but keep original width.
                     const { dataURL, mimetype } = await applyModifications(
                         imgEl,
diff --git a/addons/website/static/src/snippets/s_image_gallery/options.js b/addons/website/static/src/snippets/s_image_gallery/options.js
@@ -1,5 +1,6 @@
 /** @odoo-module **/
 
+import { canExportCanvasAsWebp } from "@web/core/utils/image_processing";
 import { MediaDialog } from "@web_editor/components/media_dialog/media_dialog";
 import options from "@web_editor/js/editor/snippets.options";
 import wUtils from '@website/js/utils';
@@ -526,7 +527,7 @@ options.registry.GalleryImageList = options.registry.GalleryLayout.extend({
                                     "image/gif",
                                     "image/svg+xml",
                                     "image/webp",
-                                ].includes(originalMimetype)) {
+                                ].includes(originalMimetype) && canExportCanvasAsWebp()) {
                                     // Convert to webp but keep original width.
                                     applyModifications(
                                         imgEl,
diff --git a/addons/website/static/tests/tours/snippet_image_mimetype.js b/addons/website/static/tests/tours/snippet_image_mimetype.js
diff --git a/addons/website_event/static/tests/tours/website_event_cover_image_mimetype.js b/addons/website_event/static/tests/tours/website_event_cover_image_mimetype.js
