[FIX] web_editor, *: fix image options visibility

*: website

Issue: from 15.0 onwards all image options are available on "/shop".

Details:

On 14.0, images options were removed for unsupported images (we had
a message "Quality Options Unavailable" - see [1]) and images related
options on old editor toolbar were hidden too.

On 14.4 and after [2], images options from the toolbar (crop, width,...)
were moved to a separate 'ImageTools' option and as a consequence, they
don't respect the same visibility rules as 'ImageOptimize'. Other
options were added in XML and they have the same issue, they are visible
as long as the target is an 'img'.

This is a list of options that should be available for unsupported or
partly supported images:

[A] For "t-field" images (shape & quality options are available only if
the image is supported for processing):

- Shape
- Filter
- Width (image width)
- Quality
- Transform (crop)

[B] For external images or images unsupported for processing:

- Description
- Tooltip
- Transform (crop, transform)
- width (CSS width)
- Alignment
- Style
- Padding
- Animate

[C] For illustrations:

- Same as [B]
- Dynamic colors

The goal of this commit is to fix this visibility issue on the JS code
of image options.

[1]: https://github.com/odoo/odoo/commit/84417a174bc2bb76730cc89783d3426a3a3b07d9
[2]: https://github.com/odoo/odoo/commit/d934b81aaae8d68b5579d1489b1fbe8ea347b4ed

task-2724946

closes odoo/odoo#90224

closes odoo/odoo#90832

X-original-commit: 8e6ca51ed3ebf121acfc7cb1ab992984d0764c90
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web_editor/static/src/js/editor/image_processing.js

@@ -456,6 +456,13 @@ function isImageSupportedForProcessing(mimetype, strict = false) {
     }
     return ['image/jpeg', 'image/png'].includes(mimetype);
 }
+/**
+ * @param {HTMLImageElement} img
+ * @returns {Boolean}
+ */
+function isImageSupportedForStyle(img) {
+    return img.parentElement && !img.parentElement.dataset.oeType;
+}
 
 /**
  * @param {Blob} blob
@@ -479,6 +486,7 @@ return {
     loadImage,
     removeOnImageChangeAttrs: [...cropperDataFields, ...modifierFields, 'aspectRatio'],
     isImageSupportedForProcessing,
+    isImageSupportedForStyle,
     createDataURL,
     isGif,
 };

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

@@ -25,6 +25,7 @@ const {
     applyModifications,
     removeOnImageChangeAttrs,
     isImageSupportedForProcessing,
+    isImageSupportedForStyle,
     createDataURL,
     isGif,
 } = require('web_editor.image_processing');
@@ -4912,6 +4913,9 @@ registry.ReplaceMedia = SnippetOptionWidget.extend({
      */
     async _computeWidgetVisibility(widgetName, params) {
         if (widgetName === 'media_link_opt') {
+            if (this.$target[0].matches('img')) {
+                return isImageSupportedForStyle(this.$target[0]);
+            }
             return !this.$target[0].classList.contains('media_iframe_video');
         }
         return this._super(...arguments);
@@ -5216,7 +5220,7 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
             const img = this._getImg();
             return this._isImageSupportedForProcessing(img, true);
         }
-        return this._super(...arguments);
+        return isImageSupportedForStyle(this._getImg());
     },
     /**
      * Indicates if an option should be applied only on supported mimetypes.
@@ -5593,6 +5597,10 @@ registry.ImageTools = ImageHandlerOption.extend({
         if (params.optionsPossibleValues.resetCrop) {
             return this._isCropped();
         }
+        if (params.optionsPossibleValues.crop) {
+            const img = this._getImg();
+            return isImageSupportedForStyle(img) || this._isImageSupportedForProcessing(img);
+        }
         return this._super(...arguments);
     },
     /**

addons/web_editor/views/snippets.xml

@@ -428,7 +428,7 @@
         </we-button-group>
     </div>
 
-    <div data-selector="img">
+    <div data-selector="img" data-exclude="[data-oe-type=image] > img">
         <we-input string="Description" class="o_we_large"
             data-select-attribute="" data-attribute-name="alt"
             placeholder="Alt tag"
@@ -574,7 +574,7 @@
         </we-button-group>
     </div>
 
-    <div data-selector="span.fa, i.fa, img">
+    <div data-selector="span.fa, i.fa, img" data-exclude="[data-oe-type=image] > img">
         <we-select string="Alignment" data-state-to-first-class="true">
             <we-button data-select-class="" title="Unalign">None</we-button>
             <we-button data-select-class="float-left" title="Align Left">Left</we-button>

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

@@ -11,6 +11,7 @@ const weUtils = require('web_editor.utils');
 var options = require('web_editor.snippets.options');
 const wLinkPopoverWidget = require('@website/js/widgets/link_popover_widget')[Symbol.for("default")];
 const wUtils = require('website.utils');
+const {isImageSupportedForStyle} = require('web_editor.image_processing');
 require('website.s_popup_options');
 
 var _t = core._t;
@@ -3087,6 +3088,15 @@ options.registry.WebsiteAnimate = options.Class.extend({
         }
         return this._super(...arguments);
     },
+    /**
+     * @override
+     */
+    _computeVisibility(methodName, params) {
+        if (this.$target[0].matches('img')) {
+            return isImageSupportedForStyle(this.$target[0]);
+        }
+        return this._super(...arguments);
+    },
 });
 
 /**