From 96c859eb0a0c36d38f285f10aa4ec6493c8745e3 Mon Sep 17 00:00:00 2001
From: Nicolas Bayet <nby@odoo.com>
Date: Wed, 26 Jan 2022 09:14:31 +0000
Subject: [PATCH] [IMP] web_editor: batch write in formatTables to avoid layout
 thrashing

This batches all writes in the `formatTables` method of `convert_inline`
so as to minimize layout thrashing and therefore improve performance.

X-original-commit: f3c0f0c62b9f31e47ef8644c79e1b9751d0ba746
Part-of: odoo/odoo#84513
Co-authored-by: Nicolas Bayet <nby@odoo.com>
Co-authored-by: Antoine Guenet <age@odoo.com>
---
 .../static/src/js/backend/convert_inline.js          | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 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 0c8af9a8e45..914fbf3c311 100644
--- a/addons/web_editor/static/src/js/backend/convert_inline.js
+++ b/addons/web_editor/static/src/js/backend/convert_inline.js
@@ -493,6 +493,7 @@ function fontToImg($editable) {
  * @param {JQuery} $editable
  */
 function formatTables($editable) {
+    const writes = [];
     for (const table of $editable.find('table.o_mail_snippet_general, .o_mail_snippet_general table')) {
         const $table = $(table);
         const tablePaddingTop = parseFloat($table.css('padding-top').match(RE_PADDING)[1]);
@@ -509,26 +510,27 @@ function formatTables($editable) {
             if (!rowIndex) {
                 const match = $column.css('padding-top').match(RE_PADDING);
                 const columnPaddingTop = match ? parseFloat(match[1]) : 0;
-                $column.css('padding-top', columnPaddingTop + tablePaddingTop);
+                writes.push(() => { $column.css('padding-top', columnPaddingTop + tablePaddingTop); });
             }
             if (columnIndex === $columnsInRow.length - 1) {
                 const match = $column.css('padding-right').match(RE_PADDING);
                 const columnPaddingRight = match ? parseFloat(match[1]) : 0;
-                $column.css('padding-right', columnPaddingRight + tablePaddingRight);
+                writes.push(() => { $column.css('padding-right', columnPaddingRight + tablePaddingRight); });
             }
             if (rowIndex === $rows.length - 1) {
                 const match = $column.css('padding-bottom').match(RE_PADDING);
                 const columnPaddingBottom = match ? parseFloat(match[1]) : 0;
-                $column.css('padding-bottom', columnPaddingBottom + tablePaddingBottom);
+                writes.push(() => { $column.css('padding-bottom', columnPaddingBottom + tablePaddingBottom); });
             }
             if (!columnIndex) {
                 const match = $column.css('padding-left').match(RE_PADDING);
                 const columnPaddingLeft = match ? parseFloat(match[1]) : 0;
-                $column.css('padding-left', columnPaddingLeft + tablePaddingLeft);
+                writes.push(() => { $column.css('padding-left', columnPaddingLeft + tablePaddingLeft); });
             }
         }
-        $table.css('padding', '');
+        writes.push(() => { $table.css('padding', ''); });
     }
+    writes.forEach((fn) => fn());
     // Ensure a tbody in every table and cancel its default style.
     for (const table of $editable.find('table:not(:has(tbody))')) {
         const $contents = $(table).contents();