@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
Revert changes to Diffusion blame view
Summary:
Ref PHI174. This reverts most of these changes:
- 37843127e94a878a7f5bf2c65c8e7004bc65c68a / D18481
- 94cad30ac3f052a711ececf7e370bf5c0071827f / D18474
- 12ae08b6b1a1b7c330593e76c32817f7cdbc87dd / D18473
- 0a013341721f8b1fc249047fe6db26062138b562 / D18462
- ac91ab1ef9196eee0deabfd70157ccc0d53d666e / D18452
These changes made the Diffusion blame view very similar to GitHub's blame view. See D18452 for a before/after of the bulk of these changes; the other revisions are bugfixes.
I think this was generally a step backward, and not motivated by solving a specific problem. I've found the new UI less usable than the old one, and at least one install (see PHI174) also has.
In particular, the revision/commit titles are very bulky and not terribly useful; the date column also isn't terribly useful; the "age" color actually IS pretty useful and was heavily de-emphasized.
I've kept one bugfix here (missing `'a'` tag type) and kept the upgraded icon for "Skip Past This Commit".
I'm going to follow this up with some additional changes:
- Show a small author profile icon, similar to GitHub, to address PHI174 more directly.
- Try a zebra-stripe on blocks of rows to make it more clear where changes affected by a particular commit begin and end.
- Try a hue shift, not just a brightness/saturation shift, to make the "age" color more distinct.
- Try computing colors as even steps, not based purely on age. Currently, if a file has one long-distant commit and several recent commits, all the recent ones show up as very bright green. I think this would probably be more useful if they were distributed more evenly across the available color bands.
Test Plan:
Viewed blame views in Diffusion, saw a more compact UI similar to the old UI.
{F5251019}
Reviewers: amckinley
Reviewed By: amckinley
Differential Revision: https://secure.phabricator.com/D18746
+88
-84
+2
-2
resources/celerity/map.php
+2
-2
resources/celerity/map.php
···
73
73
'rsrc/css/application/diffusion/diffusion-icons.css' => '0c15255e',
74
74
'rsrc/css/application/diffusion/diffusion-readme.css' => '419dd5b6',
75
75
'rsrc/css/application/diffusion/diffusion-repository.css' => 'ee6f20ec',
76
-
'rsrc/css/application/diffusion/diffusion-source.css' => '69ac9399',
76
+
'rsrc/css/application/diffusion/diffusion-source.css' => '3a1056d8',
77
77
'rsrc/css/application/diffusion/diffusion.css' => '45727264',
78
78
'rsrc/css/application/feed/feed.css' => 'ecd4ec57',
79
79
'rsrc/css/application/files/global-drag-and-drop.css' => 'b556a948',
···
572
572
'diffusion-icons-css' => '0c15255e',
573
573
'diffusion-readme-css' => '419dd5b6',
574
574
'diffusion-repository-css' => 'ee6f20ec',
575
-
'diffusion-source-css' => '69ac9399',
575
+
'diffusion-source-css' => '3a1056d8',
576
576
'diviner-shared-css' => '896f1d43',
577
577
'font-fontawesome' => 'e838e088',
578
578
'font-lato' => 'c7ccd872',
+68
-41
src/applications/diffusion/controller/DiffusionBrowseController.php
+68
-41
src/applications/diffusion/controller/DiffusionBrowseController.php
···
1127
1127
));
1128
1128
}
1129
1129
1130
+
$skip_text = pht('Skip Past This Commit');
1131
+
$skip_icon = id(new PHUIIconView())
1132
+
->setIcon('fa-caret-square-o-left');
1133
+
1130
1134
foreach ($display as $line_index => $line) {
1131
1135
$row = array();
1132
1136
···
1142
1146
$revision_link = null;
1143
1147
$commit_link = null;
1144
1148
$before_link = null;
1145
-
$commit_date = null;
1146
1149
1147
-
$style = 'border-right: 3px solid '.$line['color'].';';
1150
+
$style = 'background: '.$line['color'].';';
1148
1151
1149
1152
if ($identifier && !$line['duplicate']) {
1150
1153
if (isset($commit_links[$identifier])) {
1151
-
$commit_link = $commit_links[$identifier]['link'];
1152
-
$commit_date = $commit_links[$identifier]['date'];
1154
+
$commit_link = $commit_links[$identifier];
1153
1155
}
1154
1156
1155
1157
if (isset($revision_map[$identifier])) {
···
1160
1162
}
1161
1163
1162
1164
$skip_href = $line_href.'?before='.$identifier.'&view=blame';
1163
-
$skip_text = pht('Skip Past This Commit');
1164
-
$icon = id(new PHUIIconView())
1165
-
->setIcon('fa-caret-square-o-left');
1166
-
1167
1165
$before_link = javelin_tag(
1168
1166
'a',
1169
1167
array(
···
1175
1173
'size' => 300,
1176
1174
),
1177
1175
),
1178
-
$icon);
1176
+
$skip_icon);
1179
1177
}
1180
1178
1181
1179
if ($show_blame) {
···
1186
1184
),
1187
1185
$before_link);
1188
1186
1189
-
$row[] = phutil_tag(
1190
-
'th',
1191
-
array(
1192
-
'class' => 'diffusion-rev-link',
1193
-
),
1194
-
$commit_link);
1195
-
1196
-
if ($revision_map) {
1197
-
$row[] = phutil_tag(
1198
-
'th',
1199
-
array(
1200
-
'class' => 'diffusion-blame-revision',
1201
-
),
1202
-
$revision_link);
1187
+
$object_links = array();
1188
+
$object_links[] = $commit_link;
1189
+
if ($revision_link) {
1190
+
$object_links[] = phutil_tag('span', array(), '/');
1191
+
$object_links[] = $revision_link;
1203
1192
}
1204
1193
1205
1194
$row[] = phutil_tag(
1206
1195
'th',
1207
1196
array(
1208
-
'class' => 'diffusion-blame-date',
1197
+
'class' => 'diffusion-rev-link',
1209
1198
),
1210
-
$commit_date);
1199
+
$object_links);
1211
1200
}
1212
1201
1213
1202
$line_link = phutil_tag(
1214
1203
'a',
1215
1204
array(
1216
1205
'href' => $line_href,
1206
+
'style' => $style,
1217
1207
),
1218
1208
$line_number);
1219
1209
1220
1210
$row[] = javelin_tag(
1221
1211
'th',
1222
1212
array(
1223
-
'class' => 'diffusion-line-link ',
1213
+
'class' => 'diffusion-line-link',
1224
1214
'sigil' => 'phabricator-source-line',
1225
1215
'style' => $style,
1226
1216
),
···
1536
1526
return head($parents);
1537
1527
}
1538
1528
1529
+
private function renderRevisionTooltip(
1530
+
DifferentialRevision $revision,
1531
+
$handles) {
1532
+
$viewer = $this->getRequest()->getUser();
1533
+
1534
+
$date = phabricator_date($revision->getDateModified(), $viewer);
1535
+
$id = $revision->getID();
1536
+
$title = $revision->getTitle();
1537
+
$header = "D{$id} {$title}";
1538
+
1539
+
$author = $handles[$revision->getAuthorPHID()]->getName();
1540
+
1541
+
return "{$header}\n{$date} \xC2\xB7 {$author}";
1542
+
}
1543
+
1544
+
private function renderCommitTooltip(
1545
+
PhabricatorRepositoryCommit $commit,
1546
+
$author) {
1547
+
1548
+
$viewer = $this->getRequest()->getUser();
1549
+
1550
+
$date = phabricator_date($commit->getEpoch(), $viewer);
1551
+
$summary = trim($commit->getSummary());
1552
+
1553
+
return "{$summary}\n{$date} \xC2\xB7 {$author}";
1554
+
}
1555
+
1539
1556
protected function markupText($text) {
1540
1557
$engine = PhabricatorMarkupEngine::newDiffusionMarkupEngine();
1541
1558
$engine->setConfig('viewer', $this->getRequest()->getUser());
···
1743
1760
->setViewer($viewer)
1744
1761
->withRepository($repository)
1745
1762
->withIdentifiers($identifiers)
1763
+
// TODO: We only fetch this to improve author display behavior, but
1764
+
// shouldn't really need to?
1765
+
->needCommitData(true)
1746
1766
->execute();
1747
1767
$commits = mpull($commits, null, 'getCommitIdentifier');
1748
1768
} else {
···
1754
1774
1755
1775
private function renderCommitLinks(array $commits, $handles) {
1756
1776
$links = array();
1757
-
$viewer = $this->getViewer();
1758
1777
foreach ($commits as $identifier => $commit) {
1759
-
$date = phabricator_date($commit->getEpoch(), $viewer);
1760
-
$summary = trim($commit->getSummary());
1761
-
1762
-
$commit_link = phutil_tag(
1763
-
'a',
1764
-
array(
1765
-
'href' => $commit->getURI(),
1766
-
),
1767
-
$summary);
1778
+
$tooltip = $this->renderCommitTooltip(
1779
+
$commit,
1780
+
$commit->renderAuthorShortName($handles));
1768
1781
1769
-
$commit_date = phutil_tag(
1782
+
$commit_link = javelin_tag(
1770
1783
'a',
1771
1784
array(
1772
1785
'href' => $commit->getURI(),
1786
+
'sigil' => 'has-tooltip',
1787
+
'meta' => array(
1788
+
'tip' => $tooltip,
1789
+
'align' => 'E',
1790
+
'size' => 600,
1791
+
),
1773
1792
),
1774
-
$date);
1793
+
$commit->getLocalName());
1775
1794
1776
-
$links[$identifier]['link'] = $commit_link;
1777
-
$links[$identifier]['date'] = $commit_date;
1795
+
$links[$identifier] = $commit_link;
1778
1796
}
1779
1797
1780
1798
return $links;
···
1785
1803
1786
1804
foreach ($revisions as $revision) {
1787
1805
$revision_id = $revision->getID();
1788
-
$revision_link = phutil_tag(
1806
+
1807
+
$tooltip = $this->renderRevisionTooltip($revision, $handles);
1808
+
1809
+
$revision_link = javelin_tag(
1789
1810
'a',
1790
1811
array(
1791
1812
'href' => '/'.$revision->getMonogram(),
1813
+
'sigil' => 'has-tooltip',
1814
+
'meta' => array(
1815
+
'tip' => $tooltip,
1816
+
'align' => 'E',
1817
+
'size' => 600,
1818
+
),
1792
1819
),
1793
1820
$revision->getMonogram());
1794
1821
+18
-41
webroot/rsrc/css/application/diffusion/diffusion-source.css
+18
-41
webroot/rsrc/css/application/diffusion/diffusion-source.css
···
13
13
-webkit-overflow-scrolling: touch;
14
14
}
15
15
16
-
.diffusion-source tr.phabricator-source-highlight th,
17
-
.diffusion-source tr.phabricator-source-highlight td {
18
-
background: {$gentle.highlight};
16
+
.diffusion-source tr.phabricator-source-highlight {
17
+
background: {$sh-yellowbackground};
19
18
}
20
19
21
20
.diffusion-source th {
22
21
text-align: right;
23
22
vertical-align: top;
24
-
color: {$darkbluetext};
23
+
background: {$lightgreybackground};
24
+
color: {$bluetext};
25
25
border-right: 1px solid {$thinblueborder};
26
26
}
27
27
28
28
.diffusion-source td {
29
29
vertical-align: top;
30
30
white-space: pre-wrap;
31
-
padding: 3px 12px;
31
+
padding-top: 1px;
32
+
padding-bottom: 1px;
33
+
padding-left: 8px;
32
34
width: 100%;
33
35
word-break: break-all;
34
36
}
···
43
45
}
44
46
45
47
.diffusion-blame-link,
46
-
.diffusion-rev-link,
47
-
.diffusion-blame-date {
48
+
.diffusion-rev-link {
48
49
white-space: nowrap;
49
50
}
50
51
51
-
.diffusion-blame-date,
52
-
.diffusion-blame-link,
53
-
.diffusion-blame-revision,
54
-
.diffusion-rev-link {
55
-
background: {$lightgreybackground};
56
-
font: {$basefont};
57
-
font-size: {$smallerfontsize};
52
+
.diffusion-blame-link {
53
+
min-width: 28px;
58
54
}
59
55
60
56
.diffusion-source th.diffusion-rev-link {
···
62
58
min-width: 130px;
63
59
}
64
60
65
-
.diffusion-source a {
61
+
.diffusion-blame-link a,
62
+
.diffusion-rev-link a,
63
+
.diffusion-line-link a {
66
64
color: {$darkbluetext};
67
65
}
68
66
69
-
.diffusion-rev-link a {
70
-
max-width: 300px;
71
-
overflow: hidden;
72
-
white-space: nowrap;
73
-
text-overflow: ellipsis;
74
-
margin: 3px 8px;
75
-
display: block;
76
-
}
77
-
78
-
.diffusion-blame-date a,
79
-
.diffusion-blame-revision a {
80
-
float: right;
81
-
margin: 3px 8px;
67
+
.diffusion-rev-link a,
68
+
.diffusion-rev-link span {
69
+
margin: 2px 8px 0;
70
+
display: inline-block;
82
71
}
83
72
84
73
.diffusion-rev-link span {
···
91
80
.diffusion-line-link a {
92
81
/* Give the user a larger click target. */
93
82
display: block;
94
-
padding: 4px 8px 3px;
95
-
}
96
-
97
-
.diffusion-line-link a {
98
-
color: {$lightgreytext};
99
-
}
100
-
101
-
.diffusion-blame-link a .phui-icon-view {
102
-
color: {$bluetext};
103
-
}
104
-
105
-
.diffusion-blame-link a:hover .phui-icon-view {
106
-
color: {$sky};
83
+
padding: 2px 8px;
107
84
}
108
85
109
86
.diffusion-line-link {