Improve scrolling of dialogs (#16783)

* Improve scrolling of dialogs

Page will be frozen at the current scroll position and only the dialog will scroll (if too heigh for window)

* use $(window).scrollTop() instead of window.scrollY

* updates expected ui files

8 files changed, 40 insertions, 28 deletions

diff --git a/plugins/CoreHome/javascripts/popover.js b/plugins/CoreHome/javascripts/popover.js
index 44efe54e74..5d063be147 100644
--- a/plugins/CoreHome/javascripts/popover.js
+++ b/plugins/CoreHome/javascripts/popover.js
@@ -11,6 +11,7 @@ var Piwik_Popover = (function () {
     var isOpen = false;
     var closeCallback = false;
     var isProgrammaticClose = false;
+    var scrollTopPosition = 0;
 
     var createContainer = function () {
         if (container === false) {
@@ -43,9 +44,20 @@ var Piwik_Popover = (function () {
                 // we scroll to it to make sure it's visible. this isn't a perfect workaround, since it
                 // doesn't center the modal.g
                 var self = this;
-                setTimeout(function () {
-                    piwikHelper.lazyScrollTo(self, 0);
-                }, 0);
+
+                scrollTopPosition = $(window).scrollTop();
+
+                $('#root').css({
+                    position: 'fixed',
+                    height: $(window).height + scrollTopPosition,
+                    width: '100%',
+                    top: -scrollTopPosition
+                });
+
+                window.scrollTo(0, 0);
+
+                centerPopover();
+
             },
             close: function (event, ui) {
                 container.find('div.jqplot-target').trigger('piwikDestroyPlot');
@@ -69,6 +81,15 @@ var Piwik_Popover = (function () {
                 if (!isProgrammaticClose || isEscapeKey(event)) {
                     broadcast.propagateNewPopoverParameter(false);
                 }
+
+                $('#root').css({
+                    position: '',
+                    height: '',
+                    width: '',
+                    top: ''
+                });
+
+                window.scrollTo(0, scrollTopPosition);
             }
         };
 
@@ -84,7 +105,9 @@ var Piwik_Popover = (function () {
 
     var centerPopover = function () {
         if (container !== false) {
+            $('.ui-dialog').css({margin: '0 0'});
             container.dialog("option", "position", {my: 'center', at: 'center', of: '.ui-widget-overlay', collision: 'fit'});
+            $('.ui-dialog').css({margin: '15px 0'});
         }
     };
 
@@ -260,18 +283,8 @@ var Piwik_Popover = (function () {
          * @param {object} [ajaxRequest]      optional instance of ajaxHelper
          */
         createPopupAndLoadUrl: function (url, loadingName, dialogClass, ajaxRequest) {
-            // make sure the minimum top position of the popover is 15px
-            var ensureMinimumTop = function () {
-                var popoverContainer = $('#Piwik_Popover').parent();
-                popoverContainer.css('top', (window.scrollY + 15) + 'px');
-                if (popoverContainer.position().top < 106) {
-                    popoverContainer.css('top', '15px');
-                }
-            };
-
             // open the popover
             var box = Piwik_Popover.showLoading(loadingName, null, null, dialogClass);
-            ensureMinimumTop();
 
             var callback = function (html) {
                 function setPopoverTitleIfOneFoundInContainer() {
@@ -284,7 +297,6 @@ var Piwik_Popover = (function () {
 
                 Piwik_Popover.setContent(html);
                 setPopoverTitleIfOneFoundInContainer();
-                ensureMinimumTop();
             };
 
             if ('undefined' === typeof ajaxRequest) {
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_row_evolution.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_row_evolution.png
index 61056f45ca..77633527ce 100644
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_row_evolution.png
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_row_evolution.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f7e21f20280a489e1ca636ffe8ff2aa09825c11b6972ee03b92de5b8b7a07241
-size 101287
+oid sha256:52ceb95a94d19593c57de4d291e434b513c22856e5b965fa95513d36650fc16d
+size 100025
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_transitions.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_transitions.png
index ccc6cad0a9..36c037c0fc 100644
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_transitions.png
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_transitions.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7c8e1bfd4fdd879789a6dc19431bd14352947c75aedb338e6c5a846efebdd084
-size 150938
+oid sha256:8b895a2e3cda3b098f6c0de1a0bb069320ae0f33f8bc24427d1bd4e74ece4729
+size 150463
diff --git a/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_pagetitle_overlay.png b/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_pagetitle_overlay.png
index f0d3b5ff53..43578caea2 100644
--- a/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_pagetitle_overlay.png
+++ b/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_pagetitle_overlay.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8d9f2f661bd766a377e9486d63784d207d200575a47446f5bfd3ba562d54ec5c
-size 153019
+oid sha256:3cbd30cc55ee5053958bff7a9a68f5ae5c6b9f34a597709e891a5b8044172156
+size 153016
diff --git a/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_pageurl_overlay.png b/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_pageurl_overlay.png
index ec0f987803..b14d6ec6b2 100644
--- a/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_pageurl_overlay.png
+++ b/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_pageurl_overlay.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2cf3f51765c1f8fbe8892f2076b848938f4d27f4c1160b4758ed35aca0f796b6
-size 152197
+oid sha256:35f2133f4ad6c08ccd834066e1c851e2176933ac3f2aa3dd9879f045909fc304
+size 152194
diff --git a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_visits_showprofile.png b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_visits_showprofile.png
index 59e91e914f..ae57f288d1 100644
--- a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_visits_showprofile.png
+++ b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_visits_showprofile.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c81e63c275f373f10c5d490f59c83d48512030890f456f82ed1db51d35856fcb
-size 331621
+oid sha256:852db782d93e31534a1050af4d5c9f19b8669d4b5c4e815673f96e2ea5319f28
+size 331824
diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_visitor_profile_not_segmented.png b/tests/UI/expected-screenshots/UIIntegrationTest_visitor_profile_not_segmented.png
index e8aef092a2..d48b95d20d 100644
--- a/tests/UI/expected-screenshots/UIIntegrationTest_visitor_profile_not_segmented.png
+++ b/tests/UI/expected-screenshots/UIIntegrationTest_visitor_profile_not_segmented.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b74f4fe571a6f142b163a0ad7576d71ce00d462c4ec550fe418d7448abd7b163
-size 524226
+oid sha256:bb0f0b11c11b3ae75a4308416a0445e09f678e7a0a938d0c7605c937e06608a7
+size 564047
diff --git a/tests/UI/expected-screenshots/ViewDataTableTest_export_options.png b/tests/UI/expected-screenshots/ViewDataTableTest_export_options.png
index 857a2e8c3a..1b36fbe26c 100644
--- a/tests/UI/expected-screenshots/ViewDataTableTest_export_options.png
+++ b/tests/UI/expected-screenshots/ViewDataTableTest_export_options.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e389466380aae59d750cd14d1ef0b547245301d0cbba900675a1bc1f74a13e8f
-size 38300
+oid sha256:a76d043ca6e47ac61eafe7021b0517f4027cf71241c3d2db5f94bb6a01e1d8cd
+size 38269