Skip to content

Commit e51e514

Browse files
jhprattjhpratt
authored
Rollup merge of rust-lang#136991 - GuillaumeGomez:code-wrapping, r=notriddle
[rustdoc] Add new setting to wrap source code lines when too long Fixes rust-lang#127334. Wrapped lines look like this: ![image](https://github.com/user-attachments/assets/92006a27-ed1e-4beb-91f2-f453b72c5e1a) It works in both source code pages and doc pages. You can test it [here](https://rustdoc.crud.net/imperio/code-wrapping/bar/index.html). r? `@notriddle`
2 parents 7bf4b80 + a1471f3 commit e51e514

File tree

7 files changed

+171
-113
lines changed

7 files changed

+171
-113
lines changed

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

Lines changed: 66 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
4141
--font-family: "Source Serif 4", NanumBarunGothic, serif;
4242
--font-family-code: "Source Code Pro", monospace;
4343
--line-number-padding: 4px;
44+
--line-number-right-margin: 20px;
4445
/* scraped examples icons (34x33px) */
4546
--prev-arrow-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" \
4647
enable-background="new 0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="none" \
@@ -848,22 +849,6 @@ ul.block, .block li, .block ul {
848849
border-radius: 6px;
849850
}
850851

851-
/*
852-
If the code example line numbers are displayed, there will be a weird radius in the middle from
853-
both the code example and the line numbers, so we need to remove the radius in this case.
854-
*/
855-
.rustdoc .example-wrap > .example-line-numbers,
856-
.rustdoc .scraped-example .src-line-numbers,
857-
.rustdoc .scraped-example .src-line-numbers > pre {
858-
border-top-right-radius: 0;
859-
border-bottom-right-radius: 0;
860-
}
861-
.rustdoc .example-wrap > .example-line-numbers + pre,
862-
.rustdoc .scraped-example .rust {
863-
border-top-left-radius: 0;
864-
border-bottom-left-radius: 0;
865-
}
866-
867852
.rustdoc .scraped-example {
868853
position: relative;
869854
}
@@ -908,65 +893,105 @@ both the code example and the line numbers, so we need to remove the radius in t
908893
overflow: auto;
909894
}
910895

911-
.rustdoc .example-wrap pre.example-line-numbers,
912-
.rustdoc .example-wrap .src-line-numbers {
913-
min-width: fit-content; /* prevent collapsing into nothing in truncated scraped examples */
914-
flex-grow: 0;
915-
text-align: right;
916-
-moz-user-select: none;
917-
-webkit-user-select: none;
918-
-ms-user-select: none;
919-
user-select: none;
920-
padding: 14px 8px;
921-
padding-right: 2px;
922-
color: var(--src-line-numbers-span-color);
923-
}
924-
925-
.example-wrap.digits-1 [data-nosnippet] {
896+
.example-wrap.digits-1:not(.hide-lines) [data-nosnippet] {
926897
width: calc(1ch + var(--line-number-padding) * 2);
927898
}
928-
.example-wrap.digits-2 [data-nosnippet] {
899+
.example-wrap.digits-2:not(.hide-lines) [data-nosnippet] {
929900
width: calc(2ch + var(--line-number-padding) * 2);
930901
}
931-
.example-wrap.digits-3 [data-nosnippet] {
902+
.example-wrap.digits-3:not(.hide-lines) [data-nosnippet] {
932903
width: calc(3ch + var(--line-number-padding) * 2);
933904
}
934-
.example-wrap.digits-4 [data-nosnippet] {
905+
.example-wrap.digits-4:not(.hide-lines) [data-nosnippet] {
935906
width: calc(4ch + var(--line-number-padding) * 2);
936907
}
937-
.example-wrap.digits-5 [data-nosnippet] {
908+
.example-wrap.digits-5:not(.hide-lines) [data-nosnippet] {
938909
width: calc(5ch + var(--line-number-padding) * 2);
939910
}
940-
.example-wrap.digits-6 [data-nosnippet] {
911+
.example-wrap.digits-6:not(.hide-lines) [data-nosnippet] {
941912
width: calc(6ch + var(--line-number-padding) * 2);
942913
}
943-
.example-wrap.digits-7 [data-nosnippet] {
914+
.example-wrap.digits-7:not(.hide-lines) [data-nosnippet] {
944915
width: calc(7ch + var(--line-number-padding) * 2);
945916
}
946-
.example-wrap.digits-8 [data-nosnippet] {
917+
.example-wrap.digits-8:not(.hide-lines) [data-nosnippet] {
947918
width: calc(8ch + var(--line-number-padding) * 2);
948919
}
949-
.example-wrap.digits-9 [data-nosnippet] {
920+
.example-wrap.digits-9:not(.hide-lines) [data-nosnippet] {
950921
width: calc(9ch + var(--line-number-padding) * 2);
951922
}
952923

953924
.example-wrap [data-nosnippet] {
954925
color: var(--src-line-numbers-span-color);
955926
text-align: right;
956927
display: inline-block;
957-
margin-right: 20px;
928+
margin-right: var(--line-number-right-margin);
958929
-moz-user-select: none;
959930
-webkit-user-select: none;
960931
-ms-user-select: none;
961932
user-select: none;
962-
padding: 0 4px;
933+
padding: 0 var(--line-number-padding);
963934
}
964935
.example-wrap [data-nosnippet]:target {
965936
border-right: none;
966937
}
967938
.example-wrap .line-highlighted[data-nosnippet] {
968939
background-color: var(--src-line-number-highlighted-background-color);
969940
}
941+
:root.word-wrap-source-code .example-wrap [data-nosnippet] {
942+
position: absolute;
943+
left: 0;
944+
}
945+
.word-wrap-source-code .example-wrap pre > code {
946+
position: relative;
947+
word-break: break-all;
948+
}
949+
:root.word-wrap-source-code .example-wrap pre > code {
950+
display: block;
951+
white-space: pre-wrap;
952+
}
953+
:root.word-wrap-source-code .example-wrap pre > code * {
954+
word-break: break-all;
955+
}
956+
:root.word-wrap-source-code .example-wrap.digits-1 pre > code {
957+
padding-left: calc(
958+
1ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
959+
}
960+
:root.word-wrap-source-code .example-wrap.digits-2 pre > code {
961+
padding-left: calc(
962+
2ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
963+
}
964+
:root.word-wrap-source-code .example-wrap.digits-3 pre > code {
965+
padding-left: calc(
966+
3ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
967+
}
968+
:root.word-wrap-source-code .example-wrap.digits-4 pre > code {
969+
padding-left: calc(
970+
4ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
971+
}
972+
:root.word-wrap-source-code .example-wrap.digits-5 pre > code {
973+
padding-left: calc(
974+
5ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
975+
}
976+
:root.word-wrap-source-code .example-wrap.digits-6 pre > code {
977+
padding-left: calc(
978+
6ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
979+
}
980+
:root.word-wrap-source-code .example-wrap.digits-7 pre > code {
981+
padding-left: calc(
982+
7ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
983+
}
984+
:root.word-wrap-source-code .example-wrap.digits-8 pre > code {
985+
padding-left: calc(
986+
8ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
987+
}
988+
:root.word-wrap-source-code .example-wrap.digits-9 pre > code {
989+
padding-left: calc(
990+
9ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
991+
}
992+
.example-wrap.hide-lines [data-nosnippet] {
993+
display: none;
994+
}
970995

971996
.search-loading {
972997
text-align: center;

‎src/librustdoc/html/static/js/main.js‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1112,35 +1112,32 @@ function preLoadCss(cssUrl) {
11121112

11131113
// @ts-expect-error
11141114
window.rustdoc_add_line_numbers_to_examples = () => {
1115-
if (document.querySelector(".rustdoc.src")) {
1116-
// We are in the source code page, nothing to be done here!
1117-
return;
1115+
// @ts-expect-error
1116+
function generateLine(nb) {
1117+
return `<span data-nosnippet>${nb}</span>`;
11181118
}
1119+
11191120
onEachLazy(document.querySelectorAll(
1120-
":not(.scraped-example) > .example-wrap > pre:not(.example-line-numbers)",
1121-
), x => {
1122-
const parent = x.parentNode;
1123-
const line_numbers = parent.querySelectorAll(".example-line-numbers");
1124-
if (line_numbers.length > 0) {
1121+
".rustdoc:not(.src) :not(.scraped-example) > .example-wrap > pre > code",
1122+
), code => {
1123+
if (hasClass(code.parentElement.parentElement, "hide-lines")) {
1124+
removeClass(code.parentElement.parentElement, "hide-lines");
11251125
return;
11261126
}
1127-
const count = x.textContent.split("\n").length;
1128-
const elems = [];
1129-
for (let i = 0; i < count; ++i) {
1130-
elems.push(i + 1);
1131-
}
1132-
const node = document.createElement("pre");
1133-
addClass(node, "example-line-numbers");
1134-
node.innerHTML = elems.join("\n");
1135-
parent.insertBefore(node, x);
1127+
const lines = code.innerHTML.split("\n");
1128+
const digits = (lines.length + "").length;
1129+
// @ts-expect-error
1130+
code.innerHTML = lines.map((line, index) => generateLine(index + 1) + line).join("\n");
1131+
addClass(code.parentElement.parentElement, `digits-${digits}`);
11361132
});
11371133
};
11381134

11391135
// @ts-expect-error
11401136
window.rustdoc_remove_line_numbers_from_examples = () => {
1141-
onEachLazy(document.querySelectorAll(".example-wrap > .example-line-numbers"), x => {
1142-
x.parentNode.removeChild(x);
1143-
});
1137+
onEachLazy(
1138+
document.querySelectorAll(".rustdoc:not(.src) :not(.scraped-example) > .example-wrap"),
1139+
x => addClass(x, "hide-lines"),
1140+
);
11441141
};
11451142

11461143
if (getSettingValue("line-numbers") === "true") {

‎src/librustdoc/html/static/js/settings.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,14 @@
5959
} else {
6060
removeClass(document.documentElement, "sans-serif");
6161
}
62+
break;
63+
case "word-wrap-source-code":
64+
if (value === true) {
65+
addClass(document.documentElement, "word-wrap-source-code");
66+
} else {
67+
removeClass(document.documentElement, "word-wrap-source-code");
68+
}
69+
break;
6270
}
6371
}
6472

@@ -246,6 +254,11 @@
246254
"js_name": "sans-serif-fonts",
247255
"default": false,
248256
},
257+
{
258+
"name": "Word wrap source code",
259+
"js_name": "word-wrap-source-code",
260+
"default": false,
261+
},
249262
];
250263

251264
// Then we build the DOM.

‎src/librustdoc/html/static/js/storage.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -286,6 +286,9 @@ if (getSettingValue("hide-modnav") === "true") {
286286
if (getSettingValue("sans-serif-fonts") === "true") {
287287
addClass(document.documentElement, "sans-serif");
288288
}
289+
if (getSettingValue("word-wrap-source-code") === "true") {
290+
addClass(document.documentElement, "word-wrap-source-code");
291+
}
289292
function updateSidebarWidth() {
290293
const desktopSidebarWidth = getSettingValue("desktop-sidebar-width");
291294
if (desktopSidebarWidth && desktopSidebarWidth !== "null") {

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

Lines changed: 16 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ assert-css: (
2121
set-local-storage: {"rustdoc-line-numbers": "true"}
2222
reload:
2323
// We wait for the line numbers to be added into the DOM by the JS...
24-
wait-for: "pre.example-line-numbers"
24+
wait-for: ".digits-1 pre"
2525

2626
// Otherwise, we can't check text color
2727
show-text: true
@@ -35,30 +35,21 @@ define-function: (
3535
call-function: ("switch-theme", {"theme": |theme|})
3636
// If the test didn't fail, it means that it was found!
3737
assert-css: (
38-
"pre.example-line-numbers",
38+
".digits-1 pre [data-nosnippet]",
3939
{
4040
"color": |color|,
41-
"margin": "0px",
42-
"padding-top": "14px",
43-
"padding-bottom": "14px",
44-
"padding-left": "8px",
45-
"padding-right": "2px",
41+
"margin-top": "0px",
42+
"margin-bottom": "0px",
43+
"margin-left": "0px",
44+
"margin-right": "20px",
45+
"padding-top": "0px",
46+
"padding-bottom": "0px",
47+
"padding-left": "4px",
48+
"padding-right": "4px",
4649
"text-align": "right",
47-
// There should not be a radius on the right of the line numbers.
48-
"border-top-left-radius": "6px",
49-
"border-bottom-left-radius": "6px",
50-
"border-top-right-radius": "0px",
51-
"border-bottom-right-radius": "0px",
5250
},
5351
ALL,
5452
)
55-
// There should not be a radius on the left of the line numbers.
56-
assert-css: ("pre.example-line-numbers + .rust", {
57-
"border-top-left-radius": "0px",
58-
"border-bottom-left-radius": "0px",
59-
"border-top-right-radius": "6px",
60-
"border-bottom-right-radius": "6px",
61-
})
6253
},
6354
)
6455
call-function: ("check-colors", {
@@ -74,9 +65,6 @@ call-function: ("check-colors", {
7465
"color": "#c67e2d",
7566
})
7667

77-
// The first code block has two lines so let's check its `<pre>` elements lists both of them.
78-
assert-text: ("pre.example-line-numbers", "1\n2")
79-
8068
// Now, try changing the setting dynamically. We'll turn it off, using the settings menu,
8169
// and make sure it goes away.
8270

@@ -87,42 +75,17 @@ assert-css: ("#settings", {"display": "block"})
8775

8876
// Then, click the toggle button.
8977
click: "input#line-numbers"
90-
wait-for-false: "pre.example-line-numbers"
78+
wait-for: ".digits-1.hide-lines"
9179
assert-local-storage: {"rustdoc-line-numbers": "false" }
9280

93-
// Check that the rounded corners are back.
94-
assert-css: (
95-
".example-wrap .rust",
96-
{
97-
"border-top-left-radius": "6px",
98-
"border-bottom-left-radius": "6px",
99-
"border-top-right-radius": "6px",
100-
"border-bottom-right-radius": "6px",
101-
},
102-
ALL,
103-
)
104-
10581
// Finally, turn it on again.
10682
click: "input#line-numbers"
107-
wait-for: "pre.example-line-numbers"
83+
wait-for: ".digits-1:not(.hide-lines)"
10884
assert-local-storage: {"rustdoc-line-numbers": "true" }
109-
wait-for: "pre.example-line-numbers"
11085

11186
// Same check with scraped examples line numbers.
11287
go-to: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html"
11388

114-
assert-css: (
115-
".scraped-example .rust",
116-
{
117-
// There should not be a radius on the left of the code.
118-
"border-top-left-radius": "0px",
119-
"border-bottom-left-radius": "0px",
120-
"border-top-right-radius": "6px",
121-
"border-bottom-right-radius": "6px",
122-
},
123-
ALL,
124-
)
125-
12689
define-function: (
12790
"check-padding",
12891
[path, padding_bottom],
@@ -203,17 +166,18 @@ assert-local-storage: {"rustdoc-line-numbers": "true" }
203166
assert: ".example-wrap > pre.language-txt"
204167
assert: ".example-wrap > pre.rust"
205168
assert-count: (".example-wrap", 2)
206-
assert-count: (".example-wrap > pre.example-line-numbers", 2)
169+
assert-count: (".example-wrap.digits-1", 2)
207170

208171
click: "#settings-menu"
209172
wait-for: "#settings"
210173

211174
// Then, click the toggle button.
212175
click: "input#line-numbers"
213-
wait-for-count: (".example-wrap > pre.example-line-numbers", 0)
176+
wait-for-count: (".example-wrap.digits-1.hide-lines", 2)
214177
assert-local-storage-false: {"rustdoc-line-numbers": "true" }
215178

216179
// Now turning off the setting.
217180
click: "input#line-numbers"
218-
wait-for-count: (".example-wrap > pre.example-line-numbers", 2)
181+
wait-for-count: (".example-wrap.digits-1", 2)
182+
wait-for-count: (".example-wrap.digits-1.hide-lines", 0)
219183
assert-local-storage: {"rustdoc-line-numbers": "true" }

0 commit comments

Comments
 (0)