[IMP] web_editor: improve image optimization workflow in media dialog

Previously, when selecting an image, the user could optimize their
images by clicking a little cog icon in the media dialog. They would
also be prompted to optimize their images when uploading them. In most
cases, it makes a lot more sense to always save the original in the
database, and optimize the original whenever it's dropped in the page
automatically.

A second problem is that when using the optimization feature, optimized
images would be displayed along the originals by default, resulting in a
lot of duplicates while browsing the media dialog.

This commit changes both of these things:

- By default, when uploading an image, the original uploaded image is
  used. The user can still optimize their image manually through the
  media-dialog by using the cog icon. When choosing an image in the
  media-dialog, if it's not already an optimized image, an optimized copy
  is automatically created and used instead.

- Optimized images are now hidden by default, in the media dialog, and
  can be shown by clicking a checkbox at the top of the modal when in
  debug mode

task-2091417
closes odoo/odoo#45174

1 files changed, 7 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 2c6e029f97a..7091f7c04cf 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -269,6 +269,13 @@ body .modal {
                 box-shadow: 0px 0px 2px 2px $o-brand-primary;
             }
 
+            .o_we_attachment_optimized .badge {
+                position: absolute;
+                bottom: 0;
+                right: 0;
+                margin: 2px;
+            }
+
             .font-icons-icons {
                 > span {
                     text-align: center;