Convert Durable Column to popup chat in footer

Summary: This feels pretty reasonable with little effort, and I think I'd use it more than the full column.

Test Plan:
Chat a lot on various pages.... still some quicksand quirks around various pages.

{F1853487}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: scp, Korvin

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

resources/celerity/map.php

@@ -7,10 +7,10 @@
  */
 return array(
   'names' => array(
-    'conpherence.pkg.css' => 'd93561e2',
+    'conpherence.pkg.css' => '3f5d038e',
     'conpherence.pkg.js' => '11f3e07e',
-    'core.pkg.css' => '2fd26498',
+    'core.pkg.css' => '55d32e63',
-    'core.pkg.js' => '1d376fa9',
+    'core.pkg.js' => '32939240',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '3fb7f532',
     'differential.pkg.js' => '634399e9',
@@ -23,7 +23,7 @@ return array(
     'rsrc/css/aphront/dialog-view.css' => '593d3f67',
     'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d',
     'rsrc/css/aphront/list-filter-view.css' => '5d6f0526',
-    'rsrc/css/aphront/multi-column.css' => 'fd18389d',
+    'rsrc/css/aphront/multi-column.css' => '84cc6640',
     'rsrc/css/aphront/notification.css' => '3f6c89c9',
     'rsrc/css/aphront/panel-view.css' => '8427b78d',
     'rsrc/css/aphront/phabricator-nav-view.css' => 'b29426e9',
@@ -46,7 +46,7 @@ return array(
     'rsrc/css/application/config/config-template.css' => '8f18fa41',
     'rsrc/css/application/config/setup-issue.css' => 'f794cfc3',
     'rsrc/css/application/config/unhandled-exception.css' => '4c96257a',
-    'rsrc/css/application/conpherence/durable-column.css' => '194ac487',
+    'rsrc/css/application/conpherence/durable-column.css' => '63114a54',
     'rsrc/css/application/conpherence/header-pane.css' => '517de9fe',
     'rsrc/css/application/conpherence/menu.css' => '78c7b811',
     'rsrc/css/application/conpherence/message-pane.css' => 'bbbb8a9b',
@@ -164,7 +164,7 @@ return array(
     'rsrc/css/phui/phui-timeline-view.css' => 'bc523970',
     'rsrc/css/phui/phui-two-column-view.css' => 'fcfbe347',
     'rsrc/css/phui/workboards/phui-workboard-color.css' => 'ac6fe6a7',
-    'rsrc/css/phui/workboards/phui-workboard.css' => 'bda3ef58',
+    'rsrc/css/phui/workboards/phui-workboard.css' => 'e09eb53a',
     'rsrc/css/phui/workboards/phui-workcard.css' => '0c62d7c5',
     'rsrc/css/phui/workboards/phui-workpanel.css' => '92197373',
     'rsrc/css/sprite-login.css' => '6dbbbd97',
@@ -438,7 +438,7 @@ return array(
     'rsrc/js/application/config/behavior-reorder-fields.js' => 'b6993408',
     'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => '01774ab2',
     'rsrc/js/application/conpherence/behavior-drag-and-drop-photo.js' => 'cf86d16a',
-    'rsrc/js/application/conpherence/behavior-durable-column.js' => 'd3506890',
+    'rsrc/js/application/conpherence/behavior-durable-column.js' => '39e0ea32',
     'rsrc/js/application/conpherence/behavior-menu.js' => '9eb55204',
     'rsrc/js/application/conpherence/behavior-participant-pane.js' => '8604caa8',
     'rsrc/js/application/conpherence/behavior-pontificate.js' => 'f2e58483',
@@ -605,7 +605,7 @@ return array(
     'aphront-dark-console-css' => 'f54bf286',
     'aphront-dialog-view-css' => '593d3f67',
     'aphront-list-filter-view-css' => '5d6f0526',
-    'aphront-multi-column-view-css' => 'fd18389d',
+    'aphront-multi-column-view-css' => '84cc6640',
     'aphront-panel-view-css' => '8427b78d',
     'aphront-table-view-css' => '3225137a',
     'aphront-tokenizer-control-css' => '056da01b',
@@ -618,7 +618,7 @@ return array(
     'conduit-api-css' => '7bc725c4',
     'config-options-css' => '0ede4c9b',
     'config-page-css' => '8798e14f',
-    'conpherence-durable-column-view' => '194ac487',
+    'conpherence-durable-column-view' => '63114a54',
     'conpherence-header-pane-css' => '517de9fe',
     'conpherence-menu-css' => '78c7b811',
     'conpherence-message-pane-css' => 'bbbb8a9b',
@@ -699,7 +699,7 @@ return array(
     'javelin-behavior-diffusion-pull-lastmodified' => 'f01586dc',
     'javelin-behavior-doorkeeper-tag' => 'e5822781',
     'javelin-behavior-drydock-live-operation-status' => '901935ef',
-    'javelin-behavior-durable-column' => 'd3506890',
+    'javelin-behavior-durable-column' => '39e0ea32',
     'javelin-behavior-editengine-reorder-configs' => 'd7a74243',
     'javelin-behavior-editengine-reorder-fields' => 'b59e1e96',
     'javelin-behavior-error-log' => '6882e80a',
@@ -943,7 +943,7 @@ return array(
     'phui-timeline-view-css' => 'bc523970',
     'phui-two-column-view-css' => 'fcfbe347',
     'phui-workboard-color-css' => 'ac6fe6a7',
-    'phui-workboard-view-css' => 'bda3ef58',
+    'phui-workboard-view-css' => 'e09eb53a',
     'phui-workcard-view-css' => '0c62d7c5',
     'phui-workpanel-view-css' => '92197373',
     'phuix-action-list-view' => 'b5c256b8',
@@ -1201,6 +1201,16 @@ return array(
       'javelin-dom',
       'javelin-workflow',
     ),
+    '39e0ea32' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-stratcom',
+      'javelin-behavior-device',
+      'javelin-scrollbar',
+      'javelin-quicksand',
+      'phabricator-keyboard-shortcut',
+      'conpherence-thread-manager',
+    ),
     '3ab51e2c' => array(
       'javelin-behavior',
       'javelin-behavior-device',
@@ -2034,16 +2044,6 @@ return array(
     'd254d646' => array(
       'javelin-util',
     ),
-    'd3506890' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-stratcom',
-      'javelin-behavior-device',
-      'javelin-scrollbar',
-      'javelin-quicksand',
-      'phabricator-keyboard-shortcut',
-      'conpherence-thread-manager',
-    ),
     'd4505101' => array(
       'javelin-stratcom',
       'javelin-install',

src/applications/conpherence/view/ConpherenceDurableColumnView.php

@@ -125,14 +125,7 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
 
     $classes = array();
     $classes[] = 'conpherence-durable-column-header';
-    $classes[] = 'phabricator-main-menu-background';
+    $classes[] = 'grouped';
-
-    $loading_mask = phutil_tag(
-      'div',
-      array(
-        'class' => 'loading-mask',
-      ),
-      '');
 
     $header = phutil_tag(
       'div',
@@ -175,23 +168,7 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
 
     $input = $this->buildTextInput();
 
-    $footer = phutil_tag(
-      'div',
-      array(
-        'class' => 'conpherence-durable-column-footer',
-      ),
-      array(
-        $this->buildSendButton(),
-        phutil_tag(
-          'div',
-          array(
-            'class' => 'conpherence-durable-column-status',
-          ),
-          $this->buildStatusText()),
-      ));
-
     return array(
-      $loading_mask,
       $header,
       javelin_tag(
         'div',
@@ -203,7 +180,6 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
           $icon_bar,
           $content,
           $input,
-          $footer,
         )),
     );
   }
@@ -263,26 +239,10 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
             ),
             ''));
     }
-    $icons[] = $this->buildSearchButton();
 
     return $icons;
   }
 
-  private function buildSearchButton() {
-    return phutil_tag(
-      'div',
-      array(
-        'class' => 'conpherence-durable-column-search-button',
-      ),
-      id(new PHUIButtonBarView())
-      ->addButton(
-        id(new PHUIButtonView())
-        ->setTag('a')
-        ->setHref('/conpherence/search/')
-        ->setColor(PHUIButtonView::GREY)
-        ->setIcon('fa-search')));
-  }
-
   private function buildHeader() {
     $conpherence = $this->getSelectedConpherence();
 
@@ -354,7 +314,7 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
       phutil_tag(
         'div',
         array(
-          'class' => 'conpherence-durable-column-header',
+          'class' => 'conpherence-durable-column-header-inner',
         ),
         array(
           javelin_tag(
@@ -401,7 +361,7 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
     }
 
     $actions[] = array(
-      'name' => pht('Hide Column'),
+      'name' => pht('Hide Window'),
       'disabled' => false,
       'href' => '#',
       'icon' => 'fa-times',

webroot/rsrc/css/aphront/multi-column.css

@@ -182,39 +182,3 @@
     margin: 0 0 16px;
   }
 }
-
-/* Make Dashboards with Durable reasonably display on homepage narrow widths */
-@media (max-width: 1300px) {
-  .device-desktop.with-durable-column .dashboard-view
-    .aphront-multi-column-inner {
-      display: block;
-      width: auto;
-  }
-  .device-desktop.with-durable-column .dashboard-view
-    .aphront-multi-column-column-outer {
-      display: block;
-      border: none;
-  }
-  .device-desktop.with-durable-column .dashboard-view
-    .aphront-multi-column-column.mlr {
-      margin: 0;
-  }
-  .device-desktop.with-durable-column .dashboard-view
-    .aphront-multi-column-fluid .aphront-multi-column-2-up
-    .aphront-multi-column-column-outer.half {
-      width: auto;
-      margin: 0 0 16px;
-  }
-  .device-desktop.with-durable-column .dashboard-view
-    .aphront-multi-column-fluid .aphront-multi-column-2-up
-    .aphront-multi-column-column-outer.thirds {
-      width: auto;
-      margin: 0 0 16px;
-  }
-  .device-desktop.with-durable-column .dashboard-view
-    .aphront-multi-column-fluid .aphront-multi-column-2-up
-    .aphront-multi-column-column-outer.third {
-      width: auto;
-      margin: 0 0 16px;
-  }
-}

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

@@ -2,63 +2,22 @@
  * @provides conpherence-durable-column-view
  */
 
-.with-durable-column .phabricator-standard-page-body {
-  margin-right: 300px;
-}
-
-.with-durable-margin .phabricator-standard-page-body {
-  margin-right: 312px;
-}
-
-.with-durable-column .phabricator-main-menu {
-  padding-right: 304px;
-}
-
-.with-durable-margin .phabricator-main-menu {
-  padding-right: 316px;
-}
-
-.with-durable-column
-.phabricator-global-upload-instructions {
-  font-size: 28px;
-  width: 50%;
-}
-
 .global-upload-mask {
   pointer-events: none;
 }
 
-.with-durable-column .global-upload-mask {
-  right: 300px;
-}
-
-.with-durable-margin .global-upload-mask {
-  right: 312px;
-}
-
 .conpherence-durable-column {
   position: fixed;
-  top: 0;
   bottom: 0;
-  right: 0;
+  right: 12px;
   width: 300px;
+  height: 380px;
   background: #fff;
+  box-shadow: 0px 1px 8px rgba(55,55,55, .3);
 }
 
-.with-durable-margin .conpherence-durable-column {
+.device .conpherence-durable-column {
-  border-right: 12px solid {$lightgreybackground};
-}
-
-.conpherence-durable-column .loading-mask {
-  position: absolute;
-  top: 90px;
-  bottom: 0;
-  right: 1px;
-  width: 298px;
-  background: #fff;
   display: none;
-  opacity: .6;
-  z-index: 2;
 }
 
 .device-desktop .conpherence-durable-column.loading .loading-mask {
@@ -75,60 +34,73 @@
   padding-right: 4px;
   width: 36px;
 }
-.conpherence-durable-column-header
+
-.phabricator-application-menu .phui-list-item-view.core-menu-item {
+.conpherence-durable-column-header .phabricator-application-menu
+  .phui-list-item-view.core-menu-item {
     display: block;
 }
-.conpherence-durable-column-header
+
-.phabricator-application-menu .phui-list-item-name {
+.conpherence-durable-column-header  .phabricator-application-menu
+  .phui-list-item-name {
     display: none;
 }
-.conpherence-durable-column-header
+
-.phabricator-application-menu .phui-list-item-view {
+.conpherence-durable-column-header .phabricator-application-menu
+  .phui-list-item-view {
     float: left;
     position: relative;
-  width: 36px;
+    width: 30px;
-  height: 36px;
+    height: 30px;
-  margin-top: 4px;
+    margin-top: 2px;
 }
-.conpherence-durable-column-header
+
-.phabricator-application-menu .phui-list-item-href {
+.conpherence-durable-column-header .phabricator-application-menu
+  .phui-list-item-href {
     background: transparent;
     border: none;
     padding: 0;
 }
-.conpherence-durable-column-header
+
-.phabricator-dark-menu .phui-list-item-type-link {
+.conpherence-durable-column-header  .phabricator-application-menu
-  background: transparent;
+  .phui-list-item-view.core-menu-item {
-}
-.conpherence-durable-column-header
-.phabricator-application-menu
-.phui-list-item-view.core-menu-item {
     display: block;
 }
 
 .conpherence-durable-column-header {
-  border-left: 1px solid rgba({$alphablack},.1);
+  border-top-right-radius: 3px;
-  border-right: 1px solid rgba({$alphablack},.1);
+  border-top-left-radius: 3px;
+  background-color: #525867;
+}
+
+.conpherence-durable-column-header
+  .phabricator-main-menu-dropdown.phui-list-sidenav {
+    top: 30px;
 }
 
 .conpherence-durable-column-header-text {
   float: left;
-  padding: 13px 0 12px 12px;
+  padding: 8px 0 8px 10px;
-  font-size: 15px;
+  color: #fff;
-  color: {$hoverwhite};
   width: 230px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
+}
+
+.conpherence-durable-column-header .phabricator-application-menu
+  .phui-list-item-icon.phui-font-fa {
+    font-size: 14px;
+    margin: 8px 10px;
 }
 
 .conpherence-durable-column-header-text .phui-icon-view {
-  color: {$hoverwhite};
+  color: #fff;
+  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
 }
 
 .conpherence-durable-column-icon-bar {
-  height: 38px;
+  height: 32px;
   padding: 4px;
   background-color: {$lightgreybackground};
 }
@@ -136,23 +108,11 @@
 .conpherence-durable-column-icon-bar .conpherence-durable-column-thread-icon {
   float: left;
   display: block;
-  height: 34px;
+  height: 28px;
-  width: 34px;
+  width: 28px;
   border: 2px solid transparent;
   border-radius: 3px;
-  margin: 0 4px 0 0;
+  margin: 0 2px 0 0;
-}
-
-.conpherence-durable-column-icon-bar .conpherence-durable-column-search-button {
-  margin: 4px 0px 0px 0px;
-}
-.conpherence-durable-column-icon-bar .phui-button-bar {
-}
-.conpherence-durable-column-icon-bar .phui-button-bar a.button.has-icon {
-  height: 21px;
-}
-.conpherence-durable-column-icon-bar .phui-button-bar .button .phui-icon-view {
-  top: 8px;
 }
 
 .conpherence-durable-column-icon-bar
@@ -164,30 +124,25 @@
 .conpherence-durable-column-thread-icon span {
   position: relative;
   display: block;
-  width: 30px;
+  width: 24px;
-  height: 30px;
+  height: 24px;
   top: 2px;
   left: 2px;
-  background-size: 30px 30px;
+  background-size: 24px 24px;
 }
 
 .conpherence-durable-column-body {
   position: absolute;
-  top: 44px;
+  top: 34px;
   bottom: 0;
   right: 0;
   left: 0;
-  border-left: 1px solid {$lightblueborder};
-}
-
-.with-durable-margin .conpherence-durable-column-body {
-  border-right: 1px solid {$lightblueborder};
 }
 
 .conpherence-durable-column-main {
   position: absolute;
-  top: 46px;
+  top: 40px;
-  bottom: 134px;
+  bottom: 36px;
   left: 0;
   right: 0;
   overflow-x: hidden;
@@ -218,8 +173,7 @@
   min-height: 0;
 }
 
-.conpherence-durable-column-transactions
+.conpherence-durable-column-transactions .conpherence-transaction-view
-  .conpherence-transaction-view
   .conpherence-message {
     word-wrap: break-word;
 }
@@ -230,7 +184,7 @@
 }
 
 .conpherence-durable-column-transactions .conpherence-transaction-detail
-.conpherence-transaction-header {
+  .conpherence-transaction-header {
     background: none;
     padding: 0 0 2px 0;
 }
@@ -295,42 +249,23 @@ img {
   position: absolute;
   left: 0;
   right: 0;
-  bottom: 34px;
+  bottom: 0;
-  height: 100px;
+  height: 36px;
   margin: 0;
-  border-width: 1px 0;
+  border-width: 1px 0 0 0;
   border-style: solid;
   border-top-color: {$thinblueborder};
-  border-bottom-color: {$thinblueborder};
+  padding: 8px;
-  padding: 8px 12px;
   width: 100%;
   resize: none;
 }
 
 .conpherence-durable-column-textarea:focus {
   outline: 0;
-  border-top-color: {$sky};
+  border-top-color: {$lightblueborder};
-  border-bottom-color: {$sky};
   box-shadow: none;
 }
 
 .conpherence-durable-column-footer {
-  position: absolute;
+  display: none;
-  height: 26px;
-  padding: 4px 8px 4px 12px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: {$lightgreybackground};
-}
-
-.conpherence-durable-column-footer button {
-  float: right;
-}
-
-.conpherence-durable-column-status {
-  vertical-align: middle;
-  line-height: 24px;
-  font-size: {$smallerfontsize};
-  color: {$lightbluetext};
 }

webroot/rsrc/css/phui/workboards/phui-workboard.css

@@ -22,14 +22,6 @@
   background-color: #fff;
 }
 
-.device-desktop.with-durable-column .phui-workboard-view-shadow {
-  right: 300px;
-}
-
-.device-desktop.with-durable-margin .phui-workboard-view-shadow {
-  right: 312px;
-}
-
 .phui-workboard-view-shadow::-webkit-scrollbar {
   height: 8px;
   width: 8px;

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

@@ -31,10 +31,6 @@ JX.behavior('durable-column', function(config, statics) {
 
   var margin = JX.Scrollbar.getScrollbarControlMargin();
 
-  var columnWidth = (300 + margin);
-  // This is the smallest window size where we'll enable the column.
-  var minimumViewportWidth = (920 - margin);
-
   var quick = JX.$('phabricator-standard-page-body');
 
   function _getColumnNode() {
@@ -46,17 +42,8 @@ JX.behavior('durable-column', function(config, statics) {
     return JX.DOM.find(column, 'div', 'conpherence-durable-column-main');
   }
 
-  function _isViewportWideEnoughForColumn() {
-    var viewport = JX.Vector.getViewport();
-    if (viewport.x < minimumViewportWidth) {
-      return false;
-    } else {
-      return true;
-    }
-  }
-
   function _updateColumnVisibility() {
-    var new_value = (userVisible && _isViewportWideEnoughForColumn());
+    var new_value = (userVisible);
     if (new_value !== show) {
       show = new_value;
       _drawColumn(show);
@@ -77,10 +64,6 @@ JX.behavior('durable-column', function(config, statics) {
       document.body,
       'with-durable-column',
       visible);
-    JX.DOM.alterClass(
-      document.body,
-      'with-durable-margin',
-      visible && !!margin);
 
     var column = _getColumnNode();
     if (visible) {
@@ -91,16 +74,6 @@ JX.behavior('durable-column', function(config, statics) {
     }
     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;
-    if (visible) {
-      breakpoint = minimumViewportWidth + columnWidth;
-    } else {
-      breakpoint = minimumViewportWidth;
-    }
-    JX.Device.setTabletBreakpoint(breakpoint);
-
     JX.Stratcom.invoke('resize');
   }