Rollup merge of rust-lang#106027 - notriddle:notriddle/more-scraped-examples-inner, r=GuillaumeGomez

rustdoc: simplify CSS and DOM for more-scraped-examples

This gets rid of the more-scraped-examples-inner wrapper, instead nesting the children directly and using absolute positioning for the toggle line.

Author: matthiaskrgr

src/librustdoc/html/render/mod.rs

@@ -3005,8 +3005,7 @@ fn render_call_locations(w: &mut Buffer, cx: &mut Context<'_>, item: &clean::Ite
                   </summary>\
                   <div class=\"hide-more\">Hide additional examples</div>\
                   <div class=\"more-scraped-examples\">\
-                    <div class=\"toggle-line\"><div class=\"toggle-line-inner\"></div></div>\
-                    <div class=\"more-scraped-examples-inner\">"
+                    <div class=\"toggle-line\"><div class=\"toggle-line-inner\"></div></div>"
         );
 
         // Only generate inline code for MAX_FULL_EXAMPLES number of examples. Otherwise we could
@@ -3030,7 +3029,7 @@ fn render_call_locations(w: &mut Buffer, cx: &mut Context<'_>, item: &clean::Ite
             write!(w, "</ul></div>");
         }
 
-        write!(w, "</div></div></details>");
+        write!(w, "</div></details>");
     }
 
     write!(w, "</div>");

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

@@ -1991,20 +1991,15 @@ in storage.js
 }
 
 .more-scraped-examples {
-	margin-left: 5px;
-	display: flex;
-	flex-direction: row;
-}
-
-.more-scraped-examples-inner {
-	/* 20px is width of toggle-line + toggle-line-inner */
-	width: calc(100% - 20px);
+	margin-left: 25px;
+	position: relative;
 }
 
 .toggle-line {
-	align-self: stretch;
-	margin-right: 10px;
-	margin-top: 5px;
+	position: absolute;
+	top: 5px;
+	bottom: 0;
+	right: calc(100% + 10px);
 	padding: 0 4px;
 	cursor: pointer;
 }

src/test/rustdoc-gui/scrape-examples-layout.goml

@@ -10,26 +10,26 @@ assert-property-false: (
 // Check that examples with very long lines have the same width as ones that don't.
 store-property: (
     clientWidth,
-    ".more-scraped-examples .scraped-example:nth-child(1) .code-wrapper .src-line-numbers",
+    ".more-scraped-examples .scraped-example:nth-child(2) .code-wrapper .src-line-numbers",
     "clientWidth"
 )
 
 assert-property: (
-    ".more-scraped-examples .scraped-example:nth-child(2) .code-wrapper .src-line-numbers",
+    ".more-scraped-examples .scraped-example:nth-child(3) .code-wrapper .src-line-numbers",
     {"clientWidth": |clientWidth|}
 )
 
 assert-property: (
-    ".more-scraped-examples .scraped-example:nth-child(3) .code-wrapper .src-line-numbers",
+    ".more-scraped-examples .scraped-example:nth-child(4) .code-wrapper .src-line-numbers",
     {"clientWidth": |clientWidth|}
 )
 
 assert-property: (
-    ".more-scraped-examples .scraped-example:nth-child(4) .code-wrapper .src-line-numbers",
+    ".more-scraped-examples .scraped-example:nth-child(5) .code-wrapper .src-line-numbers",
     {"clientWidth": |clientWidth|}
 )
 
 assert-property: (
-    ".more-scraped-examples .scraped-example:nth-child(5) .code-wrapper .src-line-numbers",
+    ".more-scraped-examples .scraped-example:nth-child(6) .code-wrapper .src-line-numbers",
     {"clientWidth": |clientWidth|}
 )