From caaaaa0785abd4b8d3f1d69f6e9e2a2a41e566b9 Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Wed, 3 Feb 2021 11:13:48 +0000
Subject: [PATCH] [FIX] web, web_editor: avoid rendering color palettes more
 than once

Before this commit the palette was rendered each time it was opened.

After this commit if the palette has already been rendered only the
selected color is being updated in the palette (and its colorpicker).

task-2439295
https://github.com/odoo/odoo/pull/65223

X-original-commit: 7f19f63b18bc7d17a393b3535492c7f90595ca39
Co-authored-by: Samuel Degueldre <sad@odoo.com>
---
 addons/web/static/src/js/widgets/colorpicker.js   | 11 +++++++++++
 .../static/src/js/editor/snippets.options.js      |  2 +-
 .../src/js/wysiwyg/widgets/color_palette.js       | 15 +++++++++++++--
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/addons/web/static/src/js/widgets/colorpicker.js b/addons/web/static/src/js/widgets/colorpicker.js
index 6839993444c..7a0fc565f15 100644
--- a/addons/web/static/src/js/widgets/colorpicker.js
+++ b/addons/web/static/src/js/widgets/colorpicker.js
@@ -102,6 +102,17 @@ var ColorpickerWidget = Widget.extend({
         this._super.apply(this, arguments);
         $(document).off(`.${this.uniqueId}`);
     },
+    /**
+     * Sets the currently selected color
+     *
+     * @param {string} color rgb[a]
+     */
+    setSelectedColor: function (color) {
+        var rgba = ColorpickerWidget.convertCSSColorToRgba(color);
+        if (rgba) {
+            this._updateRgba(rgba.red, rgba.green, rgba.blue, rgba.opacity);
+        }
+    },
 
     //--------------------------------------------------------------------------
     // Private
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 b2560676503..4933be94360 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1320,7 +1320,7 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
     async setValue(color) {
         await this._super(...arguments);
 
-        await this._renderColorPalette();
+        this.colorPalette.setSelectedColor(this._value);
 
         const classes = weUtils.computeColorClasses(this.colorPalette.getColorNames());
         this.colorPreviewEl.classList.remove(...classes);
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
index fe97d3fa700..9177863e758 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
@@ -155,6 +155,14 @@ const ColorPaletteWidget = Widget.extend({
     getColorNames: function () {
         return this.colorNames;
     },
+    /**
+     * Sets the currently selected color
+     *
+     * @param {string} color rgb[a]
+     */
+    setSelectedColor: function (color) {
+        this._selectColor({color: color});
+    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -257,13 +265,16 @@ const ColorPaletteWidget = Widget.extend({
      * Set the selectedColor and trigger an event
      *
      * @param {Object} color
-     * @param {string} eventName
+     * @param {string} [eventName]
      */
     _selectColor: function (colorInfo, eventName) {
         this.selectedColor = colorInfo.color = this.colorToColorNames[colorInfo.color] || colorInfo.color;
-        this.trigger_up(eventName, colorInfo);
+        if (eventName) {
+            this.trigger_up(eventName, colorInfo);
+        }
         this._buildCustomColors();
         this._markSelectedColor();
+        this.colorPicker.setSelectedColor(colorInfo.color);
     },
     /**
      * Mark the selected color