js: Rename viewport.js to message_viewport.js.

This fixes the mobile web experience for Chrome on iOS.

Apparently, Chrome-on-iOS silently has a `viewport` module that
overrides and user-defined module by that name, causing all of our
code that accesses the viewport module to not work on that platform.
We fix this by renaming it.

.eslintrc.json

@@ -55,7 +55,7 @@
         "Socket": false,
         "channel": false,
         "components": false,
-        "viewport": false,
+        "message_viewport": false,
         "upload_widget": false,
         "avatar": false,
         "realm_icon": false,

static/js/compose.js

@@ -81,7 +81,7 @@ function show_box(tabname, focus_area, opts) {
     var cover = selected_row.offset().top + selected_row.height()
         - $("#compose").offset().top;
     if (cover > 0) {
-        viewport.user_initiated_animate_scroll(cover+5);
+        message_viewport.user_initiated_animate_scroll(cover+5);
     }
 
 }

static/js/compose_fade.js

@@ -63,7 +63,7 @@ function _fade_messages() {
     var first_message;
     var first_row;
     var should_fade_group = false;
-    var visible_groups = viewport.visible_groups(false);
+    var visible_groups = message_viewport.visible_groups(false);
 
     normal_display = false;
 

static/js/condense.js

@@ -99,7 +99,7 @@ function get_message_height(elem, message_id) {
 }
 
 exports.condense_and_collapse = function (elems) {
-    var height_cutoff = viewport.height() * 0.65;
+    var height_cutoff = message_viewport.height() * 0.65;
 
     _.each(elems, function (elem) {
         var content = $(elem).find(".message_content");

static/js/gear_menu.js

@@ -14,7 +14,7 @@ exports.initialize = function () {
     $('#gear-menu a[data-toggle="tab"]').on('show', function (e) {
         // Save the position of our old tab away, before we switch
         var old_tab = $(e.relatedTarget).attr('href');
-        scroll_positions[old_tab] = viewport.scrollTop();
+        scroll_positions[old_tab] = message_viewport.scrollTop();
     });
     $('#gear-menu a[data-toggle="tab"]').on('shown', function (e) {
         var target_tab = $(e.target).attr('href');
@@ -36,12 +36,12 @@ exports.initialize = function () {
         // (we apparently have to do this after setting the hash,
         // because otherwise that action may scroll us somewhere.)
         if (scroll_positions.hasOwnProperty(target_tab)) {
-            viewport.scrollTop(scroll_positions[target_tab]);
+            message_viewport.scrollTop(scroll_positions[target_tab]);
         } else {
             if (target_tab === '#home') {
                 navigate.scroll_to_selected();
             } else {
-                viewport.scrollTop(0);
+                message_viewport.scrollTop(0);
             }
         }
     });

static/js/message_edit.js

@@ -283,7 +283,7 @@ function edit_message(row, raw_content) {
     var edit_top = message_edit_content[0].getBoundingClientRect().top;
     var scroll_by = edit_top - content_top + 5 /* border and padding */;
     edit_obj.scrolled_by = scroll_by;
-    viewport.scrollTop(viewport.scrollTop() + scroll_by);
+    message_viewport.scrollTop(message_viewport.scrollTop() + scroll_by);
 
     if (feature_flags.propagate_topic_edits && message.local_id === undefined) {
         var original_topic = message.subject;
@@ -299,7 +299,7 @@ function start_edit_maintaining_scroll(row, content) {
     var row_bottom = row.height() + row.offset().top;
     var composebox_top = $("#compose").offset().top;
     if (row_bottom > composebox_top) {
-        viewport.scrollTop(viewport.scrollTop() + row_bottom - composebox_top);
+        message_viewport.scrollTop(message_viewport.scrollTop() + row_bottom - composebox_top);
     }
 }
 
@@ -347,7 +347,7 @@ exports.end = function (row) {
     if (message !== undefined &&
         currently_editing_messages[message.id] !== undefined) {
         var scroll_by = currently_editing_messages[message.id].scrolled_by;
-        viewport.scrollTop(viewport.scrollTop() - scroll_by);
+        message_viewport.scrollTop(message_viewport.scrollTop() - scroll_by);
         delete currently_editing_messages[message.id];
         current_msg_list.hide_edit_message(row);
     }

static/js/message_list.js

@@ -670,7 +670,7 @@ exports.all = new exports.MessageList(
 // mousemove, then you will have to contend with the autoscroll
 // itself generating mousemove events.
 $(document).on('message_selected.zulip zuliphashchange.zulip mousewheel', function () {
-    viewport.stop_auto_scrolling();
+    message_viewport.stop_auto_scrolling();
 });
 
 return exports;

static/js/message_list_view.js

@@ -453,7 +453,7 @@ MessageListView.prototype = {
 
         function restore_scroll_position() {
             if (list === current_msg_list && orig_scrolltop_offset !== undefined) {
-                viewport.set_message_offset(orig_scrolltop_offset);
+                message_viewport.set_message_offset(orig_scrolltop_offset);
                 list.reselect_selected_id();
             }
         }
@@ -651,14 +651,14 @@ MessageListView.prototype = {
         }
 
         var selected_row_offset = selected_row.offset().top;
-        var info = viewport.message_viewport_info();
+        var info = message_viewport.message_viewport_info();
         var available_space_for_scroll = selected_row_offset - info.visible_top;
 
         var rows_offset = rows.last_visible().offset().top - this.list.selected_row().offset().top;
 
         // autoscroll_forever: if we've sent a message, move pointer at least that far.
         if (page_params.autoscroll_forever && id_of_last_message_sent_by_us > -1 &&
-            rows_offset < (viewport.height())) {
+            rows_offset < (message_viewport.height())) {
             this.list.select_id(id_of_last_message_sent_by_us, {from_rendering: true});
             navigate.scroll_to_selected();
             return;
@@ -699,7 +699,7 @@ MessageListView.prototype = {
         }
 
         // Ok, we are finally ready to actually scroll.
-        viewport.system_initiated_animate_scroll(scroll_amount);
+        message_viewport.system_initiated_animate_scroll(scroll_amount);
     },
 
 
@@ -780,8 +780,9 @@ MessageListView.prototype = {
                 this.list.select_id(this.list.selected_id(), {use_closest: true});
             }
             // Must get this.list.selected_row() again since it is now a new DOM element
-            viewport.scrollTop(
+            message_viewport.scrollTop(
-                    viewport.scrollTop() + this.selected_row().offset().top - scrolltop_offset);
+                message_viewport.scrollTop() +
+                    this.selected_row().offset().top - scrolltop_offset);
         }
     },
 

static/js/message_viewport.js

@@ -1,4 +1,4 @@
-var viewport = (function () {
+var message_viewport = (function () {
 var exports = {};
 
 var jwindow;
@@ -69,7 +69,7 @@ exports.is_below_visible_bottom = function (offset) {
 exports.set_message_position = function (message_top, message_height, viewport_info, ratio) {
     // message_top = offset of the top of a message that you are positioning
     // message_height = height of the message that you are positioning
-    // viewport_info = result of calling viewport.message_viewport_info
+    // viewport_info = result of calling message_viewport.message_viewport_info
     // ratio = fraction indicating how far down the screen the msg should be
 
     var how_far_down_in_visible_page = viewport_info.visible_height * ratio;
@@ -200,7 +200,7 @@ exports.scrollTop = function viewport_scrollTop(target_scrollTop) {
     }
     var ret = exports.message_pane.scrollTop(target_scrollTop);
     var new_scrollTop = exports.message_pane.scrollTop();
-    var space_to_scroll = $("#bottom_whitespace").offset().top - viewport.height();
+    var space_to_scroll = $("#bottom_whitespace").offset().top - message_viewport.height();
 
     // Check whether our scrollTop didn't move even though one could have scrolled down
     if (space_to_scroll > 0 && target_scrollTop > 0 &&
@@ -344,5 +344,5 @@ return exports;
 }());
 
 if (typeof module !== 'undefined') {
-    module.exports = viewport;
+    module.exports = message_viewport;
 }

static/js/narrow.js

@@ -306,7 +306,7 @@ exports.activate = function (raw_operators, opts) {
                 // Scroll so that the selected message is in the same
                 // position in the viewport as it was prior to
                 // narrowing
-                viewport.set_message_offset(then_select_offset);
+                message_viewport.set_message_offset(then_select_offset);
             }
         }
     }

static/js/navigate.js

@@ -10,7 +10,7 @@ function go_to_row(row) {
 }
 
 exports.up = function () {
-    viewport.last_movement_direction = -1;
+    message_viewport.last_movement_direction = -1;
     var next_row = rows.prev_visible(current_msg_list.selected_row());
     if (next_row.length !== 0) {
         go_to_row(next_row);
@@ -18,7 +18,7 @@ exports.up = function () {
 };
 
 exports.down = function (with_centering) {
-    viewport.last_movement_direction = 1;
+    message_viewport.last_movement_direction = 1;
     var next_row = rows.next_visible(current_msg_list.selected_row());
     if (next_row.length !== 0) {
         go_to_row(next_row);
@@ -30,13 +30,14 @@ exports.down = function (with_centering) {
         // FIXME: this doesn't work for End because rows.last_visible()
         // always returns a message.
         var current_msg_table = rows.get_table(current_msg_list.table_name);
-        viewport.scrollTop(current_msg_table.outerHeight(true) - viewport.height() * 0.1);
+        message_viewport.scrollTop(current_msg_table.outerHeight(true) -
+                                   message_viewport.height() * 0.1);
         unread_ui.mark_current_list_as_read();
     }
 };
 
 exports.to_home = function () {
-    viewport.last_movement_direction = -1;
+    message_viewport.last_movement_direction = -1;
     var next_row = rows.first_visible(current_msg_list.selected_row());
     if (next_row.length !== 0) {
         go_to_row(next_row);
@@ -45,14 +46,14 @@ exports.to_home = function () {
 
 exports.to_end = function () {
     var next_id = current_msg_list.last().id;
-    viewport.last_movement_direction = 1;
+    message_viewport.last_movement_direction = 1;
     current_msg_list.select_id(next_id, {then_scroll: true,
                                          from_scroll: true});
     unread_ui.mark_current_list_as_read();
 };
 
 exports.page_up = function () {
-    if (viewport.at_top() && !current_msg_list.empty()) {
+    if (message_viewport.at_top() && !current_msg_list.empty()) {
         current_msg_list.select_id(current_msg_list.first().id, {then_scroll: false});
     } else {
         ui.page_up_the_right_amount();
@@ -60,7 +61,7 @@ exports.page_up = function () {
 };
 
 exports.page_down = function () {
-    if (viewport.at_bottom() && !current_msg_list.empty()) {
+    if (message_viewport.at_bottom() && !current_msg_list.empty()) {
         current_msg_list.select_id(current_msg_list.last().id, {then_scroll: false});
         unread_ui.mark_current_list_as_read();
     } else {
@@ -104,7 +105,7 @@ exports.cycle_stream = function (direction) {
 exports.scroll_to_selected = function () {
     var selected_row = current_msg_list.selected_row();
     if (selected_row && (selected_row.length !== 0)) {
-        viewport.recenter_view(selected_row);
+        message_viewport.recenter_view(selected_row);
     }
 };
 

static/js/pointer.js

@@ -76,7 +76,7 @@ exports.fast_forward_pointer = function () {
 };
 
 exports.keep_pointer_in_view = function () {
-    // See viewport.recenter_view() for related logic to keep the pointer onscreen.
+    // See message_viewport.recenter_view() for related logic to keep the pointer onscreen.
     // This function mostly comes into place for mouse scrollers, and it
     // keeps the pointer in view.  For people who purely scroll with the
     // mouse, the pointer is kind of meaningless to them, but keyboard
@@ -89,12 +89,12 @@ exports.keep_pointer_in_view = function () {
         return;
     }
 
-    var info = viewport.message_viewport_info();
+    var info = message_viewport.message_viewport_info();
     var top_threshold = info.visible_top + (1/10 * info.visible_height);
     var bottom_threshold = info.visible_top + (9/10 * info.visible_height);
 
     function message_is_far_enough_down() {
-        if (viewport.at_top()) {
+        if (message_viewport.at_top()) {
             return true;
         }
 
@@ -120,7 +120,7 @@ exports.keep_pointer_in_view = function () {
     }
 
     function message_is_far_enough_up() {
-        return viewport.at_bottom() ||
+        return message_viewport.at_bottom() ||
             (next_row.offset().top <= bottom_threshold);
     }
 

static/js/popovers.js

@@ -71,9 +71,9 @@ function show_message_info_popover(element, id) {
             narrowed: narrow.active(),
         };
 
-        var ypos = elt.offset().top - viewport.scrollTop();
+        var ypos = elt.offset().top - message_viewport.scrollTop();
         elt.popover({
-            placement: (ypos > (viewport.height() - 300)) ? 'top' : 'bottom',
+            placement: (ypos > (message_viewport.height() - 300)) ? 'top' : 'bottom',
             title:     templates.render('message_info_popover_title',   args),
             content:   templates.render('message_info_popover_content', args),
             trigger:   "manual",
@@ -126,8 +126,8 @@ exports.toggle_reactions_popover = function (element, id) {
 
         var approx_popover_height = 400;
         var approx_popover_width = 400;
-        var distance_from_bottom = viewport.height() - elt.offset().top;
+        var distance_from_bottom = message_viewport.height() - elt.offset().top;
-        var distance_from_right = viewport.width() - elt.offset().left;
+        var distance_from_right = message_viewport.width() - elt.offset().left;
         var will_extend_beyond_bottom_of_viewport = distance_from_bottom < approx_popover_height;
         var will_extend_beyond_top_of_viewport = elt.offset().top < approx_popover_height;
         var will_extend_beyond_left_of_viewport = elt.offset().left < (approx_popover_width / 2);
@@ -209,9 +209,9 @@ exports.toggle_actions_popover = function (element, id) {
             narrowed: narrow.active(),
         };
 
-        var ypos = elt.offset().top - viewport.scrollTop();
+        var ypos = elt.offset().top - message_viewport.scrollTop();
         elt.popover({
-            placement: (ypos > (viewport.height() - 300)) ? 'top' : 'bottom',
+            placement: (ypos > (message_viewport.height() - 300)) ? 'top' : 'bottom',
             title:     "",
             content:   templates.render('actions_popover_content', args),
             trigger:   "manual",

static/js/resize.js

@@ -48,7 +48,7 @@ function set_user_list_heights(res, usable_height, user_presences, group_pms) {
 
 function get_new_heights() {
     var res = {};
-    var viewport_height = viewport.height();
+    var viewport_height = message_viewport.height();
     var top_navbar_height = $("#top_navbar").outerHeight(true);
     var invite_user_link_height = $("#invite-user-link").outerHeight(true) || 0;
 
@@ -107,8 +107,8 @@ function get_new_heights() {
 function left_userlist_get_new_heights() {
 
     var res = {};
-    var viewport_height = viewport.height();
+    var viewport_height = message_viewport.height();
-    var viewport_width = viewport.width();
+    var viewport_width = message_viewport.width();
     var top_navbar_height = $(".header").outerHeight(true);
 
     var stream_filters = $('#stream_filters').expectOne();
@@ -185,7 +185,7 @@ exports.resize_page_components = function () {
     var sidebar;
 
     if (page_params.left_side_userlist) {
-        var css_narrow_mode = viewport.is_narrow();
+        var css_narrow_mode = message_viewport.is_narrow();
 
         $("#top_navbar").removeClass("rightside-userlist");
 

static/js/settings.js

@@ -315,14 +315,14 @@ function _setup_page() {
     function settings_change_error(message, xhr) {
         // Scroll to the top so the error message is visible.
         // We would scroll anyway if we end up submitting the form.
-        viewport.scrollTop(0);
+        message_viewport.scrollTop(0);
         ui.report_error(message, xhr, $('#account-settings-status').expectOne());
     }
 
     function settings_change_success(message) {
         // Scroll to the top so the error message is visible.
         // We would scroll anyway if we end up submitting the form.
-        viewport.scrollTop(0);
+        message_viewport.scrollTop(0);
         ui.report_success(message, $('#account-settings-status').expectOne());
     }
 

static/js/subs.js

@@ -133,7 +133,7 @@ function update_in_home_view(sub, value) {
         var saved_ypos;
         // Save our current scroll position
         if (ui.home_tab_obscured()) {
-            saved_ypos = viewport.scrollTop();
+            saved_ypos = message_viewport.scrollTop();
         } else if (home_msg_list === current_msg_list &&
                    current_msg_list.selected_row().offset() !== null) {
             msg_offset = current_msg_list.selected_row().offset().top;
@@ -146,7 +146,7 @@ function update_in_home_view(sub, value) {
 
         // Ensure we're still at the same scroll position
         if (ui.home_tab_obscured()) {
-            viewport.scrollTop(saved_ypos);
+            message_viewport.scrollTop(saved_ypos);
         } else if (home_msg_list === current_msg_list) {
             // We pass use_closest to handle the case where the
             // currently selected message is being hidden from the
@@ -154,7 +154,7 @@ function update_in_home_view(sub, value) {
             home_msg_list.select_id(home_msg_list.selected_id(),
                                     {use_closest: true, empty_ok: true});
             if (current_msg_list.selected_id() !== -1) {
-                viewport.set_message_offset(msg_offset);
+                message_viewport.set_message_offset(msg_offset);
             }
         }
 

static/js/tutorial.js

@@ -254,7 +254,7 @@ function box(x, y, width, height) {
 }
 
 function message_groups_in_viewport() {
-    var vp = viewport.message_viewport_info();
+    var vp = message_viewport.message_viewport_info();
     var top = vp.visible_top;
     var height = vp.visible_height;
     var last_group = rows.get_message_recipient_row(rows.last_visible());

static/js/ui.js

@@ -44,7 +44,7 @@ function amount_to_paginate() {
     // Some day we might have separate versions of this function
     // for Page Up vs. Page Down, but for now it's the same
     // strategy in either direction.
-    var info = viewport.message_viewport_info();
+    var info = message_viewport.message_viewport_info();
     var page_size = info.visible_height;
 
     // We don't want to page up a full page, because Zulip users
@@ -77,13 +77,13 @@ exports.page_up_the_right_amount = function () {
     // related adjustements, try to make those happen in the
     // scroll handlers, not here.
     var delta = amount_to_paginate();
-    viewport.scrollTop(viewport.scrollTop() - delta);
+    message_viewport.scrollTop(message_viewport.scrollTop() - delta);
 };
 
 exports.page_down_the_right_amount = function () {
     // see also: page_up_the_right_amount
     var delta = amount_to_paginate();
-    viewport.scrollTop(viewport.scrollTop() + delta);
+    message_viewport.scrollTop(message_viewport.scrollTop() + delta);
 };
 
 exports.replace_emoji_with_text = function (element) {
@@ -396,19 +396,19 @@ $(function () {
         // page, the pointer may still need to move.
 
         if (delta > 0) {
-            if (viewport.at_top()) {
+            if (message_viewport.at_top()) {
                 navigate.up();
             }
         } else if (delta < 0) {
-            if (viewport.at_bottom()) {
+            if (message_viewport.at_bottom()) {
                 navigate.down();
             }
         }
 
-        viewport.last_movement_direction = delta;
+        message_viewport.last_movement_direction = delta;
     });
 
-    viewport.message_pane.mousewheel(function (e, delta) {
+    message_viewport.message_pane.mousewheel(function (e, delta) {
         // Ignore mousewheel events if a modal is visible.  It's weird if the
         // user can scroll the main view by wheeling over the grayed-out area.
         // Similarly, ignore events on settings page etc.
@@ -540,12 +540,12 @@ $(function () {
                 });
             }
             if (event.target_scroll_offset !== undefined) {
-                viewport.set_message_offset(event.target_scroll_offset);
+                message_viewport.set_message_offset(event.target_scroll_offset);
             } else {
                 // Scroll to place the message within the current view;
                 // but if this is the initial placement of the pointer,
                 // just place it in the very center
-                viewport.recenter_view(row, {from_scroll: event.from_scroll,
+                message_viewport.recenter_view(row, {from_scroll: event.from_scroll,
                                     force_center: event.previously_selected === -1});
             }
         }
@@ -605,7 +605,7 @@ function scroll_finished() {
             pointer.suppress_scroll_pointer_update = false;
         }
         floating_recipient_bar.update();
-        if (viewport.scrollTop() === 0 &&
+        if (message_viewport.scrollTop() === 0 &&
             ui.have_scrolled_away_from_top) {
             ui.have_scrolled_away_from_top = false;
             message_store.load_more_messages(current_msg_list);
@@ -632,7 +632,7 @@ function scroll_finish() {
 var saved_compose_cursor = 0;
 
 $(function () {
-    viewport.message_pane.scroll($.throttle(50, function () {
+    message_viewport.message_pane.scroll($.throttle(50, function () {
         unread_ui.process_visible();
         scroll_finish();
     }));

static/js/unread_ui.js

@@ -135,11 +135,11 @@ exports.process_visible = function process_visible() {
     }
 
     if (feature_flags.mark_read_at_bottom) {
-        if (viewport.bottom_message_visible()) {
+        if (message_viewport.bottom_message_visible()) {
             exports.mark_current_list_as_read();
         }
     } else {
-        exports.mark_messages_as_read(viewport.visible_messages(true));
+        exports.mark_messages_as_read(message_viewport.visible_messages(true));
     }
 };
 

static/styles/media.css

@@ -3,7 +3,7 @@
     display: none !important;
 }
 
-/* This max-width must be synced with viewport.is_narrow */
+/* This max-width must be synced with message_viewport.is_narrow */
 @media (max-width: 975px) {
 
     .screen-full-show {

zproject/settings.py

@@ -818,7 +818,7 @@ JS_SPECS = {
             'js/unread_ui.js',
             'js/muting.js',
             'js/muting_ui.js',
-            'js/viewport.js',
+            'js/message_viewport.js',
             'js/rows.js',
             'js/people.js',
             'js/unread.js',