Improve column device behaviors

Summary:
Fixes T7062. When the column is open, we only want to consider the screen width which is avilable for content when computing responsive breakpoints.

Specificially, if you have a 1000px wide browser window (normally "desktop") but the column is open (300px) so you only have 700px free for content (normally "tablet"), we should drop to the tablet breakpoint. This lets you have a narrow column of "tablet" content next to the chat column, instead of a really squished column of "desktop" contnet.

This also means the chat column can't directly use JX.Device to hide itself.

Test Plan: Resized screen with column open, saw content go from Desktop + Column -> Tablet + Column -> Tablet -> Mobile.

Reviewers: btrahan, chad

Reviewed By: chad

Subscribers: epriestley

Maniphest Tasks: T7062

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

resources/celerity/map.php

@@ -8,7 +8,7 @@
 return array(
   'names' => array(
     'core.pkg.css' => '2ff29d1d',
-    'core.pkg.js' => '75599122',
+    'core.pkg.js' => '2102d953',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '571b1cc1',
     'differential.pkg.js' => 'c0506961',
@@ -44,7 +44,7 @@ return array(
     'rsrc/css/application/config/config-welcome.css' => '6abd79be',
     'rsrc/css/application/config/setup-issue.css' => '22270af2',
     'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
-    'rsrc/css/application/conpherence/durable-column.css' => 'e11b2fbc',
+    'rsrc/css/application/conpherence/durable-column.css' => 'e2011d85',
     'rsrc/css/application/conpherence/menu.css' => '9b37a261',
     'rsrc/css/application/conpherence/message-pane.css' => '69ff6e0f',
     'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
@@ -354,7 +354,7 @@ return array(
     'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18',
     'rsrc/js/application/config/behavior-reorder-fields.js' => '14a827de',
     'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => 'bb928342',
-    'rsrc/js/application/conpherence/behavior-durable-column.js' => '70787038',
+    'rsrc/js/application/conpherence/behavior-durable-column.js' => 'e5182926',
     'rsrc/js/application/conpherence/behavior-menu.js' => 'de5579b4',
     'rsrc/js/application/conpherence/behavior-pontificate.js' => '21ba5861',
     'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3',
@@ -457,7 +457,7 @@ return array(
     'rsrc/js/core/behavior-choose-control.js' => '6153c708',
     'rsrc/js/core/behavior-crop.js' => 'fa0f4fc2',
     'rsrc/js/core/behavior-dark-console.js' => '08883e8b',
-    'rsrc/js/core/behavior-device.js' => '03d6ed07',
+    'rsrc/js/core/behavior-device.js' => 'a205cf28',
     'rsrc/js/core/behavior-drag-and-drop-textarea.js' => '6d49590e',
     'rsrc/js/core/behavior-error-log.js' => '6882e80a',
     'rsrc/js/core/behavior-fancy-datepicker.js' => 'c51ae228',
@@ -514,7 +514,7 @@ return array(
     'changeset-view-manager' => '58562350',
     'config-options-css' => '7fedf08b',
     'config-welcome-css' => '6abd79be',
-    'conpherence-durable-column-view' => 'e11b2fbc',
+    'conpherence-durable-column-view' => 'e2011d85',
     'conpherence-menu-css' => '9b37a261',
     'conpherence-message-pane-css' => '69ff6e0f',
     'conpherence-notification-css' => '04a6e10a',
@@ -566,7 +566,7 @@ return array(
     'javelin-behavior-dashboard-move-panels' => '82439934',
     'javelin-behavior-dashboard-query-panel-select' => '453c5375',
     'javelin-behavior-dashboard-tab-panel' => 'd4eecc63',
-    'javelin-behavior-device' => '03d6ed07',
+    'javelin-behavior-device' => 'a205cf28',
     'javelin-behavior-differential-add-reviewers-and-ccs' => 'e10f8e18',
     'javelin-behavior-differential-comment-jump' => '4fdb476d',
     'javelin-behavior-differential-diff-radios' => 'e1ff79b1',
@@ -584,7 +584,7 @@ return array(
     'javelin-behavior-diffusion-locate-file' => '6d3e1947',
     'javelin-behavior-diffusion-pull-lastmodified' => '2b228192',
     'javelin-behavior-doorkeeper-tag' => 'e5822781',
-    'javelin-behavior-durable-column' => '70787038',
+    'javelin-behavior-durable-column' => 'e5182926',
     'javelin-behavior-error-log' => '6882e80a',
     'javelin-behavior-fancy-datepicker' => 'c51ae228',
     'javelin-behavior-global-drag-and-drop' => 'bbdf75ca',
@@ -847,13 +847,6 @@ return array(
     '029a133d' => array(
       'aphront-dialog-view-css',
     ),
-    '03d6ed07' => array(
-      'javelin-behavior',
-      'javelin-stratcom',
-      'javelin-dom',
-      'javelin-vector',
-      'javelin-install',
-    ),
     '05270951' => array(
       'javelin-util',
       'javelin-magical-init',
@@ -1334,16 +1327,6 @@ return array(
     '6f7a9da8' => array(
       'javelin-install',
     ),
-    70787038 => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-stratcom',
-      'javelin-behavior-device',
-      'javelin-scrollbar',
-      'javelin-quicksand',
-      'phabricator-keyboard-shortcut',
-      'conpherence-thread-manager',
-    ),
     '70baed2f' => array(
       'javelin-install',
       'javelin-dom',
@@ -1618,6 +1601,13 @@ return array(
       'javelin-vector',
       'javelin-magical-init',
     ),
+    'a205cf28' => array(
+      'javelin-behavior',
+      'javelin-stratcom',
+      'javelin-dom',
+      'javelin-vector',
+      'javelin-install',
+    ),
     'a80d0378' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1864,6 +1854,16 @@ return array(
       'javelin-behavior',
       'javelin-dom',
     ),
+    'e5182926' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-stratcom',
+      'javelin-behavior-device',
+      'javelin-scrollbar',
+      'javelin-quicksand',
+      'phabricator-keyboard-shortcut',
+      'conpherence-thread-manager',
+    ),
     'e566f52c' => array(
       'javelin-behavior',
       'javelin-stratcom',

webroot/rsrc/css/application/conpherence/durable-column.css

@@ -29,10 +29,6 @@
   background: #fff;
 }
 
-.device .conpherence-durable-column {
-  display: none;
-}
-
 .conpherence-durable-column .loading-mask {
   position: absolute;
   top: 90px;

webroot/rsrc/js/application/conpherence/behavior-durable-column.js

@@ -28,6 +28,10 @@ JX.behavior('durable-column', function(config, statics) {
   var loadThreadID = null;
   var scrollbar = null;
 
+  var columnWidth = 300;
+  // This is the smallest window size where we'll enable the column.
+  var minimumViewportWidth = 768;
+
   var quick = JX.$('phabricator-standard-page-body');
 
   function _getColumnNode() {
@@ -39,14 +43,33 @@ JX.behavior('durable-column', function(config, statics) {
     return JX.DOM.find(column, 'div', 'conpherence-durable-column-main');
   }
 
+  function _autocloseColumn() {
+    var viewport = JX.Vector.getViewport();
+    if (viewport.x < minimumViewportWidth) {
+      if (show) {
+        _toggleColumn(false);
+        resizeClose = true;
+      }
+      return true;
+    } else {
+      if (resizeClose) {
+        resizeClose = false;
+        if (!show) {
+          _toggleColumn(false);
+        }
+      }
+    }
+
+    return false;
+  }
+
   function _toggleColumn(explicit) {
     if (explicit) {
-      var device = JX.Device.getDevice();
+      if (_autocloseColumn()) {
-      // don't allow users to invoke the column from devices
-      if (device != 'desktop') {
         return;
       }
     }
+
     show = !show;
     JX.DOM.alterClass(document.body, 'with-durable-column', show);
     var column = _getColumnNode();
@@ -59,6 +82,14 @@ JX.behavior('durable-column', function(config, statics) {
     JX.Stratcom.invoke('resize');
     JX.Quicksand.setFrame(show ? quick : null);
 
+    // When we activate the column, adjust the tablet breakpoint so that we
+    // convert the left side of the screen to tablet mode on narrow displays.
+    var breakpoint = JX.Device.getTabletBreakpoint();
+    JX.Device.setTabletBreakpoint(
+      show ? (breakpoint + columnWidth) : (breakpoint - columnWidth));
+
+    JX.log(JX.Device.getTabletBreakpoint());
+
     // If this was an explicit toggle action from the user, save their
     // preference.
     if (explicit) {
@@ -188,31 +219,7 @@ JX.behavior('durable-column', function(config, statics) {
     });
 
   var resizeClose = false;
-  JX.Stratcom.listen(
+  JX.Stratcom.listen('resize', null, _autocloseColumn);
-    'phabricator-device-change',
-    null,
-    function() {
-      var device = JX.Device.getDevice();
-      switch (device) {
-        case 'phone':
-        case 'tablet':
-          if (show === true) {
-            _toggleColumn(false);
-            resizeClose = true;
-          }
-          break;
-        case 'desktop':
-          if (resizeClose) {
-            resizeClose = false;
-            if (show === false) {
-              _toggleColumn(false);
-            }
-          }
-          break;
-        default:
-          break;
-      }
-    });
 
   function _getColumnBodyNode() {
     var column = JX.$('conpherence-durable-column');
@@ -339,15 +346,8 @@ JX.behavior('durable-column', function(config, statics) {
     });
 
   if (config.visible) {
-    var device = JX.Device.getDevice();
-    if (device == 'desktop') {
     _toggleColumn(false);
-    } else {
+    _autocloseColumn();
-      // pretend we closed due to resize so if we do resize later things work
-      // correctly
-      resizeClose = true;
-      JX.DOM.hide(_getColumnNode());
-    }
   }
 
 });

webroot/rsrc/js/core/behavior-device.js

@@ -10,12 +10,24 @@
 JX.install('Device', {
   statics : {
     _device : null,
+    _tabletBreakpoint: 768,
+
+    setTabletBreakpoint: function(width) {
+      var self = JX.Device;
+      self._tabletBreakpoint = width;
+      self.recalculate();
+    },
+
+    getTabletBreakpoint: function() {
+      return JX.Device._tabletBreakpoint;
+    },
+
     recalculate: function() {
       var v = JX.Vector.getViewport();
       var self = JX.Device;
 
       var device = 'desktop';
-      if (v.x <= 768) {
+      if (v.x <= self._tabletBreakpoint) {
         device = 'tablet';
       }
       if (v.x <= 480) {