[FIX] website, web_editor: fix colorpicker preview

Issue:

> Set bg color combination for a snippet... > Save
> Edit mode > Select the snippet
> Open color palette in bg option
> Hover a color option
> When a color button is left, the preview is cancelled
  but the color combination class is not applied anymore.

In '_computeWidgetState' (for 'selectStyle' method), the right
value ('o_cci') is not returned because we get empty "colorNames"
(the "colorPalette" is not rendered on start).

The goal of this commit is to fix this behaviour by rendering the
colorPalette in start for snippet options, this way, the new code
won't affect the speed fix added in [1] for 'OPTIONS' tab.

[1]: https://github.com/odoo/odoo/pull/65223/commits/ce54c3f21293513673cb1fc6073ada5f0a2b5641

task-2538326

closes odoo/odoo#71174

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

2 files changed, 20 insertions, 6 deletions

diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 8d5e385408d..b218ea9c5d4 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1241,12 +1241,16 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
         const _super = this._super.bind(this);
         const args = arguments;
 
-        // TODO review in master, this was done in stable to keep the speed fix
-        // as stable as possible (to have a reference to a widget even if not a
-        // colorPalette widget).
-        this.colorPalette = new Widget(this);
-        this.colorPalette.getColorNames = () => [];
-        await this.colorPalette.appendTo(document.createDocumentFragment());
+        if (this.options.dataAttributes.lazyPalette === 'true') {
+            // TODO review in master, this was done in stable to keep the speed
+            // fix as stable as possible (to have a reference to a widget even
+            // if not a colorPalette widget).
+            this.colorPalette = new Widget(this);
+            this.colorPalette.getColorNames = () => [];
+            await this.colorPalette.appendTo(document.createDocumentFragment());
+        } else {
+            await this._renderColorPalette();
+        }
 
         // Build the select element with a custom span to hold the color preview
         this.colorPreviewEl = document.createElement('span');
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index d9204139dad..28354332133 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -997,6 +997,14 @@ options.registry.OptionsTab = options.Class.extend({
         });
         return aceEditor;
     },
+    /**
+     * @override
+     */
+    async _renderCustomXML(uiFragment) {
+        uiFragment.querySelectorAll('we-colorpicker').forEach(el => {
+            el.dataset.lazyPalette = 'true';
+        });
+    },
 });
 
 options.registry.ThemeColors = options.registry.OptionsTab.extend({
@@ -1062,6 +1070,8 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
             }
             uiFragment.appendChild(collapseEl);
         }
+
+        await this._super(...arguments);
     },
 });