Fill thread list on thread view in Conpherence

Summary:
When we access `/conpherence/view/2/` on the desktop, load the thread on the initial response and ajax in the thread list. Basically, the idea is:

  - When we load the thread list, an individual thread, or the widget panel, we send back the piece the user asked for in the response.
  - On mobile, we stop there: we don't ajax in anything else, and just hide the other parts of the layout.
  - On Desktop, we fill out the other layout components via Ajax.

Ref T2421.

Test Plan: Hit `/conpherence/view/2/`, got a full page.

Reviewers: btrahan

Reviewed By: btrahan

CC: aran

Maniphest Tasks: T2421

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

src/applications/conpherence/controller/ConpherenceListController.php

@@ -54,6 +54,10 @@ final class ConpherenceListController
       ->setUnreadThreads($unread)
       ->setReadThreads($read);
 
+    if ($request->isAjax()) {
+      return id(new AphrontAjaxResponse())->setContent($thread_view);
+    }
+
     $layout = id(new ConpherenceLayoutView())
       ->setBaseURI($this->getApplicationURI())
       ->setThreadView($thread_view)

src/applications/conpherence/view/ConpherenceLayoutView.php

@@ -52,6 +52,8 @@ final class ConpherenceLayoutView extends AphrontView {
   public function render() {
     require_celerity_resource('conpherence-menu-css');
 
+    $layout_id = celerity_generate_unique_node_id();
+
     Javelin::initBehavior('conpherence-menu',
       array(
         'base_uri' => $this->baseURI,
@@ -61,8 +63,12 @@ final class ConpherenceLayoutView extends AphrontView {
         'widgets_pane' => 'conpherence-widget-pane',
         'form_pane' => 'conpherence-form',
         'menu_pane' => 'conpherence-menu',
+        'layoutID' => $layout_id,
         'selectedID' => ($this->thread ? $this->thread->getID() : null),
         'role' => $this->role,
+        'hasThreadList' => (bool)$this->threadView,
+        'hasThread' => (bool)$this->messages,
+        'hasWidgets' => false,
       ));
 
     Javelin::initBehavior('conpherence-drag-and-drop-photo',
@@ -76,6 +82,7 @@ final class ConpherenceLayoutView extends AphrontView {
     return javelin_tag(
       'div',
       array(
+        'id'    => $layout_id,
         'sigil' => 'conpherence-layout',
         'class' => 'conpherence-layout conpherence-role-'.$this->role,
       ),

webroot/rsrc/js/application/conpherence/behavior-menu.js

@@ -55,22 +55,26 @@ JX.behavior('conpherence-menu', function(config) {
     if (!thread.node) {
       return;
     }
+
     if (thread.visible == thread.selected) {
       return;
     }
 
     var data = JX.Stratcom.getData(thread.node);
 
+    if (thread.visible !== null || !config.hasThread) {
       var uri = config.base_uri + 'view/' + data.id + '/';
-    var widget_uri = config.base_uri + 'widget/' + data.id + '/';
-
       new JX.Workflow(uri, {})
         .setHandler(onresponse)
         .start();
+    }
 
+    if (thread.visible !== null || !config.hasWidgets) {
+      var widget_uri = config.base_uri + 'widget/' + data.id + '/';
       new JX.Workflow(widget_uri, {})
         .setHandler(onwidgetresponse)
         .start();
+    }
 
     thread.visible = thread.selected;
   }
@@ -158,25 +162,47 @@ JX.behavior('conpherence-menu', function(config) {
       return;
     }
 
-    // If there's no thread selected yet, select the first thread.
-    if (!thread.selected) {
-      var threads = JX.DOM.scry(document.body, 'a', 'conpherence-menu-click');
-      if (threads.length) {
-        selectthread(threads[0]);
+    if (!config.hasThreadList) {
+      loadthreads();
+    } else {
+      didloadthreads();
     }
   }
 
-    // We might have a selected but undrawn thread for
-    redrawthread();
-  }
-
   JX.Stratcom.listen('phabricator-device-change', null, ondevicechange);
   ondevicechange();
 
 
-  // If there's a currently visible thread, select it.
+  function loadthreads() {
+    var uri = config.base_uri + config.selectedID + '/';
+    new JX.Workflow(uri)
+      .setHandler(onthreadresponse)
+      .start();
+  }
+
+  function onthreadresponse(r) {
+    var layout = JX.$(config.layoutID);
+    var menu = JX.DOM.find(layout, 'div', 'conpherence-menu-pane');
+    JX.DOM.setContent(menu, JX.$H(r));
+
+    config.selectedID && selectthreadid(config.selectedID);
+  }
+
+  function didloadthreads() {
+    // If there's no thread selected yet, select the current thread or the
+    // first thread.
+    if (!thread.selected) {
       if (config.selectedID) {
         selectthreadid(config.selectedID);
+      } else {
+        var threads = JX.DOM.scry(document.body, 'a', 'conpherence-menu-click');
+        if (threads.length) {
+          selectthread(threads[0]);
+        }
+      }
+    }
+
+    redrawthread();
   }
 
 });