[FIX] web_editor: properly compare CSS variables and CSS values

The editor sometimes compare CSS values, in particular in the
selectStyle method where a given style is not applied if it would have
no effect (e.g. applying an inline pink background-color is useless if
the block is naturally pink because of CSS rules). That comparison
failed when it was comparing 'var(--XXX)' and 'YYY' as 'var(--XXX)' was
not processed as the CSS variable 'XXX' to be read.

Related to task-2599770

closes odoo/odoo#75201

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

addons/web_editor/static/src/js/common/utils.js

@@ -135,15 +135,30 @@ function _getNumericAndUnit(value) {
  * @returns {boolean}
  */
 function _areCssValuesEqual(value1, value2, cssProp, $target) {
-    // If not colors, they will be left untouched
-    value1 = ColorpickerWidget.normalizeCSSColor(value1);
-    value2 = ColorpickerWidget.normalizeCSSColor(value2);
-
     // String comparison first
     if (value1 === value2) {
         return true;
     }
 
+    // It could be a CSS variable, in that case the actual value has to be
+    // retrieved before comparing.
+    if (value1.startsWith('var(--')) {
+        value1 = _getCSSVariableValue(value1.substring(6, value1.length - 1));
+    }
+    if (value2.startsWith('var(--')) {
+        value2 = _getCSSVariableValue(value2.substring(6, value2.length - 1));
+    }
+    if (value1 === value2) {
+        return true;
+    }
+
+    // They may be colors, normalize then re-compare the resulting string
+    const color1 = ColorpickerWidget.normalizeCSSColor(value1);
+    const color2 = ColorpickerWidget.normalizeCSSColor(value2);
+    if (color1 === color2) {
+        return true;
+    }
+
     // Convert the second value in the unit of the first one and compare
     // floating values
     const data = _getNumericAndUnit(value1);