[IMP] html_builder, *: rename Img component to Image

AlessandroLupo · AlessandroLupo · commit a22e22acacc9 · 2025-12-08T14:51:47.000Z
*: mass_mailing, website, website_sale The `Img` component has a confusing name, because in templates it looks too similar to the HTML tag `<img>`. To improve clarity, this commit changes the name to `Image`. task-5345698 closes #238718 Related: odoo/enterprise#101359 Related: odoo/design-themes#1187 Signed-off-by: Francois Georis (fge) <fge@odoo.com>
diff --git a/addons/html_builder/static/src/core/builder_component_plugin.js b/addons/html_builder/static/src/core/builder_component_plugin.js
@@ -19,7 +19,7 @@ import { BuilderMany2Many } from "./building_blocks/builder_many2many";
 import { BuilderMany2One } from "./building_blocks/builder_many2one";
 import { ModelMany2Many } from "./building_blocks/model_many2many";
 import { Plugin } from "@html_editor/plugin";
-import { Img } from "./img";
+import { Image } from "./img";
 import { BuilderUrlPicker } from "./building_blocks/builder_urlpicker";
 import { BuilderFontFamilyPicker } from "./building_blocks/builder_fontfamilypicker";
 
@@ -60,7 +60,7 @@ export class BuilderComponentPlugin extends Plugin {
             ModelMany2Many,
             BuilderDateTimePicker,
             BuilderList,
-            Img,
+            Image,
         },
     };
 
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_button.js b/addons/html_builder/static/src/core/building_blocks/builder_button.js
@@ -5,11 +5,11 @@ import {
     useSelectableItemComponent,
 } from "../utils";
 import { BuilderComponent } from "./builder_component";
-import { Img } from "../img";
+import { Image } from "../img";
 
 export class BuilderButton extends Component {
     static template = "html_builder.BuilderButton";
-    static components = { BuilderComponent, Img };
+    static components = { BuilderComponent, Image };
     static props = {
         ...clickableBuilderComponentProps,
 
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_button.xml b/addons/html_builder/static/src/core/building_blocks/builder_button.xml
@@ -18,7 +18,7 @@
             t-on-click="() => this.onClick()"
             t-on-pointerenter="() => this.onPointerEnter(props.id)"
             t-on-pointerleave="() => this.onPointerLeave(props.id)">
-            <Img t-if="props.iconImg" src="props.iconImg" attrs="{alt:props.iconImgAlt}"/>
+            <Image t-if="props.iconImg" src="props.iconImg" attrs="{alt:props.iconImgAlt}"/>
             <i t-if="props.icon" t-att-class="iconClassName" role="img"/>
             <t t-if="props.label"  t-out="props.label"/>
             <t t-slot="default"/>
diff --git a/addons/html_builder/static/src/core/img.js b/addons/html_builder/static/src/core/img.js
@@ -29,7 +29,7 @@ const svgCache = new Cache(async (src) => {
     return xmlDoc.getElementsByTagName("svg")[0];
 }, JSON.stringify);
 
-export class Img extends Component {
+export class Image extends Component {
     static props = {
         src: String,
         class: { type: String, optional: true },
@@ -108,7 +108,7 @@ export class Img extends Component {
 
     loadImage() {
         return new Promise((resolve, reject) => {
-            const img = new Image();
+            const img = new window.Image();
             img.onload = () => resolve({ status: "loaded" });
             img.onerror = () => resolve({ status: "error" });
             img.src = this.props.src;
diff --git a/addons/html_builder/static/src/plugins/background_option/background_shape_option.xml b/addons/html_builder/static/src/plugins/background_option/background_shape_option.xml
@@ -35,7 +35,7 @@
                 preview="false"
                 className="'o-hb-btn-has-img-icon o_hb_device btn-danger-color-active'"
                 t-if="state.hasShape">
-                <Img src="'/html_builder/static/img/options/mobile_invisible.svg'" style="'width: 12px'" />
+                <Image src="'/html_builder/static/img/options/mobile_invisible.svg'" style="'width: 12px'" />
             </BuilderButton>
     </BuilderRow>
 
diff --git a/addons/html_builder/static/src/plugins/rating_option.xml b/addons/html_builder/static/src/plugins/rating_option.xml
@@ -27,9 +27,9 @@
     </BuilderRow>
     <BuilderRow label.translate="Size">
         <BuilderButtonGroup applyTo="'.s_rating_icons'">
-            <BuilderButton classAction="''" title.translate="Small"><Img src="'/html_builder/static/img/options/size_small.svg'" /></BuilderButton>
-            <BuilderButton classAction="'fa-2x'" title.translate="Medium"><Img src="'/html_builder/static/img/options/size_medium.svg'" /></BuilderButton>
-            <BuilderButton classAction="'fa-3x'" title.translate="Large"><Img src="'/html_builder/static/img/options/size_large.svg'" /></BuilderButton>
+            <BuilderButton classAction="''" title.translate="Small"><Image src="'/html_builder/static/img/options/size_small.svg'" /></BuilderButton>
+            <BuilderButton classAction="'fa-2x'" title.translate="Medium"><Image src="'/html_builder/static/img/options/size_medium.svg'" /></BuilderButton>
+            <BuilderButton classAction="'fa-3x'" title.translate="Large"><Image src="'/html_builder/static/img/options/size_large.svg'" /></BuilderButton>
         </BuilderButtonGroup>
     </BuilderRow>
     <BuilderRow label.translate="Title Position">
diff --git a/addons/html_builder/static/src/plugins/shape/shape_selector.xml b/addons/html_builder/static/src/plugins/shape/shape_selector.xml
@@ -26,7 +26,7 @@
                                                 <div class="o_we_shape" t-att-class="this.getShapeClass(shape[0])"/>
                                             </t>
                                             <t t-else="" >
-                                                <Img src="this.getShapeUrl(shape[0])" svgCheck="false"/>
+                                                <Image src="this.getShapeUrl(shape[0])" svgCheck="false"/>
                                             </t>
                                             <span t-if="shape[1].imgSize" class="o_we_shape_animated_label">
                                                 <i class="fa fa-expand"></i>
diff --git a/addons/html_builder/static/src/sidebar/custom_inner_snippet.js b/addons/html_builder/static/src/sidebar/custom_inner_snippet.js
@@ -1,4 +1,4 @@
-import { Img } from "@html_builder/core/img";
+import { Image } from "@html_builder/core/img";
 import { Component, useState, useRef } from "@odoo/owl";
 import { _t } from "@web/core/l10n/translation";
 import { useAutofocus } from "@web/core/utils/hooks";
@@ -11,7 +11,7 @@ export class CustomInnerSnippet extends Component {
         onClickHandler: { type: Function },
         disabledTooltip: { type: String },
     };
-    static components = { Img };
+    static components = { Image };
 
     setup() {
         this.renameInputRef = useRef("rename-input");
diff --git a/addons/html_builder/static/src/sidebar/custom_inner_snippet.xml b/addons/html_builder/static/src/sidebar/custom_inner_snippet.xml
@@ -10,7 +10,7 @@
         t-att-data-tooltip="snippet.isDisabled and props.disabledTooltip">
         <div class="o_snippet_thumbnail" t-att-data-snippet="snippet.name">
             <button t-if="!snippet.isInstallable" class="o_snippet_thumbnail_area" t-on-click="props.onClickHandler" title="Insert snippet"/>
-            <Img t-if="snippet.isDisabled" src="'/html_builder/static/img/snippet_disabled.svg'" class="'o_snippet_undroppable'"/>
+            <Image t-if="snippet.isDisabled" src="'/html_builder/static/img/snippet_disabled.svg'" class="'o_snippet_undroppable'"/>
             <div class="o_snippet_thumbnail_img" t-attf-style="background-image: url({{snippet.thumbnailSrc}});"/>
             <t t-if="state.isRenaming">
                 <div class="rename-input w-100 mx-1 z-1">
diff --git a/addons/html_builder/static/src/sidebar/customize_component.js b/addons/html_builder/static/src/sidebar/customize_component.js
@@ -1,10 +1,10 @@
 import { Component } from "@odoo/owl";
 import { useOptionsSubEnv } from "@html_builder/utils/utils";
-import { Img } from "@html_builder/core/img";
+import { Image } from "@html_builder/core/img";
 
 export class CustomizeComponent extends Component {
     static template = "html_builder.CustomizeComponent";
-    static components = { Img };
+    static components = { Image };
     static props = {
         editingElements: { type: Array },
         comp: { type: Function },
diff --git a/addons/html_builder/static/src/sidebar/snippet.js b/addons/html_builder/static/src/sidebar/snippet.js
@@ -1,9 +1,9 @@
-import { Img } from "@html_builder/core/img";
+import { Image } from "@html_builder/core/img";
 import { Component } from "@odoo/owl";
 
 export class Snippet extends Component {
     static template = "html_builder.Snippet";
-    static components = { Img };
+    static components = { Image };
     static props = {
         snippetModel: { type: Object },
         snippet: { type: Object },
diff --git a/addons/html_builder/static/src/sidebar/snippet.xml b/addons/html_builder/static/src/sidebar/snippet.xml
@@ -12,7 +12,7 @@
          t-on-mouseout="onInstallableHover">
         <div class="o_snippet_thumbnail" t-att-data-snippet="snippet.name">
             <button t-if="!snippet.isInstallable and !snippet.isDisabled" class="o_snippet_thumbnail_area" t-on-click="props.onClickHandler" title="Insert snippet"/>
-            <Img t-if="snippet.isDisabled" src="'/html_builder/static/img/snippet_disabled.svg'" class="'o_snippet_undroppable'"/>
+            <Image t-if="snippet.isDisabled" src="'/html_builder/static/img/snippet_disabled.svg'" class="'o_snippet_undroppable'"/>
             <div class="o_snippet_thumbnail_img" t-attf-style="background-image: url({{snippet.thumbnailSrc}});"/>
             <span class="o_snippet_thumbnail_title" t-esc="snippet.title"/>
             <button
diff --git a/addons/html_builder/static/tests/helpers.js b/addons/html_builder/static/tests/helpers.js
@@ -1,6 +1,6 @@
 import { Builder } from "@html_builder/builder";
 import { CORE_PLUGINS } from "@html_builder/core/core_plugins";
-import { Img } from "@html_builder/core/img";
+import { Image } from "@html_builder/core/img";
 import { SetupEditorPlugin } from "@html_builder/core/setup_editor_plugin";
 import { revertPreview } from "@html_builder/core/utils";
 import { unformat } from "@html_editor/../tests/_helpers/format";
@@ -28,10 +28,10 @@ import { uniqueId } from "@web/core/utils/functions";
 export function patchWithCleanupImg() {
     const defaultImg =
         "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z9DwHwAGBQKA3H7sNwAAAABJRU5ErkJggg==";
-    patchWithCleanup(Img, {
+    patchWithCleanup(Image, {
         template: xml`<img t-att-data-src="props.src" t-att-alt="props.alt" t-att-class="props.class" t-att-style="props.style" t-att="props.attrs" src="${defaultImg}"/>`,
     });
-    patchWithCleanup(Img.prototype, {
+    patchWithCleanup(Image.prototype, {
         loadImage: () => {},
         getSvg: function () {
             this.isSvg = () => false;
diff --git a/addons/html_builder/static/tests/img.test.js b/addons/html_builder/static/tests/img.test.js
@@ -1,4 +1,4 @@
-import { Img } from "@html_builder/core/img";
+import { Image } from "@html_builder/core/img";
 import { ImgGroup } from "@html_builder/core/img_group";
 import { defineMailModels } from "@mail/../tests/mail_test_helpers";
 import { expect, test, describe } from "@odoo/hoot";
@@ -9,24 +9,24 @@ import { mountWithCleanup, patchWithCleanup } from "@web/../tests/web_test_helpe
 describe.current.tags("desktop");
 
 defineMailModels(); // meh
-test("ImgGroup's inner Img components should not be blocked before src load", async () => {
+test("ImgGroup's inner Image components should not be blocked before src load", async () => {
     const defs = {
         img1: new Deferred(),
         img2: new Deferred(),
         img3: new Deferred(),
     };
-    patchWithCleanup(Img.prototype, {
+    patchWithCleanup(Image.prototype, {
         loadImage() {
             const def = defs[this.props.class];
             return Promise.all([super.loadImage(), def]);
         },
     });
     class Container extends Component {
-        static components = { ImgGroup, Img };
+        static components = { ImgGroup, Image };
         static template = xml`
             <ImgGroup>
                 <t t-foreach="Object.keys(defs)" t-as="key" t-key="key">
-                    <Img src="''" class="key"/>
+                    <Image src="''" class="key"/>
                 </t>
             </ImgGroup>`;
         static props = {};
diff --git a/addons/mass_mailing/static/src/builder/tabs/design_tab.xml b/addons/mass_mailing/static/src/builder/tabs/design_tab.xml
@@ -23,13 +23,13 @@
     <BuilderRow label.translate="Body Width">
         <BuilderButtonGroup>
             <BuilderButton classAction="'o_mail_small'" applyTo="'.o_mail_wrapper'">
-                <Img src="'/mass_mailing/static/src/img/snippets_options/content_width_small.svg'" />
+                <Image src="'/mass_mailing/static/src/img/snippets_options/content_width_small.svg'" />
             </BuilderButton>
             <BuilderButton classAction="'o_mail_regular'" applyTo="'.o_mail_wrapper'">
-                <Img src="'/mass_mailing/static/src/img/snippets_options/content_width_normal.svg'" />
+                <Image src="'/mass_mailing/static/src/img/snippets_options/content_width_normal.svg'" />
             </BuilderButton>
             <BuilderButton classAction="''" applyTo="'.o_mail_wrapper'">
-                <Img src="'/mass_mailing/static/src/img/snippets_options/content_width_full.svg'" />
+                <Image src="'/mass_mailing/static/src/img/snippets_options/content_width_full.svg'" />
             </BuilderButton>
         </BuilderButtonGroup>
     </BuilderRow>
diff --git a/addons/website/static/src/builder/plugins/content_width_option.xml b/addons/website/static/src/builder/plugins/content_width_option.xml
@@ -4,9 +4,9 @@
 <t t-name="website.ContentWidthOption">
     <BuilderRow label.translate="Content Width">
         <BuilderButtonGroup action="'setContainerWidth'">
-            <BuilderButton actionParam="'o_container_small'" title.translate="Thin"><Img src="'/website/static/src/img/snippets_options/content_width_small.svg'" /></BuilderButton>
-            <BuilderButton actionParam="'container'" title.translate="Regular"><Img src="'/website/static/src/img/snippets_options/content_width_normal.svg'" /></BuilderButton>
-            <BuilderButton actionParam="'container-fluid'" title.translate="Full-width"><Img src="'/website/static/src/img/snippets_options/content_width_full.svg'" /></BuilderButton>
+            <BuilderButton actionParam="'o_container_small'" title.translate="Thin"><Image src="'/website/static/src/img/snippets_options/content_width_small.svg'" /></BuilderButton>
+            <BuilderButton actionParam="'container'" title.translate="Regular"><Image src="'/website/static/src/img/snippets_options/content_width_normal.svg'" /></BuilderButton>
+            <BuilderButton actionParam="'container-fluid'" title.translate="Full-width"><Image src="'/website/static/src/img/snippets_options/content_width_full.svg'" /></BuilderButton>
         </BuilderButtonGroup>
     </BuilderRow>
 </t>
diff --git a/addons/website/static/src/builder/plugins/options/dynamic_snippet_option.xml b/addons/website/static/src/builder/plugins/options/dynamic_snippet_option.xml
@@ -35,7 +35,7 @@
             <t t-foreach="filteredTemplates" t-as="template" t-key="template.key">
                 <t t-if="template.thumb">
                     <BuilderSelectItem actionParam="template">
-                        <Img src="template.thumb" alt="template.name" svgCheck="false"/>
+                        <Image src="template.thumb" alt="template.name" svgCheck="false"/>
                     </BuilderSelectItem>
                 </t>
                 <t t-else="">
diff --git a/addons/website/static/src/builder/plugins/options/footer_option.xml b/addons/website/static/src/builder/plugins/options/footer_option.xml
@@ -13,21 +13,21 @@
 
 <t t-name="website.FooterTemplateChoice">
     <BuilderSelectItem title="props.title" actionParam="{ view: props.view, vars: { 'footer-template': props.varName } }">
-        <Img attrs="{ style: 'width: 100%;' }" src="props.imgSrc"/>
+        <Image attrs="{ style: 'width: 100%;' }" src="props.imgSrc"/>
     </BuilderSelectItem>
 </t>
 
 <t t-name="website.FooterWidthOption">
     <BuilderRow label.translate="Content width">
         <BuilderButtonGroup action="'previewableWebsiteConfig'">
             <BuilderButton actionParam="{ views: ['website.footer_copyright_content_width_small'], previewClass: 'o_container_small'}">
-                <Img src="'/website/static/src/img/snippets_options/content_width_small.svg'"/>
+                <Image src="'/website/static/src/img/snippets_options/content_width_small.svg'"/>
             </BuilderButton>
             <BuilderButton actionParam="{ views: [], previewClass: 'container'}">
-                <Img src="'/website/static/src/img/snippets_options/content_width_normal.svg'"/>
+                <Image src="'/website/static/src/img/snippets_options/content_width_normal.svg'"/>
             </BuilderButton>
             <BuilderButton actionParam="{ views: ['website.footer_copyright_content_width_fluid'], previewClass: 'container-fluid'}">
-                <Img src="'/website/static/src/img/snippets_options/content_width_full.svg'"/>
+                <Image src="'/website/static/src/img/snippets_options/content_width_full.svg'"/>
             </BuilderButton>
         </BuilderButtonGroup>
     </BuilderRow>
diff --git a/addons/website/static/src/builder/plugins/options/google_maps_option/google_maps_option.xml b/addons/website/static/src/builder/plugins/options/google_maps_option/google_maps_option.xml
@@ -28,34 +28,34 @@
     <BuilderRow label.translate="&#8985; Style" preview="false" t-if="this.isActiveItem('roadmap_opt')">
         <BuilderSelect dataAttributeAction="'mapColor'">
             <BuilderSelectItem dataAttributeActionValue="">
-                <Img src="'/website/static/src/snippets/s_google_map/img/thumbs/map-default.jpg'"/>
+                <Image src="'/website/static/src/snippets/s_google_map/img/thumbs/map-default.jpg'"/>
             </BuilderSelectItem>
             <BuilderSelectItem dataAttributeActionValue="'lightMonoMap'">
-                <Img src="'/website/static/src/snippets/s_google_map/img/thumbs/map-lightMono.jpg'"/>
+                <Image src="'/website/static/src/snippets/s_google_map/img/thumbs/map-lightMono.jpg'"/>
             </BuilderSelectItem>
             <BuilderSelectItem dataAttributeActionValue="'cupertinoMap'">
-                <Img src="'/website/static/src/snippets/s_google_map/img/thumbs/map-cupertino.jpg'"/>
+                <Image src="'/website/static/src/snippets/s_google_map/img/thumbs/map-cupertino.jpg'"/>
             </BuilderSelectItem>
             <BuilderSelectItem dataAttributeActionValue="'retroMap'">
-                <Img src="'/website/static/src/snippets/s_google_map/img/thumbs/map-retro.jpg'"/>
+                <Image src="'/website/static/src/snippets/s_google_map/img/thumbs/map-retro.jpg'"/>
             </BuilderSelectItem>
             <BuilderSelectItem dataAttributeActionValue="'cobaltMap'">
-                <Img src="'/website/static/src/snippets/s_google_map/img/thumbs/map-cobalt.jpg'"/>
+                <Image src="'/website/static/src/snippets/s_google_map/img/thumbs/map-cobalt.jpg'"/>
             </BuilderSelectItem>
             <BuilderSelectItem dataAttributeActionValue="'flatMap'">
-                <Img src="'/website/static/src/snippets/s_google_map/img/thumbs/map-flat.jpg'"/>
+                <Image src="'/website/static/src/snippets/s_google_map/img/thumbs/map-flat.jpg'"/>
             </BuilderSelectItem>
             <BuilderSelectItem dataAttributeActionValue="'blueMap'">
-                <Img src="'/website/static/src/snippets/s_google_map/img/thumbs/map-blue.jpg'"/>
+                <Image src="'/website/static/src/snippets/s_google_map/img/thumbs/map-blue.jpg'"/>
             </BuilderSelectItem>
             <BuilderSelectItem dataAttributeActionValue="'lillaMap'">
-                <Img src="'/website/static/src/snippets/s_google_map/img/thumbs/map-lilla.jpg'"/>
+                <Image src="'/website/static/src/snippets/s_google_map/img/thumbs/map-lilla.jpg'"/>
             </BuilderSelectItem>
             <BuilderSelectItem dataAttributeActionValue="'carMap'">
-                <Img src="'/website/static/src/snippets/s_google_map/img/thumbs/map-caramello.jpg'"/>
+                <Image src="'/website/static/src/snippets/s_google_map/img/thumbs/map-caramello.jpg'"/>
             </BuilderSelectItem>
             <BuilderSelectItem dataAttributeActionValue="'bwMap'">
-                <Img src="'/website/static/src/snippets/s_google_map/img/thumbs/map-bw.jpg'"/>
+                <Image src="'/website/static/src/snippets/s_google_map/img/thumbs/map-bw.jpg'"/>
             </BuilderSelectItem>
         </BuilderSelect>
     </BuilderRow>
diff --git a/addons/website/static/src/builder/plugins/options/header/header_template_option.xml b/addons/website/static/src/builder/plugins/options/header/header_template_option.xml
diff --git a/addons/website/static/src/builder/plugins/options/mega_menu_option.xml b/addons/website/static/src/builder/plugins/options/mega_menu_option.xml
diff --git a/addons/website/static/src/builder/plugins/options/visibility_option.xml b/addons/website/static/src/builder/plugins/options/visibility_option.xml
diff --git a/addons/website/static/src/builder/plugins/theme/theme_colors_option.xml b/addons/website/static/src/builder/plugins/theme/theme_colors_option.xml
diff --git a/addons/website_sale/static/src/website_builder/footer_option.xml b/addons/website_sale/static/src/website_builder/footer_option.xml
diff --git a/addons/website_sale/static/src/website_builder/products_design_panel.xml b/addons/website_sale/static/src/website_builder/products_design_panel.xml
diff --git a/addons/website_sale/static/src/website_builder/products_list_page_option.xml b/addons/website_sale/static/src/website_builder/products_list_page_option.xml
