[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#71365

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

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -1286,12 +1286,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');

addons/website/static/src/js/editor/snippets.options.js

@@ -1170,6 +1170,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({
@@ -1245,6 +1253,8 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
             }
             uiFragment.appendChild(collapseEl);
         }
+
+        await this._super(...arguments);
     },
 });