loading up the forgejo repo on tangled to test page performance
Remove "TODO" tasks from CSS file (#26835)
1. Use `gt-invisible` instead of `invisible`.
2. Use `gt-word-break` instead of `dont-break-out` (there is a slight
different "hyphens", but I think it won't affect too much since it is
only used for the "full name").
3. Remove `.small.button:has(svg)` , now our buttons could layout SVG
correctly, and actually I didn't see this CSS class is used in code.
authored by
wxiaoguang
and committed by
GitHub
d5703d4a
5b5bb8d3
+20
-40
+4
-4
templates/repo/diff/section_split.tmpl
+4
-4
templates/repo/diff/section_split.tmpl
···
47
47
<td class="lines-type-marker lines-type-marker-old del-code"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
48
48
<td class="lines-code lines-code-old del-code">{{/*
49
49
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
50
-
*/}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
50
+
*/}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} gt-invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
51
51
*/}}{{svg "octicon-plus"}}{{/*
52
52
*/}}</button>{{/*
53
53
*/}}{{end}}{{/*
···
62
62
<td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="gt-mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{end}}</td>
63
63
<td class="lines-code lines-code-new add-code">{{/*
64
64
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
65
-
*/}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $match.CanComment)}} invisible{{end}}" data-side="right" data-idx="{{$match.RightIdx}}">{{/*
65
+
*/}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $match.CanComment)}} gt-invisible{{end}}" data-side="right" data-idx="{{$match.RightIdx}}">{{/*
66
66
*/}}{{svg "octicon-plus"}}{{/*
67
67
*/}}</button>{{/*
68
68
*/}}{{end}}{{/*
···
79
79
<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
80
80
<td class="lines-code lines-code-old">{{/*
81
81
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/*
82
-
*/}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
82
+
*/}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} gt-invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
83
83
*/}}{{svg "octicon-plus"}}{{/*
84
84
*/}}</button>{{/*
85
85
*/}}{{end}}{{/*
···
94
94
<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
95
95
<td class="lines-code lines-code-new">{{/*
96
96
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/*
97
-
*/}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">{{/*
97
+
*/}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} gt-invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">{{/*
98
98
*/}}{{svg "octicon-plus"}}{{/*
99
99
*/}}</button>{{/*
100
100
*/}}{{end}}{{/*
+1
-1
templates/repo/diff/section_unified.tmpl
+1
-1
templates/repo/diff/section_unified.tmpl
···
52
52
{{else}}
53
53
<td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{/*
54
54
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
55
-
*/}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}{{if (not $line.CanComment)}} invisible{{end}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">{{/*
55
+
*/}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}{{if (not $line.CanComment)}} gt-invisible{{end}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">{{/*
56
56
*/}}{{svg "octicon-plus"}}{{/*
57
57
*/}}</button>{{/*
58
58
*/}}{{end}}{{/*
+3
-3
templates/repo/issue/labels/labels_selector_field.tmpl
+3
-3
templates/repo/issue/labels/labels_selector_field.tmpl
···
21
21
<div class="divider"></div>
22
22
{{end}}
23
23
{{$previousExclusiveScope = $exclusiveScope}}
24
-
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span> {{RenderLabel $.Context .}}
24
+
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}gt-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span> {{RenderLabel $.Context .}}
25
25
{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}</a>
26
26
{{end}}
27
27
<div class="divider"></div>
28
-
{{$previousExclusiveScope := "_no_scope"}}
28
+
{{$previousExclusiveScope = "_no_scope"}}
29
29
{{range .OrgLabels}}
30
30
{{$exclusiveScope := .ExclusiveScope}}
31
31
{{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}}
32
32
<div class="divider"></div>
33
33
{{end}}
34
34
{{$previousExclusiveScope = $exclusiveScope}}
35
-
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span> {{RenderLabel $.Context .}}
35
+
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}gt-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span> {{RenderLabel $.Context .}}
36
36
{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}</a>
37
37
{{end}}
38
38
{{else}}
+1
-1
templates/repo/issue/new_form.tmpl
+1
-1
templates/repo/issue/new_form.tmpl
···
158
158
<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_assignees"}}</div>
159
159
{{range .Assignees}}
160
160
<a class="item muted" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
161
-
<span class="octicon-check invisible">{{svg "octicon-check"}}</span>
161
+
<span class="octicon-check gt-invisible">{{svg "octicon-check"}}</span>
162
162
<span class="text">
163
163
{{ctx.AvatarUtils.Avatar . 28 "gt-mr-3"}}{{template "repo/search_name" .}}
164
164
</span>
-20
web_src/css/base.css
-20
web_src/css/base.css
···
506
506
border-right-color: var(--color-primary);
507
507
}
508
508
509
-
/* fix button enlarged vertically by svg icon */
510
-
/* TODO: change to just `.small.button:has(svg)` but may have global side effects */
511
-
.ui.action.input .small.button:has(svg) {
512
-
padding-top: 7px !important;
513
-
padding-bottom: 7px !important;
514
-
}
515
-
516
509
.ui.menu,
517
510
.ui.vertical.menu {
518
511
background: var(--color-menu);
···
951
944
.ui.warning.message .header {
952
945
color: inherit;
953
946
filter: saturate(2);
954
-
}
955
-
956
-
/* TODO: use gt-word-break instead */
957
-
.dont-break-out {
958
-
overflow-wrap: break-word;
959
-
word-wrap: break-word;
960
-
word-break: break-all;
961
-
hyphens: auto;
962
947
}
963
948
964
949
.full.height {
···
2012
1997
2013
1998
.ui.label > .color-icon {
2014
1999
margin-left: 0;
2015
-
}
2016
-
2017
-
/* TODO: replace it with gt-invisible */
2018
-
.invisible {
2019
-
visibility: hidden;
2020
2000
}
2021
2001
2022
2002
.ui.segment,
+2
-2
web_src/js/features/repo-diff.js
+2
-2
web_src/js/features/repo-diff.js
···
64
64
65
65
$form.closest('.conversation-holder').replaceWith($newConversationHolder);
66
66
if ($form.closest('tr').data('line-type') === 'same') {
67
-
$(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).addClass('invisible');
67
+
$(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).addClass('gt-invisible');
68
68
} else {
69
-
$(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).addClass('invisible');
69
+
$(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).addClass('gt-invisible');
70
70
}
71
71
$newConversationHolder.find('.dropdown').dropdown();
72
72
initCompReactionSelector($newConversationHolder);
+3
-3
web_src/js/features/repo-issue.js
+3
-3
web_src/js/features/repo-issue.js
···
110
110
}
111
111
filteredResponse.results.push({
112
112
name: `#${issue.number} ${htmlEscape(issue.title)
113
-
}<div class="text small dont-break-out">${htmlEscape(issue.repository.full_name)}</div>`,
113
+
}<div class="text small gt-word-break">${htmlEscape(issue.repository.full_name)}</div>`,
114
114
value: issue.id,
115
115
});
116
116
});
···
178
178
const idx = $conversationHolder.data('idx');
179
179
const lineType = $conversationHolder.closest('tr').data('line-type');
180
180
if (lineType === 'same') {
181
-
$(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).removeClass('invisible');
181
+
$(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).removeClass('gt-invisible');
182
182
} else {
183
-
$(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).removeClass('invisible');
183
+
$(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).removeClass('gt-invisible');
184
184
}
185
185
$conversationHolder.remove();
186
186
}
+3
-3
web_src/js/features/repo-legacy.js
+3
-3
web_src/js/features/repo-legacy.js
···
150
150
151
151
if ($(this).hasClass('checked')) {
152
152
$(this).removeClass('checked');
153
-
$(this).find('.octicon-check').addClass('invisible');
153
+
$(this).find('.octicon-check').addClass('gt-invisible');
154
154
if (hasUpdateAction) {
155
155
if (!($(this).data('id') in items)) {
156
156
items[$(this).data('id')] = {
···
164
164
}
165
165
} else {
166
166
$(this).addClass('checked');
167
-
$(this).find('.octicon-check').removeClass('invisible');
167
+
$(this).find('.octicon-check').removeClass('gt-invisible');
168
168
if (hasUpdateAction) {
169
169
if (!($(this).data('id') in items)) {
170
170
items[$(this).data('id')] = {
···
215
215
216
216
$(this).parent().find('.item').each(function () {
217
217
$(this).removeClass('checked');
218
-
$(this).find('.octicon-check').addClass('invisible');
218
+
$(this).find('.octicon-check').addClass('gt-invisible');
219
219
});
220
220
221
221
if (selector === 'select-reviewers-modify' || selector === 'select-assignees-modify') {