@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
Make inline comments more discoverable
Summary:
Ref T2009. Right now, when you mouse over a line number, we change the cursor to a "pointer", but that's the only hint we provide about the existence of inline comments.
Occasionally, users have reported confusion around how to leave inline comments.
Try to increase discoverability by showing the line reticle when you hover over the line.
(I could take this or leave it, but it seems OK / not annoying after 15 seconds of playing with it.)
Test Plan: Waved cursor over line numbers, attempted to test all the editor/noncontiguous/across-files cases.
Reviewers: btrahan, chad
Reviewed By: btrahan
Subscribers: epriestley
Maniphest Tasks: T2009
Differential Revision: https://secure.phabricator.com/D12010
+93
-15
+7
-7
resources/celerity/map.php
+7
-7
resources/celerity/map.php
···
10
10
'core.pkg.css' => '6408f2d3',
11
11
'core.pkg.js' => '5a1c336d',
12
12
'darkconsole.pkg.js' => '8ab24e01',
13
-
'differential.pkg.css' => 'df94a9e2',
14
-
'differential.pkg.js' => 'f458a7dc',
13
+
'differential.pkg.css' => '5f5d3a4c',
14
+
'differential.pkg.js' => '58dae818',
15
15
'diffusion.pkg.css' => '591664fa',
16
16
'diffusion.pkg.js' => 'bfc0737b',
17
17
'maniphest.pkg.css' => '68d4dd3d',
···
55
55
'rsrc/css/application/dashboard/dashboard.css' => '17937d22',
56
56
'rsrc/css/application/diff/inline-comment-summary.css' => 'eb5f8e8c',
57
57
'rsrc/css/application/differential/add-comment.css' => 'c478bcaa',
58
-
'rsrc/css/application/differential/changeset-view.css' => '88100552',
58
+
'rsrc/css/application/differential/changeset-view.css' => 'f9011399',
59
59
'rsrc/css/application/differential/core.css' => '7ac3cabc',
60
60
'rsrc/css/application/differential/results-table.css' => '181aa9d9',
61
61
'rsrc/css/application/differential/revision-comment.css' => '48186045',
···
367
367
'rsrc/js/application/differential/behavior-comment-preview.js' => '6932def3',
368
368
'rsrc/js/application/differential/behavior-diff-radios.js' => 'e1ff79b1',
369
369
'rsrc/js/application/differential/behavior-dropdown-menus.js' => '2035b9cb',
370
-
'rsrc/js/application/differential/behavior-edit-inline-comments.js' => '33d4c5e2',
370
+
'rsrc/js/application/differential/behavior-edit-inline-comments.js' => '334267b3',
371
371
'rsrc/js/application/differential/behavior-keyboard-nav.js' => '2c426492',
372
372
'rsrc/js/application/differential/behavior-populate.js' => '8694b1df',
373
373
'rsrc/js/application/differential/behavior-show-field-details.js' => 'bba9eedf',
···
518
518
'conpherence-notification-css' => '04a6e10a',
519
519
'conpherence-update-css' => '1099a660',
520
520
'conpherence-widget-pane-css' => '3d575438',
521
-
'differential-changeset-view-css' => '88100552',
521
+
'differential-changeset-view-css' => 'f9011399',
522
522
'differential-core-view-css' => '7ac3cabc',
523
523
'differential-inline-comment-editor' => '41060c54',
524
524
'differential-results-table-css' => '181aa9d9',
···
569
569
'javelin-behavior-differential-comment-jump' => '4fdb476d',
570
570
'javelin-behavior-differential-diff-radios' => 'e1ff79b1',
571
571
'javelin-behavior-differential-dropdown-menus' => '2035b9cb',
572
-
'javelin-behavior-differential-edit-inline-comments' => '33d4c5e2',
572
+
'javelin-behavior-differential-edit-inline-comments' => '334267b3',
573
573
'javelin-behavior-differential-feedback-preview' => '6932def3',
574
574
'javelin-behavior-differential-keyboard-navigation' => '2c426492',
575
575
'javelin-behavior-differential-populate' => '8694b1df',
···
1027
1027
'331b1611' => array(
1028
1028
'javelin-install',
1029
1029
),
1030
-
'33d4c5e2' => array(
1030
+
'334267b3' => array(
1031
1031
'javelin-behavior',
1032
1032
'javelin-stratcom',
1033
1033
'javelin-dom',
+4
webroot/rsrc/css/application/differential/changeset-view.css
+4
webroot/rsrc/css/application/differential/changeset-view.css
+82
-8
webroot/rsrc/js/application/differential/behavior-edit-inline-comments.js
+82
-8
webroot/rsrc/js/application/differential/behavior-edit-inline-comments.js
···
12
12
13
13
var selecting = false;
14
14
var reticle = JX.$N('div', {className: 'differential-reticle'});
15
+
var old_cells = [];
15
16
JX.DOM.hide(reticle);
16
17
17
18
var origin = null;
···
65
66
dim.setDim(reticle);
66
67
67
68
JX.DOM.show(reticle);
69
+
70
+
// Find all the cells in the same row position between the top and bottom
71
+
// cell, so we can highlight them.
72
+
var seq = 0;
73
+
var row = top.parentNode;
74
+
for (seq = 0; seq < row.childNodes.length; seq++) {
75
+
if (row.childNodes[seq] == top) {
76
+
break;
77
+
}
78
+
}
79
+
80
+
var cells = [];
81
+
while (true) {
82
+
cells.push(row.childNodes[seq]);
83
+
if (row.childNodes[seq] == bot) {
84
+
break;
85
+
}
86
+
row = row.nextSibling;
87
+
}
88
+
89
+
setSelectedCells(cells);
90
+
}
91
+
92
+
function setSelectedCells(new_cells) {
93
+
updateSelectedCellsClass(old_cells, false);
94
+
updateSelectedCellsClass(new_cells, true);
95
+
old_cells = new_cells;
96
+
}
97
+
98
+
function updateSelectedCellsClass(cells, selected) {
99
+
for (var ii = 0; ii < cells.length; ii++) {
100
+
JX.DOM.alterClass(cells[ii], 'selected', selected);
101
+
}
68
102
}
69
103
70
104
function hideReticle() {
71
105
JX.DOM.hide(reticle);
106
+
setSelectedCells([]);
72
107
}
73
108
74
109
JX.DifferentialInlineCommentEditor.listen('done', function() {
···
128
163
});
129
164
130
165
JX.Stratcom.listen(
131
-
'mouseover',
166
+
['mouseover', 'mouseout'],
132
167
['differential-changeset', 'tag:th'],
133
168
function(e) {
134
-
if (!selecting ||
135
-
editor ||
136
-
(getRowNumber(e.getTarget()) === undefined) ||
137
-
(isOnRight(e.getTarget()) != isOnRight(origin)) ||
138
-
(e.getNode('differential-changeset') !== root)) {
169
+
if (editor) {
170
+
// Don't update the reticle if we're editing a comment, since this
171
+
// would be distracting and we want to keep the lines corresponding
172
+
// to the comment highlighted during the edit.
139
173
return;
140
174
}
141
175
142
-
target = e.getTarget();
176
+
if (getRowNumber(e.getTarget()) === undefined) {
177
+
// Don't update the reticle if this "<th />" doesn't correspond to a
178
+
// line number. For instance, this may be a dead line number, like the
179
+
// empty line numbers on the left hand side of a newly added file.
180
+
return;
181
+
}
182
+
183
+
if (selecting) {
184
+
if (isOnRight(e.getTarget()) != isOnRight(origin)) {
185
+
// Don't update the reticle if we're selecting a line range and the
186
+
// "<th />" under the cursor is on the wrong side of the file. You
187
+
// can only leave inline comments on the left or right side of a
188
+
// file, not across lines on both sides.
189
+
return;
190
+
}
191
+
192
+
if (e.getNode('differential-changeset') !== root) {
193
+
// Don't update the reticle if we're selecting a line range and
194
+
// the "<th />" under the cursor corresponds to a different file.
195
+
// You can only leave inline comments on lines in a single file,
196
+
// not across multiple files.
197
+
return;
198
+
}
199
+
}
143
200
144
-
updateReticle();
201
+
if (e.getType() == 'mouseout') {
202
+
if (selecting) {
203
+
// Don't hide the reticle if we're selecting, since we want to
204
+
// keep showing the line range that will be used if the mouse is
205
+
// released.
206
+
return;
207
+
}
208
+
hideReticle();
209
+
} else {
210
+
target = e.getTarget();
211
+
if (!selecting) {
212
+
// If we're just hovering the mouse and not selecting a line range,
213
+
// set the origin to the current row so we highlight it.
214
+
origin = target;
215
+
}
216
+
217
+
updateReticle();
218
+
}
145
219
});
146
220
147
221
JX.Stratcom.listen(