ui scrollbar: Update perfect-scrollbar to 1.3.0.

Update perfect-scrollbar to fix stutter space-scrolling in #8544. Also
reworked deprecated `element.perfectScrollbar` to `new
PerfectScrollbar(element)`.  Lastly, updated provision version and
changed node module path to new path.

This also refactors perfect-scrollbar in help.js to work with updated
version of perfect-scrollbar. Because the update also changed
perfect-scrollbar's css selectors for all scrollbars in zulip, we
update those too.

Fixes #8544.

.eslintrc.json

@@ -170,7 +170,8 @@
         "hotspots": false,
         "compose_ui": false,
         "common": false,
-        "panels": false
+        "panels": false,
+        "PerfectScrollbar": false
     },
     "plugins": [
         "eslint-plugin-empty-returns"

package.json

@@ -27,7 +27,7 @@
     "katex": "0.8.3",
     "moment": "2.21.0",
     "moment-timezone": "0.5.14",
-    "perfect-scrollbar": "0.7.1",
+    "perfect-scrollbar": "1.3.0",
     "plotly.js": "1.19.2",
     "script-loader": "0.7.2",
     "source-map-loader": "0.2.2",

static/js/portico/help.js

@@ -1,4 +1,4 @@
-const perfectScrollbar = require('perfect-scrollbar');
+import PerfectScrollbar from 'perfect-scrollbar';
 
 function registerCodeSection($codeSection) {
     const $li = $codeSection.find("ul.nav li");
@@ -94,12 +94,26 @@ function scrollToHash(container) {
         });
     };
 
+    var markdownPS = new PerfectScrollbar($(".markdown")[0], {
+        suppressScrollX: true,
+        useKeyboard: false,
+        wheelSpeed: 0.68,
+        scrollingThreshold: 50,
+    });
+
+    new PerfectScrollbar($(".sidebar")[0], {
+        suppressScrollX: true,
+        useKeyboard: false,
+        wheelSpeed: 0.68,
+        scrollingThreshold: 50,
+    });
+
     $(".sidebar.slide h2").click(function (e) {
         var $next = $(e.target).next();
 
         if ($next.is("ul")) {
             $next.slideToggle("fast", "swing", function () {
-                perfectScrollbar.update($(".markdown")[0]);
+                markdownPS.update();
             });
         }
     });
@@ -124,7 +138,7 @@ function scrollToHash(container) {
 
         if (html_map[path]) {
             $(".markdown .content").html(html_map[path]);
-            perfectScrollbar.update(container);
+            markdownPS.update();
             render_code_sections();
             scrollToHash(container);
         } else {
@@ -134,7 +148,7 @@ function scrollToHash(container) {
                 html_map[path] = res;
                 $(".markdown .content").html(html_map[path]);
                 loading.name = null;
-                perfectScrollbar.update(container);
+                markdownPS.update();
                 scrollToHash(container);
             });
         }
@@ -155,20 +169,8 @@ function scrollToHash(container) {
         window.location.href = window.location.href.replace(/#.*/, '') + '#' + $(this).attr("id");
     });
 
-    perfectScrollbar.initialize($(".markdown")[0], {
-        suppressScrollX: true,
-        useKeyboard: false,
-        wheelSpeed: 0.68,
-    });
-
-    perfectScrollbar.initialize($(".sidebar")[0], {
-        suppressScrollX: true,
-        useKeyboard: false,
-        wheelSpeed: 0.68,
-    });
-
     window.onresize = function () {
-        perfectScrollbar.update($(".markdown")[0]);
+        markdownPS.update();
     };
 
     window.addEventListener("popstate", function () {

static/js/ui.js

@@ -14,20 +14,24 @@ exports.replace_emoji_with_text = function (element) {
 };
 
 exports.set_up_scrollbar = function (element) {
-    element.perfectScrollbar({
+    var perfectScrollbar = new PerfectScrollbar(element[0], {
         suppressScrollX: true,
         useKeyboard: false,
         wheelSpeed: 0.68,
+        scrollingThreshold: 50,
     });
+    element[0].perfectScrollbar = perfectScrollbar;
 };
 
 exports.update_scrollbar = function (element) {
     element.scrollTop = 0;
-    element.perfectScrollbar('update');
+    if (element[0].perfectScrollbar !== undefined) {
+        element[0].perfectScrollbar.update();
+    }
 };
 
 exports.destroy_scrollbar = function (element) {
-    element.perfectScrollbar('destroy');
+    element[0].perfectScrollbar.destroy();
 };
 
 function update_message_in_all_views(message_id, callback) {

static/styles/components.css

@@ -66,11 +66,11 @@ a.no-underline:hover {
     font-style: italic;
 }
 
-.ps:hover.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail > .ps__scrollbar-x {
+.ps--scrolling-x > .ps__rail-x > .ps__thumb-x:hover {
     background-color: #606060;
 }
 
-.ps:hover.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail > .ps__scrollbar-y {
+.ps--scrolling-y > .ps__rail-y > .ps__thumb-y:hover {
     background-color: #606060;
 }
 

static/styles/portico.css

@@ -1799,7 +1799,7 @@ input.new-organization-button {
         -webkit-filter: brightness(0.7);
     }
 
-    .app.help .sidebar:not(.show) .ps__scrollbar-y-rail {
+    .app.help .sidebar:not(.show) .ps__rail-y {
         display: none; /* Hide y-scrollbar on collapsed sidebar view */
     }
 }

tools/update-prod-static

@@ -78,7 +78,7 @@ subprocess.check_call(['cp', '-R', 'node_modules/katex/dist/fonts',
                       stdout=fp, stderr=fp)
 
 CSS_FILES = [
-    'node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.css',
+    'node_modules/perfect-scrollbar/css/perfect-scrollbar.css',
     'node_modules/flatpickr/dist/flatpickr.css',
     'node_modules/flatpickr/dist/plugins/confirmDate/confirmDate.css',
 ]

tools/webpack.assets.json

@@ -13,7 +13,7 @@
                "./node_modules/moment-timezone/builds/moment-timezone-with-data.min.js"
               ],
     "help": [
-            "./node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.js",
+            "./node_modules/perfect-scrollbar/dist/perfect-scrollbar.js",
             "./static/js/portico/help.js"
     ],
     "katex": "./node_modules/katex/dist/katex.min.js",

version.py

@@ -8,4 +8,4 @@ ZULIP_VERSION = "1.7.1+git"
 # Typically, adding a dependency only requires a minor version bump, and
 # removing a dependency requires a major version bump.
 
-PROVISION_VERSION = '16.1'
+PROVISION_VERSION = '17.0'

yarn.lock

@@ -4811,9 +4811,9 @@ pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
 
-perfect-scrollbar@0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-0.7.1.tgz#0c256fb9c5cee401d60a299687a3f9a61487e0d5"
+perfect-scrollbar@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.3.0.tgz#61da56f94b58870d8e0a617bce649cee17d1e3b2"
 
 performance-now@^0.2.0:
   version "0.2.0"

zproject/settings.py

@@ -942,7 +942,7 @@ PIPELINE = {
                 'third/bootstrap/css/bootstrap.css',
                 'third/bootstrap/css/bootstrap-btn.css',
                 'third/bootstrap/css/bootstrap-responsive.css',
-                'node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.css',
+                'node_modules/perfect-scrollbar/css/perfect-scrollbar.css',
             ),
             'output_filename': 'min/common.css'
         },
@@ -991,7 +991,7 @@ JS_SPECS = {
             'third/jquery-throttle-debounce/jquery.ba-throttle-debounce.js',
             'third/jquery-idle/jquery.idle.js',
             'third/jquery-autosize/jquery.autosize.js',
-            'node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.js',
+            'node_modules/perfect-scrollbar/dist/perfect-scrollbar.js',
             'third/lazyload/lazyload.js',
             'third/spectrum/spectrum.js',
             'third/sockjs/sockjs-0.3.4.js',