From 0e5c7c541350d2199bd6e8cd3cf6f0c8d0441cb6 Mon Sep 17 00:00:00 2001
From: Radomir Dopieralski <openstack@dopieralski.pl>
Date: Mon, 6 Oct 2025 09:59:22 +0200
Subject: [PATCH] Replace DOMNodeInserted events with a mutation observer

The DOMNodeInserted events are deprecated in modern browsers, and will
shortly stop working. We should be using mutation observers instead.

This change gets rids of deprecation warnings in the js console.

Signed-off-by: Radomir Dopieralski <openstack@dopieralski.pl>
Change-Id: I355d3217b0f461f043248a1a2be47daccc6b2842
(cherry picked from commit 64d34854bc6e7332fd0355500a6c11ca74ea638f)
---
 horizon/static/horizon/js/horizon.forms.js | 34 +++++++++++++++-------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/horizon/static/horizon/js/horizon.forms.js b/horizon/static/horizon/js/horizon.forms.js
index 6e4faf614a..36aa869256 100644
--- a/horizon/static/horizon/js/horizon.forms.js
+++ b/horizon/static/horizon/js/horizon.forms.js
@@ -354,13 +354,20 @@ horizon.forms.init_themable_select = function ($elem) {
 };
 
 horizon.forms.init_new_selects = function () {
-  $(document).on('DOMNodeInserted', function(e) {
-    var $target = $(e.target);
-    var newInputs = $target.find('.themable-select').not('.select-initialized');
-    for (var ii = 0; ii < newInputs.length; ii++) {
-      horizon.forms.init_themable_select($(newInputs[ii]));
+  var observer = new MutationObserver(function (mutations) {
+    for (var mutation in mutations) {
+      if (mutation.type !== 'childList') {
+        continue;
+      }
+      for (var node in mutation.addedNodes) {
+        var newInputs = $(node).find('.themable-select').not('.select-initialized');
+        for (var input in newInputs) {
+          horizon.forms.init_themable_select($(input));
+        }
+      }
     }
   });
+  observer.observe(document, { childList: true, subtree: true });
 };
 
 horizon.forms.getSpinnerValue = function(val, defaultVal) {
@@ -446,13 +453,20 @@ horizon.forms.init_themable_spinner = function ($elem) {
 };
 
 horizon.forms.init_new_spinners = function () {
-  $(document).on('DOMNodeInserted', function(e) {
-    var $target = $(e.target);
-    var newInputs = $target.find('.themable-spinner').not('.spinner-initialized');
-    for (var ii = 0; ii < newInputs.length; ii++) {
-      horizon.forms.init_themable_spinner($(newInputs[ii]));
+  var observer = new MutationObserver(function (mutations) {
+    for (var mutation in mutations) {
+      if (mutation.type !== 'childList') {
+        continue;
+      }
+      for (var node in mutation.addedNodes) {
+        var newSpinners = $(node).find('.themable-spinner').not('.spinner-initialized');
+        for (var spinner in newSpinners) {
+          horizon.forms.init_themable_spinner($(spinner));
+        }
+      }
     }
   });
+  observer.observe(document, { childList: true, subtree: true });
 };
 
 horizon.addInitFunction(horizon.forms.init = function () {