From 716ec1bdf015e2ed58cbe73374a166a3473e18c6 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Tue, 17 Aug 2021 12:07:45 +0000 Subject: [PATCH] [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) --- .../web_editor/static/src/js/common/utils.js | 23 +++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/addons/web_editor/static/src/js/common/utils.js b/addons/web_editor/static/src/js/common/utils.js index 169a4dcb240..a473f56b147 100644 --- a/addons/web_editor/static/src/js/common/utils.js +++ b/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);