Rollup merge of #143192 - GuillaumeGomez:code-line-number, r=lolbinary

Improve CSS for source code block line numbers

Extract some changes from https://github.com/rust-lang/rust/pull/137229 to make the PR smaller (thanks `@yotamofek` for the suggestion!).

r? notriddle

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

@@ -8,6 +8,8 @@
 	3. Copy the filenames with updated suffixes from the directory.
 */
 
+/* ignore-tidy-filelength */
+
 :root {
 	--nav-sub-mobile-padding: 8px;
 	--search-typename-width: 6.75rem;
@@ -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 code {
+	position: relative;
 }
-.example-wrap.digits-2:not(.hide-lines) [data-nosnippet] {
-	width: calc(2ch + var(--line-number-padding) * 2);
+.example-wrap pre code span {
+	display: inline;
 }
-.example-wrap.digits-3:not(.hide-lines) [data-nosnippet] {
-	width: calc(3ch + 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; }
+
+.example-wrap [data-nosnippet] {
+	width: calc(var(--example-wrap-digits-count) + 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.digits-7:not(.hide-lines) [data-nosnippet] {
-	width: calc(7ch + var(--line-number-padding) * 2);
-}
-.example-wrap.digits-8:not(.hide-lines) [data-nosnippet] {
-	width: calc(8ch + 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] {
@@ -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;
+	position: absolute;
+	left: 0;
 }
 .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));
-}
-: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 [data-nosnippet]:target {
+	border-right: none;
 }
 .example-wrap.hide-lines [data-nosnippet] {
 	display: none;

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

@@ -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"})

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

@@ -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)

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

@@ -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|},
+)