From d7a1d9fa7552933f97c9c2dc182e9a4bfee33694 Mon Sep 17 00:00:00 2001
From: kulikov-a <36099472+kulikov-a@users.noreply.github.com>
Date: Tue, 28 Dec 2021 16:55:30 +0300
Subject: [PATCH] MVC - initFormAdvancedUI: universal stripes adjustment
 (#5435)

---
 src/opnsense/www/js/opnsense_ui.js | 34 ++++++++++++++++++++++++------
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/opnsense/www/js/opnsense_ui.js b/src/opnsense/www/js/opnsense_ui.js
index 86cd3f7c5..9bfdaad3d 100644
--- a/src/opnsense/www/js/opnsense_ui.js
+++ b/src/opnsense/www/js/opnsense_ui.js
@@ -412,16 +412,39 @@ function initFormHelpUI() {
  * handle advanced show/hide
  */
 function initFormAdvancedUI() {
+
+    // handle striped tables hidden rows
+    let targetNodes = $('table.table-striped tbody');
+    let config = { attributes: true, subtree: true, attributeFilter: ["style"] };
+    let callback = function(mutationsList, observer) {
+        mutationsList.forEach(function(mutation) {
+            if (mutation.target.tagName == "TR") {
+                let currentValue = mutation.target.style.display;
+                if (currentValue == "") {
+                    // row is visible
+                    $(mutation.target).next('.dummy_row').remove();
+                } else if (currentValue == "none" && !$(mutation.target).next().hasClass("dummy_row")) {
+                    // row is hidden and no dummy rows after it. insert one to keep stripes order
+                    $(mutation.target).after("<tr data-advanced='hidden_row' class='dummy_row'></tr>");
+                }
+            }
+        });
+    }
+
+    observer = new MutationObserver(callback);
+    // observe all striped tables on page for style changes
+    targetNodes.each(function(index, node) { 
+        observer.observe(node, config);
+    });
+
+    //  handle "advanced mode" toggle
     let elements = $('[id*="show_advanced"]');
     if (window.sessionStorage && sessionStorage.getItem('show_advanced_preset') === 1) {
         // show advanced options when preset was stored
         elements.toggleClass("fa-toggle-on fa-toggle-off");
         elements.toggleClass("text-success text-danger");
     } else {
-        $('[data-advanced*="true"]').hide(function(){
-            // the table row is added to keep correct table striping
-            $(this).after("<tr data-advanced='hidden_row'></tr>");
-        });
+        $('[data-advanced*="true"]').hide();
     }
 
     elements.click(function() {
@@ -429,12 +452,11 @@ function initFormAdvancedUI() {
         elements.toggleClass("text-success text-danger");
         if (elements.hasClass("fa-toggle-on")) {
             $('[data-advanced*="true"]').show();
-            $('[data-advanced*="hidden_row"]').remove(); // the table row is deleted to keep correct table striping
             if (window.sessionStorage) {
                 sessionStorage.setItem('show_advanced_preset', 1);
             }
         } else {
-            $('[data-advanced*="true"]').after("<tr data-advanced='hidden_row'></tr>").hide(); // the table row is added to keep correct table striping
+            $('[data-advanced*="true"]').hide()
             if (window.sessionStorage) {
                 sessionStorage.setItem('show_advanced_preset', 0);
             }