@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
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
+32
-14
+7
-7
resources/celerity/map.php
+7
-7
resources/celerity/map.php
···
12
12
'core.pkg.css' => '6a8c9533',
13
13
'core.pkg.js' => '6e5c894f',
14
14
'differential.pkg.css' => 'ce54994e',
15
-
'differential.pkg.js' => '49515551',
15
+
'differential.pkg.js' => '68fa36fc',
16
16
'diffusion.pkg.css' => '42c75c37',
17
17
'diffusion.pkg.js' => 'a98c0bf7',
18
18
'maniphest.pkg.css' => '35995d6d',
···
377
377
'rsrc/js/application/dashboard/behavior-dashboard-query-panel-select.js' => '1e413dc9',
378
378
'rsrc/js/application/dashboard/behavior-dashboard-tab-panel.js' => '0116d3e8',
379
379
'rsrc/js/application/diff/DiffChangeset.js' => 'a31ffc00',
380
-
'rsrc/js/application/diff/DiffChangesetList.js' => '40850e53',
380
+
'rsrc/js/application/diff/DiffChangesetList.js' => '22f6bb51',
381
381
'rsrc/js/application/diff/DiffInline.js' => 'a4a14a94',
382
382
'rsrc/js/application/diff/behavior-preview-link.js' => 'f51e9c17',
383
383
'rsrc/js/application/differential/behavior-diff-radios.js' => '925fe8cd',
···
774
774
'phabricator-darkmessage' => '26cd4b73',
775
775
'phabricator-dashboard-css' => '5a205b9d',
776
776
'phabricator-diff-changeset' => 'a31ffc00',
777
-
'phabricator-diff-changeset-list' => '40850e53',
777
+
'phabricator-diff-changeset-list' => '22f6bb51',
778
778
'phabricator-diff-inline' => 'a4a14a94',
779
779
'phabricator-drag-and-drop-file-upload' => '4370900d',
780
780
'phabricator-draggable-list' => 'c9ad6f70',
···
1075
1075
'javelin-typeahead-source',
1076
1076
'javelin-util',
1077
1077
),
1078
+
'22f6bb51' => array(
1079
+
'javelin-install',
1080
+
'phuix-button-view',
1081
+
),
1078
1082
23387297 => array(
1079
1083
'javelin-install',
1080
1084
'javelin-util',
···
1255
1259
'407ee861' => array(
1256
1260
'javelin-behavior',
1257
1261
'javelin-uri',
1258
-
),
1259
-
'40850e53' => array(
1260
-
'javelin-install',
1261
-
'phuix-button-view',
1262
1262
),
1263
1263
'4234f572' => array(
1264
1264
'syntax-default-css',
+8
-1
src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php
+8
-1
src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php
···
453
453
'class' => 'n',
454
454
));
455
455
456
+
$copy_gutter = phutil_tag(
457
+
'td',
458
+
array(
459
+
'class' => 'copy',
460
+
));
461
+
456
462
$new_content_cell = phutil_tag(
457
463
'td',
458
464
array(
459
465
'class' => $new_classes,
460
-
'colspan' => '3',
466
+
'colspan' => '2',
461
467
),
462
468
$new_content);
463
469
···
468
474
$old_line_cell,
469
475
$old_content_cell,
470
476
$new_line_cell,
477
+
$copy_gutter,
471
478
$new_content_cell,
472
479
));
473
480
+17
-6
webroot/rsrc/js/application/diff/DiffChangesetList.js
+17
-6
webroot/rsrc/js/application/diff/DiffChangesetList.js
···
1196
1196
}
1197
1197
1198
1198
// Find the leftmost cell that we're going to highlight: this is the next
1199
-
// <td /> in the row. In 2up views, it should be directly adjacent. In
1199
+
// <td /> in the row that does not have a "data-n" (line number)
1200
+
// attribute. In 2up views, it should be directly adjacent. In
1200
1201
// 1up views, we may have to skip over the other line number column.
1201
1202
var l = top;
1202
-
while (JX.DOM.isType(l, 'th')) {
1203
+
while (l.nextSibling && l.getAttribute('data-n')) {
1203
1204
l = l.nextSibling;
1204
1205
}
1205
1206
1206
1207
// Find the rightmost cell that we're going to highlight: this is the
1207
-
// farthest consecutive, adjacent <td /> in the row. Sometimes the left
1208
-
// and right nodes are the same (left side of 2up view); sometimes we're
1209
-
// going to highlight several nodes (copy + code + coverage).
1208
+
// farthest consecutive, adjacent <td /> in the row that does not have
1209
+
// a "data-n" (line number) attribute. Sometimes the left and right nodes
1210
+
// are the same (left side of 2up view); sometimes we're going to
1211
+
// highlight several nodes (copy + code + coverage).
1210
1212
var r = l;
1211
-
while (r.nextSibling && JX.DOM.isType(r.nextSibling, 'td')) {
1213
+
while (true) {
1214
+
// No more cells in the row, so we can't keep expanding.
1215
+
if (!r.nextSibling) {
1216
+
break;
1217
+
}
1218
+
1219
+
if (r.nextSibling.getAttribute('data-n')) {
1220
+
break;
1221
+
}
1222
+
1212
1223
r = r.nextSibling;
1213
1224
}
1214
1225