ui: Replace set_up_scrollbar with data-simplebar attribute.

With perfectScrollbar, we needed to call a function from JavaScript to
enable a scrollbar on a new element, but simplebar has a much simpler
default API one can do by using data-simplebar attributes in the HTML.

So we can delete all the scrollbar creation/deletion code.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>

frontend_tests/node_tests/activity.js

@@ -19,7 +19,6 @@ const _document = {
 const _channel = {};
 
 const _ui = {
-    set_up_scrollbar: function () {},
     get_content_element: element => element,
 };
 

frontend_tests/node_tests/pm_list.js

@@ -5,7 +5,6 @@ set_global('resize', {
     resize_stream_filters_container: function () {},
 });
 set_global('ui', {
-    set_up_scrollbar: function () {},
     get_content_element: element => element,
 });
 set_global('stream_popover', {

frontend_tests/node_tests/ui_init.js

@@ -74,7 +74,6 @@ zrequire('util');
 
 util.is_mobile = () => false;
 templates.render = () => 'some-html';
-ui.set_up_scrollbar = () => {};
 ui.get_scroll_element = element => element;
 
 zrequire('echo');

static/js/activity.js

@@ -328,7 +328,6 @@ exports.initialize = function () {
     exports.build_user_sidebar();
     exports.update_huddles();
 
-    ui.set_up_scrollbar($("#buddy_list_wrapper"));
     buddy_list.start_scroll_handler();
 
     // Let the server know we're here, but pass "false" for
@@ -340,8 +339,6 @@ exports.initialize = function () {
     }
 
     setInterval(get_full_presence_list_update, ACTIVE_PING_INTERVAL_MS);
-
-    ui.set_up_scrollbar($("#group-pms"));
 };
 
 exports.update_presence_info = function (email, info, server_time) {

static/js/attachments_ui.js

@@ -131,12 +131,9 @@ exports.update_attachments = function (event) {
 exports.set_up_attachments = function () {
     // The settings page must be rendered before this function gets called.
 
-    var uploaded_files_table = $("#uploaded_files_table").expectOne();
     var status = $('#delete-upload-status');
     loading.make_indicator($('#attachments_loading_indicator'), {text: 'Loading...'});
 
-    ui.set_up_scrollbar(uploaded_files_table.closest(".progressive-table-wrapper"));
-
     $('#uploaded_files_table').on('click', '.remove-attachment', function (e) {
         delete_attachments($(e.target).closest(".uploaded_file_row").attr('data-attachment-id'));
     });

static/js/emoji_picker.js

@@ -175,8 +175,6 @@ exports.hide_emoji_popover = function () {
     $('.has_popover').removeClass('has_popover has_emoji_popover');
     if (exports.reactions_popped()) {
         var orig_title = current_message_emoji_popover_elem.data("original-title");
-        ui.destroy_scrollbar($(".emoji-popover-emoji-map"));
-        ui.destroy_scrollbar($(".emoji-search-results-container"));
         current_message_emoji_popover_elem.popover("destroy");
         current_message_emoji_popover_elem.prop("title", orig_title);
         current_message_emoji_popover_elem.removeClass("reaction_button_visible");
@@ -602,8 +600,6 @@ exports.render_emoji_popover = function (elt, id) {
 
     var popover = elt.data('popover').$tip;
     popover.find('.emoji-popover-filter').focus();
-    ui.set_up_scrollbar(popover.find(".emoji-popover-emoji-map"));
-    ui.set_up_scrollbar(popover.find(".emoji-search-results-container"));
     current_message_emoji_popover_elem = elt;
 
     emoji_catalog_last_coordinates = {

static/js/invite.js

@@ -138,8 +138,6 @@ function prepare_form_to_be_shown() {
 }
 
 exports.launch = function () {
-    ui.set_up_scrollbar($("#invite_user_form .modal-body"));
-
     $('#submit-invitation').button();
     prepare_form_to_be_shown();
     $("#invitee_emails").focus().autosize();

static/js/pm_list.js

@@ -185,7 +185,6 @@ exports.update_dom_with_unread_counts = function (counts) {
 
 
 exports.initialize = function () {
-    ui.set_up_scrollbar($("#private-container"));
 };
 
 return exports;

static/js/popovers.js

@@ -276,7 +276,6 @@ exports.show_user_profile = function (user) {
     };
 
     $("#user-profile-modal-holder").html(templates.render("user_profile_modal", args));
-    ui.set_up_scrollbar($("#user-profile-modal #body"));
     $("#user-profile-modal").modal("show");
 
     settings_account.initialize_custom_user_type_fields("#user-profile-modal #content", user.user_id, false, false);
@@ -355,7 +354,6 @@ function show_user_group_info_popover(element, group, message) {
             trigger: "manual",
         });
         elt.popover("show");
-        ui.set_up_scrollbar($('.group-info-popover .member-list'));
         current_message_info_popover_elem = elt;
     }
 }

static/js/scroll_bar.js

@@ -64,7 +64,6 @@ exports.initialize = function () {
 
         exports.set_layout_width();
     }
-    ui.set_up_scrollbar($("#stream-filters-container"));
 };
 
 exports.set_layout_width = function () {

static/js/settings.js

@@ -119,9 +119,6 @@ function setup_settings_label() {
 }
 
 exports.build_page = function () {
-    ui.set_up_scrollbar($("#settings_page .sidebar.left"));
-    ui.set_up_scrollbar($("#settings_content"));
-
     setup_settings_label();
 
     var rendered_settings_tab = templates.render('settings_tab', {

static/js/settings_org.js

@@ -372,8 +372,6 @@ exports.populate_notifications_stream_dropdown = function (stream_list) {
         },
     }).init();
 
-    ui.set_up_scrollbar(dropdown_list_body);
-
     $("#id_realm_notifications_stream .dropdown-search").click(function (e) {
         e.stopPropagation();
     });

static/js/settings_streams.js

@@ -46,8 +46,6 @@ exports.build_default_stream_table = function (streams_data) {
         },
     }).init();
 
-    ui.set_up_scrollbar(table.closest(".progressive-table-wrapper"));
-
     loading.destroy_indicator($('#admin_page_default_streams_loading_indicator'));
 
     self.remove = function (stream_id) {

static/js/settings_users.js

@@ -203,10 +203,6 @@ function populate_users(realm_people_data) {
         },
     }).init();
 
-    [$bots_table, $users_table, $deactivated_users_table].forEach(function ($o) {
-        ui.set_up_scrollbar($o.closest(".progressive-table-wrapper"));
-    });
-
     loading.destroy_indicator($('#admin_page_users_loading_indicator'));
     loading.destroy_indicator($('#admin_page_bots_loading_indicator'));
     loading.destroy_indicator($('#admin_page_deactivated_users_loading_indicator'));

static/js/stream_edit.js

@@ -194,8 +194,6 @@ function show_subscription_settings(sub_row) {
         },
     }).init();
 
-    ui.set_up_scrollbar($(".subscriber_list_container"));
-
     sub_settings.find('input[name="principal"]').typeahead({
         source: people.get_realm_persons, // This is a function.
         items: 5,

static/js/subs.js

@@ -638,10 +638,6 @@ exports.launch = function (section) {
             on_close: exports.close,
         });
         exports.change_state(section);
-
-        ui.set_up_scrollbar($("#subscription_overlay .streams-list"));
-        ui.set_up_scrollbar($("#subscription_overlay .settings"));
-
     });
     if (!exports.get_active_data().id) {
         $('#search_stream_name').focus();

static/js/ui.js

@@ -1,6 +1,6 @@
 var ui = (function () {
 
-var SimpleBar = require("simplebar").default;
+require("simplebar");
 
 var exports = {};
 
@@ -15,10 +15,6 @@ exports.replace_emoji_with_text = function (element) {
     });
 };
 
-exports.set_up_scrollbar = function (element_selector) {
-    new SimpleBar(element_selector.expectOne()[0]);
-};
-
 exports.get_content_element = function (element_selector) {
     var element = element_selector.expectOne()[0];
     if (element.SimpleBar) {
@@ -44,10 +40,6 @@ exports.reset_scrollbar = function (element_selector) {
     }
 };
 
-exports.destroy_scrollbar = function (element_selector) {
-    element_selector.expectOne()[0].SimpleBar.unMount();
-};
-
 function update_message_in_all_views(message_id, callback) {
     _.each([message_list.all, home_msg_list, message_list.narrowed], function (list) {
         if (list === undefined) {

static/templates/emoji_popover_content.handlebars

@@ -8,7 +8,7 @@
         <span class="emoji-popover-tab-item {{#if @first}} active {{/if}}" data-tab-name='{{name}}' title='{{name}}'><i class="fa {{icon}}"></i></span>
         {{/each}}
     </div>
-    <div class="emoji-popover-emoji-map" data-message-id="{{message_id}}">
+    <div class="emoji-popover-emoji-map" data-simplebar data-message-id="{{message_id}}">
         {{#each emoji_categories }}
         <div class="emoji-popover-subheading" data-section="{{name}}">{{name}}</div>
         <div class="emoji-collection" data-section="{{name}}">
@@ -18,7 +18,7 @@
         </div>
         {{/each}}
     </div>
-    <div class="emoji-search-results-container" data-message-id="{{message_id}}">
+    <div class="emoji-search-results-container" data-simplebar data-message-id="{{message_id}}">
         <div class="emoji-popover-results-heading">{{t "Search results" }}</div>
         <div class="emoji-search-results"></div>
     </div>

static/templates/settings/attachments-settings.handlebars

@@ -12,7 +12,7 @@
             <th class="upload-actions">{{t "Actions" }}</th>
         </thead>
     </table>
-    <div class="progressive-table-wrapper" data-list-render="uploaded-files-list">
+    <div class="progressive-table-wrapper" data-simplebar data-list-render="uploaded-files-list">
         <table class="table table-condensed table-striped wrapped-table">
             <tbody class="required-text" data-empty="{{t 'You have not uploaded any files.' }}"
               id="uploaded_files_table" ></tbody>

static/templates/settings/bot-list-admin.handlebars

@@ -15,7 +15,7 @@
             {{/if}}
         </thead>
     </table>
-    <div class="progressive-table-wrapper">
+    <div class="progressive-table-wrapper" data-simplebar>
         <table class="table table-condensed table-striped wrapped-table">
             <tbody id="admin_bots_table" class="admin_bot_table required-text thick"
               data-empty="{{t 'No bots match your current filter.' }}"></tbody>

static/templates/settings/deactivated-users-admin.handlebars

@@ -4,7 +4,7 @@
     <div class="alert-notification" id="deactivated-user-field-status"></div>
     <div class="clear-float"></div>
 
-    <div class="progressive-table-wrapper">
+    <div class="progressive-table-wrapper" data-simplebar>
         <table class="table table-condensed table-striped">
             <thead>
                 <th>{{t "Name" }}</th>

static/templates/settings/default-streams-list-admin.handlebars

@@ -24,7 +24,7 @@
     <input type="text" class="search" placeholder="{{t 'Filter streams' }}" aria-label="{{t 'Filter streams' }}"/>
     <div class="clear-float"></div>
 
-    <div class="progressive-table-wrapper">
+    <div class="progressive-table-wrapper" data-simplebar>
         <table class="table table-condensed table-striped">
             <thead>
                 <th>{{t "Name" }}</th>

static/templates/settings/organization-settings-admin.handlebars

@@ -113,7 +113,7 @@
                             <li class="dropdown-search" role="presentation">
                                 <input type="text" role="menuitem" placeholder="{{t 'Filter streams' }}" autofocus/>
                             </li>
-                            <span class="dropdown-list-body"></span>
+                            <span class="dropdown-list-body" data-simplebar></span>
                         </ul>
                     </span>
                 </label>
@@ -135,7 +135,7 @@
                             <li class="dropdown-search" role="presentation">
                                 <input type="text" role="menuitem" placeholder="{{t 'Filter streams' }}" autofocus/>
                             </li>
-                            <span class="dropdown-list-body"></span>
+                            <span class="dropdown-list-body" data-simplebar></span>
                         </ul>
                     </span>
                 </label>

static/templates/settings/user-list-admin.handlebars

@@ -16,7 +16,7 @@
             {{/if}}
         </thead>
     </table>
-    <div class="progressive-table-wrapper">
+    <div class="progressive-table-wrapper" data-simplebar>
         <table class="table table-condensed table-striped wrapped-table">
             <tbody id="admin_users_table" class="admin_user_table required-text thick"
               data-empty="{{t 'No users match your current filter.' }}"></tbody>

static/templates/subscription_members.handlebars

@@ -21,7 +21,7 @@
         <div class="clear-float"></div>
     </div>
     <div class="subscriber-list-box">
-        <div class="subscriber_list_container">
+        <div class="subscriber_list_container" data-simplebar>
             <div class="subscriber_list_loading_indicator"></div>
             <table class="subscriber-list"></table>
         </div>

static/templates/subscription_table_body.handlebars

@@ -20,7 +20,7 @@
                         <div class="float-clear"></div>
                     </form>
                 </div>
-                <div class="streams-list">
+                <div class="streams-list" data-simplebar>
                 </div>
             </div>
             <div class="right">
@@ -34,7 +34,7 @@
                     <span>{{t 'First time? Read our <a href="/help/getting-your-organization-started-with-zulip#create-streams" target="_blank">guidelines</a> for creating and naming streams.' }}</span>
                     {{/if}}
                 </div>
-                <div class="settings">
+                <div class="settings" data-simplebar>
                     {{!-- edit stream here --}}
                 </div>
                 {{ partial "stream_creation_form" }}

static/templates/user_group_info_popover_content.handlebars

@@ -6,7 +6,7 @@
     </div>
 </div>
 <hr>
-<ul class="nav nav-list member-list">
+<ul class="nav nav-list member-list" data-simplebar>
     {{#each members}}
     <li>
         {{#if is_active }}

static/templates/user_profile_modal.handlebars

@@ -1,4 +1,4 @@
-<div id="user-profile-modal" class="modal modal-bg fade{{#unless profile_data.length}} no-fields{{/unless}}" tabindex="-1"
+<div id="user-profile-modal" class="modal modal-bg fade{{#unless profile_data.length}} no-fields{{/unless}}" data-simplebar tabindex="-1"
   role="dialog" aria-labelledby="user_profile_modal label" aria-hidden="true">
     <div class="modal-body" id="body">
         <button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}">

templates/zerver/app/invite_user.html

@@ -6,7 +6,7 @@
             <h3 id="invite-user-label">{% trans %}Invite users to Zulip{% endtrans %}</h3>
         </div>
         <form id="invite_user_form" class="form-horizontal">{{ csrf_input }}
-            <div class="modal-body">
+            <div class="modal-body" data-simplebar>
                 <div class="alert" id="invite_status"></div>
                 {% if development_environment %}
                 <div class="alert" id="dev_env_msg"></div>

templates/zerver/app/left_sidebar.html

@@ -28,7 +28,7 @@
                         </span>
                     </a>
                 </div>
-                <div id="private-container" class="scrolling_list">
+                <div id="private-container" class="scrolling_list" data-simplebar>
                 </div>
             </li>
             <li class="top_left_mentions top_left_row">
@@ -71,7 +71,7 @@
             <div id="topics_header">
                 <a href="" class="show-all-streams"> <i class="fa fa-chevron-left" aria-hidden="true"></i>{{ _('All streams') }}</a>
             </div>
-            <div id="stream-filters-container" class="scrolling_list">
+            <div id="stream-filters-container" class="scrolling_list" data-simplebar>
                 <ul id="stream_filters" class="filters"></ul>
                 {% if show_add_streams %}
                 <a id="add-stream-link" href="#streams/all"><i class="fa fa-plus-circle" aria-hidden="true"></i>{{ _('Add streams') }}</a>

templates/zerver/app/right_sidebar.html

@@ -18,7 +18,7 @@
                     <i class="fa fa-remove" aria-hidden="true"></i>
                 </button>
             </div>
-            <div id="buddy_list_wrapper" class="scrolling_list">
+            <div id="buddy_list_wrapper" class="scrolling_list" data-simplebar>
                 <ul id="user_presences" class="filters"></ul>
                 <div id="buddy_list_wrapper_padding"></div>
             </div>
@@ -27,7 +27,7 @@
             <div id="group-pm-header">
                 <h4 class='sidebar-title' id='group-pm-title'>{{ _('GROUP PMs') }}</h4>
             </div>
-            <ul id="group-pms" class="filters scrolling_list">
+            <ul id="group-pms" class="filters scrolling_list" data-simplebar>
             </ul>
         </div>
         {% if show_invites %}

templates/zerver/app/settings_overlay.html

@@ -7,7 +7,7 @@
         </div>
         <div class="clear-float"></div>
     </div>
-    <div class="sidebar left">
+    <div class="sidebar left" data-simplebar>
         <div class="sidebar-list dark-grey small-text">
             <div class="center tab-container"></div>
             <ul class="normal-settings-list">
@@ -152,7 +152,7 @@
                 <span class="exit-sign">&times;</span>
             </div>
         </div>
-        <div id="settings_content">
+        <div id="settings_content" data-simplebar>
             <div class="organization-box organization">
 
             </div>