Skip to content

Commit 599f88d

Browse files
GuillaumeGomezGuillaumeGomez
committed
Add new setting to wrap source code lines when too long
1 parent 905b1bf commit 599f88d

File tree

4 files changed

+99
-61
lines changed

4 files changed

+99
-61
lines changed

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

+66-41
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.wrap-source-code .example-wrap [data-nosnippet] {
942+
position: absolute;
943+
left: 0;
944+
}
945+
.wrap-source-code .example-wrap pre > code {
946+
position: relative;
947+
word-break: break-all;
948+
}
949+
:root.wrap-source-code .example-wrap pre > code {
950+
display: block;
951+
white-space: pre-wrap;
952+
}
953+
:root.wrap-source-code .example-wrap pre > code * {
954+
word-break: break-all;
955+
}
956+
:root.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.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.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.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.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.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.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.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.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

+17-20
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

+13
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 "wrap-source-code":
64+
if (value === true) {
65+
addClass(document.documentElement, "wrap-source-code");
66+
} else {
67+
removeClass(document.documentElement, "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": "Wrap source codes",
259+
"js_name": "wrap-source-code",
260+
"default": false,
261+
},
249262
];
250263

251264
// Then we build the DOM.

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

+3
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("wrap-source-code") === "true") {
290+
addClass(document.documentElement, "wrap-source-code");
291+
}
289292
function updateSidebarWidth() {
290293
const desktopSidebarWidth = getSettingValue("desktop-sidebar-width");
291294
if (desktopSidebarWidth && desktopSidebarWidth !== "null") {

0 commit comments

Comments
 (0)