Make collapsed inlines more useful and anchor target highlights more accurate

Summary:
Ref T12616. Fixes T11648. Currently, we snug up replies with a negative margin (from T10563) but this throws off the anchor highlighting.

Instead:

  - Remove padding from these dolumns.
  - Use margins on the stuff inside them instead.
  - Less margins for replies.
  - Less margins for collapsed comments.
  - Show some text for collapsed comments.

Test Plan:
{F4960890}

{F4960891}

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T12616, T11648

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

resources/celerity/map.php

@@ -12,7 +12,7 @@ return array(
     'core.pkg.css' => 'ee5f28cd',
     'core.pkg.js' => '8c5f913d',
     'darkconsole.pkg.js' => '1f9a31bc',
-    'differential.pkg.css' => '58712637',
+    'differential.pkg.css' => '7b1c772c',
     'differential.pkg.js' => 'f1b636fb',
     'diffusion.pkg.css' => 'b93d9b8c',
     'diffusion.pkg.js' => '84c8f8fd',
@@ -64,9 +64,9 @@ return array(
     'rsrc/css/application/dashboard/dashboard.css' => 'fe5b1869',
     'rsrc/css/application/diff/inline-comment-summary.css' => '51efda3a',
     'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
-    'rsrc/css/application/differential/changeset-view.css' => '41af6d25',
+    'rsrc/css/application/differential/changeset-view.css' => '69a3c268',
     'rsrc/css/application/differential/core.css' => '5b7b8ff4',
-    'rsrc/css/application/differential/phui-inline-comment.css' => '3fd8ca64',
+    'rsrc/css/application/differential/phui-inline-comment.css' => 'e0a2b52e',
     'rsrc/css/application/differential/revision-comment.css' => '14b8565a',
     'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
     'rsrc/css/application/differential/revision-list.css' => 'f3c47d33',
@@ -567,7 +567,7 @@ return array(
     'conpherence-thread-manager' => '4d863052',
     'conpherence-transaction-css' => '85129c68',
     'd3' => 'a11a5ff2',
-    'differential-changeset-view-css' => '41af6d25',
+    'differential-changeset-view-css' => '69a3c268',
     'differential-core-view-css' => '5b7b8ff4',
     'differential-revision-add-comment-css' => 'c47f8c40',
     'differential-revision-comment-css' => '14b8565a',
@@ -864,7 +864,7 @@ return array(
     'phui-image-mask-css' => 'a8498f9c',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => '6e217679',
-    'phui-inline-comment-view-css' => '3fd8ca64',
+    'phui-inline-comment-view-css' => 'e0a2b52e',
     'phui-invisible-character-view-css' => '6993d9f0',
     'phui-lightbox-css' => '0a035e40',
     'phui-list-view-css' => '12eb8ce6',
@@ -1182,9 +1182,6 @@ return array(
       'javelin-dom',
       'javelin-reactor-dom',
     ),
-    '41af6d25' => array(
-      'phui-inline-comment-view-css',
-    ),
     42126667 => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1401,6 +1398,9 @@ return array(
     '6882e80a' => array(
       'javelin-dom',
     ),
+    '69a3c268' => array(
+      'phui-inline-comment-view-css',
+    ),
     '69adf288' => array(
       'javelin-install',
     ),

src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php

@@ -433,15 +433,20 @@ final class PHUIDiffInlineCommentDetailView
           phutil_tag_div('phabricator-remarkup', $content)),
       ));
 
+    $snippet = id(new PhutilUTF8StringTruncator())
+      ->setMaximumGlyphs(96)
+      ->truncateString($inline->getContent());
+
     $summary = phutil_tag(
       'div',
       array(
         'class' => 'differential-inline-summary',
       ),
-
-      // TODO: Render something a little more useful here as a hint about the
-      // inline content, like "alincoln: first line of text...".
-      pht('...'));
+      array(
+        phutil_tag('strong', array(), pht('%s:', $author)),
+        ' ',
+        $snippet,
+      ));
 
     return array(
       $anchor,

webroot/rsrc/css/application/differential/changeset-view.css

@@ -67,10 +67,6 @@
   padding: 1px 4px;
 }
 
-.device .differential-diff .inline > td {
-  padding: 4px;
-}
-
 .differential-diff td .zwsp {
   position: absolute;
   width: 0;
@@ -315,7 +311,7 @@ td.cov-I {
 }
 
 .differential-diff .inline > td {
-  padding: 8px 12px;
+  padding: 0;
 }
 
 .differential-loading {

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

@@ -28,14 +28,17 @@
   background: #fff;
   border: 1px solid {$sh-yellowborder};
   font: {$basefont};
-  margin: 0;
-  width: 100%;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   overflow: hidden;
   white-space: normal;
   border-radius: 3px;
+  margin: 8px 12px;
+}
+
+.device .differential-inline-comment {
+  margin: 4px;
 }
 
 .inline-state-is-draft {
@@ -61,7 +64,7 @@
 
 /* Tighten up spacing on replies */
 .differential-inline-comment.inline-comment-is-reply {
-  margin-top: -12px;
+  margin-top: 0;
 }
 
 .differential-inline-comment .inline-head-right {
@@ -315,6 +318,7 @@
 
 .differential-inline-undo {
   padding: 8px;
+  margin: 8px 12px;
   text-align: center;
   background: {$sh-yellowbackground};
   border: 1px solid {$sh-yellowborder};
@@ -389,10 +393,20 @@
 }
 
 .differential-inline-summary {
-  background: {$greybackground};
-  padding: 0 4px;
-  color: {$greytext};
+  background: {$lightgreybackground};
+  padding: 2px 16px;
+  color: {$lightgreytext};
+  font-size: {$smallerfontsize};
   display: none;
+  font: {$basefont};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.device .differential-inline-summary {
+  padding-left: 4px;
+  padding-right: 4px;
 }
 
 .inline-hidden .differential-inline-summary {