Synchronize scrollbars in the change resolver dialog (JabRef#10587)

* Added onScroll handlers to the previewViewers in the change resolver dialog.

* Modified EntryChangeDetailsView scrolling sync to sync when the scroll bar is dragged.

* Prevents scroll value from being updated unless the mouse button is held down.

* Updated CHANGELOG.md.

* Updated CHANGELOG.md.

CHANGELOG.md

@@ -16,6 +16,7 @@ Note that this project **does not** adhere to [Semantic Versioning](https://semv
 
 ### Changed
 
+- The two previews in the change resolver dialog now have their scrollbars synchronized [#9576](https://github.com/JabRef/jabref/issues/9576).
 - We changed the setting of the keyword separator to accept a single character only. [#177](https://github.com/koppor/jabref/issues/177)
 
 ### Fixed

src/main/java/org/jabref/gui/collab/entrychange/EntryChangeDetailsView.java

@@ -1,10 +1,13 @@
 package org.jabref.gui.collab.entrychange;
 
+import javafx.event.Event;
 import javafx.geometry.Orientation;
 import javafx.scene.control.Label;
 import javafx.scene.control.SplitPane;
 import javafx.scene.control.TabPane;
+import javafx.scene.input.MouseEvent;
 import javafx.scene.layout.VBox;
+import javafx.scene.web.WebView;
 
 import org.jabref.gui.DialogService;
 import org.jabref.gui.StateManager;
@@ -23,6 +26,7 @@
 public final class EntryChangeDetailsView extends DatabaseChangeDetailsView {
     private final PreviewWithSourceTab oldPreviewWithSourcesTab = new PreviewWithSourceTab();
     private final PreviewWithSourceTab newPreviewWithSourcesTab = new PreviewWithSourceTab();
+    private boolean scrolling = false;
 
     public EntryChangeDetailsView(BibEntry oldEntry,
                                   BibEntry newEntry,
@@ -42,6 +46,13 @@ public EntryChangeDetailsView(BibEntry oldEntry,
         // we need a copy here as we otherwise would set the same entry twice
         PreviewViewer previewClone = new PreviewViewer(databaseContext, dialogService, preferencesService, stateManager, themeManager, taskExecutor);
 
+        // The scroll bar used is not part of ScrollPane, but the attached WebView.
+        WebView previewCloneView = (WebView) previewClone.getContent();
+        WebView previewViewerView = (WebView) previewViewer.getContent();
+        synchronizeScrolling(previewCloneView, previewViewerView);
+        synchronizeScrolling(previewViewerView, previewCloneView);
+        // TODO: Also sync scrolling for BibTeX view.
+
         TabPane oldEntryTabPane = oldPreviewWithSourcesTab.getPreviewWithSourceTab(oldEntry, databaseContext, preferencesService, entryTypesManager, previewClone, Localization.lang("Entry Preview"));
         TabPane newEntryTabPane = newPreviewWithSourcesTab.getPreviewWithSourceTab(newEntry, databaseContext, preferencesService, entryTypesManager, previewViewer, Localization.lang("Entry Preview"));
 
@@ -68,4 +79,24 @@ public EntryChangeDetailsView(BibEntry oldEntry,
 
         this.getChildren().add(split);
     }
+
+    // Method adapted from:
+    // https://stackoverflow.com/questions/49509395/synchronize-scrollbars-of-two-javafx-webviews
+    // https://stackoverflow.com/questions/31264847/how-to-set-remember-scrollbar-thumb-position-in-javafx-8-webview
+    private void synchronizeScrolling(WebView webView, WebView otherWebView) {
+        webView.addEventHandler(Event.ANY, event -> {
+            if (!scrolling) {
+                scrolling = true;
+                if (event instanceof MouseEvent) {
+                    if (((MouseEvent) event).isPrimaryButtonDown()) {
+                        int value = (Integer) webView.getEngine().executeScript("window.scrollY");
+                        otherWebView.getEngine().executeScript("window.scrollTo(0, " + value + ")");
+                    }
+                } else {
+                    otherWebView.fireEvent(event.copyFor(otherWebView, otherWebView));
+                }
+                scrolling = false;
+            }
+        });
+    }
 }