[FIX] web: ImageField style

This commit fixes the style of the field broken
since the introduction of the "display: contents"
rule in css.

closes odoo/odoo#97906

Related: odoo/enterprise#30073
Signed-off-by: Samuel Degueldre <sad@odoo.com>

addons/web/static/src/views/fields/image/image_field.scss

@@ -1,7 +1,4 @@
 .o_field_image {
-    display: inline-block;
-    position: relative;
-
     button {
         transition: opacity ease 400ms;
         width: 26px;

addons/web/static/src/views/fields/image/image_field.xml

@@ -2,43 +2,45 @@
 <templates xml:space="preserve">
 
     <t t-name="web.ImageField" owl="1">
-        <div t-attf-class="position-absolute w-100 bottom-0 {{isMobile ? 'o_mobile_controls' : ''}}" aria-atomic="true" t-att-style="sizeStyle">
-            <t t-if="!props.readonly">
-                <FileUploader
-                    acceptedFileExtensions="props.acceptedFileExtensions"
-                    onUploaded.bind="onFileUploaded"
-                    type="'image'"
-                >
-                    <t t-set-slot="toggler">
+        <div class="d-inline-block position-relative">
+            <div t-attf-class="position-absolute w-100 bottom-0 {{isMobile ? 'o_mobile_controls' : ''}}" aria-atomic="true" t-att-style="sizeStyle">
+                <t t-if="!props.readonly">
+                    <FileUploader
+                        acceptedFileExtensions="props.acceptedFileExtensions"
+                        onUploaded.bind="onFileUploaded"
+                        type="'image'"
+                    >
+                        <t t-set-slot="toggler">
+                            <button
+                                class="position-absolute bottom-0 start-0 border-0 rounded-circle m-1 p-1 fa fa-pencil fa-lg o_select_file_button"
+                                data-tooltip="Edit"
+                                aria-label="Edit"
+                            />
+                        </t>
                         <button
-                            class="position-absolute bottom-0 start-0 border-0 rounded-circle m-1 p-1 fa fa-pencil fa-lg o_select_file_button"
-                            data-tooltip="Edit"
-                            aria-label="Edit"
+                            t-if="props.value and state.isValid"
+                            class="position-absolute bottom-0 end-0 border-0 rounded-circle m-1 p-1 fa fa-trash-o fa-lg o_clear_file_button"
+                            data-tooltip="Clear"
+                            aria-label="Clear"
+                            t-on-click="onFileRemove"
                         />
-                    </t>
-                    <button
-                        t-if="props.value and state.isValid"
-                        class="position-absolute bottom-0 end-0 border-0 rounded-circle m-1 p-1 fa fa-trash-o fa-lg o_clear_file_button"
-                        data-tooltip="Clear"
-                        aria-label="Clear"
-                        t-on-click="onFileRemove"
-                    />
-                </FileUploader>
-            </t>
+                    </FileUploader>
+                </t>
+            </div>
+            <img
+                class="img img-fluid"
+                alt="Binary file"
+                t-att-src="getUrl(props.previewImage or props.name)"
+                t-att-name="props.name"
+                t-att-height="props.height"
+                t-att-width="props.width"
+                t-att-style="sizeStyle"
+                t-on-error.stop="onLoadFailed"
+                t-att-data-tooltip-template="hasTooltip and tooltipAttributes.template"
+                t-att-data-tooltip-info="hasTooltip and tooltipAttributes.info"
+                t-att-data-tooltip-delay="hasTooltip and props.zoomDelay"
+            />
         </div>
-        <img
-            class="img img-fluid"
-            alt="Binary file"
-            t-att-src="getUrl(props.previewImage or props.name)"
-            t-att-name="props.name"
-            t-att-height="props.height"
-            t-att-width="props.width"
-            t-att-style="sizeStyle"
-            t-on-error.stop="onLoadFailed"
-            t-att-data-tooltip-template="hasTooltip and tooltipAttributes.template"
-            t-att-data-tooltip-info="hasTooltip and tooltipAttributes.info"
-            t-att-data-tooltip-delay="hasTooltip and props.zoomDelay"
-        />
     </t>
 
     <t t-name="web.ImageZoomTooltip" owl="1">

addons/web/static/src/views/form/form_controller.scss

@@ -428,14 +428,16 @@ $o-form-label-margin-right: 0px;
 
     // Avatar
     .oe_avatar {
-        float: right;
-        margin-bottom: 10px;
+        > div {
+            float: right;
+            margin-bottom: 10px;
 
-        > img {
-            max-width: $o-avatar-size;
-            max-height: $o-avatar-size;
-            vertical-align: top;
-            border: 1px solid $o-gray-300;
+            > img {
+                max-width: $o-avatar-size;
+                max-height: $o-avatar-size;
+                vertical-align: top;
+                border: 1px solid $o-gray-300;
+            }
         }
     }
 

addons/web/static/tests/views/fields/image_field_tests.js

@@ -106,27 +106,27 @@ QUnit.module("Fields", (hooks) => {
         );
         assert.containsOnce(
             target,
-            ".o_field_widget[name='document'] > img",
+            ".o_field_widget[name='document'] img",
             "the widget should contain an image"
         );
         assert.strictEqual(
-            target.querySelector('div[name="document"] > img').dataset.src,
+            target.querySelector('div[name="document"] img').dataset.src,
             `data:image/png;base64,${MY_IMAGE}`,
             "the image should have the correct src"
         );
         assert.hasClass(
-            target.querySelector(".o_field_widget[name='document'] > img"),
+            target.querySelector(".o_field_widget[name='document'] img"),
             "img-fluid",
             "the image should have the correct class"
         );
         assert.hasAttrValue(
-            target.querySelector(".o_field_widget[name='document'] > img"),
+            target.querySelector(".o_field_widget[name='document'] img"),
             "width",
             "90",
             "the image should correctly set its attributes"
         );
         assert.strictEqual(
-            target.querySelector(".o_field_widget[name='document'] > img").style.maxWidth,
+            target.querySelector(".o_field_widget[name='document'] img").style.maxWidth,
             "90px",
             "the image should correctly set its attributes"
         );
@@ -167,7 +167,7 @@ QUnit.module("Fields", (hooks) => {
             });
 
             assert.strictEqual(
-                target.querySelector('div[name="document"] > img').dataset.src,
+                target.querySelector('div[name="document"] img').dataset.src,
                 "data:image/png;base64,incorrect_base64_value",
                 "the image has the invalid src by default"
             );
@@ -175,7 +175,7 @@ QUnit.module("Fields", (hooks) => {
             // As GET requests can't occur in tests, we must generate an error
             // on the img element to check whether the data-src is replaced with
             // a placeholder, here knowing that the GET request would fail
-            await triggerEvent(target, 'div[name="document"] > img', "error");
+            await triggerEvent(target, 'div[name="document"] img', "error");
 
             assert.hasClass(
                 target.querySelector('.o_field_widget[name="document"]'),
@@ -184,27 +184,27 @@ QUnit.module("Fields", (hooks) => {
             );
             assert.containsOnce(
                 target,
-                ".o_field_widget[name='document'] > img",
+                ".o_field_widget[name='document'] img",
                 "the widget should contain an image"
             );
             assert.strictEqual(
-                target.querySelector('div[name="document"] > img').dataset.src,
+                target.querySelector('div[name="document"] img').dataset.src,
                 "/web/static/img/placeholder.png",
                 "the image should have the correct src"
             );
             assert.hasClass(
-                target.querySelector(".o_field_widget[name='document'] > img"),
+                target.querySelector(".o_field_widget[name='document'] img"),
                 "img-fluid",
                 "the image should have the correct class"
             );
             assert.hasAttrValue(
-                target.querySelector(".o_field_widget[name='document'] > img"),
+                target.querySelector(".o_field_widget[name='document'] img"),
                 "width",
                 "90",
                 "the image should correctly set its attributes"
             );
             assert.strictEqual(
-                target.querySelector(".o_field_widget[name='document'] > img").style.maxWidth,
+                target.querySelector(".o_field_widget[name='document'] img").style.maxWidth,
                 "90px",
                 "the image should correctly set its attributes"
             );
@@ -237,7 +237,7 @@ QUnit.module("Fields", (hooks) => {
         });
 
         assert.strictEqual(
-            target.querySelector('div[name="document"] > img').dataset.src,
+            target.querySelector('div[name="document"] img').dataset.src,
             "data:image/png;base64,coucou==",
             "the image should have the initial src"
         );
@@ -263,7 +263,7 @@ QUnit.module("Fields", (hooks) => {
         // Wait for a render
         await nextTick();
         assert.strictEqual(
-            target.querySelector("div[name=document] > img").dataset.src,
+            target.querySelector("div[name=document] img").dataset.src,
             `data:image/png;base64,${MY_IMAGE}`,
             "the image should have the new src"
         );