Rollup merge of #131718 - GuillaumeGomez:impl-items-indent, r=rustdoc

[rustdoc] Change impl items indent

Fixes #131704.

| before | after |
|-|-|
| ![image](https://github.com/user-attachments/assets/67679827-6aef-4bdb-93dd-e1a4784566b3) | ![image](https://github.com/user-attachments/assets/8a0e9fbc-794a-4b98-abc6-bbbe178736b1) |

Can be tested [here](https://rustdoc.crud.net/imperio/impl-items-indent/bar/struct.Bar.html).

r? `@notriddle`

Author: matthiaskrgr

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

@@ -36,6 +36,8 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
 	--button-border-radius: 2px;
 	--toolbar-button-border-radius: 6px;
 	--code-block-border-radius: 6px;
+	--impl-items-indent: 0.3em;
+	--docblock-indent: 24px;
 }
 
 /* See FiraSans-LICENSE.txt for the Fira Sans license. */
@@ -909,7 +911,7 @@ both the code example and the line numbers, so we need to remove the radius in t
 .docblock h6 { font-size: 0.875rem; }
 
 .docblock {
-	margin-left: 24px;
+	margin-left: var(--docblock-indent);
 	position: relative;
 }
 
@@ -982,7 +984,11 @@ div.where {
 
 .item-info {
 	display: block;
-	margin-left: 24px;
+	margin-left: var(--docblock-indent);
+}
+.impl-items > .item-info {
+	/* Margin of docblocks + margin of impl block items. */
+	margin-left: calc(var(--docblock-indent) + var(--impl-items-indent));
 }
 
 .item-info code {
@@ -2166,6 +2172,15 @@ details.toggle > summary:not(.hideme)::before {
 	left: -24px;
 }
 
+/* We indent items of an impl block to have a visual marker that these items are part
+	of this impl block. */
+.impl-items > *:not(.item-info),
+/* We also indent the first top doc comment the same to still keep an indent on the
+	doc block while aligning it with the impl block items. */
+.implementors-toggle > .docblock {
+	margin-left: var(--impl-items-indent);
+}
+
 details.big-toggle > summary:not(.hideme)::before {
 	left: -34px;
 	top: 9px;
@@ -2255,6 +2270,10 @@ If you update this line, then you also need to update the line with the same war
 in src-script.js and main.js
 */
 @media (max-width: 700px) {
+	:root {
+		--impl-items-indent: 0.7em;
+	}
+
 	/* When linking to an item with an `id` (for instance, by clicking a link in the sidebar,
 	   or visiting a URL with a fragment like `#method.new`, we don't want the item to be obscured
 	   by the topbar. Anything with an `id` gets scroll-margin-top equal to .mobile-topbar's size.
@@ -2454,19 +2473,20 @@ in src-script.js and main.js
 		padding-top: 0;
 	}
 
-	/* Position of the "[-]" element. */
-	details.toggle:not(.top-doc) > summary, .impl-items > section  {
+	details.implementors-toggle:not(.top-doc) > summary  {
 		margin-left: 10px;
 	}
-	.impl-items > details.toggle > summary:not(.hideme)::before,
-	#main-content > details.toggle:not(.top-doc) > summary::before,
-	#main-content > div > details.toggle > summary::before {
-		left: -11px;
+
+	.impl-items > details.toggle > summary:not(.hideme)::before {
+		left: -20px;
 	}
 
 	/* Align summary-nested and unnested item-info gizmos. */
+	summary > .item-info {
+		margin-left: 10px;
+	}
 	.impl-items > .item-info {
-		margin-left: 34px;
+		margin-left: calc(var(--impl-items-indent) + 10px);
 	}
 
 	.src nav.sub {
@@ -2500,24 +2520,24 @@ in src-script.js and main.js
 }
 
 @media print {
+	:root {
+		--docblock-indent: 0;
+	}
+
 	nav.sidebar, nav.sub, .out-of-band, a.src, #copy-path,
 	details.toggle[open] > summary::before, details.toggle > summary::before,
 	details.toggle.top-doc > summary {
 		display: none;
 	}
 
-	.docblock {
-		margin-left: 0;
-	}
-
 	main {
 		padding: 10px;
 	}
 }
 
 @media (max-width: 464px) {
-	.docblock {
-		margin-left: 12px;
+	:root {
+		--docblock-indent: 12px;
 	}
 
 	.docblock code {

tests/rustdoc-gui/deref-block.goml

@@ -20,8 +20,12 @@ assert-css: (".big-toggle summary::before", {
     "left": "-11px",
     "top": "9px",
 })
-// It should have the same X position as the other toggles.
-compare-elements-position: (".big-toggle summary::before", ".method-toggle summary::before", ["x"])
+// It should have a slightly different X position as the other toggles.
+store-position: (".big-toggle summary::before", {"x": big_toggle})
+store-position: (".method-toggle summary::before", {"x": small_toggle})
+assert: |big_toggle| < |small_toggle|
+// Margin is 0.5em so around 8 px.
+assert: |small_toggle| - |big_toggle| < 10
 // But still shouldn't have the same Y position.
 compare-elements-position-false: (
     ".big-toggle summary::before",

tests/rustdoc-gui/docblock-table-overflow.goml

@@ -16,6 +16,6 @@ compare-elements-property: (
     "#implementations-list > details .docblock > p",
     ["scrollWidth"],
 )
-assert-property: ("#implementations-list > details .docblock", {"scrollWidth": "816"})
+assert-property: ("#implementations-list > details .docblock", {"scrollWidth": "835"})
 // However, since there is overflow in the <table>, its scroll width is bigger.
 assert-property: ("#implementations-list > details .docblock table", {"scrollWidth": "1572"})

tests/rustdoc-gui/item-info-alignment.goml

@@ -4,7 +4,9 @@ go-to: "file://" + |DOC_PATH| + "/lib2/struct.ItemInfoAlignmentTest.html"
 
 // First, we try it in "desktop" mode.
 set-window-size: (1200, 870)
+wait-for-size: ("body", {"width": 1200})
 compare-elements-position: (".impl-items > .item-info", "summary > .item-info", ["x"])
 // Next, we try it in "mobile" mode (max-width: 700px).
 set-window-size: (650, 650)
+wait-for-size: ("body", {"width": 650})
 compare-elements-position: (".impl-items > .item-info", "summary > .item-info", ["x"])

tests/rustdoc-gui/item-info.goml

@@ -19,7 +19,7 @@ store-position: (
     "//*[@class='stab portability']//code[normalize-space()='Win32_System_Diagnostics']",
     {"x": second_line_x, "y": second_line_y},
 )
-assert: |first_line_x| != |second_line_x| && |first_line_x| == 516 && |second_line_x| == 272
+assert: |first_line_x| != |second_line_x| && |first_line_x| == 521 && |second_line_x| == 277
 assert: |first_line_y| != |second_line_y| && |first_line_y| == 718 && |second_line_y| == 741
 
 // Now we ensure that they're not rendered on the same line.

tests/rustdoc-gui/methods-left-margin.goml

@@ -1,7 +1,6 @@
 // This test is to ensure that methods are correctly aligned on the left side.
 
 go-to: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
-
 // First we ensure that we have methods with and without documentation.
 assert: ".impl-items > details.method-toggle > summary > section.method"
 assert: ".impl-items > section.method"

tests/rustdoc-gui/notable-trait.goml

@@ -62,9 +62,9 @@ define-function: (
 // We start with a wide screen.
 set-window-size: (1100, 600)
 call-function: ("check-notable-tooltip-position-complete", {
-    "x": 677,
-    "i_x": 955,
-    "popover_x": 463,
+    "x": 682,
+    "i_x": 960,
+    "popover_x": 468,
 })
 
 // Now only the `i` should be on the next line.
@@ -78,16 +78,16 @@ compare-elements-position-false: (
 // Now both the `i` and the struct name should be on the next line.
 set-window-size: (980, 600)
 call-function: ("check-notable-tooltip-position", {
-    "x": 245,
-    "i_x": 523,
+    "x": 250,
+    "i_x": 528,
 })
 
 // Checking on mobile now.
 set-window-size: (650, 600)
 wait-for-size: ("body", {"width": 650})
 call-function: ("check-notable-tooltip-position-complete", {
-    "x": 25,
-    "i_x": 303,
+    "x": 26,
+    "i_x": 305,
     "popover_x": 0,
 })
 

tests/rustdoc-gui/toggle-docs-mobile.goml

@@ -18,7 +18,7 @@ assert-position: ("#implementations-list > details > summary::before", {"x": 4})
 // Assert the position of the toggle on a method.
 assert-position: (
     "#trait-implementations-list .impl-items .method-toggle > summary::before",
-    {"x": 4},
+    {"x": 6},
 )
 
 // Now we do the same but with a little bigger width