[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, 7 insertions, 5 deletions

diff --git a/addons/website/static/src/snippets/s_chart/000.js b/addons/website/static/src/snippets/s_chart/000.js
index 865190fc81b..2c67bd03612 100644
--- a/addons/website/static/src/snippets/s_chart/000.js
+++ b/addons/website/static/src/snippets/s_chart/000.js
@@ -2,6 +2,7 @@ odoo.define('website.s_chart', function (require) {
 'use strict';
 
 const publicWidget = require('web.public.widget');
+const weUtils = require('web_editor.utils');
 
 const ChartWidget = publicWidget.Widget.extend({
     selector: '.s_chart',
@@ -131,7 +132,7 @@ const ChartWidget = publicWidget.Widget.extend({
         if (!color) {
             return 'transparent';
         }
-        return this.style.getPropertyValue(`--${color}`).trim() || color;
+        return weUtils.getCSSVariableValue(color, this.style) || color;
     },
 });
 
diff --git a/addons/website/static/src/snippets/s_chart/options.js b/addons/website/static/src/snippets/s_chart/options.js
index 6dd654fdf8c..a76a0a71f31 100644
--- a/addons/website/static/src/snippets/s_chart/options.js
+++ b/addons/website/static/src/snippets/s_chart/options.js
@@ -4,6 +4,7 @@ odoo.define('website.s_chart_options', function (require) {
 var core = require('web.core');
 const {ColorpickerWidget} = require('web.Colorpicker');
 var options = require('web_editor.snippets.options');
+const weUtils = require('web_editor.utils');
 
 var _t = core._t;
 
@@ -81,7 +82,7 @@ options.registry.InnerChart = options.Class.extend({
             const color = el.dataset.backgroundColor || el.dataset.borderColor;
             if (color) {
                 el.style.border = '2px solid';
-                el.style.borderColor = ColorpickerWidget.isCSSColor(color) ? color : this.style.getPropertyValue(`--${color}`).trim();
+                el.style.borderColor = ColorpickerWidget.isCSSColor(color) ? color : weUtils.getCSSVariableValue(color, this.style);
             }
         });
     },
@@ -368,7 +369,7 @@ options.registry.InnerChart = options.Class.extend({
             }
         });
         customColors = customColors.filter((el, i, array) => {
-            return !this.style.getPropertyValue(`--${el}`) && array.indexOf(el) === i && el !== ''; // unique non class not transparent
+            return !weUtils.getCSSVariableValue(el, this.style) && array.indexOf(el) === i && el !== ''; // unique non class not transparent
         });
         ev.data.onSuccess(customColors);
     },
diff --git a/addons/website/static/src/snippets/s_countdown/000.js b/addons/website/static/src/snippets/s_countdown/000.js
index cdee6a0fd8a..9959f6680a4 100644
--- a/addons/website/static/src/snippets/s_countdown/000.js
+++ b/addons/website/static/src/snippets/s_countdown/000.js
@@ -4,6 +4,7 @@ odoo.define('website.s_countdown', function (require) {
 const {ColorpickerWidget} = require('web.Colorpicker');
 const core = require('web.core');
 const publicWidget = require('web.public.widget');
+const weUtils = require('web_editor.utils');
 
 const qweb = core.qweb;
 const _t = core._t;
@@ -75,8 +76,7 @@ const CountdownWidget = publicWidget.Widget.extend({
         if (ColorpickerWidget.isCSSColor(color)) {
             return color;
         }
-        const style = window.getComputedStyle(document.documentElement);
-        return style.getPropertyValue('--' + color).trim();
+        return weUtils.getCSSVariableValue(color);
     },
     /**
      * Gets the time difference in seconds between now and countdown due date.