fix <select> scroll issue in chrome (win), fixes #5257

tweak sidebar scroller so as not to set the body class if it's not
actually changing. this keeps chrome from repainting unnecessarily,
which was the reason why the <select> kept jumping back to the first
option every second.

Change-Id: I1c42cf89ec0f68dca2b49f8e1564c0b8d682d9dc
Reviewed-on: https://gerrit.instructure.com/6200
Tested-by: Hudson <hudson@instructure.com>
Reviewed-by: Ryan Shaw <ryan@instructure.com>

Author: jenseng

public/javascripts/jquery.instructure_misc_helpers.js

@@ -183,9 +183,15 @@ I18n.scoped('instructure', function(I18n) {
               notRightSideIsTallerThanRightSide = notRightSideHeight > rightSideHeight,
               rightSideBottomIsBelowMainBottom = ( headerHeight + $main.height() - windowScrollTop ) <= ( rightSideHeight + rightSideMarginBottom );
         }
-        $body
-          .toggleClass('with-scrolling-right-side',     windowScrollIsBelowHeader && notRightSideIsTallerThanRightSide && !rightSideBottomIsBelowMainBottom)
-          .toggleClass('with-sidebar-pinned-to-bottom', windowScrollIsBelowHeader && notRightSideIsTallerThanRightSide &&  rightSideBottomIsBelowMainBottom);
+        // windows chrome repaints when you set the class, even if the classes
+        // aren't truly changing, which wreaks havoc on open select elements.
+        // so we only toggle if we really need to
+        if ((windowScrollIsBelowHeader && notRightSideIsTallerThanRightSide && !rightSideBottomIsBelowMainBottom) ^ $body.hasClass('with-scrolling-right-side')) {
+          $body.toggleClass('with-scrolling-right-side');
+        }
+        if ((windowScrollIsBelowHeader && notRightSideIsTallerThanRightSide && rightSideBottomIsBelowMainBottom) ^ $body.hasClass('with-sidebar-pinned-to-bottom')) {
+          $body.toggleClass('with-sidebar-pinned-to-bottom');
+        }
       }
       onScroll();
       $window.scroll(onScroll);

spec/selenium/layout_spec.rb

@@ -0,0 +1,29 @@
+require File.expand_path(File.dirname(__FILE__) + '/common')
+
+describe "layout selenium tests" do
+  it_should_behave_like "in-process server selenium tests"
+
+
+  it "should auto-scroll the sidebar when $.scrollSidebar is called" do
+    course_with_student_logged_in
+    get "/"
+    driver.execute_script('$("#not_right_side").height(10000)')
+    driver.execute_script('$("#right-side-wrapper").height(5000)')
+    driver.execute_script('$.scrollSidebar()')
+    body = driver.find_element(:tag_name, 'body')
+    body.attribute(:class).should_not match /with-scrolling-right-side/
+    body.attribute(:class).should_not match /with-sidebar-pinned-to-bottom/
+
+    driver.find_element(:id, 'footer').location_once_scrolled_into_view
+    body.attribute(:class).should_not match /with-scrolling-right-side/
+    body.attribute(:class).should match /with-sidebar-pinned-to-bottom/
+
+    driver.find_element(:id, 'topic_list').location_once_scrolled_into_view
+    body.attribute(:class).should match /with-scrolling-right-side/
+    body.attribute(:class).should_not match /with-sidebar-pinned-to-bottom/
+
+    driver.find_element(:id, 'header').location_once_scrolled_into_view
+    body.attribute(:class).should_not match /with-scrolling-right-side/
+    body.attribute(:class).should_not match /with-sidebar-pinned-to-bottom/
+  end
+end