Make Differential comments be styled similarly to Maniphest comments

Summary:
This diff restructures the DOM and alters some CSS within differential.
Original goal was to unify these codepaths more fully into a base class or
classes, but they have quite a bit of custom code such that didn't feel too
compelling in practice.   It also felt related to feed stories as I thought
about the more general version(s) of this code...

Also deleted some CSS from maniphest that wasn't doing anything.

Test Plan:
looked at a differential diff and liked what I saw.   spent a bunch
of time trying out different types of comments and etc.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, epriestley

Maniphest Tasks: T803

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

src/__celerity_resource_map__.php

@@ -172,7 +172,7 @@ celerity_register_resource_map(array(
   ),
   'differential-core-view-css' =>
   array(
-    'uri' => '/res/584d40e8/rsrc/css/application/differential/core.css',
+    'uri' => '/res/0bc9223a/rsrc/css/application/differential/core.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -213,7 +213,7 @@ celerity_register_resource_map(array(
   ),
   'differential-revision-comment-css' =>
   array(
-    'uri' => '/res/e4b350b2/rsrc/css/application/differential/revision-comment.css',
+    'uri' => '/res/76b6d378/rsrc/css/application/differential/revision-comment.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -1272,7 +1272,7 @@ celerity_register_resource_map(array(
   ),
   'maniphest-transaction-detail-css' =>
   array(
-    'uri' => '/res/149fccab/rsrc/css/application/maniphest/transaction-detail.css',
+    'uri' => '/res/552bb734/rsrc/css/application/maniphest/transaction-detail.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -1787,6 +1787,27 @@ celerity_register_resource_map(array(
       'uri' => '/res/pkg/a6562582/differential.pkg.js',
       'type' => 'js',
     ),
+    'ab397f85' =>
+    array(
+      'name' => 'differential.pkg.css',
+      'symbols' =>
+      array(
+        0 => 'differential-core-view-css',
+        1 => 'differential-changeset-view-css',
+        2 => 'differential-revision-detail-css',
+        3 => 'differential-revision-history-css',
+        4 => 'differential-table-of-contents-css',
+        5 => 'differential-revision-comment-css',
+        6 => 'differential-revision-add-comment-css',
+        7 => 'differential-revision-comment-list-css',
+        8 => 'phabricator-object-selector-css',
+        9 => 'aphront-headsup-action-list-view-css',
+        10 => 'phabricator-content-source-view-css',
+        11 => 'differential-local-commits-view-css',
+      ),
+      'uri' => '/res/pkg/ab397f85/differential.pkg.css',
+      'type' => 'css',
+    ),
     'b164acea' =>
     array(
       'name' => 'javelin.pkg.js',
@@ -1806,27 +1827,6 @@ celerity_register_resource_map(array(
       'uri' => '/res/pkg/b164acea/javelin.pkg.js',
       'type' => 'js',
     ),
-    'fdcba95b' =>
-    array(
-      'name' => 'differential.pkg.css',
-      'symbols' =>
-      array(
-        0 => 'differential-core-view-css',
-        1 => 'differential-changeset-view-css',
-        2 => 'differential-revision-detail-css',
-        3 => 'differential-revision-history-css',
-        4 => 'differential-table-of-contents-css',
-        5 => 'differential-revision-comment-css',
-        6 => 'differential-revision-add-comment-css',
-        7 => 'differential-revision-comment-list-css',
-        8 => 'phabricator-object-selector-css',
-        9 => 'aphront-headsup-action-list-view-css',
-        10 => 'phabricator-content-source-view-css',
-        11 => 'differential-local-commits-view-css',
-      ),
-      'uri' => '/res/pkg/fdcba95b/differential.pkg.css',
-      'type' => 'css',
-    ),
     16378540 =>
     array(
       'name' => 'core.pkg.css',
@@ -1857,23 +1857,23 @@ celerity_register_resource_map(array(
     'aphront-crumbs-view-css' => '16378540',
     'aphront-dialog-view-css' => '16378540',
     'aphront-form-view-css' => '16378540',
-    'aphront-headsup-action-list-view-css' => 'fdcba95b',
+    'aphront-headsup-action-list-view-css' => 'ab397f85',
     'aphront-list-filter-view-css' => '16378540',
     'aphront-panel-view-css' => '16378540',
     'aphront-side-nav-view-css' => '16378540',
     'aphront-table-view-css' => '16378540',
     'aphront-tokenizer-control-css' => '16378540',
     'aphront-typeahead-control-css' => '16378540',
-    'differential-changeset-view-css' => 'fdcba95b',
+    'differential-changeset-view-css' => 'ab397f85',
-    'differential-core-view-css' => 'fdcba95b',
+    'differential-core-view-css' => 'ab397f85',
     'differential-inline-comment-editor' => 'a6562582',
-    'differential-local-commits-view-css' => 'fdcba95b',
+    'differential-local-commits-view-css' => 'ab397f85',
-    'differential-revision-add-comment-css' => 'fdcba95b',
+    'differential-revision-add-comment-css' => 'ab397f85',
-    'differential-revision-comment-css' => 'fdcba95b',
+    'differential-revision-comment-css' => 'ab397f85',
-    'differential-revision-comment-list-css' => 'fdcba95b',
+    'differential-revision-comment-list-css' => 'ab397f85',
-    'differential-revision-detail-css' => 'fdcba95b',
+    'differential-revision-detail-css' => 'ab397f85',
-    'differential-revision-history-css' => 'fdcba95b',
+    'differential-revision-history-css' => 'ab397f85',
-    'differential-table-of-contents-css' => 'fdcba95b',
+    'differential-table-of-contents-css' => 'ab397f85',
     'diffusion-commit-view-css' => '03ef179e',
     'javelin-behavior' => 'b164acea',
     'javelin-behavior-aphront-basic-tokenizer' => '540effd7',
@@ -1911,14 +1911,14 @@ celerity_register_resource_map(array(
     'javelin-util' => 'b164acea',
     'javelin-vector' => 'b164acea',
     'javelin-workflow' => '46547a92',
-    'phabricator-content-source-view-css' => 'fdcba95b',
+    'phabricator-content-source-view-css' => 'ab397f85',
     'phabricator-core-buttons-css' => '16378540',
     'phabricator-core-css' => '16378540',
     'phabricator-directory-css' => '16378540',
     'phabricator-drag-and-drop-file-upload' => 'a6562582',
     'phabricator-keyboard-shortcut' => '46547a92',
     'phabricator-keyboard-shortcut-manager' => '46547a92',
-    'phabricator-object-selector-css' => 'fdcba95b',
+    'phabricator-object-selector-css' => 'ab397f85',
     'phabricator-remarkup-css' => '16378540',
     'phabricator-shaped-request' => 'a6562582',
     'phabricator-standard-page-view' => '16378540',

src/applications/differential/view/revisioncomment/DifferentialRevisionCommentView.php

@@ -155,15 +155,12 @@ final class DifferentialRevisionCommentView extends AphrontView {
           $content.
         '</div>';
     }
+
+    $title = "{$author_link} {$verb} this revision.";
     if (strlen(rtrim($content)) || $this->inlines) {
-      $title = "{$author_link} {$verb} this revision:";
+      $hide_comments_class = null;
     } else {
-      $title = null;
+      $hide_comments_class = 'hide';
-      $head_content =
-        '<div class="differential-comment-nocontent">'.
-          "<p>{$author_link} {$verb} this revision.</p>".
-        '</div>';
-      $content = null;
     }
 
     if ($this->inlines) {
@@ -325,16 +322,16 @@ final class DifferentialRevisionCommentView extends AphrontView {
     return phutil_render_tag(
       'div',
       array(
-        'class' => "differential-comment {$action_class}",
+        'class' => "differential-comment",
         'id'    => $comment_anchor,
+        'style' => $background,
       ),
-      '<div class="differential-comment-head">'.
+      '<div class="differential-comment-detail '.$action_class.'">'.
-        '<span class="differential-comment-info">'.$info.'</span>'.
+        '<div class="differential-comment-header">'.
-        '<span class="differential-comment-title">'.$title.'</span>'.
+          '<span class="differential-comment-info">'.$info.'</span>'.
-        '<div style="clear: both;"></div>'.
+          '<span class="differential-comment-title">'.$title.'</span>'.
-      '</div>'.
+        '</div>'.
-      '<div class="differential-comment-body" style="'.$background.'">'.
+        '<div class="differential-comment-content '.$hide_comments_class.'">'.
-        '<div class="differential-comment-content">'.
           $head_content.
           $metadata_blocks.
           '<div class="differential-comment-core">'.

webroot/rsrc/css/application/differential/core.css

@@ -14,7 +14,7 @@
 }
 
 .differential-panel {
-  margin:       25px 0;
+  margin:       25px 0 0 0;
   max-width:    1120px;
   border:       1px solid #666622;
   background:   #efefdf;

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

@@ -2,11 +2,11 @@
  * @provides differential-revision-comment-css
  */
 
-
 .differential-comment {
-  padding: 3px 6px;
+  background: 0px 2px no-repeat;
-  margin-bottom: 10px;
+  margin: 1em 0 1.25em;
-  border: 1px solid transparent;
+  min-height: 50px;
+  padding: 2px 0px;
 }
 
 .differential-comment-list {
@@ -17,6 +17,17 @@
   max-width: 1162px;
 }
 
+.differential-comment-detail {
+  border-color: #dddddd;
+  border-width: 1px 10px;
+  border-style: solid;
+  margin-left: 54px;
+}
+
+.differential-comment-detail .hide {
+  display: none;
+}
+
 /* Spooky haunted panel which floats on the bottom of the screen. */
 .differential-haunted-panel .differential-add-comment-panel {
   position: fixed;
@@ -43,49 +54,32 @@
   display: none;
 }
 
-
 .differential-haunted-panel {
   padding-bottom: 250px;
 }
 
-
 .differential-comment-list .anchor-target {
   background-color: #ffffdd;
   border-color: #ffff00;
 }
 
+.differential-comment-header {
+  background: #f3f3f3;
+  padding: 4px 1em;
+}
+
+.differential-comment-header a {
+  font-weight: bold;
+}
+
 .differential-comment-info {
   color:       #666666;
   float:       right;
   font-size:   11px;
-  margin:      0 0 3px;
-  padding-top: 6px;
-}
-
-.differential-comment-info a {
-  font-weight: bold;
-}
-
-.differential-comment-title {
-  font-weight:         bold;
-  height:              16px;
-  margin:              4px 0em 0em 0em;
-  padding:             4px 0em;
-  position:            relative;
-}
-
-.differential-comment-body {
-  min-height:           56px;
-  padding-left:         62px;
-  background-repeat:    no-repeat;
-  background-position:  6px 0px;
 }
 
 .differential-comment-content {
-  background:          #fbfbfb;
+  background:          #fcfcfc;
-  border-color:        #c3c3c3;
-  border-style:        solid;
-  border-width:        1px 10px 1px 10px;
   clear:               both;
   line-height:         1.4em;
   margin:              0em;
@@ -102,59 +96,45 @@
    width: 81ch;
 }
 
-.differential-comment-nocontent {
+.differential-comment .differential-comment-action-testplan {
-  font-weight: bold;
-}
-
-.differential-comment-action-testplan .differential-comment-content {
   border-color:     #660099;
-  background:       #f6f3ff;
 }
 
-.differential-comment-action-abandon .differential-comment-content {
+.differential-comment .differential-comment-action-abandon {
   border-color:     #222222;
-  background:       #f3f3f3;
 }
 
-.differential-comment-action-accept .differential-comment-content {
+.differential-comment .differential-comment-action-accept {
   border-color:     #009966;
-  background:       #f3fff3;
 }
 
-.differential-comment-action-reject .differential-comment-content {
+.differential-comment .differential-comment-action-reject {
   border-color:     #aa0000;
-  background:       #fff3f3;
 }
 
-.differential-comment-action-rethink .differential-comment-content {
+.differential-comment .differential-comment-action-rethink {
   border-color:     #aa0000;
-  background:       #fff3f3;
 }
 
-.differential-comment-action-commit .differential-comment-content {
+.differential-comment .differential-comment-action-commit {
   border-color:     #006699;
-  background:       #f3f3ff;
 }
 
 
-.differential-comment-action-reclaim .differential-comment-content {
+.differential-comment .differential-comment-action-reclaim {
   border-color:     #0099aa;
-  background:       #f3fff9;
 }
 
-.differential-comment-action-update .differential-comment-content {
+.differential-comment .differential-comment-action-update {
   border-color:     #6699cc;
-  background:       #f3f9ff;
 }
 
-.differential-comment-action-add_reviewers .differential-comment-content {
+.differential-comment .differential-comment-action-add_reviewers {
   border-color:     #aa99cc;
-  background:       #f9f3ff;
 }
 
-.differential-comment-action-request_review .differential-comment-content {
+.differential-comment .differential-comment-action-request_review {
   border-color:     #cc9966;
-  background:       #fff9f3;
 }
 
 .differential-inline-summary th,
@@ -202,9 +182,8 @@
   text-decoration: none;
 }
 
-
 .differential-inline-summary-section {
-  margin: 1em 0 .5em;
+  margin: .75em 0 .5em;
   font-size: 11px;
   border-bottom: 1px solid #dddddd;
   color: #666666;

webroot/rsrc/css/application/maniphest/transaction-detail.css

@@ -2,10 +2,6 @@
  * @provides maniphest-transaction-detail-css
  */
 
-.maniphest-trnasaction-list-view {
-  padding: .5em 1.5em;
-}
-
 .maniphest-transaction-detail-container {
   margin: 1em 2em 1.25em;
   background: 0px 2px no-repeat;