[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

2 files changed, 6 insertions, 3 deletions

diff --git a/addons/web_editor/static/tests/field_html_tests.js b/addons/web_editor/static/tests/field_html_tests.js
index e72b836d83c..7e49f7fce01 100644
--- a/addons/web_editor/static/tests/field_html_tests.js
+++ b/addons/web_editor/static/tests/field_html_tests.js
@@ -284,9 +284,7 @@ QUnit.module('web_editor', {}, function () {
             await testUtils.dom.click($('.modal #editor-media-image .o_existing_attachment_cell:first').removeClass('d-none'));
 
             var $editable = form.$('.oe_form_field[name="body"] .note-editable');
-
-            assert.strictEqual($editable.data('wysiwyg').getValue(),
-                '<p>t<img class="img-fluid o_we_custom_image" data-src="/web_editor/static/src/img/transparent.png">oto toto toto</p><p>tata</p>',
+            assert.ok($editable.find('img')[0].dataset.src.includes('/web_editor/static/src/img/transparent.png'),
                 "should have the image in the dom");
 
             testUtils.mock.unpatch(MediaDialog);
diff --git a/addons/web_editor/static/tests/test_utils.js b/addons/web_editor/static/tests/test_utils.js
index 74a2ba1f3d8..fcbf52f2521 100644
--- a/addons/web_editor/static/tests/test_utils.js
+++ b/addons/web_editor/static/tests/test_utils.js
@@ -259,6 +259,11 @@ function wysiwygData(data) {
                     string: "image_height",
                     type: 'integer',
                 },
+                original_id: {
+                    string: "original_id",
+                    type: 'many2one',
+                    relation: 'ir.attachment',
+                },
             },
             records: [{
                 id: 1,