From d3c3dab8950abc25b29937605091d8ce32305fa4 Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Thu, 17 Feb 2022 08:18:15 +0000
Subject: [PATCH] [IMP] web_editor: apply important on selectStyle only when
 needed

Before this commit `selectStyle` was always applying inline styles as
`!important`.

After this commit the `!important` priority is only set if the style is
not taken into account without it.

Steps to reproduce:
- drop a "Text - Image" snippet
- select a solid Background color
=> `background-color` appears in inline style without `!important`
- select the image
- set a 10px Border width
=> `border-width` appears in inline style with `!important`
- set a 10px Round Corners
=> `border-radius` appears in inline style with `!important`
- set a 1px Border width
=> `border-width` does NOT appear in inline style because the added
`border` class already specifies that width

task-2765880

closes odoo/odoo#84765

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/editor/snippets.options.js  | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

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 660241f20b1..ec1d6854850 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3273,8 +3273,35 @@ const SnippetOptionWidget = Widget.extend({
         hasUserValue = applyCSS.call(this, cssProps[0], values.join(' '), styles) || hasUserValue;
 
         function applyCSS(cssProp, cssValue, styles) {
+            // This condition requires extraClass to NOT be set.
             if (!weUtils.areCssValuesEqual(styles[cssProp], cssValue, cssProp, this.$target[0])) {
-                this.$target[0].style.setProperty(cssProp, cssValue, 'important');
+                // Property must be set => extraClass will be enabled.
+                if (params.extraClass) {
+                    // The extraClass is temporarily removed during selectStyle
+                    // because it is enabled only if the element style is set
+                    // by the option. (E.g. add the bootstrap border class only
+                    // if there is a border width.) Unfortunately the
+                    // extraClass might specify default !important properties,
+                    // therefore determining whether !important is needed
+                    // requires the class to be applied.
+                    this.$target[0].classList.add(params.extraClass);
+                    // Set inline style only if different from value defined
+                    // with extraClass.
+                    if (!weUtils.areCssValuesEqual(styles[cssProp], cssValue, cssProp, this.$target[0])) {
+                        this.$target[0].style.setProperty(cssProp, cssValue);
+                    }
+                } else {
+                    // Inline style required.
+                    this.$target[0].style.setProperty(cssProp, cssValue);
+                }
+                // If change had no effect then make it important.
+                // This condition requires extraClass to be set.
+                if (!weUtils.areCssValuesEqual(styles[cssProp], cssValue, cssProp, this.$target[0])) {
+                    this.$target[0].style.setProperty(cssProp, cssValue, 'important');
+                }
+                if (params.extraClass) {
+                    this.$target[0].classList.remove(params.extraClass);
+                }
                 return true;
             }
             return false;