Make cycler page scroll down when a dashboard is too tall for the current viewport...
authorrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 7 Apr 2017 21:45:45 +0000 (21:45 +0000)
committerrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 7 Apr 2017 21:45:45 +0000 (21:45 +0000)
https://bugs.webkit.org/show_bug.cgi?id=170588

Rubber-stamped by Chris Dumez.

Updated the cycler page to scroll down smoothly over 500ms and scroll up again before moving to the next page
when a dashboard page is too tall to be shown at once. For now, we assume that each dashboard's height is no
more than 2x the height of the viewport.

* public/cycler.html:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@215118 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/perf.webkit.org/ChangeLog
Websites/perf.webkit.org/public/cycler.html

index 829695c..a2b0ee3 100644 (file)
@@ -1,3 +1,16 @@
+2017-04-07  Ryosuke Niwa  <rniwa@webkit.org>
+
+        Make cycler page scroll down when a dashboard is too tall for the current viewport size
+        https://bugs.webkit.org/show_bug.cgi?id=170588
+
+        Rubber-stamped by Chris Dumez.
+
+        Updated the cycler page to scroll down smoothly over 500ms and scroll up again before moving to the next page
+        when a dashboard page is too tall to be shown at once. For now, we assume that each dashboard's height is no
+        more than 2x the height of the viewport.
+
+        * public/cycler.html:
+
 2017-04-06  Ryosuke Niwa  <rniwa@webkit.org>
 
         Each build request should be associated with a repository group
index 11de22b..aee872d 100644 (file)
@@ -9,10 +9,10 @@ html, body, iframe { margin: 0; padding: 0; border: none; width: 100%; height: 1
 <body>
 <script>
 
-var urls = [];
-var CycleSeconds = 30;
+const urls = [];
+const CycleSeconds = 30;
 
-var request = new XMLHttpRequest();
+const request = new XMLHttpRequest();
 request.open('GET', '/data/manifest.json', true);
 request.send(null);
 request.onreadystatechange = function () {
@@ -23,26 +23,33 @@ request.onreadystatechange = function () {
         return;
     }
 
-    var manifest = JSON.parse(request.responseText);
-    var dashboards = [];
-    for (var dashboardName in manifest.dashboards)
+    const manifest = JSON.parse(request.responseText);
+    const dashboards = [];
+    for (const dashboardName in manifest.dashboards)
         dashboards.push(dashboardName);
 
-    for (var dashboardName of dashboards)
+    for (const dashboardName of dashboards)
         urls.push('/v3/#/dashboard/' + dashboardName);
 
     loadURLAt(0);
 }
 
-var oldIframe = null;
-function loadURLAt(i) {
-    var newIframe = document.createElement('iframe');
+let oldIframe = null;
+function loadURLAt(i)
+{
+    const newIframe = document.createElement('iframe');
     document.body.appendChild(newIframe);
     newIframe.src = urls[i];
-    newIframe.onload = showNewFrame.bind(window, i, newIframe);
+    newIframe.onload = () => {
+        scrollUpIfNeeded(oldIframe).then(() => {
+            showNewFrame(i, newIframe);
+            setTimeout(() => scrollDownIfNeeded(newIframe), CycleSeconds * 1000 / 2);
+        });
+    }
 }
 
-function showNewFrame(i, iframe) {
+function showNewFrame(i, iframe)
+{
     if (oldIframe)
         document.body.removeChild(oldIframe);
     oldIframe = iframe;
@@ -51,6 +58,28 @@ function showNewFrame(i, iframe) {
     setTimeout(loadURLAt.bind(window, i), CycleSeconds * 1000);
 }
 
+function scrollUpIfNeeded(iframe)
+{
+    const diff = iframe ? iframe.scrollDiff : 0;
+    if (!diff)
+        return Promise.resolve();
+    for (let i = 0; i < 500; i++)
+        setTimeout(() => iframe.contentWindow.scrollTo(0, oldIframe.scrollDiff / 500 * (500 - i)), i);
+    return new Promise((resolve) => setTimeout(resolve, 800));
+}
+
+function scrollDownIfNeeded(iframe)
+{
+    const viewportHeight = iframe.contentWindow.innerHeight;
+    const contentHeight = iframe.contentDocument.body.offsetHeight;
+    if (viewportHeight >= contentHeight)
+        return;
+    const diff = contentHeight - viewportHeight;
+    for (let i = 0; i < 500; i++)
+        setTimeout(() => iframe.contentWindow.scrollTo(0, diff / 500 * i), i);
+    iframe.scrollDiff = diff;
+}
+
 </script>
 </body>
 </html>