[FIX] web_editor: select optimized width format on crop reset

When cropping an image, the selected format is lost. Ideally, resetting
the crop would restore the format selected before cropping. However,
before this PR, resetting the crop loses the format size but keeps the
right mimetype.

This commit selects the "Suggested" (optimized width) format when
resetting the crop. This behavior is expected to be changed in a future
task to instead go back to the format that was selected before cropping.

This commit also fixes the way the original size is computed. If the
current image has a data-width attribute, use its value instead of
the naturalWidth property, as the latter actually corresponds in some
cases to the "optimized width".

task-3847470

Author: agau-odoo

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -6567,7 +6567,7 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
     async _getOriginalSize() {
         const image = this._getImg();
         const originalImage = await loadImage(this.originalSrc);
-        return image.dataset.width ? image.naturalWidth : originalImage.naturalWidth;
+        return Math.round(image.dataset.width) || originalImage.naturalWidth;
     },
     /**
      * @param {HTMLImageElement} img
@@ -6762,7 +6762,6 @@ 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,
@@ -6776,6 +6775,11 @@ registry.ImageTools = ImageHandlerOption.extend({
         imageCropWrapperElement.remove();
 
         await this._reapplyCurrentShape();
+
+        // Reset to "Suggested" format
+        await this._computeAvailableFormats(); // Update this.optimizedWidth
+        const optimizedMimetype = canExportCanvasAsWebp() ? "image/webp" : "image/jpeg";
+        await this.selectFormat(false, `${this.optimizedWidth} ${optimizedMimetype}`);
     },
     /**
      * Resets the image rotation and translation

addons/website/static/tests/tours/snippet_image_mimetype.js

@@ -354,12 +354,12 @@ function testImageSnippet(imageFormat, originalMimetype, formatMimetype) {
         ...testStepOnOff(setImageShape, removeImageShape, true),
 
         // Image crop
-        ...testStepOnOff(cropImage, removeImageCrop, false, false, "image/jpeg"),
+        ...testStepOnOff(cropImage, removeImageCrop, false, false, formatMimetype),
 
         // Image crop while shape on
         ...setImageShape(),
-        ...testStepOnOff(cropImage, removeImageCrop, true, true, "image/jpeg"),
-        ...removeImageShape("image/jpeg"),
+        ...testStepOnOff(cropImage, removeImageCrop, true, true, formatMimetype),
+        ...removeImageShape(formatMimetype),
     ];
 }
 
@@ -545,16 +545,16 @@ wTourUtils.registerWebsitePreviewTour(
         mockCanvasToDataURLStep,
         ...removeImageCrop("image/jpeg"), // !isChanged && Original format is smaller
         ...testImageMimetypeIs("image/jpeg"),
-        testFormatSnippetOption("800px (Original) jpeg"),
+        testFormatSnippetOption("690px (Suggested) jpeg"),
         ...setImageFormat("512 image/jpeg"),
 
         // No webp -> webp
         ...cropImage("image/jpeg"),
         ...testImageMimetypeIs("image/jpeg"),
         unmockCanvasToDataURLStep,
-        ...removeImageCrop("image/jpeg"),
-        ...testImageMimetypeIs("image/jpeg"),
-        testFormatSnippetOption("800px (Original) jpeg"),
+        ...removeImageCrop("image/webp"),
+        ...testImageMimetypeIs("image/webp"),
+        testFormatSnippetOption("690px (Suggested) webp"),
     ]
 );