Skip to content

Commit 6d54983

Browse files
matthiaskrgrmatthiaskrgr
authored
Rollup merge of #143192 - GuillaumeGomez:code-line-number, r=lolbinary
Improve CSS for source code block line numbers Extract some changes from #137229 to make the PR smaller (thanks `@yotamofek` for the suggestion!). r? notriddle
2 parents 25face9 + 7c3bdda commit 6d54983

File tree

4 files changed

+55
-78
lines changed

4 files changed

+55
-78
lines changed

‎src/librustdoc/html/static/css/rustdoc.css

Lines changed: 30 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
3. Copy the filenames with updated suffixes from the directory.
99
*/
1010

11+
/* ignore-tidy-filelength */
12+
1113
:root {
1214
--nav-sub-mobile-padding: 8px;
1315
--search-typename-width: 6.75rem;
@@ -915,32 +917,30 @@ ul.block, .block li, .block ul {
915917
overflow: auto;
916918
}
917919

918-
.example-wrap.digits-1:not(.hide-lines) [data-nosnippet] {
919-
width: calc(1ch + var(--line-number-padding) * 2);
920-
}
921-
.example-wrap.digits-2:not(.hide-lines) [data-nosnippet] {
922-
width: calc(2ch + var(--line-number-padding) * 2);
923-
}
924-
.example-wrap.digits-3:not(.hide-lines) [data-nosnippet] {
925-
width: calc(3ch + var(--line-number-padding) * 2);
926-
}
927-
.example-wrap.digits-4:not(.hide-lines) [data-nosnippet] {
928-
width: calc(4ch + var(--line-number-padding) * 2);
929-
}
930-
.example-wrap.digits-5:not(.hide-lines) [data-nosnippet] {
931-
width: calc(5ch + var(--line-number-padding) * 2);
932-
}
933-
.example-wrap.digits-6:not(.hide-lines) [data-nosnippet] {
934-
width: calc(6ch + var(--line-number-padding) * 2);
920+
.example-wrap code {
921+
position: relative;
935922
}
936-
.example-wrap.digits-7:not(.hide-lines) [data-nosnippet] {
937-
width: calc(7ch + var(--line-number-padding) * 2);
923+
.example-wrap pre code span {
924+
display: inline;
938925
}
939-
.example-wrap.digits-8:not(.hide-lines) [data-nosnippet] {
940-
width: calc(8ch + var(--line-number-padding) * 2);
926+
927+
.example-wrap.digits-1 { --example-wrap-digits-count: 1ch; }
928+
.example-wrap.digits-2 { --example-wrap-digits-count: 2ch; }
929+
.example-wrap.digits-3 { --example-wrap-digits-count: 3ch; }
930+
.example-wrap.digits-4 { --example-wrap-digits-count: 4ch; }
931+
.example-wrap.digits-5 { --example-wrap-digits-count: 5ch; }
932+
.example-wrap.digits-6 { --example-wrap-digits-count: 6ch; }
933+
.example-wrap.digits-7 { --example-wrap-digits-count: 7ch; }
934+
.example-wrap.digits-8 { --example-wrap-digits-count: 8ch; }
935+
.example-wrap.digits-9 { --example-wrap-digits-count: 9ch; }
936+
937+
.example-wrap [data-nosnippet] {
938+
width: calc(var(--example-wrap-digits-count) + var(--line-number-padding) * 2);
941939
}
942-
.example-wrap.digits-9:not(.hide-lines) [data-nosnippet] {
943-
width: calc(9ch + var(--line-number-padding) * 2);
940+
.example-wrap pre > code {
941+
padding-left: calc(
942+
var(--example-wrap-digits-count) + var(--line-number-padding) * 2
943+
+ var(--line-number-right-margin));
944944
}
945945

946946
.example-wrap [data-nosnippet] {
@@ -953,63 +953,25 @@ ul.block, .block li, .block ul {
953953
-ms-user-select: none;
954954
user-select: none;
955955
padding: 0 var(--line-number-padding);
956-
}
957-
.example-wrap [data-nosnippet]:target {
958-
border-right: none;
956+
position: absolute;
957+
left: 0;
959958
}
960959
.example-wrap .line-highlighted[data-nosnippet] {
961960
background-color: var(--src-line-number-highlighted-background-color);
962961
}
963-
:root.word-wrap-source-code .example-wrap [data-nosnippet] {
964-
position: absolute;
965-
left: 0;
966-
}
967-
.word-wrap-source-code .example-wrap pre > code {
962+
.example-wrap pre > code {
968963
position: relative;
969-
word-break: break-all;
964+
display: block;
970965
}
971966
:root.word-wrap-source-code .example-wrap pre > code {
972-
display: block;
967+
word-break: break-all;
973968
white-space: pre-wrap;
974969
}
975970
:root.word-wrap-source-code .example-wrap pre > code * {
976971
word-break: break-all;
977972
}
978-
:root.word-wrap-source-code .example-wrap.digits-1 pre > code {
979-
padding-left: calc(
980-
1ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
981-
}
982-
:root.word-wrap-source-code .example-wrap.digits-2 pre > code {
983-
padding-left: calc(
984-
2ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
985-
}
986-
:root.word-wrap-source-code .example-wrap.digits-3 pre > code {
987-
padding-left: calc(
988-
3ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
989-
}
990-
:root.word-wrap-source-code .example-wrap.digits-4 pre > code {
991-
padding-left: calc(
992-
4ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
993-
}
994-
:root.word-wrap-source-code .example-wrap.digits-5 pre > code {
995-
padding-left: calc(
996-
5ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
997-
}
998-
:root.word-wrap-source-code .example-wrap.digits-6 pre > code {
999-
padding-left: calc(
1000-
6ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
1001-
}
1002-
:root.word-wrap-source-code .example-wrap.digits-7 pre > code {
1003-
padding-left: calc(
1004-
7ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
1005-
}
1006-
:root.word-wrap-source-code .example-wrap.digits-8 pre > code {
1007-
padding-left: calc(
1008-
8ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
1009-
}
1010-
:root.word-wrap-source-code .example-wrap.digits-9 pre > code {
1011-
padding-left: calc(
1012-
9ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
973+
.example-wrap [data-nosnippet]:target {
974+
border-right: none;
1013975
}
1014976
.example-wrap.hide-lines [data-nosnippet] {
1015977
display: none;

‎tests/rustdoc-gui/docblock-code-block-line-number.goml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,13 +129,13 @@ define-function: ("check-line-numbers-existence", [], block {
129129
wait-for-local-storage-false: {"rustdoc-line-numbers": "true" }
130130
assert-false: ".example-line-numbers"
131131
// Line numbers should still be there.
132-
assert-css: ("[data-nosnippet]", { "display": "inline-block"})
132+
assert-css: ("[data-nosnippet]", { "display": "block"})
133133
// Now disabling the setting.
134134
click: "input#line-numbers"
135135
wait-for-local-storage: {"rustdoc-line-numbers": "true" }
136136
assert-false: ".example-line-numbers"
137137
// Line numbers should still be there.
138-
assert-css: ("[data-nosnippet]", { "display": "inline-block"})
138+
assert-css: ("[data-nosnippet]", { "display": "block"})
139139
// Closing settings menu.
140140
click: "#settings-menu"
141141
wait-for-css: ("#settings", {"display": "none"})

‎tests/rustdoc-gui/scrape-examples-button-focus.goml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ go-to: "file://" + |DOC_PATH| + "/scrape_examples/fn.test.html"
55
// The next/prev buttons vertically scroll the code viewport between examples
66
move-cursor-to: ".scraped-example-list > .scraped-example"
77
wait-for: ".scraped-example-list > .scraped-example .next"
8-
store-value: (initialScrollTop, 250)
8+
store-value: (initialScrollTop, 236)
99
assert-property: (".scraped-example-list > .scraped-example .rust", {
1010
"scrollTop": |initialScrollTop|,
1111
}, NEAR)

‎tests/rustdoc-gui/source-code-wrapping.goml

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,32 @@ go-to: "file://" + |DOC_PATH| + "/test_docs/trait_bounds/index.html"
3131
click: "#settings-menu"
3232
wait-for: "#settings"
3333

34-
store-size: (".example-wrap .rust code", {"width": rust_width, "height": rust_height})
35-
store-size: (".example-wrap .language-text code", {"width": txt_width, "height": txt_height})
34+
store-property: (".example-wrap .rust code", {"scrollWidth": rust_width, "scrollHeight": rust_height})
35+
store-property: (".example-wrap .language-text code", {"scrollWidth": txt_width, "scrollHeight": txt_height})
3636
call-function: ("click-code-wrapping", {"expected": "true"})
37-
wait-for-size-false: (".example-wrap .rust code", {"width": |rust_width|, "height": |rust_height|})
37+
wait-for-property-false: (
38+
".example-wrap .rust code",
39+
{"scrollWidth": |rust_width|, "scrollHeight": |rust_height|},
40+
)
3841

39-
store-size: (".example-wrap .rust code", {"width": new_rust_width, "height": new_rust_height})
40-
store-size: (".example-wrap .language-text code", {"width": new_txt_width, "height": new_txt_height})
42+
store-property: (
43+
".example-wrap .rust code",
44+
{"scrollWidth": new_rust_width, "scrollHeight": new_rust_height},
45+
)
46+
store-property: (
47+
".example-wrap .language-text code",
48+
{"scrollWidth": new_txt_width, "scrollHeight": new_txt_height},
49+
)
4150

4251
assert: |rust_width| > |new_rust_width| && |rust_height| < |new_rust_height|
4352
assert: |txt_width| > |new_txt_width| && |txt_height| < |new_txt_height|
4453

4554
call-function: ("click-code-wrapping", {"expected": "false"})
46-
wait-for-size: (".example-wrap .rust code", {"width": |rust_width|, "height": |rust_height|})
47-
assert-size: (".example-wrap .language-text code", {"width": |txt_width|, "height": |txt_height|})
55+
wait-for-property: (
56+
".example-wrap .rust code",
57+
{"scrollWidth": |rust_width|, "scrollHeight": |rust_height|},
58+
)
59+
assert-property: (
60+
".example-wrap .language-text code",
61+
{"scrollWidth": |txt_width|, "scrollHeight": |txt_height|},
62+
)

0 commit comments

Comments
 (0)