Rollup merge of #102253 - jsha:css-contain, r=notriddle

rustdoc: use CSS containment to speed up render

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment

This affected layout a little and required adjustments to the CSS to keep spacing the same. In particular, the margins of adjacent items usually overlap with each other. However, when an item has contain: layout, any margins of child nodes push out the size of the item itself. This was making spacing between items a little too big. To solve that, I removed margins in some places: in particular for certain classes that often occur at the end of a `details.rustdoc-toggle` block, I removed their bottom margin. Generally, the margins provided by the next item down are sufficient.

Also remove an unnecessary margin-top on .code-header.

In particular this helps with the problem that rustdoc in some situations can generate giant HTML pages, which can crash a Chrome tab on typical modern hardware, for instance: `https://docs.rs/iced-x86/1.16.0/iced_x86/code_asm/struct.CodeAssembler.html` (26MB, 409k DOM nodes). This doesn't, of course, universally solve the problem, but it pushes out the boundary of the largest page rustdoc can produce without crashing a browser tab.

Demos:

https://rustdoc.crud.net/jsha/css-contain/std/string/struct.String.html
(warning: giant page, _may_ crash a browser tab) https://rustdoc.crud.net/jsha/css-contain-icedx86/iced_x86/code_asm/struct.CodeAssembler.html

r? `@notriddle`

Author: matthiaskrgr

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

@@ -132,7 +132,7 @@ h1, h2, h3, h4, h5, h6 {
 	font-weight: 500;
 }
 h1, h2, h3, h4 {
-	margin: 20px 0 15px 0;
+	margin: 25px 0 15px 0;
 	padding-bottom: 6px;
 }
 .docblock h3, .docblock h4, h5, h6 {
@@ -176,8 +176,6 @@ h4.code-header {
 	border-bottom-style: none;
 	margin: 0;
 	padding: 0;
-	margin-top: 0.6rem;
-	margin-bottom: 0.4rem;
 }
 .impl,
 .impl-items .method,
@@ -292,6 +290,11 @@ p {
 	   https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html */
 	margin: 0 0 .75em 0;
 }
+/* For the last child of a div, the margin will be taken care of
+	by the margin-top of the next item. */
+p:last-child {
+	margin: 0;
+}
 
 summary {
 	outline: none;
@@ -565,9 +568,16 @@ h2.location a {
 
 .rustdoc .example-wrap {
 	display: flex;
-	margin-bottom: 10px;
 	position: relative;
 }
+.rustdoc .example-wrap {
+	margin-bottom: 10px;
+}
+/* For the last child of a div, the margin will be taken care of
+	by the margin-top of the next item. */
+.rustdoc .example-wrap:last-child {
+	margin-bottom: 0px;
+}
 
 pre.example-line-numbers {
 	overflow: initial;
@@ -726,10 +736,6 @@ pre, .rustdoc.source .example-wrap {
 	margin-left: 24px;
 }
 
-.content .impl-items .docblock, .content .impl-items .item-info {
-	margin-bottom: .6em;
-}
-
 #main-content > .item-info {
 	margin-top: 0;
 	margin-left: 0;
@@ -1532,6 +1538,16 @@ details.dir-entry a {
 	display: block;
 }
 
+/* We use CSS containment on the details elements because most sizeable elements
+	of the page are contained in one of these. This also makes re-rendering
+	faster on document changes (like closing and opening toggles).
+	Unfortunately we can't yet specify contain: content or contain: strict
+	because the [-]/[+] toggles extend past the boundaries of the <details>
+	https://developer.mozilla.org/en-US/docs/Web/CSS/contain */
+details.rustdoc-toggle {
+	contain: layout;
+}
+
 /* The hideme class is used on summary tags that contain a span with
 	placeholder text shown only when the toggle is closed. For instance,
 	"Expand description" or "Show methods". */
@@ -2012,17 +2028,17 @@ in storage.js plus the media query with (min-width: 701px)
 	margin-bottom: 0.75em;
 }
 
-.method-toggle[open] {
+.method-toggle[open]:not(:last-child) {
 	margin-bottom: 2em;
 }
 
-.implementors-toggle[open]  {
+.implementors-toggle[open]:not(:last-child) {
 	margin-bottom: 2em;
 }
 
-#trait-implementations-list .method-toggle,
-#synthetic-implementations-list .method-toggle,
-#blanket-implementations-list .method-toggle {
+#trait-implementations-list .method-toggle:not(:last-child),
+#synthetic-implementations-list .method-toggle:not(:last-child),
+#blanket-implementations-list .method-toggle:not(:last-child) {
 	margin-bottom: 1em;
 }
 

src/test/rustdoc-gui/sidebar-mobile-scroll.goml

@@ -6,7 +6,7 @@ assert-css: (".sidebar", {"display": "block", "left": "-1000px"})
 
 // Scroll down.
 scroll-to: "//h2[@id='blanket-implementations']"
-assert-window-property: {"pageYOffset": "643"}
+assert-window-property: {"pageYOffset": "639"}
 
 // Open the sidebar menu.
 click: ".sidebar-menu-toggle"
@@ -21,11 +21,11 @@ assert-window-property: {"pageYOffset": "0"}
 // Close the sidebar menu. Make sure the scroll position gets restored.
 click: ".sidebar-menu-toggle"
 wait-for-css: (".sidebar", {"left": "-1000px"})
-assert-window-property: {"pageYOffset": "643"}
+assert-window-property: {"pageYOffset": "639"}
 
 // Now test that scrollability returns when the browser window is just resized.
 click: ".sidebar-menu-toggle"
 wait-for-css: (".sidebar", {"left": "0px"})
 assert-window-property: {"pageYOffset": "0"}
 size: (900, 600)
-assert-window-property: {"pageYOffset": "643"}
+assert-window-property: {"pageYOffset": "639"}