Use <td class="n" data-n="3"> instead of <th>3</th> for line numbers

Summary:
Ref T13161. Ref T12822. See PHI870. Long ago, the web was simple. You could leave your doors unlocked, you knew all your neighbors, crime hadn't been invented yet, and `<th>3</th>` was a perfectly fine way to render a line number cell containing the number "3".

But times have changed!

  - In PHI870, this isn't good for screenreaders. We can't do much about this, so switch to `<td>`.
  - In D19349 / T13105 and elsewhere, this `::after { content: attr(data-n); }` approach seems like the least bad general-purpose approach for preventing line numbers from being copied. Although Differential needs even more magic beyond this in the two-up view, this is likely good enough for the one-up view, and is consistent with other views (paste, harbormaster logs, general source display) where this technique is sufficient on its own.

The chance this breaks //something// is pretty much 100%, but we've got a week to figure out what it breaks. I couldn't find any issues immediately.

Test Plan:
  - Created, edited, deleted inlines in 1-up and 2-up views.
  - Replied, keyboard-navigated, keyboard-replied, drag-selected, poked and prodded everything.

Reviewers: amckinley

Reviewed By: amckinley

Maniphest Tasks: T13161, T12822

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

resources/celerity/map.php

@@ -11,8 +11,8 @@ return array(
     'conpherence.pkg.js' => '020aebcf',
     'core.pkg.css' => '261ee8cf',
     'core.pkg.js' => '5ace8a1e',
-    'differential.pkg.css' => 'c3f15714',
+    'differential.pkg.css' => '801c5653',
-    'differential.pkg.js' => 'be031567',
+    'differential.pkg.js' => '1f211736',
     'diffusion.pkg.css' => '42c75c37',
     'diffusion.pkg.js' => '91192d85',
     'maniphest.pkg.css' => '35995d6d',
@@ -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' => '783a9206',
+    'rsrc/css/application/differential/changeset-view.css' => '8a997ed9',
     'rsrc/css/application/differential/core.css' => 'bdb93065',
     'rsrc/css/application/differential/phui-inline-comment.css' => '48acce5b',
     'rsrc/css/application/differential/revision-comment.css' => '7dbc8d1d',
@@ -375,7 +375,7 @@ return array(
     'rsrc/js/application/dashboard/behavior-dashboard-query-panel-select.js' => '1e413dc9',
     'rsrc/js/application/dashboard/behavior-dashboard-tab-panel.js' => '9b1cbd76',
     'rsrc/js/application/diff/DiffChangeset.js' => 'd0a85a85',
-    'rsrc/js/application/diff/DiffChangesetList.js' => 'b91204e9',
+    'rsrc/js/application/diff/DiffChangesetList.js' => '26fb79ba',
     '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',
@@ -541,7 +541,7 @@ return array(
     'conpherence-thread-manager' => 'aec8e38c',
     'conpherence-transaction-css' => '3a3f5e7e',
     'd3' => 'd67475f5',
-    'differential-changeset-view-css' => '783a9206',
+    'differential-changeset-view-css' => '8a997ed9',
     'differential-core-view-css' => 'bdb93065',
     'differential-revision-add-comment-css' => '7e5900d9',
     'differential-revision-comment-css' => '7dbc8d1d',
@@ -754,7 +754,7 @@ return array(
     'phabricator-darkmessage' => '26cd4b73',
     'phabricator-dashboard-css' => '4267d6c6',
     'phabricator-diff-changeset' => 'd0a85a85',
-    'phabricator-diff-changeset-list' => 'b91204e9',
+    'phabricator-diff-changeset-list' => '26fb79ba',
     'phabricator-diff-inline' => 'a4a14a94',
     'phabricator-drag-and-drop-file-upload' => '4370900d',
     'phabricator-draggable-list' => '3c6bd549',
@@ -1087,6 +1087,10 @@ return array(
       'javelin-json',
       'phabricator-draggable-list',
     ),
+    '26fb79ba' => array(
+      'javelin-install',
+      'phuix-button-view',
+    ),
     '27daef73' => array(
       'multirow-row-manager',
       'javelin-install',
@@ -1513,9 +1517,6 @@ return array(
       'javelin-uri',
       'javelin-request',
     ),
-    '783a9206' => array(
-      'phui-inline-comment-view-css',
-    ),
     '78bc5d94' => array(
       'javelin-behavior',
       'javelin-uri',
@@ -1586,6 +1587,9 @@ return array(
     '8a16f91b' => array(
       'syntax-default-css',
     ),
+    '8a997ed9' => array(
+      'phui-inline-comment-view-css',
+    ),
     '8ac32fd9' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1895,10 +1899,6 @@ return array(
       'javelin-uri',
       'phabricator-notification',
     ),
-    'b91204e9' => array(
-      'javelin-install',
-      'phuix-button-view',
-    ),
     'bd546a49' => array(
       'phui-workcard-view-css',
     ),

src/applications/differential/render/DifferentialChangesetOneUpRenderer.php

@@ -92,19 +92,23 @@ final class DifferentialChangesetOneUpRenderer
             $line = $p['line'];
 
             $cells[] = phutil_tag(
-              'th',
+              'td',
               array(
                 'id' => $left_id,
-                'class' => $class,
+                'class' => $class.' n',
-              ),
+                'data-n' => $line,
-              $line);
+              ));
 
             $render = $p['render'];
             if ($aural !== null) {
               $render = array($aural, $render);
             }
 
-            $cells[] = phutil_tag('th', array('class' => $class));
+            $cells[] = phutil_tag(
+              'td',
+              array(
+                'class' => $class.' n',
+              ));
             $cells[] = $no_copy;
             $cells[] = phutil_tag('td', array('class' => $class), $render);
             $cells[] = $no_coverage;
@@ -115,7 +119,11 @@ final class DifferentialChangesetOneUpRenderer
               } else {
                 $class = 'right new';
               }
-              $cells[] = phutil_tag('th', array('class' => $class));
+              $cells[] = phutil_tag(
+                'td',
+                array(
+                  'class' => $class.' n',
+                ));
               $aural = $aural_plus;
             } else {
               $class = 'right';
@@ -127,7 +135,13 @@ final class DifferentialChangesetOneUpRenderer
 
               $oline = $p['oline'];
 
-              $cells[] = phutil_tag('th', array('id' => $left_id), $oline);
+              $cells[] = phutil_tag(
+                'td',
+                array(
+                  'id' => $left_id,
+                  'class' => 'n',
+                  'data-n' => $oline,
+                ));
               $aural = null;
             }
 
@@ -144,12 +158,12 @@ final class DifferentialChangesetOneUpRenderer
             $line = $p['line'];
 
             $cells[] = phutil_tag(
-              'th',
+              'td',
               array(
                 'id' => $right_id,
-                'class' => $class,
+                'class' => $class.' n',
-              ),
+                'data-n' => $line,
-              $line);
+              ));
 
             $render = $p['render'];
             if ($aural !== null) {

src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php

@@ -306,10 +306,26 @@ final class DifferentialChangesetTwoUpRenderer
       // clipboard. See the 'phabricator-oncopy' behavior.
       $zero_space = "\xE2\x80\x8B";
 
+      $old_number = phutil_tag(
+        'td',
+        array(
+          'id' => $o_id,
+          'class' => $o_classes.' n',
+          'data-n' => $o_num,
+        ));
+
+      $new_number = phutil_tag(
+        'td',
+        array(
+          'id' => $n_id,
+          'class' => $n_classes.' n',
+          'data-n' => $n_num,
+        ));
+
       $html[] = phutil_tag('tr', array(), array(
-        phutil_tag('th', array('id' => $o_id, 'class' => $o_classes), $o_num),
+        $old_number,
         phutil_tag('td', array('class' => $o_classes), $o_text),
-        phutil_tag('th', array('id' => $n_id, 'class' => $n_classes), $n_num),
+        $new_number,
         $n_copy,
         phutil_tag(
           'td',

src/infrastructure/diff/view/PHUIDiffOneUpInlineCommentRowScaffold.php

@@ -31,8 +31,8 @@ final class PHUIDiffOneUpInlineCommentRowScaffold
     }
 
     $cells = array(
-      phutil_tag('th', array(), $left_hidden),
+      phutil_tag('td', array('class' => 'n'), $left_hidden),
-      phutil_tag('th', array(), $right_hidden),
+      phutil_tag('td', array('class' => 'n'), $right_hidden),
       phutil_tag('td', $attrs, $inline),
     );
 

src/infrastructure/diff/view/PHUIDiffTwoUpInlineCommentRowScaffold.php

@@ -71,9 +71,9 @@ final class PHUIDiffTwoUpInlineCommentRowScaffold
     );
 
     $cells = array(
-      phutil_tag('th', array(), $left_hidden),
+      phutil_tag('td', array('class' => 'n'), $left_hidden),
       phutil_tag('td', $left_attrs, $left_side),
-      phutil_tag('th', array(), $right_hidden),
+      phutil_tag('td', array('class' => 'n'), $right_hidden),
       phutil_tag('td', $right_attrs, $right_side),
     );
 

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

@@ -72,23 +72,6 @@
   width: 0;
 }
 
-.differential-diff th {
-  text-align: right;
-  padding: 1px 6px 1px 0;
-  vertical-align: top;
-  background: {$lightbluebackground};
-  color: {$bluetext};
-  cursor: pointer;
-  border-right: 1px solid {$thinblueborder};
-  overflow: hidden;
-
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
 .prose-diff {
   padding: 12px 0;
   white-space: pre-wrap;
@@ -182,6 +165,34 @@
   background: #dddddd;
 }
 
+.differential-diff .inline > td {
+  padding: 0;
+}
+
+/* Specify line number behaviors after other behaviors because line numbers
+should always have a boring grey background. */
+
+.differential-diff td.n {
+  text-align: right;
+  padding: 1px 6px 1px 0;
+  vertical-align: top;
+  background: {$lightbluebackground};
+  color: {$bluetext};
+  cursor: pointer;
+  border-right: 1px solid {$thinblueborder};
+  overflow: hidden;
+
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.differential-diff td.n::before {
+  content: attr(data-n);
+}
+
 .differential-diff td.cov {
   padding: 0;
 }
@@ -316,10 +327,6 @@ td.cov-I {
   pointer-events: none;
 }
 
-.differential-diff .inline > td {
-  padding: 0;
-}
-
 .differential-loading {
   border-top: 1px solid {$gentle.highlight.border};
   border-bottom: 1px solid {$gentle.highlight.border};

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

@@ -70,13 +70,13 @@ JX.install('DiffChangesetList', {
     var onrangedown = JX.bind(this, this._ifawake, this._onrangedown);
     JX.Stratcom.listen(
       'mousedown',
-      ['differential-changeset', 'tag:th'],
+      ['differential-changeset', 'tag:td'],
       onrangedown);
 
     var onrangemove = JX.bind(this, this._ifawake, this._onrangemove);
     JX.Stratcom.listen(
       ['mouseover', 'mouseout'],
-      ['differential-changeset', 'tag:th'],
+      ['differential-changeset', 'tag:td'],
       onrangemove);
 
     var onrangeup = JX.bind(this, this._ifawake, this._onrangeup);
@@ -360,7 +360,7 @@ JX.install('DiffChangesetList', {
           while (row) {
             var header = row.firstChild;
             while (header) {
-              if (JX.DOM.isType(header, 'th')) {
+              if (this.getLineNumberFromHeader(header)) {
                 if (header.className.indexOf('old') !== -1) {
                   old_list.push(header);
                 } else if (header.className.indexOf('new') !== -1) {
@@ -1247,11 +1247,7 @@ JX.install('DiffChangesetList', {
     },
 
     getLineNumberFromHeader: function(th) {
-      try {
+      return parseInt(th.getAttribute('data-n'));
-        return parseInt(th.id.match(/^C\d+[ON]L(\d+)$/)[1], 10);
-      } catch (x) {
-        return null;
-      }
     },
 
     getDisplaySideFromHeader: function(th) {