From 69265a2d3e2e9d2325737843b221b49c7a8e4f8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicolas=20=C3=89vrard?= <nicoe@b2ck.com>
Date: Fri, 21 Nov 2025 16:09:28 +0100
Subject: [PATCH] Replace jQuery's hide and show by our own implementation

jQuery's implementation triggers forced reflows and style recomputation which
hinders performances. Given that we only care about the node on which the call
is done we can use a simpler and more efficient implementation.

Closes #14330
---
 sao/src/common.js    | 16 +++++-----
 sao/src/sao.js       | 33 ++++++++++++++++++--
 sao/src/screen.js    | 22 ++++++-------
 sao/src/session.js   |  8 ++---
 sao/src/tab.js       |  2 +-
 sao/src/view/form.js | 74 ++++++++++++++++++++++----------------------
 sao/src/view/tree.js | 72 +++++++++++++++++++++---------------------
 sao/src/window.js    |  4 +--
 8 files changed, 129 insertions(+), 102 deletions(-)

diff --git a/sao/src/common.js b/sao/src/common.js
index 6d32b10bca..cc1f3092cd 100644
--- a/sao/src/common.js
+++ b/sao/src/common.js
@@ -1014,9 +1014,9 @@
                 states = {'invisible': true};
             }
             if (states.invisible) {
-                this.el.hide();
+                this.el.sao_hide();
             } else {
-                this.el.show();
+                this.el.sao_show();
             }
             this.el.prop('disabled', Boolean(states.readonly));
             this.set_icon(states.icon || this.attributes.icon);
@@ -3746,7 +3746,7 @@
                     'text': '.',
                 }));
             }
-            this.el.hide();
+            this.el.sao_hide();
             jQuery(() => {
                 this.el.appendTo('body');
             });
@@ -3757,7 +3757,7 @@
             }
             return window.setTimeout(() => {
                 this.queries += 1;
-                this.el.show();
+                this.el.sao_show();
             }, timeout);
         },
         hide: function(timeoutID) {
@@ -3767,7 +3767,7 @@
             }
             if (this.queries <= 0) {
                 this.queries = 0;
-                this.el.hide();
+                this.el.sao_hide();
             }
         }
     });
@@ -3821,7 +3821,7 @@
             }).append(jQuery('<ul/>', {
                 'class': 'list-unstyled',
             })).appendTo(this.menu);
-            this.actions.hide();
+            this.actions.sao_hide();
 
             this.source = source;
             this.match_selected = match_selected;
@@ -3877,10 +3877,10 @@
             }
             this.actions.find('li.action').remove();
             if (jQuery.isEmptyObject(actions)) {
-                this.actions.hide();
+                this.actions.sao_hide();
                 return;
             }
-            this.actions.show();
+            this.actions.sao_show();
             actions.forEach(function(action) {
                 var action_id = action[0];
                 var content = action[1];
diff --git a/sao/src/sao.js b/sao/src/sao.js
index 8b1d127ed5..4efe7878a5 100644
--- a/sao/src/sao.js
+++ b/sao/src/sao.js
@@ -88,7 +88,22 @@ var Sao = {
         // continue
     }
 
-    // Add .uniqueId to jQuery
+    Sao._showHide = function(elements, show) {
+        for (let element of elements) {
+            let display = element.style.display;
+            if (show) {
+                if (display === 'none') {
+                    element.style.display = 'revert';
+                }
+            } else {
+                if (display !== 'none') {
+                    element.style.display = 'none';
+                }
+            }
+        }
+    }
+
+    // Add custom functions to jQuery
     jQuery.fn.extend({
         uniqueId: (function() {
             var uuid = 0;
@@ -99,7 +114,19 @@ var Sao = {
                     }
                 });
             };
-        })()
+        })(),
+        sao_show: function() {
+            Sao._showHide(this.toArray(), true);
+            return this;
+        },
+        sao_hide: function() {
+            Sao._showHide(this.toArray(), false);
+            return this;
+        },
+        sao_toggle: function(bool) {
+            Sao._showHide(this.toArray(), bool);
+            return this;
+        },
     });
 
     window.onbeforeunload = function(e) {
@@ -818,7 +845,7 @@ var Sao = {
             var view = screen.current_view;
             view.table.removeClass('table table-bordered');
             view.table.addClass('no-responsive');
-            view.table.find('thead').hide();
+            view.table.find('thead').sao_hide();
             view.table.find('colgroup > col.tree-menu').css('width', 0);
             var gs = new Sao.GlobalSearch();
             jQuery('#global-search').empty();
diff --git a/sao/src/screen.js b/sao/src/screen.js
index 756d3abb27..842fa82a0e 100644
--- a/sao/src/screen.js
+++ b/sao/src/screen.js
@@ -52,7 +52,7 @@
                 'aria-label': Sao.i18n.gettext("Clear Search"),
                 'title': Sao.i18n.gettext("Clear Search"),
             }).append(Sao.common.ICONFACTORY.get_icon_img('tryton-clear'));
-            but_clear.hide();
+            but_clear.sao_hide();
             but_clear.click(() => {
                 this.search_entry.val('').change();
                 this.do_search();
@@ -60,9 +60,9 @@
 
             this.search_entry.on('keyup change', () => {
                 if (this.search_entry.val()) {
-                    but_clear.show();
+                    but_clear.sao_show();
                 } else {
-                    but_clear.hide();
+                    but_clear.sao_hide();
                 }
                 this.bookmark_match();
             });
@@ -400,15 +400,15 @@
             this.but_bookmark.prop(
                 'disabled', jQuery.isEmptyObject(this.bookmarks()));
             this.bookmark_match();
-            this.filter_box.show();
+            this.filter_box.sao_show();
             if (this.tab) {
-                this.tab.show();
+                this.tab.sao_show();
             }
         },
         hide_filter: function() {
-            this.filter_box.hide();
+            this.filter_box.sao_hide();
             if (this.tab) {
-                this.tab.hide();
+                this.tab.sao_hide();
             }
         },
         set: function(widget) {
@@ -738,7 +738,7 @@
                     this, placeholder, el);
                 if (~navigator.userAgent.indexOf("Firefox")) {
                     // time input on Firefox does not have a pop-up
-                    entry.find('.icon-input').hide();
+                    entry.find('.icon-input').sao_hide();
                 }
                 return entry;
             },
@@ -1406,12 +1406,12 @@
                     let view_tree = this.fields_view_tree[
                         this.current_view.view_id] || {};
                     if ('active' in view_tree.fields) {
-                        this.screen_container.but_active.show();
+                        this.screen_container.but_active.sao_show();
                     } else {
-                        this.screen_container.but_active.hide();
+                        this.screen_container.but_active.sao_hide();
                     }
                 } else {
-                    this.screen_container.but_active.hide();
+                    this.screen_container.but_active.sao_hide();
                 }
             }
             return jQuery.when.apply(jQuery, deferreds).then(
diff --git a/sao/src/session.js b/sao/src/session.js
index 2d1519d16b..8f227495ff 100644
--- a/sao/src/session.js
+++ b/sao/src/session.js
@@ -229,12 +229,12 @@
             'class': 'form-control',
             'id': 'database',
             'name': 'database',
-        }).hide();
+        }).sao_hide();
         dialog.database_input = jQuery('<input/>', {
             'class': 'form-control',
             'id': 'database',
             'name': 'database',
-        }).hide();
+        }).sao_hide();
         dialog.login_input = jQuery('<input/>', {
             'class': 'form-control',
             'id': 'login',
@@ -389,10 +389,10 @@
                 }
             }
             el.prop('readonly', databases.length == 1);
-            el.show();
+            el.sao_show();
             el.val(database || '');
         }, function() {
-            dialog.database_input.show();
+            dialog.database_input.sao_show();
         });
 
         jQuery.when(Sao.Authentication.services()).then(function(services) {
diff --git a/sao/src/tab.js b/sao/src/tab.js
index d3333c8d7b..df6d883cb8 100644
--- a/sao/src/tab.js
+++ b/sao/src/tab.js
@@ -802,7 +802,7 @@
 
             this.sidebar = jQuery('<div/>', {
                 'class': 'sidebar',
-            }).hide().appendTo(this.main);
+            }).sao_hide().appendTo(this.main);
             this.sidebar_content = jQuery('<div/>', {
                 'class': 'sidebar-content',
             }).appendTo(jQuery('<div/>', {
diff --git a/sao/src/view/form.js b/sao/src/view/form.js
index 0673287982..3738c25351 100644
--- a/sao/src/view/form.js
+++ b/sao/src/view/form.js
@@ -345,7 +345,7 @@ function eval_pyson(value){
             var field;
             var promesses = [];
             if (this.scan_code_btn) {
-                this.scan_code_btn.el.toggle(Boolean(record));
+                this.scan_code_btn.el.sao_toggle(Boolean(record));
             }
             if (record) {
                 // Force to set fields in record
@@ -789,10 +789,10 @@ function eval_pyson(value){
             }
         },
         show: function() {
-            this.el.show();
+            this.el.sao_show();
         },
         hide: function() {
-            this.el.hide();
+            this.el.sao_hide();
         }
     });
 
@@ -1092,7 +1092,7 @@ function eval_pyson(value){
                 this._current = record.id;
             } else {
                 this._current = null;
-                this.el.hide();
+                this.el.sao_hide();
                 return;
             }
             pyson_ctx.context = context;
@@ -1200,9 +1200,9 @@ function eval_pyson(value){
                     return number != 0;
                 });
                 if (non_empty.length) {
-                    this.el.show();
+                    this.el.sao_show();
                 } else {
-                    this.el.hide();
+                    this.el.sao_hide();
                 }
             }
         },
@@ -1412,9 +1412,9 @@ function eval_pyson(value){
         set_invisible: function(invisible) {
             this.visible = !invisible;
             if (invisible) {
-                this.el.hide();
+                this.el.sao_hide();
             } else {
-                this.el.show();
+                this.el.sao_show();
             }
         },
         focus: function() {
@@ -1942,9 +1942,9 @@ function eval_pyson(value){
             this.el.find('input').prop('readonly', readonly);
             if (this.icon){
                 if (readonly) {
-                    this.icon.hide();
+                    this.icon.sao_hide();
                 } else {
-                    this.icon.show();
+                    this.icon.sao_show();
                 }
             }
         },
@@ -1986,7 +1986,7 @@ function eval_pyson(value){
             Sao.View.Form.Time._super.init.call(this, view, attributes);
             if (~navigator.userAgent.indexOf("Firefox")) {
                 // time input on Firefox does not have a pop-up
-                this.input.parent().hide();
+                this.input.parent().sao_hide();
             }
         },
         get_format: function() {
@@ -2067,18 +2067,18 @@ function eval_pyson(value){
         input.attr('step', 1);
         input.attr('lang', Sao.i18n.BC47(Sao.i18n.getlang()));
 
-        input.hide().on('focusout', function() {
+        input.sao_hide().on('focusout', function() {
             if (input[0].checkValidity()) {
                 switch_id(input, input_text);
-                input.hide();
-                input_text.show();
+                input.sao_hide();
+                input_text.sao_show();
             }
         });
         input_text.on('focusin', function() {
             if (!input.prop('readonly')) {
                 switch_id(input, input_text);
-                input_text.hide();
-                input.show();
+                input_text.sao_hide();
+                input.sao_show();
                 window.setTimeout(function() {
                     input.focus();
                 });
@@ -2145,10 +2145,10 @@ function eval_pyson(value){
             var set_symbol = function(el, text) {
                 if (text) {
                     el.text(text);
-                    el.show();
+                    el.sao_show();
                 } else {
                     el.text('');
-                    el.hide();
+                    el.sao_hide();
                 }
             };
             Sao.View.Form.Integer._super.display.call(this);
@@ -2186,8 +2186,8 @@ function eval_pyson(value){
         },
         focus: function() {
             if (!this.input.prop('readonly')) {
-                this.input_text.hide();
-                this.input.show().focus();
+                this.input_text.sao_hide();
+                this.input.sao_show().focus();
             } else {
                 this.input_text.focus();
             }
@@ -2736,8 +2736,8 @@ function eval_pyson(value){
 
             if (!record) {
                 this.entry.val('');
-                this.but_primary.parent().hide();
-                this.but_secondary.parent().hide();
+                this.but_primary.parent().sao_hide();
+                this.but_secondary.parent().sao_hide();
                 return;
             }
             this.set_text(field.get_client(record));
@@ -2767,10 +2767,10 @@ function eval_pyson(value){
                 var icon_input = button.parent();
                 var type = 'input-icon-' + items[3];
                 if (!icon_name) {
-                    icon_input.hide();
+                    icon_input.sao_hide();
                     icon_input.parent().removeClass(type);
                 } else {
-                    icon_input.show();
+                    icon_input.sao_show();
                     icon_input.parent().addClass(type);
                     Sao.common.ICONFACTORY.get_icon_url(icon_name).then(function(url) {
                         button.find('img').attr('src', url);
@@ -4488,13 +4488,13 @@ function eval_pyson(value){
         },
         update_buttons: function(value) {
             if (value) {
-                this.but_save_as.show();
-                this.but_select.hide();
-                this.but_clear.show();
+                this.but_save_as.sao_show();
+                this.but_select.sao_hide();
+                this.but_clear.sao_show();
             } else {
-                this.but_save_as.hide();
-                this.but_select.show();
-                this.but_clear.hide();
+                this.but_save_as.sao_hide();
+                this.but_select.sao_show();
+                this.but_clear.sao_hide();
             }
         },
         select: function() {
@@ -4624,7 +4624,7 @@ function eval_pyson(value){
                     this.text.val('');
                 }
                 this.size.val('');
-                this.but_save_as.hide();
+                this.but_save_as.sao_hide();
                 return;
             }
             var size;
@@ -4638,9 +4638,9 @@ function eval_pyson(value){
             if (this.text) {
                 this.text.val(this.filename_field.get(record) || '');
                 if (size) {
-                    this.but_open.parent().show();
+                    this.but_open.parent().sao_show();
                 } else {
-                    this.but_open.parent().hide();
+                    this.but_open.parent().sao_hide();
                 }
             }
             this.update_buttons(Boolean(size));
@@ -4669,7 +4669,7 @@ function eval_pyson(value){
             Sao.View.Form.Binary._super.set_readonly.call(this, readonly);
             var record = this.record;
             this.but_select.toggleClass('disabled', readonly || !record);
-            this.input_select.toggle(!readonly && Boolean(record));
+            this.input_select.sao_toggle(!readonly && Boolean(record));
             this.but_clear.prop('disabled', readonly || !record);
             if (this.text) {
                 this.text.prop('readonly', readonly);
@@ -4962,7 +4962,7 @@ function eval_pyson(value){
         },
         set_url: function(value) {
             this.button.attr('href', value);
-            this.button.toggle(Boolean(value));
+            this.button.sao_toggle(Boolean(value));
         },
         set_invisible: function(invisible) {
             Sao.View.Form.URL._super.set_invisible.call(this, invisible);
@@ -5040,9 +5040,9 @@ function eval_pyson(value){
             Sao.View.Form.HTML._super.set_readonly.call(this, readonly);
             this.el.find('button').prop('disabled', readonly || !this.record);
             if (readonly) {
-                this.el.find('a').hide();
+                this.el.find('a').sao_hide();
             } else {
-                this.el.find('a').show();
+                this.el.find('a').sao_show();
             }
         },
         translate_dialog: function(languages) {
diff --git a/sao/src/view/tree.js b/sao/src/view/tree.js
index c10a082eec..64ac086830 100644
--- a/sao/src/view/tree.js
+++ b/sao/src/view/tree.js
@@ -942,9 +942,9 @@
             expanded = expanded || this.get_expanded_paths();
 
             if (this.selection_mode == Sao.common.SELECTION_MULTIPLE) {
-                this.selection.show();
+                this.selection.sao_show();
             } else {
-                this.selection.hide();
+                this.selection.sao_hide();
             }
 
             const group_records = (group, root) => {
@@ -1054,7 +1054,7 @@
                         column.col.data('hidden-width', column.col.css('width'))
                     }
                     column.col.css('width', 0);
-                    column.col.hide();
+                    column.col.sao_hide();
                 } else if (!column.col.hasClass('draggable-handle') &&
                     !column.col.hasClass('optional') &&
                     !column.col.hasClass('selection-state') &&
@@ -1078,11 +1078,11 @@
                         width = `${width}em`;
                     }
                     min_width.push(width);
-                    column.col.show();
+                    column.col.sao_show();
                 }
             }
-            this.table.find('thead > tr > th .resizer').show();
-            this.table.find('thead > tr > th:visible:last .resizer').hide();
+            this.table.find('thead > tr > th .resizer').sao_show();
+            this.table.find('thead > tr > th:visible:last .resizer').sao_hide();
             if (this.children_field) {
                 this.columns.every(column => {
                     if (column.col.hasClass('draggable-handle') ||
@@ -1221,8 +1221,8 @@
                 }
             }
 
-            to_hide.addClass('invisible').hide();
-            to_show.removeClass('invisible').show();
+            to_hide.addClass('invisible').sao_hide();
+            to_show.removeClass('invisible').sao_show();
         },
         update_with_selection: function() {
             let selected_records = this.selected_records;
@@ -1824,11 +1824,11 @@
                     break;
                 case Sao.common.SELECTION_SINGLE:
                     this.selection.attr('type', 'radio');
-                    this.selection.show();
+                    this.selection.sao_show();
                     break;
                 case Sao.common.SELECTION_MULTIPLE:
                     this.selection.attr('type', 'checkbox');
-                    this.selection.show();
+                    this.selection.sao_show();
                     break;
             }
 
@@ -2260,11 +2260,11 @@
             this.tree.columns.forEach((col, idx) => {
                 var td = this._get_column_td(idx);
                 var static_el = this.get_static_el(td);
-                static_el.empty().append(col.render(this.record)).show();
+                static_el.empty().append(col.render(this.record)).sao_show();
                 this.get_editable_el(td)
                     .empty()
                     .data('widget', null)
-                    .hide()
+                    .sao_hide()
                     .parents('.treeview td').addBack().removeClass('edited');
             });
         },
@@ -2289,8 +2289,8 @@
                     widget.display(this.record, col.field);
 
                     var static_el = this.get_static_el(td);
-                    static_el.hide();
-                    editable_el.show();
+                    static_el.sao_hide();
+                    editable_el.sao_show();
                     editable_el.parents('.treeview td').addBack()
                         .addClass('edited');
 
@@ -2429,7 +2429,7 @@
                     }
                 } else if (event_.which == Sao.common.ESC_KEYCODE) {
                     this.tree.edit_row(null);
-                    this.get_static_el().show().find('[tabindex=0]').focus();
+                    this.get_static_el().sao_show().find('[tabindex=0]').focus();
                 }
             } else {
                 widget.display(this.record, column.field);
@@ -2474,9 +2474,9 @@
                 field.set_state(record, ['invisible']);
                 var invisible = field.get_state_attrs(record).invisible;
                 if (invisible) {
-                    cell.hide();
+                    cell.sao_hide();
                 } else {
-                    cell.show();
+                    cell.sao_show();
                 }
                 if (this.protocol) {
                     value = field.get(record);
@@ -2526,7 +2526,7 @@
                         // clean previous color if the new one is not valid
                         img_tag.css('background-color', '');
                         img_tag.css('background-color', value);
-                        img_tag.toggle(Boolean(value));
+                        img_tag.sao_toggle(Boolean(value));
                     } else {
                         Sao.common.ICONFACTORY.get_icon_url(value)
                             .done(url => {
@@ -2593,7 +2593,7 @@
                 var invisible = field.get_state_attrs(record).invisible;
                 if (invisible) {
                     cell.text('');
-                    cell.hide();
+                    cell.sao_hide();
                     return;
                 }
                 var result = field.get_symbol(record, this.attributes.symbol);
@@ -2601,10 +2601,10 @@
                     position = result[1];
                 if (Math.round(position) === this.position) {
                     cell.text(symbol);
-                    cell.show();
+                    cell.sao_show();
                 } else {
                     cell.text('');
-                    cell.hide();
+                    cell.sao_hide();
                 }
             };
             if (!record.is_loaded(this.attributes.name)) {
@@ -2658,9 +2658,9 @@
                 this.field.set_state(record);
                 var state_attrs = this.field.get_state_attrs(record);
                 if (state_attrs.invisible) {
-                    cell.hide();
+                    cell.sao_hide();
                 } else {
-                    cell.show();
+                    cell.sao_show();
                 }
             };
             const render_error = () => {
@@ -2686,10 +2686,10 @@
             cells.push(this.header);
             for (const cell of cells) {
                 if (visible) {
-                    cell.show();
+                    cell.sao_show();
                     cell.removeClass('invisible');
                 } else {
-                    cell.hide();
+                    cell.sao_hide();
                     cell.addClass('invisible');
                 }
             }
@@ -3065,9 +3065,9 @@
                     });
             }
             if (!text) {
-                button.hide();
+                button.sao_hide();
             } else {
-                button.show();
+                button.sao_show();
             }
         },
         save_as: function(record) {
@@ -3149,9 +3149,9 @@
             this.field.set_state(record);
             var state_attrs = this.field.get_state_attrs(record);
             if (state_attrs.readonly) {
-                cell.hide();
+                cell.sao_hide();
             } else {
-                cell.show();
+                cell.sao_show();
             }
             return cell;
         }
@@ -3220,10 +3220,10 @@
             cells.push(this.header);
             for (const cell of cells) {
                 if (visible) {
-                    cell.show();
+                    cell.sao_show();
                     cell.removeClass('invisible');
                 } else {
-                    cell.hide();
+                    cell.sao_hide();
                     cell.addClass('invisible');
                 }
             }
@@ -3257,7 +3257,7 @@
     Sao.View.Tree.ButtonMultiple = Sao.class_(Sao.common.Button, {
         set_state: function(records) {
             if (!records.length) {
-                this.el.hide();
+                this.el.sao_hide();
                 this.el.prop('disabled', true);
                 this.set_icon(null);
                 return;
@@ -3275,9 +3275,9 @@
                 icons.add(r_states.icon || this.attributes.icon);
             }
             if (states.invisible) {
-                this.el.hide();
+                this.el.sao_hide();
             } else {
-                this.el.show();
+                this.el.sao_show();
             }
             this.el.prop('disabled', Boolean(states.readonly));
             if (icons.size == 1) {
@@ -3357,9 +3357,9 @@
         set_readonly: function(readonly) {
             Sao.View.EditableTree.URL._super.set_readonly.call(this, readonly);
             if (readonly) {
-                this.input.hide();
+                this.input.sao_hide();
             } else {
-                this.input.show();
+                this.input.sao_show();
             }
         },
     });
diff --git a/sao/src/window.js b/sao/src/window.js
index f9f4a5c26f..7cb0a494dd 100644
--- a/sao/src/window.js
+++ b/sao/src/window.js
@@ -275,7 +275,7 @@
                 this.wid_text = jQuery('<input/>', {
                     type: 'input'
                 }).appendTo(menu);
-                this.wid_text.hide();
+                this.wid_text.sao_hide();
 
                 var buttons = jQuery('<div/>', {
                     'class': 'input-group-btn'
@@ -332,7 +332,7 @@
                 this.but_next.click(disable_during(this.next.bind(this)));
 
                 if (this.domain) {
-                    this.wid_text.show();
+                    this.wid_text.sao_show();
 
                     this.but_add = jQuery('<button/>', {
                         'class': 'btn btn-default btn-sm',