@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
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
+92
-59
+13
-13
resources/celerity/map.php
+13
-13
resources/celerity/map.php
···
11
11
'conpherence.pkg.js' => '020aebcf',
12
12
'core.pkg.css' => '261ee8cf',
13
13
'core.pkg.js' => '5ace8a1e',
14
-
'differential.pkg.css' => 'c3f15714',
15
-
'differential.pkg.js' => 'be031567',
14
+
'differential.pkg.css' => '801c5653',
15
+
'differential.pkg.js' => '1f211736',
16
16
'diffusion.pkg.css' => '42c75c37',
17
17
'diffusion.pkg.js' => '91192d85',
18
18
'maniphest.pkg.css' => '35995d6d',
···
61
61
'rsrc/css/application/dashboard/dashboard.css' => '4267d6c6',
62
62
'rsrc/css/application/diff/inline-comment-summary.css' => '81eb368d',
63
63
'rsrc/css/application/differential/add-comment.css' => '7e5900d9',
64
-
'rsrc/css/application/differential/changeset-view.css' => '783a9206',
64
+
'rsrc/css/application/differential/changeset-view.css' => '8a997ed9',
65
65
'rsrc/css/application/differential/core.css' => 'bdb93065',
66
66
'rsrc/css/application/differential/phui-inline-comment.css' => '48acce5b',
67
67
'rsrc/css/application/differential/revision-comment.css' => '7dbc8d1d',
···
375
375
'rsrc/js/application/dashboard/behavior-dashboard-query-panel-select.js' => '1e413dc9',
376
376
'rsrc/js/application/dashboard/behavior-dashboard-tab-panel.js' => '9b1cbd76',
377
377
'rsrc/js/application/diff/DiffChangeset.js' => 'd0a85a85',
378
-
'rsrc/js/application/diff/DiffChangesetList.js' => 'b91204e9',
378
+
'rsrc/js/application/diff/DiffChangesetList.js' => '26fb79ba',
379
379
'rsrc/js/application/diff/DiffInline.js' => 'a4a14a94',
380
380
'rsrc/js/application/diff/behavior-preview-link.js' => 'f51e9c17',
381
381
'rsrc/js/application/differential/behavior-diff-radios.js' => '925fe8cd',
···
541
541
'conpherence-thread-manager' => 'aec8e38c',
542
542
'conpherence-transaction-css' => '3a3f5e7e',
543
543
'd3' => 'd67475f5',
544
-
'differential-changeset-view-css' => '783a9206',
544
+
'differential-changeset-view-css' => '8a997ed9',
545
545
'differential-core-view-css' => 'bdb93065',
546
546
'differential-revision-add-comment-css' => '7e5900d9',
547
547
'differential-revision-comment-css' => '7dbc8d1d',
···
754
754
'phabricator-darkmessage' => '26cd4b73',
755
755
'phabricator-dashboard-css' => '4267d6c6',
756
756
'phabricator-diff-changeset' => 'd0a85a85',
757
-
'phabricator-diff-changeset-list' => 'b91204e9',
757
+
'phabricator-diff-changeset-list' => '26fb79ba',
758
758
'phabricator-diff-inline' => 'a4a14a94',
759
759
'phabricator-drag-and-drop-file-upload' => '4370900d',
760
760
'phabricator-draggable-list' => '3c6bd549',
···
1087
1087
'javelin-json',
1088
1088
'phabricator-draggable-list',
1089
1089
),
1090
+
'26fb79ba' => array(
1091
+
'javelin-install',
1092
+
'phuix-button-view',
1093
+
),
1090
1094
'27daef73' => array(
1091
1095
'multirow-row-manager',
1092
1096
'javelin-install',
···
1513
1517
'javelin-uri',
1514
1518
'javelin-request',
1515
1519
),
1516
-
'783a9206' => array(
1517
-
'phui-inline-comment-view-css',
1518
-
),
1519
1520
'78bc5d94' => array(
1520
1521
'javelin-behavior',
1521
1522
'javelin-uri',
···
1585
1586
),
1586
1587
'8a16f91b' => array(
1587
1588
'syntax-default-css',
1589
+
),
1590
+
'8a997ed9' => array(
1591
+
'phui-inline-comment-view-css',
1588
1592
),
1589
1593
'8ac32fd9' => array(
1590
1594
'javelin-behavior',
···
1894
1898
'javelin-behavior',
1895
1899
'javelin-uri',
1896
1900
'phabricator-notification',
1897
-
),
1898
-
'b91204e9' => array(
1899
-
'javelin-install',
1900
-
'phuix-button-view',
1901
1901
),
1902
1902
'bd546a49' => array(
1903
1903
'phui-workcard-view-css',
+25
-11
src/applications/differential/render/DifferentialChangesetOneUpRenderer.php
+25
-11
src/applications/differential/render/DifferentialChangesetOneUpRenderer.php
···
92
92
$line = $p['line'];
93
93
94
94
$cells[] = phutil_tag(
95
-
'th',
95
+
'td',
96
96
array(
97
97
'id' => $left_id,
98
-
'class' => $class,
99
-
),
100
-
$line);
98
+
'class' => $class.' n',
99
+
'data-n' => $line,
100
+
));
101
101
102
102
$render = $p['render'];
103
103
if ($aural !== null) {
104
104
$render = array($aural, $render);
105
105
}
106
106
107
-
$cells[] = phutil_tag('th', array('class' => $class));
107
+
$cells[] = phutil_tag(
108
+
'td',
109
+
array(
110
+
'class' => $class.' n',
111
+
));
108
112
$cells[] = $no_copy;
109
113
$cells[] = phutil_tag('td', array('class' => $class), $render);
110
114
$cells[] = $no_coverage;
···
115
119
} else {
116
120
$class = 'right new';
117
121
}
118
-
$cells[] = phutil_tag('th', array('class' => $class));
122
+
$cells[] = phutil_tag(
123
+
'td',
124
+
array(
125
+
'class' => $class.' n',
126
+
));
119
127
$aural = $aural_plus;
120
128
} else {
121
129
$class = 'right';
···
127
135
128
136
$oline = $p['oline'];
129
137
130
-
$cells[] = phutil_tag('th', array('id' => $left_id), $oline);
138
+
$cells[] = phutil_tag(
139
+
'td',
140
+
array(
141
+
'id' => $left_id,
142
+
'class' => 'n',
143
+
'data-n' => $oline,
144
+
));
131
145
$aural = null;
132
146
}
133
147
···
144
158
$line = $p['line'];
145
159
146
160
$cells[] = phutil_tag(
147
-
'th',
161
+
'td',
148
162
array(
149
163
'id' => $right_id,
150
-
'class' => $class,
151
-
),
152
-
$line);
164
+
'class' => $class.' n',
165
+
'data-n' => $line,
166
+
));
153
167
154
168
$render = $p['render'];
155
169
if ($aural !== null) {
+18
-2
src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php
+18
-2
src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php
···
306
306
// clipboard. See the 'phabricator-oncopy' behavior.
307
307
$zero_space = "\xE2\x80\x8B";
308
308
309
+
$old_number = phutil_tag(
310
+
'td',
311
+
array(
312
+
'id' => $o_id,
313
+
'class' => $o_classes.' n',
314
+
'data-n' => $o_num,
315
+
));
316
+
317
+
$new_number = phutil_tag(
318
+
'td',
319
+
array(
320
+
'id' => $n_id,
321
+
'class' => $n_classes.' n',
322
+
'data-n' => $n_num,
323
+
));
324
+
309
325
$html[] = phutil_tag('tr', array(), array(
310
-
phutil_tag('th', array('id' => $o_id, 'class' => $o_classes), $o_num),
326
+
$old_number,
311
327
phutil_tag('td', array('class' => $o_classes), $o_text),
312
-
phutil_tag('th', array('id' => $n_id, 'class' => $n_classes), $n_num),
328
+
$new_number,
313
329
$n_copy,
314
330
phutil_tag(
315
331
'td',
+2
-2
src/infrastructure/diff/view/PHUIDiffOneUpInlineCommentRowScaffold.php
+2
-2
src/infrastructure/diff/view/PHUIDiffOneUpInlineCommentRowScaffold.php
···
31
31
}
32
32
33
33
$cells = array(
34
-
phutil_tag('th', array(), $left_hidden),
35
-
phutil_tag('th', array(), $right_hidden),
34
+
phutil_tag('td', array('class' => 'n'), $left_hidden),
35
+
phutil_tag('td', array('class' => 'n'), $right_hidden),
36
36
phutil_tag('td', $attrs, $inline),
37
37
);
38
38
+2
-2
src/infrastructure/diff/view/PHUIDiffTwoUpInlineCommentRowScaffold.php
+2
-2
src/infrastructure/diff/view/PHUIDiffTwoUpInlineCommentRowScaffold.php
···
71
71
);
72
72
73
73
$cells = array(
74
-
phutil_tag('th', array(), $left_hidden),
74
+
phutil_tag('td', array('class' => 'n'), $left_hidden),
75
75
phutil_tag('td', $left_attrs, $left_side),
76
-
phutil_tag('th', array(), $right_hidden),
76
+
phutil_tag('td', array('class' => 'n'), $right_hidden),
77
77
phutil_tag('td', $right_attrs, $right_side),
78
78
);
79
79
+28
-21
webroot/rsrc/css/application/differential/changeset-view.css
+28
-21
webroot/rsrc/css/application/differential/changeset-view.css
···
72
72
width: 0;
73
73
}
74
74
75
-
.differential-diff th {
76
-
text-align: right;
77
-
padding: 1px 6px 1px 0;
78
-
vertical-align: top;
79
-
background: {$lightbluebackground};
80
-
color: {$bluetext};
81
-
cursor: pointer;
82
-
border-right: 1px solid {$thinblueborder};
83
-
overflow: hidden;
84
-
85
-
-moz-user-select: -moz-none;
86
-
-khtml-user-select: none;
87
-
-webkit-user-select: none;
88
-
-ms-user-select: none;
89
-
user-select: none;
90
-
}
91
-
92
75
.prose-diff {
93
76
padding: 12px 0;
94
77
white-space: pre-wrap;
···
180
163
181
164
.differential-diff td.comment {
182
165
background: #dddddd;
166
+
}
167
+
168
+
.differential-diff .inline > td {
169
+
padding: 0;
170
+
}
171
+
172
+
/* Specify line number behaviors after other behaviors because line numbers
173
+
should always have a boring grey background. */
174
+
175
+
.differential-diff td.n {
176
+
text-align: right;
177
+
padding: 1px 6px 1px 0;
178
+
vertical-align: top;
179
+
background: {$lightbluebackground};
180
+
color: {$bluetext};
181
+
cursor: pointer;
182
+
border-right: 1px solid {$thinblueborder};
183
+
overflow: hidden;
184
+
185
+
-moz-user-select: -moz-none;
186
+
-khtml-user-select: none;
187
+
-webkit-user-select: none;
188
+
-ms-user-select: none;
189
+
user-select: none;
190
+
}
191
+
192
+
.differential-diff td.n::before {
193
+
content: attr(data-n);
183
194
}
184
195
185
196
.differential-diff td.cov {
···
314
325
left: 0;
315
326
box-sizing: border-box;
316
327
pointer-events: none;
317
-
}
318
-
319
-
.differential-diff .inline > td {
320
-
padding: 0;
321
328
}
322
329
323
330
.differential-loading {
+4
-8
webroot/rsrc/js/application/diff/DiffChangesetList.js
+4
-8
webroot/rsrc/js/application/diff/DiffChangesetList.js
···
70
70
var onrangedown = JX.bind(this, this._ifawake, this._onrangedown);
71
71
JX.Stratcom.listen(
72
72
'mousedown',
73
-
['differential-changeset', 'tag:th'],
73
+
['differential-changeset', 'tag:td'],
74
74
onrangedown);
75
75
76
76
var onrangemove = JX.bind(this, this._ifawake, this._onrangemove);
77
77
JX.Stratcom.listen(
78
78
['mouseover', 'mouseout'],
79
-
['differential-changeset', 'tag:th'],
79
+
['differential-changeset', 'tag:td'],
80
80
onrangemove);
81
81
82
82
var onrangeup = JX.bind(this, this._ifawake, this._onrangeup);
···
360
360
while (row) {
361
361
var header = row.firstChild;
362
362
while (header) {
363
-
if (JX.DOM.isType(header, 'th')) {
363
+
if (this.getLineNumberFromHeader(header)) {
364
364
if (header.className.indexOf('old') !== -1) {
365
365
old_list.push(header);
366
366
} else if (header.className.indexOf('new') !== -1) {
···
1247
1247
},
1248
1248
1249
1249
getLineNumberFromHeader: function(th) {
1250
-
try {
1251
-
return parseInt(th.id.match(/^C\d+[ON]L(\d+)$/)[1], 10);
1252
-
} catch (x) {
1253
-
return null;
1254
-
}
1250
+
return parseInt(th.getAttribute('data-n'));
1255
1251
},
1256
1252
1257
1253
getDisplaySideFromHeader: function(th) {