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

1 files changed, 21 insertions, 0 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,
 };
 });