refactor: Add an explicit `user_search_section`.

This, among other things, makes it easier to
troubleshoot the resize code.

frontend_tests/node_tests/activity.js

@@ -704,7 +704,7 @@ run_test('clear_search', () => {
     activity.user_filter.clear_search();
     assert.equal($('.user-list-filter').val(), '');
     activity.user_filter.clear_search();
-    assert($('#user-list .input-append').hasClass('notdisplayed'));
+    assert($('#user_search_section').hasClass('notdisplayed'));
 });
 
 run_test('escape_search', () => {
@@ -713,7 +713,7 @@ run_test('escape_search', () => {
     activity.escape_search();
     assert.equal($('.user-list-filter').val(), '');
     activity.escape_search();
-    assert($('#user-list .input-append').hasClass('notdisplayed'));
+    assert($('#user_search_section').hasClass('notdisplayed'));
 });
 
 reset_setup();
@@ -733,13 +733,13 @@ run_test('initiate_search', () => {
 
 run_test('toggle_filter_display', () => {
     activity.user_filter.toggle_filter_displayed();
-    assert($('#user-list .input-append').hasClass('notdisplayed'));
+    assert($('#user_search_section').hasClass('notdisplayed'));
     $('.user-list-filter').closest = function (selector) {
         assert.equal(selector, ".app-main [class^='column-']");
         return $.create('sidebar').addClass('column-right');
     };
     activity.user_filter.toggle_filter_displayed();
-    assert.equal($('#user-list .input-append').hasClass('notdisplayed'), false);
+    assert.equal($('#user_search_section').hasClass('notdisplayed'), false);
 });
 
 run_test('searching', () => {

static/js/resize.js

@@ -77,7 +77,7 @@ function get_new_heights() {
         - parseInt(buddy_list_wrapper.css("marginTop"), 10)
         - parseInt(buddy_list_wrapper.css("marginBottom"), 10)
         - $("#userlist-header").safeOuterHeight(true)
-        - $(".user-list-filter").safeOuterHeight(true)
+        - $("#user_search_section").safeOuterHeight(true)
         - invite_user_link_height
         - parseInt(group_pms.css("marginTop"), 10)
         - parseInt(group_pms.css("marginBottom"), 10)
@@ -124,7 +124,7 @@ function left_userlist_get_new_heights() {
                                 - $("#global_filters").safeOuterHeight(true)
                                 - $("#streams_header").safeOuterHeight(true)
                                 - $("#userlist-header").safeOuterHeight(true)
-                                - $(".user-list-filter").safeOuterHeight(true)
+                                - $("#user_search_section").safeOuterHeight(true)
                                 - $("#group-pm-header").safeOuterHeight(true)
                                 - parseInt(stream_filters.css("marginBottom"), 10)
                                 - parseInt(buddy_list_wrapper.css("marginTop"), 10)

static/js/user_search.js

@@ -5,7 +5,7 @@ var user_search = function (opts) {
 
     var self = {};
 
-    var $widget = $('#user-list .input-append').expectOne();
+    var $widget = $('#user_search_section').expectOne();
     var $input = $('.user-list-filter').expectOne();
 
     self.input_field = function () {

static/styles/media.scss

@@ -90,7 +90,7 @@
         padding: 0px;
     }
 
-    .input-append .user-list-filter {
+    #user_search_section .user-list-filter {
         /* input should be 100% - 6px padding x2 - 1px border x2. */
         width: calc(100% - 12px - 2px);
     }

templates/zerver/app/right_sidebar.html

@@ -12,7 +12,7 @@
                 <h4 class='sidebar-title' id='userlist-title' data-toggle="tooltip" title="{{ _('Filter users') }}">{{ _('USERS') }}</h4>
                 <i id="user_filter_icon" class='fa fa-search' aria-hidden="true" aria-label="{{ _('Filter users') }}" data-toggle="tooltip" title="{{ _('Filter users') }} (w)"></i>
             </div>
-            <div class="input-append notdisplayed">
+            <div class="input-append notdisplayed" id="user_search_section">
                 <input class="user-list-filter" type="text" autocomplete="off" placeholder="{{ _('Search people') }}" />
                 <button type="button" class="btn clear_search_button" id="clear_search_people_button">
                     <i class="fa fa-remove" aria-hidden="true"></i>