From 12107a4e5fb131bab9200f03dd09879f08f50176 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Fri, 29 Apr 2022 15:20:25 +0000
Subject: [PATCH] [FIX] mass_mailing: properly parse all values in design tab

The default values of borders for buttons were not properly parsed in
the design tab because they come from the `btn` class, which was not
part of the selectors for buttons in the design tab. The fake element
created to get computed styles therefore didn't have that class and thus
didn't have a border value.

The separator width value was also broken whenever it was "auto" since
we're expecting values of "25%", "50%", "75%" or "100%". This interprets
"auto" as equivalent to "100%" in all cases.

closes odoo/odoo#92138

X-original-commit: 56521a69d9cb61ec726722a2b102150bb1714070
Related: odoo/enterprise#27708
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Signed-off-by: Antoine Guenet <age@odoo.com>
---
 .../src/js/mass_mailing_design_constants.js   |  4 +--
 .../static/src/js/mass_mailing_snippets.js    |  2 ++
 addons/mass_mailing/views/snippets_themes.xml | 32 +++++++++----------
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/addons/mass_mailing/static/src/js/mass_mailing_design_constants.js b/addons/mass_mailing/static/src/js/mass_mailing_design_constants.js
index a5bcc187249..ed4a837608f 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_design_constants.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_design_constants.js
@@ -26,8 +26,8 @@ export const PRIORITY_STYLES = {
     'h3': ['font-family'],
     'p': ['font-family'],
     'a:not(.btn)': [],
-    'a.btn-primary': [],
-    'a.btn-secondary': [],
+    'a.btn.btn-primary': [],
+    'a.btn.btn-secondary': [],
     'hr': [],
 };
 export const RE_CSS_TEXT_MATCH = /([^{]+)([^}]+)/;
diff --git a/addons/mass_mailing/static/src/js/mass_mailing_snippets.js b/addons/mass_mailing/static/src/js/mass_mailing_snippets.js
index 1553e09536f..cabe4eb8cc5 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_snippets.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_snippets.js
@@ -358,6 +358,8 @@ options.registry.DesignTab = options.Class.extend({
                         }
                         if (params.cssProperty === 'font-weight') {
                             res = parseInt(res) >= 600 ? 'bolder' : '';
+                        } else if (res === 'auto') {
+                            res = '100%';
                         }
                     }
                     fakeElement.remove();
diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index 7399d328cc1..030ad054e5c 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -670,32 +670,32 @@
         <we-row string="Links" class="o_design_tab_title">
             <we-colorpicker data-customize-css-property=""
                             data-css-property="color"
-                            data-selector-text="a:not(.btn), a.btn-link"
+                            data-selector-text="a:not(.btn), a.btn.btn-link"
                             data-no-transparency="true"
                             data-color-prefix="text-"/>
             <we-button title="Underline" class="fa fa-fw fa-underline" data-no-preview="true" data-toggle="true"
                         data-customize-css-property="underline"
-                        data-selector-text="a:not(.btn), a.btn-link"
+                        data-selector-text="a:not(.btn), a.btn.btn-link"
                         data-css-property="text-decoration-line"/>
         </we-row>
         <!-- PRIMARY BUTTONS -->
         <we-row string="Primary Buttons" class="o_design_tab_title">
             <we-input data-customize-css-property=""
                         data-css-property="font-size"
-                        data-selector-text="a.btn-primary, a.btn-outline-primary, a.btn-fill-primary"
+                        data-selector-text="a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary"
                         data-unit="px"/>
             <we-colorpicker data-customize-css-property=""
                             data-css-property="color"
-                            data-selector-text="a.btn-primary, a.btn-outline-primary, a.btn-fill-primary"
+                            data-selector-text="a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary"
                             data-no-transparency="true"
                             data-color-prefix="text-"/>
             <we-colorpicker data-customize-css-property=""
                             data-css-property="background-color"
-                            data-selector-text="a.btn-primary, a.btn-outline-primary, a.btn-fill-primary"
+                            data-selector-text="a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary"
                             data-no-transparency="true"
                             data-color-prefix="bg-"/>
         </we-row>
-        <we-select string="⌙ Size" data-selector-text="a.btn-primary, a.btn-outline-primary, a.btn-fill-primary">
+        <we-select string="⌙ Size" data-selector-text="a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary">
             <we-button data-apply-button-size="btn-sm">Small</we-button>
             <we-button data-apply-button-size="btn-md">Medium</we-button>
             <we-button data-apply-button-size="btn-lg">Large</we-button>
@@ -703,9 +703,9 @@
         <we-row string="⌙ Border">
             <we-input data-customize-css-property=""
                         data-css-property="border-width"
-                        data-selector-text="a.btn-primary, a.btn-outline-primary, a.btn-fill-primary"
+                        data-selector-text="a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary"
                         data-unit="px"/>
-            <we-select data-selector-text="a.btn-primary, a.btn-outline-primary, a.btn-fill-primary" data-css-property="border-style">
+            <we-select data-selector-text="a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary" data-css-property="border-style">
                 <we-button title="Solid" data-customize-css-property="solid">
                     <div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/>
                 </we-button>
@@ -721,7 +721,7 @@
             </we-select>
             <we-colorpicker data-customize-css-property=""
                             data-css-property="border-color"
-                            data-selector-text="a.btn-primary, a.btn-outline-primary, a.btn-fill-primary"
+                            data-selector-text="a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary"
                             data-no-transparency="true"
                             data-color-prefix="border-"/>
         </we-row>
@@ -729,20 +729,20 @@
         <we-row string="Secondary Buttons" class="o_design_tab_title">
             <we-input data-customize-css-property=""
                         data-css-property="font-size"
-                        data-selector-text="a.btn-secondary, a.btn-outline-secondary, a.btn-fill-secondary"
+                        data-selector-text="a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary"
                         data-unit="px"/>
             <we-colorpicker data-customize-css-property=""
                             data-css-property="color"
-                            data-selector-text="a.btn-secondary, a.btn-outline-secondary, a.btn-fill-secondary"
+                            data-selector-text="a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary"
                             data-no-transparency="true"
                             data-color-prefix="text-"/>
             <we-colorpicker data-customize-css-property=""
                             data-css-property="background-color"
-                            data-selector-text="a.btn-secondary, a.btn-outline-secondary, a.btn-fill-secondary"
+                            data-selector-text="a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary"
                             data-no-transparency="true"
                             data-color-prefix="bg-"/>
         </we-row>
-        <we-select string="⌙ Size" data-selector-text="a.btn-secondary, a.btn-outline-secondary, a.btn-fill-secondary">
+        <we-select string="⌙ Size" data-selector-text="a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary">
             <we-button data-apply-button-size="btn-sm">Small</we-button>
             <we-button data-apply-button-size="btn-md">Medium</we-button>
             <we-button data-apply-button-size="btn-lg">Large</we-button>
@@ -750,9 +750,9 @@
         <we-row string="⌙ Border">
             <we-input data-customize-css-property=""
                         data-css-property="border-width"
-                        data-selector-text="a.btn-secondary, a.btn-outline-secondary, a.btn-fill-secondary"
+                        data-selector-text="a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary"
                         data-unit="px"/>
-            <we-select data-selector-text="a.btn-secondary, a.btn-outline-secondary, a.btn-fill-secondary" data-css-property="border-style">
+            <we-select data-selector-text="a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary" data-css-property="border-style">
                 <we-button title="Solid" data-customize-css-property="solid">
                     <div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/>
                 </we-button>
@@ -768,7 +768,7 @@
             </we-select>
             <we-colorpicker data-customize-css-property=""
                             data-css-property="border-color"
-                            data-selector-text="a.btn-secondary, a.btn-outline-secondary, a.btn-fill-secondary"
+                            data-selector-text="a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary"
                             data-no-transparency="true"
                             data-color-prefix="border-"/>
         </we-row>