[IMP] web_editor, *: improve file media widget views & selection

* = web_unsplash, website_blog

Rename "image" to "attachment" when appropriate in FileWidget

Improve image selection / highlight code (now based on attachment id)

Improve image grid view:
 - Remove the row mechanism and replace it by a single loop over the images.
 - Take advantage of row wrap for a responsive display.
 - Uniformize the height (prevent tall images from moving down everything).
 - Load a miniature of the images when possible, remove the loading placeholder.
 	This should significantly reduce the download size when opening the dialog,
 	at the cost of CPU usage on the server.
 - Split the existing image view into one view for the loop and one view for the
 	image itself. This way in a following commit we can reuse the image view
 	when adding a new one, instead of having to render everything again.

task-1930726
PR: #31208

3 files changed, 14 insertions, 2 deletions

diff --git a/addons/web_editor/static/tests/field_html_tests.js b/addons/web_editor/static/tests/field_html_tests.js
index 477519d4060..d307706557f 100644
--- a/addons/web_editor/static/tests/field_html_tests.js
+++ b/addons/web_editor/static/tests/field_html_tests.js
@@ -194,6 +194,9 @@ QUnit.module('web_editor', {}, function () {
                             return Promise.resolve();
                         }
                     }
+                    if (route.indexOf('/web_editor/static/src/img/') === 0) {
+                        return Promise.resolve();
+                    }
                     return this._super(route, args);
                 },
             });
@@ -216,7 +219,7 @@ QUnit.module('web_editor', {}, function () {
 
             // load static xml file (dialog, media dialog, unsplash image widget)
             await defMediaDialog;
-            await testUtils.dom.click($('.modal #editor-media-image .o_image:first'));
+            await testUtils.dom.click($('.modal #editor-media-image .o_existing_attachment_cell:first'));
             await testUtils.dom.click($('.modal .modal-footer button.btn-primary'));
 
             var $editable = form.$('.oe_form_field[name="body"] .note-editable');
diff --git a/addons/web_editor/static/tests/wysiwyg_snippets_tests.js b/addons/web_editor/static/tests/wysiwyg_snippets_tests.js
index bd63364d303..842aeea1f2f 100644
--- a/addons/web_editor/static/tests/wysiwyg_snippets_tests.js
+++ b/addons/web_editor/static/tests/wysiwyg_snippets_tests.js
@@ -330,6 +330,12 @@ QUnit.test('background-image', function (assert) {
                 '    </div>' +
                 '</section>',
         },
+        mockRPC: function (route, args) {
+            if (route.indexOf('/web_editor/static/src/img/') === 0) {
+                return Promise.resolve();
+            }
+            return this._super(route, args);
+        },
     }).then(function (wysiwyg) {
         var $editable = wysiwyg.getEditable();
 
@@ -352,7 +358,7 @@ QUnit.test('background-image', function (assert) {
             $('#oe_manipulators .oe_overlay_options a.snippet-option-background[data-choose-image]').click();
 
             defMediaDialogInit.then(function () {
-                $('.o_select_media_dialog .existing-attachments .o_image').click();
+                $('.o_select_media_dialog .existing-attachments .o_existing_attachment_cell').click();
                 $('.o_select_media_dialog .modal-footer .btn-primary').click();
             });
 
diff --git a/addons/web_editor/static/tests/wysiwyg_tests.js b/addons/web_editor/static/tests/wysiwyg_tests.js
index 4312121015b..be62dbb4192 100644
--- a/addons/web_editor/static/tests/wysiwyg_tests.js
+++ b/addons/web_editor/static/tests/wysiwyg_tests.js
@@ -3412,6 +3412,9 @@ QUnit.module('Media', {
                 if (route.indexOf('youtube') !== -1) {
                     return Promise.resolve();
                 }
+                if (route.indexOf('/web_editor/static/src/img/') === 0) {
+                    return Promise.resolve();
+                }
                 return this._super(route, args);
             },
         };