Improve behavior of inline comment highlight reticle for block diffs

Summary:
Depends on D20834. Ref T13425. After the change from "th" to "td" for accessibility, the algorithm picks which cells it should highlight slightly improperly (it picks too many cells since it can no longer find the line numbers).

Ideally, it would probably highlight //only// the source content, but there isn't an easy way to do this right now. Settle for an incremental improvement for the moment.

Test Plan: Hovered over line numbers, saw a more accurate highlight area.

Maniphest Tasks: T13425

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

resources/celerity/map.php

@@ -12,7 +12,7 @@ return array(
     'core.pkg.css' => '6a8c9533',
     'core.pkg.js' => '6e5c894f',
     'differential.pkg.css' => 'ce54994e',
-    'differential.pkg.js' => '49515551',
+    'differential.pkg.js' => '68fa36fc',
     'diffusion.pkg.css' => '42c75c37',
     'diffusion.pkg.js' => 'a98c0bf7',
     'maniphest.pkg.css' => '35995d6d',
@@ -377,7 +377,7 @@ return array(
     'rsrc/js/application/dashboard/behavior-dashboard-query-panel-select.js' => '1e413dc9',
     'rsrc/js/application/dashboard/behavior-dashboard-tab-panel.js' => '0116d3e8',
     'rsrc/js/application/diff/DiffChangeset.js' => 'a31ffc00',
-    'rsrc/js/application/diff/DiffChangesetList.js' => '40850e53',
+    'rsrc/js/application/diff/DiffChangesetList.js' => '22f6bb51',
     'rsrc/js/application/diff/DiffInline.js' => 'a4a14a94',
     'rsrc/js/application/diff/behavior-preview-link.js' => 'f51e9c17',
     'rsrc/js/application/differential/behavior-diff-radios.js' => '925fe8cd',
@@ -774,7 +774,7 @@ return array(
     'phabricator-darkmessage' => '26cd4b73',
     'phabricator-dashboard-css' => '5a205b9d',
     'phabricator-diff-changeset' => 'a31ffc00',
-    'phabricator-diff-changeset-list' => '40850e53',
+    'phabricator-diff-changeset-list' => '22f6bb51',
     'phabricator-diff-inline' => 'a4a14a94',
     'phabricator-drag-and-drop-file-upload' => '4370900d',
     'phabricator-draggable-list' => 'c9ad6f70',
@@ -1075,6 +1075,10 @@ return array(
       'javelin-typeahead-source',
       'javelin-util',
     ),
+    '22f6bb51' => array(
+      'javelin-install',
+      'phuix-button-view',
+    ),
     23387297 => array(
       'javelin-install',
       'javelin-util',
@@ -1256,10 +1260,6 @@ return array(
       'javelin-behavior',
       'javelin-uri',
     ),
-    '40850e53' => array(
-      'javelin-install',
-      'phuix-button-view',
-    ),
     '4234f572' => array(
       'syntax-default-css',
     ),

src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php

@@ -453,11 +453,17 @@ final class DifferentialChangesetTwoUpRenderer
           'class' => 'n',
         ));
 
+      $copy_gutter = phutil_tag(
+        'td',
+        array(
+          'class' => 'copy',
+        ));
+
       $new_content_cell = phutil_tag(
         'td',
         array(
           'class' => $new_classes,
-          'colspan' => '3',
+          'colspan' => '2',
         ),
         $new_content);
 
@@ -468,6 +474,7 @@ final class DifferentialChangesetTwoUpRenderer
           $old_line_cell,
           $old_content_cell,
           $new_line_cell,
+          $copy_gutter,
           $new_content_cell,
         ));
 

webroot/rsrc/js/application/diff/DiffChangesetList.js

@@ -1196,19 +1196,30 @@ JX.install('DiffChangesetList', {
       }
 
       // Find the leftmost cell that we're going to highlight: this is the next
-      // <td /> in the row. In 2up views, it should be directly adjacent. In
+      // <td /> in the row that does not have a "data-n" (line number)
+      // attribute. In 2up views, it should be directly adjacent. In
       // 1up views, we may have to skip over the other line number column.
       var l = top;
-      while (JX.DOM.isType(l, 'th')) {
+      while (l.nextSibling && l.getAttribute('data-n')) {
         l = l.nextSibling;
       }
 
       // Find the rightmost cell that we're going to highlight: this is the
-      // farthest consecutive, adjacent <td /> in the row. Sometimes the left
+      // farthest consecutive, adjacent <td /> in the row that does not have
-      // and right nodes are the same (left side of 2up view); sometimes we're
+      // a "data-n" (line number) attribute. Sometimes the left and right nodes
-      // going to highlight several nodes (copy + code + coverage).
+      // are the same (left side of 2up view); sometimes we're going to
+      // highlight several nodes (copy + code + coverage).
       var r = l;
-      while (r.nextSibling && JX.DOM.isType(r.nextSibling, 'td')) {
+      while (true) {
+        // No more cells in the row, so we can't keep expanding.
+        if (!r.nextSibling) {
+          break;
+        }
+
+        if (r.nextSibling.getAttribute('data-n')) {
+          break;
+        }
+
         r = r.nextSibling;
       }