[FIX] web_editor, *: restore editor UI for selected CSS variables

*: website

Commit [1] broke the UI for some options related to CSS variables when
using Chrome. The commit made sure the string-value CSS variables are
printed with quotes, so that the JS representation of the CSS values can
distinguish them (strings = strings with surrounding quotes, others like
colors, numbers, etc = strings without surrounding quotes). With chrome,
the printed surrounding single quotes are read as double quotes for
strange reasons though... so the value "a" was not considered equal to
the value 'a'.

This commit makes sure surrounding quotes are normalized. This is done
through a new utility function to read CSS variables. This also makes
sure the values are trimmed, and colors normalized.

[1]: https://github.com/odoo/odoo/commit/3a34e39caa8544059dfb1888edc29c62c3efde31

closes odoo/odoo#54757

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

3 files changed, 30 insertions, 14 deletions

diff --git a/addons/web_editor/static/src/js/common/utils.js b/addons/web_editor/static/src/js/common/utils.js
index 1ed08a80792..61e8f648ee8 100644
--- a/addons/web_editor/static/src/js/common/utils.js
+++ b/addons/web_editor/static/src/js/common/utils.js
@@ -167,6 +167,26 @@ function _computeColorClasses(colorNames, prefix = 'bg-') {
     }
     return classes;
 }
+/**
+ * @param {string} key
+ * @param {CSSStyleDeclaration} [htmlStyle] if not provided, it is computed
+ * @returns {string}
+ */
+function _getCSSVariableValue(key, htmlStyle) {
+    if (htmlStyle === undefined) {
+        htmlStyle = window.getComputedStyle(document.documentElement);
+    }
+    // Get trimmed value from the HTML element
+    let value = htmlStyle.getPropertyValue(`--${key}`).trim();
+    // If it is a color value, it needs to be normalized
+    value = ColorpickerWidget.normalizeCSSColor(value);
+    // Normally scss-string values are "printed" single-quoted. That way no
+    // magic conversation is needed when customizing a variable: either save it
+    // quoted for strings or non quoted for colors, numbers, etc. However,
+    // Chrome has the annoying behavior of changing the single-quotes to
+    // double-quotes when reading them through getPropertyValue...
+    return value.replace(/"/g, "'");
+}
 
 return {
     CSS_SHORTHANDS: CSS_SHORTHANDS,
@@ -178,5 +198,6 @@ return {
     areCssValuesEqual: _areCssValuesEqual,
     isColorCombinationName: _isColorCombinationName,
     computeColorClasses: _computeColorClasses,
+    getCSSVariableValue: _getCSSVariableValue,
 };
 });
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 285283f1fc8..daa53fb7dae 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1198,9 +1198,7 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
             const cssCompatible = this.options.dataAttributes.hasOwnProperty('cssCompatible');
             if ((useCssColor || cssCompatible) && !ColorpickerWidget.isCSSColor(value)) {
                 if (useCssColor) {
-                    const style = window.getComputedStyle(document.documentElement);
-                    value = style.getPropertyValue(`--${value}`).trim();
-                    value = ColorpickerWidget.normalizeCSSColor(value);
+                    value = weUtils.getCSSVariableValue(value);
                 } else {
                     value = `var(--${value})`;
                 }
@@ -1840,8 +1838,7 @@ const SnippetOptionWidget = Widget.extend({
         // At this point, the widget value is either a property/color name or
         // an actual css property value. If it is a property/color name, we will
         // apply a css variable as style value.
-        const htmlStyle = window.getComputedStyle(document.documentElement);
-        const htmlPropValue = htmlStyle.getPropertyValue('--' + widgetValue);
+        const htmlPropValue = weUtils.getCSSVariableValue(widgetValue);
         if (htmlPropValue) {
             widgetValue = `var(--${widgetValue})`;
         }
@@ -2999,9 +2996,7 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
      */
     _normalizeColor(color) {
         if (!ColorpickerWidget.isCSSColor(color)) {
-            const style = window.getComputedStyle(document.documentElement);
-            color = style.getPropertyValue('--' + color).trim();
-            color = ColorpickerWidget.normalizeCSSColor(color);
+            color = weUtils.getCSSVariableValue(color);
         }
         return color;
     },
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 5ed02d3a332..25e8dfa2835 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
@@ -115,7 +115,7 @@ const ColorPaletteWidget = Widget.extend({
             }
             this.colorNames.push(colorName);
             if (!isCCName && !elem.classList.contains('d-none')) {
-                const color = ColorpickerWidget.normalizeCSSColor(this.style.getPropertyValue('--' + colorName).trim());
+                const color = weUtils.getCSSVariableValue(colorName, this.style);
                 this.colorToColorNames[color] = colorName;
             }
         });
@@ -125,7 +125,7 @@ const ColorPaletteWidget = Widget.extend({
         if (this.options.selectedColor) {
             let selectedColor = this.options.selectedColor;
             if (compatibilityColorNames.includes(selectedColor)) {
-                selectedColor = this.style.getPropertyValue('--' + selectedColor).trim() || selectedColor;
+                selectedColor = weUtils.getCSSVariableValue(selectedColor, this.style) || selectedColor;
             }
             selectedColor = ColorpickerWidget.normalizeCSSColor(selectedColor);
             if (selectedColor !== 'rgba(0, 0, 0, 0)') {
@@ -138,7 +138,7 @@ const ColorPaletteWidget = Widget.extend({
         // Colorpicker
         let defaultColor = this.selectedColor;
         if (defaultColor && !ColorpickerWidget.isCSSColor(defaultColor)) {
-            defaultColor = ColorpickerWidget.normalizeCSSColor(this.style.getPropertyValue('--' + defaultColor).trim());
+            defaultColor = weUtils.getCSSVariableValue(defaultColor, this.style);
         }
         this.colorPicker = new ColorpickerWidget(this, {
             defaultColor: defaultColor,
@@ -175,8 +175,8 @@ const ColorPaletteWidget = Widget.extend({
                 });
             },
         });
-        this.style.getPropertyValue(`--custom-colors`).trim().split(' ').forEach(v => {
-            const color = this.style.getPropertyValue(`--${v.substring(1, v.length - 1)}`).trim();
+        weUtils.getCSSVariableValue('custom-colors', this.style).split(' ').forEach(v => {
+            const color = weUtils.getCSSVariableValue(v.substring(1, v.length - 1), this.style);
             if (ColorpickerWidget.isCSSColor(color)) {
                 this._addCustomColor(existingColors, color);
             }
@@ -201,7 +201,7 @@ const ColorPaletteWidget = Widget.extend({
             return;
         }
         if (!ColorpickerWidget.isCSSColor(color)) {
-            color = this.style.getPropertyValue('--' + color).trim();
+            color = weUtils.getCSSVariableValue(color, this.style);
         }
         const normColor = ColorpickerWidget.normalizeCSSColor(color);
         if (!existingColors.has(normColor)) {