Make column show/hide behaviors a little simpler

Summary: Ref T7062. The previous fix caused an extra, unnecessary thread load on mobile. Make this code a bit simpler and fix the unnecessary load.

Test Plan: No more load on mobile.

Reviewers: btrahan, chad

Reviewed By: chad

Subscribers: epriestley

Maniphest Tasks: T7062

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

resources/celerity/map.php

@@ -45,7 +45,7 @@ return array(
     'rsrc/css/application/config/setup-issue.css' => '22270af2',
     'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
     'rsrc/css/application/conpherence/durable-column.css' => 'e2011d85',
-    'rsrc/css/application/conpherence/menu.css' => '2c1c727c',
+    'rsrc/css/application/conpherence/menu.css' => '9b37a261',
     'rsrc/css/application/conpherence/message-pane.css' => '44154798',
     'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
     'rsrc/css/application/conpherence/update.css' => '1099a660',
@@ -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' => 'cccebf26',
+    'rsrc/js/application/conpherence/behavior-durable-column.js' => 'c81c2bba',
     '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',
@@ -515,7 +515,7 @@ return array(
     'config-options-css' => '7fedf08b',
     'config-welcome-css' => '6abd79be',
     'conpherence-durable-column-view' => 'e2011d85',
-    'conpherence-menu-css' => '2c1c727c',
+    'conpherence-menu-css' => '9b37a261',
     'conpherence-message-pane-css' => '44154798',
     'conpherence-notification-css' => '04a6e10a',
     'conpherence-thread-manager' => 'bb928342',
@@ -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' => 'cccebf26',
+    'javelin-behavior-durable-column' => 'c81c2bba',
     'javelin-behavior-error-log' => '6882e80a',
     'javelin-behavior-fancy-datepicker' => 'c51ae228',
     'javelin-behavior-global-drag-and-drop' => 'bbdf75ca',
@@ -1736,6 +1736,16 @@ return array(
       'javelin-stratcom',
       'javelin-vector',
     ),
+    'c81c2bba' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-stratcom',
+      'javelin-behavior-device',
+      'javelin-scrollbar',
+      'javelin-quicksand',
+      'phabricator-keyboard-shortcut',
+      'conpherence-thread-manager',
+    ),
     'c90a04fc' => array(
       'javelin-dom',
       'javelin-dynval',
@@ -1750,16 +1760,6 @@ return array(
       'javelin-stratcom',
       'phabricator-phtize',
     ),
-    'cccebf26' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-stratcom',
-      'javelin-behavior-device',
-      'javelin-scrollbar',
-      'javelin-quicksand',
-      'phabricator-keyboard-shortcut',
-      'conpherence-thread-manager',
-    ),
     'd19198c8' => array(
       'javelin-install',
       'javelin-dom',

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

@@ -24,7 +24,8 @@ JX.behavior('durable-column', function(config, statics) {
     statics.initialized = true;
   }
 
-  var show = false;
+  var userVisible = config.visible;
+  var show = null;
   var loadThreadID = null;
   var scrollbar = null;
 
@@ -43,62 +44,54 @@ JX.behavior('durable-column', function(config, statics) {
     return JX.DOM.find(column, 'div', 'conpherence-durable-column-main');
   }
 
-  function _autocloseColumn() {
+  function _isViewportWideEnoughForColumn() {
     var viewport = JX.Vector.getViewport();
     if (viewport.x < minimumViewportWidth) {
-      if (show) {
-        _toggleColumn(false);
-        resizeClose = true;
-      }
-      return true;
+      return false;
     } else {
-      if (resizeClose) {
-        resizeClose = false;
-        if (!show) {
-          _toggleColumn(false);
-        }
-      }
+      return true;
     }
+  }
 
-    return false;
+  function _updateColumnVisibility() {
+    var new_value = (userVisible && _isViewportWideEnoughForColumn());
+    if (new_value !== show) {
+      show = new_value;
+      _drawColumn(show);
+    }
   }
 
   function _toggleColumn(explicit) {
-    if (explicit) {
-      if (_autocloseColumn()) {
-        return;
-      }
-    }
+    userVisible = !userVisible;
+    _updateColumnVisibility();
 
-    show = !show;
-    JX.DOM.alterClass(document.body, 'with-durable-column', show);
+    new JX.Request(config.settingsURI)
+      .setData({value: (show ? 1 : 0)})
+      .send();
+  }
+
+  function _drawColumn(visible) {
+    JX.DOM.alterClass(document.body, 'with-durable-column', visible);
     var column = _getColumnNode();
-    if (show) {
+    if (visible) {
       JX.DOM.show(column);
       threadManager.loadThreadByID(loadThreadID);
     } else {
       JX.DOM.hide(column);
     }
-    JX.Stratcom.invoke('resize');
-    JX.Quicksand.setFrame(show ? quick : null);
+    JX.Quicksand.setFrame(visible ? 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));
+      visible ? (breakpoint + columnWidth) : (breakpoint - columnWidth));
 
-    // If this was an explicit toggle action from the user, save their
-    // preference.
-    if (explicit) {
-      new JX.Request(config.settingsURI)
-        .setData({value: (show ? 1 : 0)})
-        .send();
-    }
+    JX.Stratcom.invoke('resize');
   }
 
   new JX.KeyboardShortcut('\\', 'Toggle Conpherence Column')
-    .setHandler(JX.bind(null, _toggleColumn, true))
+    .setHandler(_toggleColumn)
     .register();
 
   scrollbar = new JX.Scrollbar(_getColumnScrollNode());
@@ -193,7 +186,7 @@ JX.behavior('durable-column', function(config, statics) {
           break;
         case 'hide_column':
           JX.Stratcom.invoke('notification-panel-close');
-          _toggleColumn(true);
+          _toggleColumn();
           break;
       }
     });
@@ -220,8 +213,7 @@ JX.behavior('durable-column', function(config, statics) {
       threadManager.loadThreadByID(data.threadID);
     });
 
-  var resizeClose = false;
-  JX.Stratcom.listen('resize', null, _autocloseColumn);
+  JX.Stratcom.listen('resize', null, _updateColumnVisibility);
 
   function _getColumnBodyNode() {
     var column = JX.$('conpherence-durable-column');
@@ -347,9 +339,6 @@ JX.behavior('durable-column', function(config, statics) {
       }
     });
 
-  if (config.visible) {
-    _toggleColumn(false);
-    _autocloseColumn();
-  }
+  _updateColumnVisibility();
 
 });