Skip to content

Improve CSS for source code block line numbers #143192

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+55 −78
Open

Improve CSS for source code block line numbers #143192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f98b8e
Improve CSS for source code block line numbers
GuillaumeGomez Jun 29, 2025
a9d5b05
Update rustdoc GUI tests
GuillaumeGomez Jun 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 30 additions & 68 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
3. Copy the filenames with updated suffixes from the directory.
*/

/* ignore-tidy-filelength */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This somewhat confuses me due to the fact that this file has actually gotten smaller, though it probably is correct to have here even if it isn't needed yet.


:root {
--nav-sub-mobile-padding: 8px;
--search-typename-width: 6.75rem;
Expand Down Expand Up @@ -915,32 +917,30 @@ ul.block, .block li, .block ul {
overflow: auto;
}

.example-wrap.digits-1:not(.hide-lines) [data-nosnippet] {
width: calc(1ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-2:not(.hide-lines) [data-nosnippet] {
width: calc(2ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-3:not(.hide-lines) [data-nosnippet] {
width: calc(3ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-4:not(.hide-lines) [data-nosnippet] {
width: calc(4ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-5:not(.hide-lines) [data-nosnippet] {
width: calc(5ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-6:not(.hide-lines) [data-nosnippet] {
width: calc(6ch + var(--line-number-padding) * 2);
.example-wrap code {
position: relative;
}
.example-wrap.digits-7:not(.hide-lines) [data-nosnippet] {
width: calc(7ch + var(--line-number-padding) * 2);
.example-wrap pre code span {
display: inline;
}
.example-wrap.digits-8:not(.hide-lines) [data-nosnippet] {
width: calc(8ch + var(--line-number-padding) * 2);

.example-wrap.digits-1 { --example-wrap-digits-count: 1ch; }
.example-wrap.digits-2 { --example-wrap-digits-count: 2ch; }
.example-wrap.digits-3 { --example-wrap-digits-count: 3ch; }
.example-wrap.digits-4 { --example-wrap-digits-count: 4ch; }
.example-wrap.digits-5 { --example-wrap-digits-count: 5ch; }
.example-wrap.digits-6 { --example-wrap-digits-count: 6ch; }
.example-wrap.digits-7 { --example-wrap-digits-count: 7ch; }
.example-wrap.digits-8 { --example-wrap-digits-count: 8ch; }
.example-wrap.digits-9 { --example-wrap-digits-count: 9ch; }
Comment on lines +927 to +935
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this really the best way to do this? It very well may be "good enough", but here's some misc thoughts:

  1. pretty sure you can define -- variables in a style attribute then have the styles of child elements reference them with var. This way we could have the render logic pass an actual integer on to css instead of an integer-like enum.
  2. if a rust file used the maximum possible file size and made each line use an average of 4 bytes or less, including newlines, it would have a 10 digit number of lines. Do we ever generate a digits-10 css class?


.example-wrap [data-nosnippet] {
width: calc(var(--example-wrap-digits-count) + var(--line-number-padding) * 2);
}
.example-wrap.digits-9:not(.hide-lines) [data-nosnippet] {
width: calc(9ch + var(--line-number-padding) * 2);
.example-wrap pre > code {
padding-left: calc(
var(--example-wrap-digits-count) + var(--line-number-padding) * 2
+ var(--line-number-right-margin));
}

.example-wrap [data-nosnippet] {
Expand All @@ -953,63 +953,25 @@ ul.block, .block li, .block ul {
-ms-user-select: none;
user-select: none;
padding: 0 var(--line-number-padding);
}
.example-wrap [data-nosnippet]:target {
border-right: none;
}
.example-wrap .line-highlighted[data-nosnippet] {
background-color: var(--src-line-number-highlighted-background-color);
}
:root.word-wrap-source-code .example-wrap [data-nosnippet] {
position: absolute;
left: 0;
}
.word-wrap-source-code .example-wrap pre > code {
.example-wrap pre > code {
position: relative;
word-break: break-all;
display: block;
}
:root.word-wrap-source-code .example-wrap pre > code {
display: block;
word-break: break-all;
white-space: pre-wrap;
}
:root.word-wrap-source-code .example-wrap pre > code * {
word-break: break-all;
}
:root.word-wrap-source-code .example-wrap.digits-1 pre > code {
padding-left: calc(
1ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.word-wrap-source-code .example-wrap.digits-2 pre > code {
padding-left: calc(
2ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.word-wrap-source-code .example-wrap.digits-3 pre > code {
padding-left: calc(
3ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.word-wrap-source-code .example-wrap.digits-4 pre > code {
padding-left: calc(
4ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.word-wrap-source-code .example-wrap.digits-5 pre > code {
padding-left: calc(
5ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.word-wrap-source-code .example-wrap.digits-6 pre > code {
padding-left: calc(
6ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.word-wrap-source-code .example-wrap.digits-7 pre > code {
padding-left: calc(
7ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.word-wrap-source-code .example-wrap.digits-8 pre > code {
padding-left: calc(
8ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
.example-wrap [data-nosnippet]:target {
border-right: none;
}
:root.word-wrap-source-code .example-wrap.digits-9 pre > code {
padding-left: calc(
9ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
.example-wrap .line-highlighted[data-nosnippet] {
background-color: var(--src-line-number-highlighted-background-color);
Comment on lines +970 to +974
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason for moving this? I would say it improves organization, but there's other .example-wrap rules above.

I would say if anything, the following .example-wrap.hide-lines should be moved up to where the other .example-wrap rules are.

I suppose it doesn't really matter outside a very small chance a PR that would not have conflicted before would conflict due to this change, and making git blame output slightly less useful.

}
.example-wrap.hide-lines [data-nosnippet] {
display: none;
Expand Down
4 changes: 2 additions & 2 deletions tests/rustdoc-gui/docblock-code-block-line-number.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,13 +129,13 @@ define-function: ("check-line-numbers-existence", [], block {
wait-for-local-storage-false: {"rustdoc-line-numbers": "true" }
assert-false: ".example-line-numbers"
// Line numbers should still be there.
assert-css: ("[data-nosnippet]", { "display": "inline-block"})
assert-css: ("[data-nosnippet]", { "display": "block"})
// Now disabling the setting.
click: "input#line-numbers"
wait-for-local-storage: {"rustdoc-line-numbers": "true" }
assert-false: ".example-line-numbers"
// Line numbers should still be there.
assert-css: ("[data-nosnippet]", { "display": "inline-block"})
assert-css: ("[data-nosnippet]", { "display": "block"})
// Closing settings menu.
click: "#settings-menu"
wait-for-css: ("#settings", {"display": "none"})
Expand Down
2 changes: 1 addition & 1 deletion tests/rustdoc-gui/scrape-examples-button-focus.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ go-to: "file://" + |DOC_PATH| + "/scrape_examples/fn.test.html"
// The next/prev buttons vertically scroll the code viewport between examples
move-cursor-to: ".scraped-example-list > .scraped-example"
wait-for: ".scraped-example-list > .scraped-example .next"
store-value: (initialScrollTop, 250)
store-value: (initialScrollTop, 236)
assert-property: (".scraped-example-list > .scraped-example .rust", {
"scrollTop": |initialScrollTop|,
}, NEAR)
Expand Down
29 changes: 22 additions & 7 deletions tests/rustdoc-gui/source-code-wrapping.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,32 @@ go-to: "file://" + |DOC_PATH| + "/test_docs/trait_bounds/index.html"
click: "#settings-menu"
wait-for: "#settings"

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

store-size: (".example-wrap .rust code", {"width": new_rust_width, "height": new_rust_height})
store-size: (".example-wrap .language-text code", {"width": new_txt_width, "height": new_txt_height})
store-property: (
".example-wrap .rust code",
{"scrollWidth": new_rust_width, "scrollHeight": new_rust_height},
)
store-property: (
".example-wrap .language-text code",
{"scrollWidth": new_txt_width, "scrollHeight": new_txt_height},
)

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

call-function: ("click-code-wrapping", {"expected": "false"})
wait-for-size: (".example-wrap .rust code", {"width": |rust_width|, "height": |rust_height|})
assert-size: (".example-wrap .language-text code", {"width": |txt_width|, "height": |txt_height|})
wait-for-property: (
".example-wrap .rust code",
{"scrollWidth": |rust_width|, "scrollHeight": |rust_height|},
)
assert-property: (
".example-wrap .language-text code",
{"scrollWidth": |txt_width|, "scrollHeight": |txt_height|},
)
Loading