In Differential, give the "moved/copied from" gutter a more clear visual look

Summary:
Depends on D20196. See PHI985. When empty, the "moved/copied" gutter currently renders with the same background color as the rest of the line. This can be misleading because it makes code look more indented than it is, especially if you're unfamiliar with the tool:

{F6225179}

If we remove this misleading coloration, we get a white gap. This is more clear, but looks a little odd:

{F6225181}

Instead, give this gutter a subtle background fill in all casses, to make it more clear that it's a separate gutter region, not a part of the text diff:

{F6225183}

Test Plan: See screenshots. Copied text from a diff, added/removed inlines, etc.

Reviewers: amckinley

Reviewed By: amckinley

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

resources/celerity/map.php

@@ -11,7 +11,7 @@ return array(
     'conpherence.pkg.js' => '020aebcf',
     'core.pkg.css' => 'e3c1a8f2',
     'core.pkg.js' => '2cda17a4',
-    'differential.pkg.css' => '97e13037',
+    'differential.pkg.css' => 'ab23bd75',
     'differential.pkg.js' => '67e02996',
     'diffusion.pkg.css' => '42c75c37',
     'diffusion.pkg.js' => '91192d85',
@@ -61,7 +61,7 @@ return array(
     'rsrc/css/application/dashboard/dashboard.css' => '4267d6c6',
     'rsrc/css/application/diff/inline-comment-summary.css' => '81eb368d',
     'rsrc/css/application/differential/add-comment.css' => '7e5900d9',
-    'rsrc/css/application/differential/changeset-view.css' => 'de570228',
+    'rsrc/css/application/differential/changeset-view.css' => 'd92bed0d',
     'rsrc/css/application/differential/core.css' => '7300a73e',
     'rsrc/css/application/differential/phui-inline-comment.css' => '48acce5b',
     'rsrc/css/application/differential/revision-comment.css' => '7dbc8d1d',
@@ -540,7 +540,7 @@ return array(
     'conpherence-thread-manager' => 'aec8e38c',
     'conpherence-transaction-css' => '3a3f5e7e',
     'd3' => 'd67475f5',
-    'differential-changeset-view-css' => 'de570228',
+    'differential-changeset-view-css' => 'd92bed0d',
     'differential-core-view-css' => '7300a73e',
     'differential-revision-add-comment-css' => '7e5900d9',
     'differential-revision-comment-css' => '7dbc8d1d',
@@ -1997,6 +1997,9 @@ return array(
       'javelin-util',
       'phabricator-shaped-request',
     ),
+    'd92bed0d' => array(
+      'phui-inline-comment-view-css',
+    ),
     'da15d3dc' => array(
       'phui-oi-list-view-css',
     ),
@@ -2005,9 +2008,6 @@ return array(
       'javelin-uri',
       'phabricator-notification',
     ),
-    'de570228' => array(
-      'phui-inline-comment-view-css',
-    ),
     'dfa1d313' => array(
       'javelin-behavior',
       'javelin-dom',

src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php

@@ -223,7 +223,7 @@ final class DifferentialChangesetTwoUpRenderer
             ($new_lines[$ii]['type'] == '\\');
 
           if ($not_copied) {
-            $n_copy = phutil_tag('td', array('class' => "copy {$n_class}"));
+            $n_copy = phutil_tag('td', array('class' => 'copy'));
           } else {
             list($orig_file, $orig_line, $orig_type) = $copy_lines[$n_num];
             $title = ($orig_type == '-' ? 'Moved' : 'Copied').' from ';
@@ -243,8 +243,7 @@ final class DifferentialChangesetTwoUpRenderer
                   'msg' => $title,
                 ),
                 'class' => 'copy '.$class,
-              ),
-              '');
+              ));
           }
         }
       }

src/infrastructure/diff/view/PHUIDiffOneUpInlineCommentRowScaffold.php

@@ -18,7 +18,6 @@ final class PHUIDiffOneUpInlineCommentRowScaffold
 
     $attrs = array(
       'colspan' => 3,
-      'class' => 'right3',
       'id' => $inline->getScaffoldCellID(),
     );
 

src/infrastructure/diff/view/PHUIDiffTwoUpInlineCommentRowScaffold.php

@@ -65,8 +65,7 @@ final class PHUIDiffTwoUpInlineCommentRowScaffold
     );
 
     $right_attrs = array(
-      'colspan' => 3,
-      'class' => 'right3',
+      'colspan' => 2,
       'id' => ($right_side ? $right_side->getScaffoldCellID() : null),
     );
 
@@ -74,6 +73,7 @@ final class PHUIDiffTwoUpInlineCommentRowScaffold
       phutil_tag('td', array('class' => 'n'), $left_hidden),
       phutil_tag('td', $left_attrs, $left_side),
       phutil_tag('td', array('class' => 'n'), $right_hidden),
+      phutil_tag('td', array('class' => 'copy')),
       phutil_tag('td', $right_attrs, $right_side),
     );
 

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

@@ -144,6 +144,7 @@
   min-width: 0.5%;
   width: 0.5%;
   padding: 0;
+  background: {$lightbluebackground};
 }
 
 .differential-diff td.new-copy,
@@ -178,6 +179,10 @@ should always have a boring grey background. */
   overflow: hidden;
 }
 
+.differential-diff td + td.n {
+  border-left: 1px solid {$thinblueborder};
+}
+
 .differential-diff td.n::before {
   content: attr(data-n);
 }
@@ -443,10 +448,6 @@ unselectable. */
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-}
-
-.differential-diff.copy-l > tbody > tr > td,
-.differential-diff.copy-r > tbody > tr > td {
   opacity: 0.5;
 }
 
@@ -463,7 +464,7 @@ unselectable. */
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  opacity: 0.25;
+  opacity: 0.5;
 }
 
 .differential-diff.copy-r > tbody > tr > td:nth-child(5) {
@@ -473,3 +474,12 @@ unselectable. */
   user-select: auto;
   opacity: 1;
 }
+
+.differential-diff.copy-l > tbody > tr.inline > td,
+.differential-diff.copy-r > tbody > tr.inline > td {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  opacity: 0.5;
+}