Update InlineCommentSummary UI

Summary: Minor spring cleaning, improve the visual feel of the comments table, more consistent structure.

Test Plan:
Test multiple comments, long comments, short comments, and multiple lines.

{F282462}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: hach-que, Korvin, epriestley

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

resources/celerity/map.php

@@ -10,7 +10,7 @@ return array(
     'core.pkg.css' => 'e5d56a4a',
     'core.pkg.js' => '65e04767',
     'darkconsole.pkg.js' => '8ab24e01',
-    'differential.pkg.css' => '8af45893',
+    'differential.pkg.css' => '380f07e5',
     'differential.pkg.js' => '7b5a4aa4',
     'diffusion.pkg.css' => '591664fa',
     'diffusion.pkg.js' => 'bfc0737b',
@@ -53,7 +53,7 @@ return array(
     'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
     'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
     'rsrc/css/application/dashboard/dashboard.css' => 'ec324e2a',
-    'rsrc/css/application/diff/inline-comment-summary.css' => '8cfd34e8',
+    'rsrc/css/application/diff/inline-comment-summary.css' => 'eb5f8e8c',
     'rsrc/css/application/differential/add-comment.css' => 'c478bcaa',
     'rsrc/css/application/differential/changeset-view.css' => 'b2b71e76',
     'rsrc/css/application/differential/core.css' => '7ac3cabc',
@@ -540,7 +540,7 @@ return array(
     'herald-rule-editor' => '6e2de6f2',
     'herald-test-css' => '778b008e',
     'homepage-panel-css' => 'e34bf140',
-    'inline-comment-summary-css' => '8cfd34e8',
+    'inline-comment-summary-css' => 'eb5f8e8c',
     'javelin-aphlict' => '2be71d56',
     'javelin-behavior' => '61cbc29a',
     'javelin-behavior-aphlict-dropdown' => '335470d7',

src/infrastructure/diff/view/PhabricatorInlineSummaryView.php

@@ -15,20 +15,7 @@ final class PhabricatorInlineSummaryView extends AphrontView {
 
   public function render() {
     require_celerity_resource('inline-comment-summary-css');
-    return hsprintf('%s%s', $this->renderHeader(), $this->renderTable());
+    return hsprintf('%s', $this->renderTable());
-  }
-
-  private function renderHeader() {
-    $icon = id(new PHUIIconView())
-      ->setIconFont('fa-comment bluegrey msr');
-
-    $header = phutil_tag_div(
-      'phabricator-inline-summary',
-      array(
-        $icon,
-        pht('Inline Comments'),
-      ));
-    return $header;
   }
 
   private function renderTable() {
@@ -43,10 +30,17 @@ final class PhabricatorInlineSummaryView extends AphrontView {
         }
       }
 
-      $rows[] = phutil_tag(
+      $icon = id(new PHUIIconView())
-        'tr',
+        ->setIconFont('fa-file-code-o darkbluetext mmr');
-        array(),
+      $header = phutil_tag(
-        phutil_tag('th', array('colspan' => 3), $group));
+        'th',
+        array(
+          'colspan' => 3,
+        ),
+        array(
+          $icon,
+          $group,));
+      $rows[] = phutil_tag('tr', array(), $header);
 
       foreach ($items as $item) {
         $line = $item['line'];
@@ -69,7 +63,7 @@ final class PhabricatorInlineSummaryView extends AphrontView {
 
         if ($href) {
           $icon = id(new PHUIIconView())
-            ->setIconFont('fa-share white msr');
+            ->setIconFont('fa-share darkbluetext mmr');
 
           $lines = phutil_tag(
             'a',

webroot/rsrc/css/application/diff/inline-comment-summary.css

@@ -2,36 +2,41 @@
  * @provides inline-comment-summary-css
  */
 
-.phabricator-inline-summary {
+.transaction-comment + .phabricator-inline-summary-table {
-  color: {$bluetext};
+  margin-top: 8px;
-  padding-top: 12px;
-  margin-top: 12px;
-  border-top: 1px solid {$thinblueborder};
-}
-
-.phabricator-remarkup + .phabricator-inline-summary {
-  padding-top: 16px;
 }
 
 .phabricator-inline-summary-table {
+  border-collapse: collapse;
+  border-style: hidden;
   width: 100%;
+  margin-top: -16px;
 }
 
 .phabricator-inline-summary-table th {
-  padding: 6px 0px;
+  font-weight: bold;
-  color: {$lightgreytext};
+  padding: 16px 1px 8px;
+  background: #fff;
+  color: #000;
+  border-bottom: 1px solid {$thinblueborder};
 }
 
 .phabricator-inline-summary-table td  {
-  padding: 0px 4px 6px;
+  padding: 4px 8px;
   white-space: nowrap;
   color: {$darkbluetext};
+  background: white;
 }
 
 .phabricator-inline-summary-table td.inline-line-number {
-  padding-left: 0px;
+  padding: 0;
   width: 100px;
   white-space: nowrap;
+  background: #F8F9FC;
+  font-family: "Menlo", "Consolas", monospace;
+  font-size: 11px;
+  color: {$bluetext};
+  border-right: 1px solid {$thinblueborder};
 }
 
 .phabricator-inline-summary-table td.inline-which-diff {
@@ -49,17 +54,15 @@
    target (by highlighting the entire cell). */
 
 .phabricator-inline-summary-table td.inline-line-number a.num {
-  padding-left: 4px;
+  padding: 4px 8px;
   display: block;
-  font-weight: bold;
+  color: {$bluetext};
-  color: {$blue};
 }
 
-.phabricator-inline-summary-table td.inline-line-number a.num:hover {
+.phabricator-inline-summary-table td.inline-line-number:hover a.num {
-  background: {$blue};
+  background: rgba(150,150,150,.1);
-  border-radius: 3px;
-  color: white;
   text-decoration: none;
+  color: {$darkbluetext};
 }
 
 .phui-timeline-core-content .phabricator-inline-summary:first-child {