If necessary, scroll to avoid occluding the message to which you are replying.

(imported from commit adf23d647a3d462d6236d8f1039da89a31b782d5)

tools/jslint/check-all.js

@@ -55,7 +55,7 @@ var globals =
     + ' keep_pointer_in_view move_pointer_at_page_top_and_bottom'
     + ' respond_to_message'
     + ' select_message select_message_by_id'
-    + ' scroll_to_selected'
+    + ' scroll_to_selected disable_pointer_movement'
     + ' load_old_messages'
     + ' selected_message selected_message_id'
     + ' at_top_of_viewport at_bottom_of_viewport'

zephyr/static/js/compose.js

@@ -18,7 +18,30 @@ function show(tabname, focus_area) {
     $("#send-status").removeClass(status_classes).hide();
     $('#compose').css({visibility: "visible"});
     $("#new_message_content").trigger("autosize");
-    $('.message_comp').slideDown(100);
+    $('.message_comp').slideDown(100, function () {
+        // If the compose box is obscuring the currently selected message,
+        // scroll up until the message is no longer occluded.
+        var cover = selected_message.offset().top + selected_message.height()
+            - $("#compose").offset().top;
+        if (cover > 0) {
+            disable_pointer_movement = true;
+            // We use $('html, body') because you can't animate window.scrollTop
+            // on Chrome (http://bugs.jquery.com/ticket/10419).
+            $('html, body').animate({
+                scrollTop: viewport.scrollTop() + cover + 5
+            }, {
+                complete: function () {
+                    // The complete callback is actually called before the
+                    // scrolling has completed, so we try to let scrolling
+                    // finish before allowing pointer movements again or the
+                    // pointer may still move.
+                    setTimeout(function () {
+                        disable_pointer_movement = false;
+                    }, 50);
+                }
+            });
+        }
+    });
     focus_area.focus();
     focus_area.select();
 }

zephyr/static/js/zephyr.js

@@ -27,6 +27,8 @@ var message_groups = {
     zfilt: []
 };
 
+var disable_pointer_movement = false;
+
 // Why do we look at the 'bottom' in above_view_threshold and the top
 // in below_view_threshold as opposed to vice versa?  Mostly to handle
 // the case of gigantic messages.  Imagine the case of a selected
@@ -781,6 +783,11 @@ function at_bottom_of_viewport() {
 function keep_pointer_in_view() {
     var candidate;
     var next_message = selected_message;
+
+    if (disable_pointer_movement) {
+        return;
+    }
+
     if (next_message.length === 0)
         return;