From d34c1e027b9edebfe299fba64c7f91d49a950c87 Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Mon, 2 Jan 2023 09:37:29 +0000 Subject: [PATCH] [FIX] web_editor: fix handling of the CSS !important marker Since [1] the mechanism that was introduced in [2] is broken because a snapshot of the property value is used instead of the dynamically computed property value to determine whether the `!important` marker should be set on the modified property. This commit makes sure the value is obtained for each comparison instead of relying on a snapshot across all comparisons. Steps to reproduce: - Drop a Banner block in a website page. - Select the box. - Set the background to a custom solid color. => The `background-color` style has the `!important` marker on it, while it should not. [1]: https://github.com/odoo/odoo/commit/815d1f775c13ad9d4463c2d571dffc4691e81a35 [2]: https://github.com/odoo/odoo/commit/d3c3dab8950abc25b29937605091d8ce32305fa4 closes odoo/odoo#109117 X-original-commit: fff46efc04cbce3ff5bff1ded501197fbd5dca84 Signed-off-by: Quentin Smetz (qsm) Signed-off-by: Benoit Socias (bso) --- .../web_editor/static/src/js/editor/snippets.options.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) 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 d4eb4161a90..92f3896953d 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -3347,10 +3347,8 @@ const SnippetOptionWidget = Widget.extend({ return true; } - const propertyValue = styles.getPropertyValue(cssProp); - // This condition requires extraClass to NOT be set. - if (!weUtils.areCssValuesEqual(propertyValue, cssValue, cssProp, this.$target[0])) { + if (!weUtils.areCssValuesEqual(styles.getPropertyValue(cssProp), cssValue, cssProp, this.$target[0])) { // Property must be set => extraClass will be enabled. if (params.extraClass) { // The extraClass is temporarily removed during selectStyle @@ -3363,7 +3361,7 @@ const SnippetOptionWidget = Widget.extend({ this.$target[0].classList.add(params.extraClass); // Set inline style only if different from value defined // with extraClass. - if (!weUtils.areCssValuesEqual(propertyValue, cssValue, cssProp, this.$target[0])) { + if (!weUtils.areCssValuesEqual(styles.getPropertyValue(cssProp), cssValue, cssProp, this.$target[0])) { this.$target[0].style.setProperty(cssProp, cssValue); } } else { @@ -3372,7 +3370,7 @@ const SnippetOptionWidget = Widget.extend({ } // If change had no effect then make it important. // This condition requires extraClass to be set. - if (!weUtils.areCssValuesEqual(propertyValue, cssValue, cssProp, this.$target[0])) { + if (!weUtils.areCssValuesEqual(styles.getPropertyValue(cssProp), cssValue, cssProp, this.$target[0])) { this.$target[0].style.setProperty(cssProp, cssValue, 'important'); } if (params.extraClass) {