From 6ec2d52c6fbec1027e623c2d6ad4d213d94dd1ed Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Tue, 1 Feb 2022 13:51:44 +0000
Subject: [PATCH] [FIX] web_editor: remove rule grouping in css rules parsing

Since some css was loaded twice, when parsing rules, we grouped similar
rules in order to minimize the amount of rules on which to iterate
during conversion, so as to improve performance. This is not needed
anymore now css is loaded only once, so we can remove this extra
processing.

X-original-commit: 3db6f4a345015adf99c2a744066dcdf8f076a657
Part-of: odoo/odoo#84513
Co-authored-by: Antoine Guenet <age@odoo.com>
Co-authored-by: Nicolas Bayet <nby@odoo.com>
---
 .../static/src/js/backend/convert_inline.js   | 69 ++++---------------
 1 file changed, 13 insertions(+), 56 deletions(-)

diff --git a/addons/web_editor/static/src/js/backend/convert_inline.js b/addons/web_editor/static/src/js/backend/convert_inline.js
index 914fbf3c311..a6adb8823fa 100644
--- a/addons/web_editor/static/src/js/backend/convert_inline.js
+++ b/addons/web_editor/static/src/js/backend/convert_inline.js
@@ -617,13 +617,18 @@ function getCSSRules(doc) {
                 }
             }
             for (const subRule of subRules) {
-                const selectorText = subRule.selectorText;
-                if (selectorText && !SELECTORS_IGNORE.test(selectorText)) {
-                    const style = _normalizeStyle(subRule.style);
-                    if (Object.keys(style).length) {
-                        for (let selector of selectorText.split(',')) {
-                            selector = selector.trim();
+                const selectorText = subRule.selectorText || '';
+                for (const selector of selectorText.split(',')) {
+                    if (selector && !SELECTORS_IGNORE.test(selector)) {
+                        const style = _normalizeStyle(subRule.style);
+                        if (Object.keys(style).length) {
                             cssRules.push({ selector, style, specificity: _computeSpecificity(selector) });
+                            if (selector === 'body') {
+                                // The top element of a mailing has the class
+                                // 'o_layout'. Give it the body's styles so they can
+                                // trickle down.
+                                cssRules.push({ selector: '.o_layout', style, specificity: 1 });
+                            }
                         }
                     }
                 }
@@ -631,56 +636,7 @@ function getCSSRules(doc) {
         }
     }
 
-    // Group together rules with the same selector.
-    for (let i = cssRules.length - 1; i >= 0; i--) {
-        for (let j = cssRules.length - 1; j >= 0; j--) {
-            if (i > j && cssRules[i].selector === cssRules[j].selector) {
-                // Styles of "later" selector override styles of "earlier" one.
-                const importantJStyles = {};
-                for (const [key, value] of Object.entries(cssRules[j].style)) {
-                    if (value.endsWith('!important')) {
-                        importantJStyles[key] = value;
-                    }
-                }
-                cssRules[i].style = {...cssRules[j].style, ...cssRules[i].style};
-                for (const [key, value] of Object.entries(importantJStyles)) {
-                    cssRules[i].style[key] = value;
-                }
-                cssRules.splice(j, 1);
-                i--;
-            }
-        }
-    }
-    // The top element of a mailing has the class 'o_layout'. Give it the body's
-    // styles so they can trickle down.
-    cssRules.unshift({
-        selector: '.o_layout',
-        style: {...cssRules.find(r => r.selector === 'body').style},
-        specificity: 1,
-    });
-
-    const groupedRules = [];
-    const ungroupedRules = [...cssRules];
-    while (ungroupedRules.length) {
-        const rule = ungroupedRules.shift();
-        let groupedRule = {...rule};
-        for (const otherRule of ungroupedRules) {
-            if (
-                otherRule !== rule &&
-                rule.specificity === otherRule.specificity &&
-                Object.keys(rule.style).length === Object.keys(otherRule.style).length &&
-                Object.keys(rule.style).every(key => key in otherRule.style && rule.style[key] === otherRule.style[key])
-            ) {
-                if (rule.selector !== otherRule.selector) {
-                    groupedRule.selector = `${groupedRule.selector},${otherRule.selector}`;
-                }
-                ungroupedRules.splice(ungroupedRules.indexOf(otherRule), 1);
-            }
-        }
-        groupedRules.push(groupedRule);
-    }
-    groupedRules.sort((a, b) => a.specificity - b.specificity);
-    return groupedRules;
+    return cssRules;
 }
 /**
  * Convert Bootstrap list groups and their items to table structures.
@@ -906,6 +862,7 @@ function _getColumnSize(column) {
 function _getMatchedCSSRules(node, cssRules) {
     node.matches = node.matches || node.webkitMatchesSelector || node.mozMatchesSelector || node.msMatchesSelector || node.oMatchesSelector;
     const css = [];
+    cssRules.sort((a, b) => a.specificity - b.specificity);
     for (const rule of cssRules) {
         if (node.matches(rule.selector)) {
             css.push([rule.selector, rule.style, rule.specificity]);