Collapse previous/forward by default, click to expand.

Summary: This is a lighter UI treatment for previous/forward comments, where the comment is just hidden behind a click. This mayyy be too hard to discover, but I'd rather wait and make it more obvious if actually needed. Once you understand the interaction, the cleaner UI is preferable. Ref T7447

Test Plan:
Test a lot of previous and forward comments.

{F389658}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T7447

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

resources/celerity/map.php

@@ -58,7 +58,7 @@ return array(
     'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
     'rsrc/css/application/differential/changeset-view.css' => 'e19cfd6e',
     'rsrc/css/application/differential/core.css' => '7ac3cabc',
-    'rsrc/css/application/differential/phui-inline-comment.css' => '7adedadb',
+    'rsrc/css/application/differential/phui-inline-comment.css' => '03bb3528',
     'rsrc/css/application/differential/results-table.css' => '181aa9d9',
     'rsrc/css/application/differential/revision-comment.css' => '024dda6b',
     'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
@@ -795,7 +795,7 @@ return array(
     'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => 'c6f0aef8',
-    'phui-inline-comment-view-css' => '7adedadb',
+    'phui-inline-comment-view-css' => '03bb3528',
     'phui-list-view-css' => '2e25ebfb',
     'phui-object-box-css' => '7d160002',
     'phui-object-item-list-view-css' => '9db65899',

src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php

@@ -124,25 +124,37 @@ final class PHUIDiffInlineCommentDetailView
 
     $ghost_tag = null;
     $ghost = $inline->getIsGhost();
+    $ghost_id = null;
     if ($ghost) {
       if ($ghost['new']) {
-        $ghost_text = pht('Newer Comment');
+        $ghosticon = 'fa-fast-forward';
+        $reason = pht('Click to view forward comment.');
       } else {
-        $ghost_text = pht('Older Comment');
+        $ghosticon = 'fa-fast-backward';
+        $reason = pht('Click to view previous comment.');
       }
+      $ghost_id = celerity_generate_unique_node_id();
 
-      $ghost_tag = id(new PHUITagView())
+      $ghost_icon = id(new PHUIIconView())
-        ->setType(PHUITagView::TYPE_SHADE)
+        ->setIconFont($ghosticon)
-        ->setName($ghost_text)
-        ->setSlimShady(true)
-        ->setShade(PHUITagView::COLOR_BLUE)
         ->addSigil('has-tooltip')
         ->setMetadata(
           array(
-            'tip' => $ghost['reason'],
+            'tip' => $reason,
             'size' => 300,
-          ))
+          ));
-        ->addClass('mml');
+      $ghost_tag = javelin_tag(
+        'a',
+        array(
+          'class' => 'ghost-icon',
+          'sigil' => 'jx-toggle-class',
+          'meta'  => array(
+            'map' => array(
+              $ghost_id => 'ghost-is-expanded',
+            ),
+          ),
+        ),
+        $ghost_icon);
       $classes[] = 'inline-comment-ghost';
     }
 
@@ -397,6 +409,7 @@ final class PHUIDiffInlineCommentDetailView
         'class' => $classes,
         'sigil' => $sigil,
         'meta'  => $metadata,
+        'id'    => $ghost_id,
       ),
       array(
         phutil_tag_div('differential-inline-comment-head grouped', array(

webroot/rsrc/css/application/differential/phui-inline-comment.css

@@ -405,3 +405,64 @@
 .differential-inline-undo a {
   font-weight: bold;
 }
+
+/* - Spooky Ghost UI -----------------------------------------------------------
+
+  Hide your codez.
+
+*/
+
+.inline-comment-ghost .differential-inline-comment-head {
+  padding-left: 40px;
+  padding-bottom: 0;
+}
+
+.inline-comment-ghost .inline-head-left {
+  padding: 4px 0;
+}
+
+.ghost-icon {
+  background: {$darkgreybackground};
+  float: left;
+  margin-right: 8px;
+  padding: 2px 4px 1px 2px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.ghost-icon .phui-icon-view {
+  padding: 7px;
+  font-size: 15px;
+  color: {$lightbluetext};
+}
+
+.device-desktop .ghost-icon .phui-icon-view:hover {
+  color: {$sky};
+}
+
+.inline-comment-ghost .differential-inline-comment-content {
+  display: none;
+}
+
+.inline-comment-ghost.ghost-is-expanded .differential-inline-comment-content {
+  display: block;
+}
+
+.differential-inline-comment.inline-comment-ghost
+  .differential-inline-comment-head {
+    border-bottom-color: transparent;
+    position: relative;
+}
+
+.differential-inline-comment.inline-comment-ghost.ghost-is-expanded
+  .differential-inline-comment-head {
+    border-bottom-color: {$thinblueborder};
+    position: relative;
+}
+
+.differential-inline-comment.inline-comment-ghost
+  .differential-inline-done-label {
+    border-color: {$lightgreyborder};
+    color: {$lightgreytext};
+}