From d38ccda7cccc4c85d734049e0f5b3bb7dcddbdee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A9ven=20Car?= <meven.car@collabora.com>
Date: Thu, 29 Aug 2024 18:29:29 +0200
Subject: [PATCH] Use MutationObserver to detect and prevent spurrious scroll
 event
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Méven Car <meven.car@collabora.com>
Change-Id: I8bc67ecf11308f35791c5d6c0c4557f20505db86
---
 browser/css/jsdialogs.css                     |  4 ++
 .../control/jsdialog/Widget.ScrolledWindow.js | 54 +++++++++++++------
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 4804f46dc611..51a892cb87ac 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -2047,6 +2047,10 @@ input[type='number']:hover::-webkit-outer-spin-button {
 	max-height: 200px;
 }
 
+#FormulaDialog #ParameterPage > #paramgrid .ui-scrollwindow .ui-edit-container {
+	display: flex;
+}
+
 #FormulaDialog > [id^='dialog-vbox'] > [id^='box'] > [id^='box'] {
 	grid-auto-columns: max-content;
 	grid-column-gap: 8px;
diff --git a/browser/src/control/jsdialog/Widget.ScrolledWindow.js b/browser/src/control/jsdialog/Widget.ScrolledWindow.js
index cabe5c9f58ba..279e4dc45749 100644
--- a/browser/src/control/jsdialog/Widget.ScrolledWindow.js
+++ b/browser/src/control/jsdialog/Widget.ScrolledWindow.js
@@ -90,7 +90,9 @@ function _scrolledWindowControl(parentContainer, data, builder) {
 	if (horizontalSteps < 0 || noHorizontal)
 		horizontalSteps = 0;
 
+	var rowHeight = 0;
 	var timeoutLimit = 2;
+
 	var updateSize = function () {
 		realContentHeight = scrollwindow.scrollHeight;
 		realContentWidth = scrollwindow.scrollwidth;
@@ -100,7 +102,6 @@ function _scrolledWindowControl(parentContainer, data, builder) {
 			return;
 		}
 
-
 		if (!noVertical && data.vertical.upper > 0) {
 			if (rowHeight == 0) {
 				// determine the height a row
@@ -129,32 +130,51 @@ function _scrolledWindowControl(parentContainer, data, builder) {
 		}
 	};
 
-	if (data.user_managed_scrolling !== false)
+	if (data.user_managed_scrolling !== false) {
 		setTimeout(updateSize, 0);
-
 	}
 
-	var lastScrollV = null;
-	var lastScrollH = null;
-	var sendTimer = null;
-
 	if ((!noVertical && verticalSteps) || (!noHorizontal && horizontalSteps)) {
-		scrollwindow.addEventListener('scroll', function () {
-			// keep content at the same place on the screen
-			var scrollTop = scrollwindow.scrollTop;
-			var scrollLeft = scrollwindow.scrollLeft;
-
-			if (data.user_managed_scrolling !== false) {
-				content.style.margin = scrollTop + 'px ' + margin + 'px ' + margin + 'px ' + scrollLeft + 'px';
-				content.style.height = (realContentHeight - scrollTop + verticalSteps) + 'px';
-				content.style.width = (realContentWidth - scrollLeft + horizontalSteps) + 'px';
-			}
 
+		var mutating = false;
+		var restoreScrollV = null;
+		var lastScrollV = null;
+
+		if (drawingArea) {
+			// With drawing area after each scroll event the content is removed
+			// this creates spurrious events to the top of the list
+			// this detect those and allows to ignore them
+			var noMutation = function (mutationsList) {
+				for (var mutation of mutationsList) {
+					if (mutation.type == "childList") {
+						if (mutation.removedNodes.length != 0) {
+							// some nodes were removed, consider we are mutating
+							// and next scroll event will be spurrious
+							mutating = true;
+							restoreScrollV = lastScrollV;
+						}
+					}
+				}
+			};
+
+			var observer = new MutationObserver(noMutation);
+			observer.observe(content, {childList: true });
+		}
 
+		var lastScrollH = null;
+		var sendTimer = null;
+
+		scrollwindow.addEventListener('scroll', function() {
 			if (sendTimer)
 				clearTimeout(sendTimer);
 			sendTimer = setTimeout(function () {
 
+				if (mutating) {
+					// ignore spurious event
+					mutating = false;
+					scrollwindow.scrollTop = restoreScrollV * rowHeight;
+					return;
+				}
 
 				if (data.user_managed_scrolling !== false) {