Allow comment panel to be stuck/unstuck to the bottom of the display

Summary:
See T303. Enable comment panel haunting.

I hid the preview for the sticky panel, which I think is reasonable?

Test Plan:
https://secure.phabricator.com/file/view/PHID-FILE-64713fa8a7c2a22e5b93/
Reviewed By: broofa
Reviewers: broofa, jungejason, aran, tomo, tuomaspelkonen
CC: aran, broofa
Differential Revision: 615

src/applications/differential/controller/revisionview/DifferentialRevisionViewController.php

@@ -238,9 +238,17 @@ class DifferentialRevisionViewController extends DifferentialController {
 
     $this->updateViewTime($user->getPHID(), $revision->getPHID());
 
+    $pane_id = celerity_generate_unique_node_id();
+    Javelin::initBehavior(
+      'differential-keyboard-navigation',
+      array(
+        'haunt' => $pane_id,
+      ));
+
     return $this->buildStandardPageResponse(
       id(new DifferentialPrimaryPaneView())
         ->setLineWidthFromChangesets($changesets)
+        ->setID($pane_id)
         ->appendChild(
           $revision_detail->render().
           $comment_view->render().

src/applications/differential/controller/revisionview/__init__.php

@@ -32,6 +32,7 @@ phutil_require_module('phabricator', 'applications/phid/handle/data');
 phutil_require_module('phabricator', 'applications/repository/constants/repositorytype');
 phutil_require_module('phabricator', 'infrastructure/celerity/api');
 phutil_require_module('phabricator', 'infrastructure/env');
+phutil_require_module('phabricator', 'infrastructure/javelin/api');
 phutil_require_module('phabricator', 'view/form/error');
 
 phutil_require_module('phutil', 'markup');

src/applications/differential/view/changesetlistview/DifferentialChangesetListView.php

@@ -136,8 +136,6 @@ class DifferentialChangesetListView extends AphrontView {
       ));
     }
 
-    Javelin::initBehavior('differential-keyboard-navigation', array());
-
     return
       '<div class="differential-review-stage" id="differential-review-stage">'.
         implode("\n", $output).

src/applications/differential/view/primarypane/DifferentialPrimaryPaneView.php

@@ -19,12 +19,18 @@
 final class DifferentialPrimaryPaneView extends AphrontView {
 
   private $lineWidth = 80;
+  private $id;
 
   public function setLineWidth($width) {
     $this->lineWidth = $width;
     return $this;
   }
 
+  public function setID($id) {
+    $this->id = $id;
+    return $this;
+  }
+
   public function setLineWidthFromChangesets(array $changesets) {
     if (empty($changesets)) {
       return;
@@ -67,6 +73,7 @@ final class DifferentialPrimaryPaneView extends AphrontView {
       array(
         'class' => 'differential-primary-pane',
         'style' => "max-width: {$width}px",
+        'id'    => $this->id,
       ),
       $style_tag.$this->renderChildren());
   }

webroot/rsrc/css/application/differential/revision-comment.css

@@ -17,6 +17,38 @@
   max-width: 1162px;
 }
 
+/* Spooky haunted panel which floats on the bottom of the screen. */
+.differential-haunted-panel .differential-add-comment-panel {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 5;
+  overflow: auto;
+  max-height: 375px;
+  max-width: none;
+
+  box-shadow: 0 0 4px #000;
+  -webkit-box-shadow: 0 0 4px #000;
+  -moz-box-shadow: 0 0 4px #000;
+
+}
+
+.differential-haunted-panel .differential-add-comment-panel h1 {
+  display: none;
+}
+
+.differential-haunted-panel .aphront-panel-preview {
+  display: none;
+}
+
+
+.differential-haunted-panel {
+  padding-bottom: 250px;
+}
+
+
 .differential-comment-list .anchor-target {
   background-color: #ffffdd;
   border-color: #ffff00;
@@ -172,3 +204,4 @@
   border-bottom: 1px solid #dddddd;
   color: #666666;
 }
+

webroot/rsrc/js/application/differential/behavior-keyboard-nav.js

@@ -118,6 +118,13 @@ JX.behavior('differential-keyboard-navigation', function(config) {
     manager.focusOn(selected, extent);
   }
 
+  var is_haunted = false;
+  function haunt() {
+    is_haunted = !is_haunted;
+    var haunt = JX.$(config.haunt)
+    JX.DOM.alterClass(haunt, 'differential-haunted-panel', is_haunted);
+  }
+
   new JX.KeyboardShortcut('j', 'Jump to next change.')
     .setHandler(function(manager) {
       jump(manager, 1);
@@ -130,5 +137,9 @@ JX.behavior('differential-keyboard-navigation', function(config) {
     })
     .register();
 
+  new JX.KeyboardShortcut('z', 'Haunt / unhaunt comment panel.')
+    .setHandler(haunt)
+    .register();
+
 });