Conpherence - support device in durable column

Summary:
Ref T7014. This makes it so

 - you can't invoke the column from a device
 - if you are in desktop size and resize to tablet or phone, the column closes.
 - if you resize desktop -> device -> desktop, the column closes at device size and reopens at desktop size
 - if you load, then resize device -> desktop the column opens if the user has that preference
 - there is a brief flicker when you load on 'device' with the column open preference. it lasts as long as the js stack takes to calculate the device css rule.

Test Plan: see summary but i did stuff to do all that

Reviewers: chad, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T7014

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

resources/celerity/map.php

@@ -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' => 'e3433ca7',
+    'rsrc/css/application/conpherence/durable-column.css' => '7c5f3bf5',
     'rsrc/css/application/conpherence/menu.css' => 'c6ac5299',
     'rsrc/css/application/conpherence/message-pane.css' => '5930260a',
     'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
@@ -353,7 +353,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' => '0324970d',
-    'rsrc/js/application/conpherence/behavior-durable-column.js' => '44100dc7',
+    'rsrc/js/application/conpherence/behavior-durable-column.js' => 'ad539b06',
     'rsrc/js/application/conpherence/behavior-menu.js' => 'c4151295',
     'rsrc/js/application/conpherence/behavior-pontificate.js' => '21ba5861',
     'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3',
@@ -514,7 +514,7 @@ return array(
     'changeset-view-manager' => '88be0133',
     'config-options-css' => '7fedf08b',
     'config-welcome-css' => '6abd79be',
-    'conpherence-durable-column-view' => 'e3433ca7',
+    'conpherence-durable-column-view' => '7c5f3bf5',
     'conpherence-menu-css' => 'c6ac5299',
     'conpherence-message-pane-css' => '5930260a',
     'conpherence-notification-css' => '04a6e10a',
@@ -585,7 +585,7 @@ return array(
     'javelin-behavior-diffusion-locate-file' => '6d3e1947',
     'javelin-behavior-diffusion-pull-lastmodified' => '2b228192',
     'javelin-behavior-doorkeeper-tag' => 'e5822781',
-    'javelin-behavior-durable-column' => '44100dc7',
+    'javelin-behavior-durable-column' => 'ad539b06',
     'javelin-behavior-error-log' => '6882e80a',
     'javelin-behavior-fancy-datepicker' => 'c51ae228',
     'javelin-behavior-global-drag-and-drop' => '07f199d8',
@@ -1110,15 +1110,6 @@ return array(
       'javelin-dom',
       'javelin-request',
     ),
-    '44100dc7' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-stratcom',
-      'javelin-scrollbar',
-      'javelin-quicksand',
-      'phabricator-keyboard-shortcut',
-      'conpherence-thread-manager',
-    ),
     '44168bad' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1673,6 +1664,16 @@ return array(
       'javelin-util',
       'phabricator-prefab',
     ),
+    'ad539b06' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-stratcom',
+      'javelin-behavior-device',
+      'javelin-scrollbar',
+      'javelin-quicksand',
+      'phabricator-keyboard-shortcut',
+      'conpherence-thread-manager',
+    ),
     'b1f0ccee' => array(
       'javelin-install',
       'javelin-dom',

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

@@ -15,6 +15,10 @@
   background: #fff;
 }
 
+.device .conpherence-durable-column {
+  display: none;
+}
+
 .conpherence-durable-column .loading-mask {
   position: absolute;
   top: 90px;
@@ -27,7 +31,7 @@
   z-index: 2;
 }
 
-.conpherence-durable-column.loading .loading-mask {
+.device-desktop .conpherence-durable-column.loading .loading-mask {
   display: block;
 }
 

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

@@ -3,6 +3,7 @@
  * @requires javelin-behavior
  *           javelin-dom
  *           javelin-stratcom
+ *           javelin-behavior-device
  *           javelin-scrollbar
  *           javelin-quicksand
  *           phabricator-keyboard-shortcut
@@ -40,9 +41,16 @@ JX.behavior('durable-column', function(config, statics) {
   }
 
   function _toggleColumn(explicit) {
+    if (explicit) {
+      var device = JX.Device.getDevice();
+      // don't allow users to invoke the column from devices
+      if (device != 'desktop') {
+        return;
+      }
+    }
     show = !show;
     JX.DOM.alterClass(frame, 'with-durable-column', show);
-    var column = JX.$('conpherence-durable-column');
+    var column = _getColumnNode();
     if (show) {
       JX.DOM.show(column);
       threadManager.loadThreadByID(loadThreadID);
@@ -181,6 +189,33 @@ JX.behavior('durable-column', function(config, statics) {
       threadManager.loadThreadByID(data.threadID);
     });
 
+  var resizeClose = false;
+  JX.Stratcom.listen(
+    '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');
     return JX.DOM.find(
@@ -255,7 +290,15 @@ JX.behavior('durable-column', function(config, statics) {
     });
 
   if (config.visible) {
+    var device = JX.Device.getDevice();
+    if (device == 'desktop') {
       _toggleColumn(false);
+    } else {
+      // pretend we closed due to resize so if we do resize later things work
+      // correctly
+      resizeClose = true;
+      JX.DOM.hide(_getColumnNode());
+    }
   }
 
 });