Repaint filetree more consistently for mobile/device views

Summary:
Ref T13189. See <https://discourse.phabricator-community.org/t/diffusion-differential-mobile-layout-broken-when-enabling-file-tree/1751>.

We currently call a nonexistent `resetdrag()` which does nothing. Some sequences of interactions can result in a blank left column in mobile/device widths.

Repaint the filetree away more consistently on device change.

Test Plan: Viewed a revision, toggled filetree off + on, resized to narrow width. Before: bad left margin, JS console error. After: proper repaint at device breakpoint, no JS console error.

Reviewers: amckinley

Maniphest Tasks: T13189

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

resources/celerity/map.php

@@ -10,7 +10,7 @@ return array(
     'conpherence.pkg.css' => 'e68cf1fa',
     'conpherence.pkg.js' => '15191c65',
     'core.pkg.css' => 'fc4839c8',
-    'core.pkg.js' => '2058ec09',
+    'core.pkg.js' => 'b5a949ca',
     'differential.pkg.css' => '06dc617c',
     'differential.pkg.js' => 'c1cfa143',
     'diffusion.pkg.css' => 'a2d17c7d',
@@ -473,7 +473,7 @@ return array(
     'rsrc/js/core/behavior-more.js' => 'a80d0378',
     'rsrc/js/core/behavior-object-selector.js' => '77c1f0b0',
     'rsrc/js/core/behavior-oncopy.js' => '2926fff2',
-    'rsrc/js/core/behavior-phabricator-nav.js' => '94b7c320',
+    'rsrc/js/core/behavior-phabricator-nav.js' => '9d32bc88',
     'rsrc/js/core/behavior-phabricator-remarkup-assist.js' => 'acd29eee',
     'rsrc/js/core/behavior-read-only-warning.js' => 'ba158207',
     'rsrc/js/core/behavior-redirect.js' => '0213259f',
@@ -631,7 +631,7 @@ return array(
     'javelin-behavior-phabricator-keyboard-pager' => 'a8da01f0',
     'javelin-behavior-phabricator-keyboard-shortcuts' => '01fca1f0',
     'javelin-behavior-phabricator-line-linker' => '66a62306',
-    'javelin-behavior-phabricator-nav' => '94b7c320',
+    'javelin-behavior-phabricator-nav' => '9d32bc88',
     'javelin-behavior-phabricator-notification-example' => '8ce821c5',
     'javelin-behavior-phabricator-object-selector' => '77c1f0b0',
     'javelin-behavior-phabricator-oncopy' => '2926fff2',
@@ -1628,16 +1628,6 @@ return array(
       'javelin-resource',
       'javelin-routable',
     ),
-    '94b7c320' => array(
-      'javelin-behavior',
-      'javelin-behavior-device',
-      'javelin-stratcom',
-      'javelin-dom',
-      'javelin-magical-init',
-      'javelin-vector',
-      'javelin-request',
-      'javelin-util',
-    ),
     '960f6a39' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1658,6 +1648,16 @@ return array(
       'javelin-workflow',
       'javelin-stratcom',
     ),
+    '9d32bc88' => array(
+      'javelin-behavior',
+      'javelin-behavior-device',
+      'javelin-stratcom',
+      'javelin-dom',
+      'javelin-magical-init',
+      'javelin-vector',
+      'javelin-request',
+      'javelin-util',
+    ),
     '9d9685d6' => array(
       'phui-oi-list-view-css',
     ),

webroot/rsrc/js/core/behavior-phabricator-nav.js

@@ -20,10 +20,13 @@ JX.behavior('phabricator-nav', function(config) {
 
 // - Flexible Navigation Column ------------------------------------------------
 
-
   var dragging;
   var track;
 
+  var collapsed = config.collapsed;
+  var narrowed;
+  var visible = null;
+
   JX.enableDispatch(document.body, 'mousemove');
 
   JX.DOM.listen(drag, 'mousedown', null, function(e) {
@@ -95,6 +98,7 @@ JX.behavior('phabricator-nav', function(config) {
     if (!dragging) {
       return;
     }
+
     JX.DOM.alterClass(document.body, 'jx-drag-col', false);
     dragging = false;
 
@@ -117,6 +121,29 @@ JX.behavior('phabricator-nav', function(config) {
     return (JX.$V(drag).x - JX.Vector.getScroll().x);
   }
 
+  function repaint() {
+    narrowed = !JX.Device.isDesktop();
+
+    var was_visible = visible;
+    visible = (!collapsed && !narrowed);
+
+    if (was_visible === visible) {
+      return;
+    }
+
+    if (!visible) {
+      savedrag();
+    }
+
+    JX.DOM.alterClass(main, 'has-local-nav', visible);
+    JX.DOM.alterClass(main, 'has-drag-nav', visible);
+    JX.DOM.alterClass(main, 'has-closed-nav', !visible);
+
+    if (visible) {
+      restoredrag();
+    }
+  }
+
   var saved_width = config.width;
   function savedrag() {
     saved_width = get_width();
@@ -136,21 +163,10 @@ JX.behavior('phabricator-nav', function(config) {
     content.style.marginLeft = (saved_width + JX.Vector.getDim(drag).x) + 'px';
   }
 
-  var collapsed = config.collapsed;
   JX.Stratcom.listen('differential-filetree-toggle', null, function() {
     collapsed = !collapsed;
 
-    if (collapsed) {
-      savedrag();
-    }
-
-    JX.DOM.alterClass(main, 'has-local-nav', !collapsed);
-    JX.DOM.alterClass(main, 'has-drag-nav', !collapsed);
-    JX.DOM.alterClass(main, 'has-closed-nav', collapsed);
-
-    if (!collapsed) {
-      restoredrag();
-    }
+    repaint();
 
     new JX.Request('/settings/adjust/', JX.bag)
       .setData({ key : 'nav-collapsed', value : (collapsed ? 1 : 0) })
@@ -168,7 +184,9 @@ JX.behavior('phabricator-nav', function(config) {
   // of the navigation bar.
 
   function onresize() {
-    if (JX.Device.getDevice() != 'desktop') {
+    repaint();
+
+    if (!visible) {
       return;
     }
 
@@ -193,14 +211,13 @@ JX.behavior('phabricator-nav', function(config) {
   local.style.left = 0;
 
   JX.Stratcom.listen(['scroll', 'resize'], null, onresize);
-  onresize();
 
+  repaint();
 
 // - Navigation Reset ----------------------------------------------------------
 
   JX.Stratcom.listen('phabricator-device-change', null, function() {
-    resetdrag();
-    onresize();
+    repaint();
   });
 
 });