[FIX] theme_test_custo: adapt design themes to the new website builder

Since [this commit], the website builder has been rewritten. Due to it,
`we-` options are deprecated. This commit adapts all the `xpath` to old
options into the new way of doing. This commit also adapts the
`theme_menu_hierarchies` tour for it to work with the new builder.

[this commit]: https://github.com/odoo/odoo/commit/9fe45e2b7ddbbfd0445ffe25a859e67a316d02b2

Related to task-4367641
runbot-223813
runbot-223815

closes odoo/design-themes#1087

Related: odoo/odoo#211725
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

theme_test_custo/__manifest__.py

@@ -16,6 +16,9 @@
         'web.assets_tests': [
             'theme_test_custo/static/tests/tours/**/*',
         ],
+        'html_builder.assets': [
+            'theme_test_custo/static/src/builder/**/*',
+        ],
     },
     'author': 'Odoo S.A.',
     'license': 'LGPL-3',

theme_test_custo/data/shapes.xml

@@ -2,15 +2,6 @@
 <odoo>
 
 <!-- Background Shape -->
-<template id="snippet_options_background_options" inherit_id="website.snippet_options_background_options" name="Background Shape Custom Option">
-    <xpath expr="//we-select-pager[hasclass('o_we_bg_shape_menu')]/div/div[last()]/we-select-page[last()]" position="after">
-        <we-title>Custom Shapes</we-title>
-        <we-select-page string="Custom Shapes">
-            <we-button data-shape="theme_test_custo/hexagons/01" data-select-label="Hexagon 01"/>
-            <we-button data-shape="theme_test_custo/curves/01" data-select-label="Curve 01"/>
-        </we-select-page>
-    </xpath>
-</template>
 <record id="shape_hexagon_01" model="theme.ir.attachment">
     <field name="name">Hexagon Shape 01</field>
     <field name="key">theme_test_custo.shape_hexagon_01</field>
@@ -23,14 +14,6 @@
 </record>
 
 <!-- Image Shape -->
-<template id="snippet_options" inherit_id="website.snippet_options" name="Image Shape Custom Option">
-    <xpath expr="//we-select-pager[@data-name='shape_img_opt']/div/div[last()]/we-select-page[last()]" position="after">
-        <we-title>Custom Shapes</we-title>
-        <we-select-page string="Custom Shapes">
-            <we-button data-set-img-shape="theme_test_custo/blob/01" data-select-label="Blob 01"/>
-        </we-select-page>
-    </xpath>
-</template>
 <record id="img_shape_blob_01" model="theme.ir.attachment">
     <field name="name">Blob Shape 01</field>
     <field name="key">theme_test_custo.img_shape_blob_01</field>

theme_test_custo/static/src/builder/background_shape_option_plugin.js

@@ -0,0 +1,20 @@
+import { BackgroundShapeOptionPlugin } from "@website/builder/plugins/background_option/background_shape_option_plugin";
+import { patch } from "@web/core/utils/patch";
+import { _t } from "@web/core/l10n/translation";
+
+patch(BackgroundShapeOptionPlugin.prototype, {
+    getBackgroundShapeGroups() {
+        const bgShapeGroups = super.getBackgroundShapeGroups();
+        bgShapeGroups.basic.subgroups["custom_shape"] = {
+            label: "Custom Shapes",
+            shapes: {
+                "theme_test_custo/curves/01": {
+                    selectLabel: _t("Curve 01"),
+                    transform: false,
+                    togglableRatio: true,
+                },
+            },
+        };
+        return bgShapeGroups;
+    },
+});

theme_test_custo/static/src/builder/footer.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<!-- Theme Footer - Option -->
+<t t-name="theme_test_custo.FooterTemplateOption" t-inherit="html_builder.FooterTemplateOption" t-inherit-mode="extension">
+    <xpath expr="//BuilderSelect[@action=&quot;'websiteConfigFooter'&quot;]" position="inside">
+        <BuilderSelectItem title.translate="Custom Theme"
+                actionParam="{ view: 'theme_test_custo.template_footer_custom', vars: { 'footer-template': 'custom-theme' } }"
+        >
+            <Img src="'/theme_test_custo/static/src/img/template_footer_opt.svg'"/>
+        </BuilderSelectItem>
+    </xpath>
+</t>
+
+</templates>

theme_test_custo/static/src/builder/header.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<!-- Theme Header - Option -->
+<t t-name="theme_test_custo.headerTemplateOption" t-inherit="website.headerTemplateOption" t-inherit-mode="extension">
+    <xpath expr="//BuilderSelect[@action=&quot;'reloadComposite'&quot;]" position="inside">
+        <BuilderSelectItem title.translate="Custom Theme"
+            actionParam="[
+                    {
+                        action: 'websiteConfig',
+                        actionParam: {
+                            views: ['theme_test_custo.template_header_custom'],
+                            vars: {'header-links-style': 'default', 'header-template': 'custom-theme'},
+                            checkVars: false,
+                        },
+                    },
+                ]"
+        >
+            <Img src="'/theme_test_custo/static/src/img/template_header_opt.svg'"/>
+        </BuilderSelectItem>
+    </xpath>
+</t>
+
+</templates>

theme_test_custo/static/src/builder/image_shape_option_plugin.js

@@ -0,0 +1,20 @@
+import { ImageShapeOptionPlugin } from "@website/builder/plugins/image/image_shape_option_plugin";
+import { patch } from "@web/core/utils/patch";
+import { _t } from "@web/core/l10n/translation";
+
+patch(ImageShapeOptionPlugin.prototype, {
+    getImageShapeGroups() {
+        const imageShapeGroups = super.getImageShapeGroups();
+        imageShapeGroups.basic.subgroups["custom_shape"] = {
+            label: "Custom Shapes",
+            shapes: {
+                "theme_test_custo/blob/01": {
+                    selectLabel: _t("Blob 01"),
+                    transform: false,
+                    togglableRatio: true,
+                },
+            },
+        };
+        return imageShapeGroups;
+    },
+});

theme_test_custo/static/tests/tours/theme_menu_hierarchies.js

@@ -39,7 +39,7 @@ wTourUtils.registerWebsitePreviewTour('theme_menu_hierarchies', {
         run: "click",
     }, {
         content: 'The theme custom footer template should be listed and selected',
-        trigger: 'we-select[data-variable="footer-template"] we-toggler img[src*="/theme_test_custo"]',
+        trigger: '[data-container-title="Footer"] [data-label="Template"] button.btn-primary img[src*="/theme_test_custo"]',
         run: () => null, // It's a check.
     }, {
         content: 'Click on header',
@@ -47,7 +47,7 @@ wTourUtils.registerWebsitePreviewTour('theme_menu_hierarchies', {
         run: "click",
     }, {
         content: 'The theme custom header template should be listed and selected',
-        trigger: 'we-select[data-variable="header-template"] we-toggler img[src*="/theme_test_custo"]',
+        trigger: '[data-container-title="Header"] [data-label="Template"] button.btn-primary img[src*="/theme_test_custo"]',
         run: () => null, // It's a check.
     }, {
         content: 'Click on image which has a shape',
@@ -55,7 +55,7 @@ wTourUtils.registerWebsitePreviewTour('theme_menu_hierarchies', {
         run: "click",
     }, {
         content: 'The theme custom "Blob 01" shape should be listed and selected',
-        trigger: 'we-select[data-name="shape_img_opt"] we-toggler:contains("Blob 01")',
+        trigger: '[data-container-title="Image"] [data-label="Shape"] div.dropdown:contains("Blob 01")',
         run: () => null, // It's a check.
     }, {
         content: 'Click on section which has a bg shape',
@@ -63,7 +63,7 @@ wTourUtils.registerWebsitePreviewTour('theme_menu_hierarchies', {
         run: "click",
     }, {
         content: 'The theme custom "Curve 01" shape should be listed and selected',
-        trigger: 'we-select[data-name="bg_shape_opt"] we-toggler:contains("Curve 01")',
+        trigger: '[data-container-title="Text"] [data-label="Shape"] button.btn-primary:contains("Curve 01")',
         run: () => null, // It's a check.
     },
 ]);

theme_test_custo/views/footer.xml

@@ -1,16 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<!-- Theme Footer - Option -->
-<template id="template_footer_opt" inherit_id="website.snippet_options" name="Test Theme Custom Footer Template - Option">
-    <xpath expr="//we-select[@data-variable='footer-template']" position="inside">
-        <we-button title="Custom Theme"
-            data-customize-website-views="theme_test_custo.template_footer_custom"
-            data-customize-website-variable="'custom-theme'"
-            data-img="/theme_test_custo/static/src/img/template_footer_opt.svg"/>
-    </xpath>
-</template>
-
 <!-- Theme Footer - Layout -->
 <template id="template_footer_custom" inherit_id="website.layout" name="Test Theme Custom Footer Template">
     <xpath expr="//div[@id='footer']" position="replace">

theme_test_custo/views/header.xml

@@ -1,16 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<!-- Theme Header - Option -->
-<template id="template_header_opt" inherit_id="website.snippet_options" name="Test Theme Custom Header Template - Option">
-    <xpath expr="//we-select[@data-variable='header-template']" position="inside">
-        <we-button title="Custom Theme"
-            data-customize-website-views="theme_test_custo.template_header_custom"
-            data-customize-website-variable="'custom-theme'"
-            data-img="/theme_test_custo/static/src/img/template_header_opt.svg"/>
-    </xpath>
-</template>
-
 <!-- Theme Header - Layout -->
 <template id="template_header_custom" inherit_id="website.layout" name="Test Theme Custom Header Template">
     <xpath expr="//header//nav" position="replace">