Scroll the chat column to the bottom when images load

Summary:
Fixes T7558. This might not be 100% perfect but should solve most of the issue.

I briefly looked at things like `MutationObserver` (some fancy next-gen browser junk) but couldn't immediately get it working.

Other methods for handling this kind of thing involve polling, complicated polyfills, etc. We could give `MutationObserver` a more serious effort if this is too leaky.

Test Plan:
  - In a thread with some images, reloaded the page and saw the scrollbar stay at the bottom.
  - Tested with and without USB devices attached.

Reviewers: btrahan, chad

Reviewed By: chad

Subscribers: epriestley

Maniphest Tasks: T7558

Differential Revision: https://secure.phabricator.com/D12191

resources/celerity/map.php

@@ -174,7 +174,7 @@ return array(
     'rsrc/externals/javelin/core/__tests__/install.js' => 'c432ee85',
     'rsrc/externals/javelin/core/__tests__/stratcom.js' => '88bf7313',
     'rsrc/externals/javelin/core/__tests__/util.js' => 'e251703d',
-    'rsrc/externals/javelin/core/init.js' => '2bd3c675',
+    'rsrc/externals/javelin/core/init.js' => '3010e992',
     'rsrc/externals/javelin/core/init_node.js' => 'c234aded',
     'rsrc/externals/javelin/core/install.js' => '05270951',
     'rsrc/externals/javelin/core/util.js' => '93cc50d6',
@@ -208,7 +208,7 @@ return array(
     'rsrc/externals/javelin/lib/Resource.js' => '44959b73',
     'rsrc/externals/javelin/lib/Routable.js' => 'b3e7d692',
     'rsrc/externals/javelin/lib/Router.js' => '29274e2b',
-    'rsrc/externals/javelin/lib/Scrollbar.js' => '1feea462',
+    'rsrc/externals/javelin/lib/Scrollbar.js' => '798fdb63',
     'rsrc/externals/javelin/lib/Sound.js' => '949c0fe5',
     'rsrc/externals/javelin/lib/URI.js' => '6eff08aa',
     'rsrc/externals/javelin/lib/Vector.js' => '2caa8fb8',
@@ -667,7 +667,7 @@ return array(
     'javelin-install' => '05270951',
     'javelin-json' => '69adf288',
     'javelin-leader' => '331b1611',
-    'javelin-magical-init' => '2bd3c675',
+    'javelin-magical-init' => '3010e992',
     'javelin-mask' => '8a41885b',
     'javelin-quicksand' => '2bb920b6',
     'javelin-reactor' => '2b8de964',
@@ -678,7 +678,7 @@ return array(
     'javelin-resource' => '44959b73',
     'javelin-routable' => 'b3e7d692',
     'javelin-router' => '29274e2b',
-    'javelin-scrollbar' => '1feea462',
+    'javelin-scrollbar' => '798fdb63',
     'javelin-sound' => '949c0fe5',
     'javelin-stratcom' => '6c53634d',
     'javelin-tokenizer' => '7644823e',
@@ -955,12 +955,6 @@ return array(
       'phuix-action-view',
       'conpherence-thread-manager',
     ),
-    '1feea462' => array(
-      'javelin-install',
-      'javelin-dom',
-      'javelin-stratcom',
-      'javelin-vector',
-    ),
     '2035b9cb' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1388,6 +1382,12 @@ return array(
       'javelin-behavior',
       'javelin-quicksand',
     ),
+    '798fdb63' => array(
+      'javelin-install',
+      'javelin-dom',
+      'javelin-stratcom',
+      'javelin-vector',
+    ),
     '7a68dda3' => array(
       'owners-path-editor',
       'javelin-behavior',

webroot/rsrc/externals/javelin/core/init.js

@@ -143,7 +143,8 @@
     'touchstart',
     'touchmove',
     'touchend',
-    'touchcancel'
+    'touchcancel',
+    'load'
   ];
 
   //  Simulate focus and blur in old versions of IE using focusin and focusout

webroot/rsrc/externals/javelin/lib/Scrollbar.js

@@ -27,6 +27,9 @@ JX.install('Scrollbar', {
   construct: function(frame) {
     this._frame = frame;
 
+    JX.DOM.listen(frame, 'load', null, JX.bind(this, this._onload));
+    this._onload();
+
     // Before doing anything, check if the scrollbar control has a measurable
     // width. If it doesn't, we're already in an environment with an aesthetic
     // scrollbar (like Safari on OSX with no mouse connected, or an iPhone)
@@ -77,19 +80,16 @@ JX.install('Scrollbar', {
     JX.DOM.listen(this._bar, 'mousedown', null, JX.bind(this, this._onjump));
 
     JX.enableDispatch(document.body, 'mouseenter');
+    JX.DOM.listen(viewport, 'mouseenter', null, JX.bind(this, this._onenter));
+
+    JX.DOM.listen(frame, 'scroll', null, JX.bind(this, this._onscroll));
 
     // Enabling dispatch for this event on `window` allows us to scroll even
     // if the mouse cursor is dragged outside the window in at least some
     // browsers (for example, Safari on OSX).
     JX.enableDispatch(window, 'mousemove');
-
-    JX.DOM.listen(viewport, 'mouseenter', null, JX.bind(this, this._onenter));
-    JX.DOM.listen(frame, 'scroll', null, JX.bind(this, this._onscroll));
-
-    JX.DOM.listen(viewport, 'mouseenter', null, JX.bind(this, this._onenter));
-    JX.DOM.listen(viewport, 'mouseenter', null, JX.bind(this, this._onenter));
-
     JX.Stratcom.listen('mousemove', null, JX.bind(this, this._onmove));
+
     JX.Stratcom.listen('mouseup', null, JX.bind(this, this._ondrop));
     JX.Stratcom.listen('resize', null, JX.bind(this, this._onresize));
 
@@ -133,6 +133,7 @@ JX.install('Scrollbar', {
     _timeout: null,
     _dragOrigin: null,
     _scrollOrigin: null,
+    _lastHeight: null,
 
 
     /**
@@ -293,6 +294,36 @@ JX.install('Scrollbar', {
     },
 
 
+
+    /**
+     * Something inside the frame fired a load event.
+     *
+     * The typical case is that an image loaded. This may have changed the
+     * height of the scroll area, and we may want to make adjustments.
+     */
+    _onload: function() {
+      var viewport = this._viewport || this._frame;
+
+      var height = viewport.scrollHeight;
+      var visible = JX.Vector.getDim(viewport).y;
+      if (this._lastHeight !== null && this._lastHeight != height) {
+
+        // If the viewport was scrollable and was scrolled down to near the
+        // bottom, scroll it down to account for the new height. The effect
+        // of this rule is to keep panels like the chat column scrolled to
+        // the bottom as images load into the thread.
+        if (viewport.scrollTop > 0) {
+          if ((viewport.scrollTop + visible + 64) >= this._lastHeight) {
+            viewport.scrollTop += (height - this._lastHeight);
+          }
+        }
+
+      }
+
+      this._lastHeight = height;
+    },
+
+
     /**
      * Shove the scrollbar on the viewport under the edge of the frame so the
      * user can't see it.