[FIX] web_editor: adapt warning when quality options are unavailable

Previously, when quality options were not available, the option would
simply not be displayed. User feedback suggests that this is confusing,
as for example, in the case of modifying the image in a t-field, quality
options would not be available when starting the editor, but would
become available when picking the image again in the media-dialog.

Some leftover code allowed to display a warning about why the quality
options were not available in the case where the image is not local to
the database. This warning has been adapted to display a more
informative message about why quality options are not available, as well
as suggest a solution:
- External image => download the image and upload it in odoo
- t-field => "You need to choose this image again in the media-dialog or
reupload it to have access to quality options"
- Images that are in an unsupported format (anything other than PNG or
JPEG) => short explanation that quality options are only available on
PNG and JPEG images.

task-2466819
part of odoo/odoo#66732

2 files changed, 21 insertions, 9 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 841383c589d..8d5e385408d 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3228,11 +3228,7 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
      * @override
      */
     _computeVisibility() {
-        const img = this._getImg();
-        if (!['image/jpeg', 'image/png'].includes(img.dataset.mimetype)) {
-            return false;
-        }
-        const src = img.getAttribute('src');
+        const src = this._getImg().getAttribute('src');
         return src && src !== '/';
     },
     /**
@@ -3273,23 +3269,35 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
      * @override
      */
     async _renderCustomXML(uiFragment) {
-        if (!this.originalSrc) {
+        const isLocalURL = href => new URL(href, window.location.origin).origin === window.location.origin;
+
+        const img = this._getImg();
+        if (!this.originalSrc || !['image/png', 'image/jpeg'].includes(img.dataset.mimetype)) {
             return [...uiFragment.childNodes].forEach(node => {
                 if (node.matches('.o_we_external_warning')) {
                     node.classList.remove('d-none');
+                    if (isLocalURL(img.getAttribute('src'))) {
+                        const title = node.querySelector('we-title');
+                        title.textContent = ` ${_t("Quality options unavailable")}`;
+                        $(title).prepend('<i class="fa fa-warning" />');
+                        if (img.dataset.mimetype) {
+                            title.setAttribute('title', _t("Only PNG and JPEG images support quality options and image filtering"));
+                        } else {
+                            title.setAttribute('title', _t("Due to technical limitations, you can only change optimization settings on this image by choosing it again in the media-dialog or reuploading it (double click on the image)"));
+                        }
+                    }
                 } else {
                     node.remove();
                 }
             });
         }
-        const img = this._getImg();
         const $select = $(uiFragment).find('we-select[data-name=width_select_opt]');
         (await this._computeAvailableWidths()).forEach(([value, label]) => {
             $select.append(`<we-button data-select-width="${value}">${label}</we-button>`);
         });
-        const qualityRange = uiFragment.querySelector('we-range');
+
         if (img.dataset.mimetype !== 'image/jpeg') {
-            qualityRange.remove();
+            uiFragment.querySelector('we-range[data-set-quality]').remove();
         }
     },
     /**
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index d107f9cf489..3e4eb922d3a 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -1283,6 +1283,10 @@ body.editor_enable.editor_has_snippets {
             }
         }
 
+        .o_we_external_warning {
+            margin-top: $o-we-sidebar-content-field-spacing;
+        }
+
         .o_we_tag {
             padding: ($o-we-sidebar-content-field-label-spacing / 2) $o-we-sidebar-content-field-label-spacing;
             border-radius: 5px;