Rollup merge of #103722 - GuillaumeGomez:cleanup-code-example-css, r=notriddle

Fix z-indexes of code example feature and cleanup its CSS

When reviewing https://github.com/rust-lang/rust/pull/103650, I realized that the `z-index`es of this feature were completely broken:

![Screenshot from 2022-10-28 10-55-27](https://user-images.githubusercontent.com/3050060/198826360-0c5cbe5a-ea8e-452a-9504-38d3da3615e6.png)

This PR fixes it by reducing the value of value under the one used for `.popover` (it could be completely removed but then it wouldn't be displayed as nicely).

There was also a lot of duplicated CSS so I merged the rules.

r? `@notriddle`

src/librustdoc/html/highlight.rs

@@ -72,8 +72,12 @@ pub(crate) fn render_source_with_highlighting(
     line_numbers: Buffer,
     href_context: HrefContext<'_, '_, '_>,
     decoration_info: DecorationInfo,
+    extra: Option<&str>,
 ) {
     write_header(out, "", Some(line_numbers), Tooltip::None);
+    if let Some(extra) = extra {
+        out.push_str(extra);
+    }
     write_code(out, src, Some(href_context), Some(decoration_info));
     write_footer(out, None);
 }

src/librustdoc/html/render/mod.rs

@@ -2869,10 +2869,6 @@ fn render_call_locations(w: &mut Buffer, cx: &mut Context<'_>, item: &clean::Ite
             write!(w, r#"<span class="prev">&pr;</span> <span class="next">&sc;</span>"#);
         }
 
-        if needs_expansion {
-            write!(w, r#"<span class="expand">&varr;</span>"#);
-        }
-
         // Look for the example file in the source map if it exists, otherwise return a dummy span
         let file_span = (|| {
             let source_map = tcx.sess.source_map();
@@ -2906,7 +2902,7 @@ fn render_call_locations(w: &mut Buffer, cx: &mut Context<'_>, item: &clean::Ite
             cx,
             &root_path,
             highlight::DecorationInfo(decoration_info),
-            sources::SourceContext::Embedded { offset: line_min },
+            sources::SourceContext::Embedded { offset: line_min, needs_expansion },
         );
         write!(w, "</div></div>");
 

src/librustdoc/html/sources.rs

@@ -258,7 +258,7 @@ where
 
 pub(crate) enum SourceContext {
     Standalone,
-    Embedded { offset: usize },
+    Embedded { offset: usize, needs_expansion: bool },
 }
 
 /// Wrapper struct to render the source code of a file. This will do things like
@@ -274,14 +274,18 @@ pub(crate) fn print_src(
 ) {
     let lines = s.lines().count();
     let mut line_numbers = Buffer::empty_from(buf);
+    let extra;
     line_numbers.write_str("<pre class=\"src-line-numbers\">");
     match source_context {
         SourceContext::Standalone => {
+            extra = None;
             for line in 1..=lines {
                 writeln!(line_numbers, "<span id=\"{0}\">{0}</span>", line)
             }
         }
-        SourceContext::Embedded { offset } => {
+        SourceContext::Embedded { offset, needs_expansion } => {
+            extra =
+                if needs_expansion { Some(r#"<span class="expand">&varr;</span>"#) } else { None };
             for line in 1..=lines {
                 writeln!(line_numbers, "<span>{0}</span>", line + offset)
             }
@@ -297,5 +301,6 @@ pub(crate) fn print_src(
         line_numbers,
         highlight::HrefContext { context, file_span, root_path, current_href },
         decoration_info,
+        extra,
     );
 }

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

@@ -2023,45 +2023,36 @@ in storage.js
 	padding-bottom: 0;
 }
 
-.scraped-example .code-wrapper .prev {
+.scraped-example .code-wrapper .next,
-	position: absolute;
+.scraped-example .code-wrapper .prev,
-	top: 0.25em;
-	right: 2.25em;
-	z-index: 100;
-	cursor: pointer;
-}
-
-.scraped-example .code-wrapper .next {
-	position: absolute;
-	top: 0.25em;
-	right: 1.25em;
-	z-index: 100;
-	cursor: pointer;
-}
-
 .scraped-example .code-wrapper .expand {
 	position: absolute;
 	top: 0.25em;
-	right: 0.25em;
+	z-index: 1;
-	z-index: 100;
 	cursor: pointer;
 }
-
+.scraped-example .code-wrapper .prev {
-.scraped-example:not(.expanded) .code-wrapper:before {
+	right: 2.25em;
-	content: " ";
+}
-	width: 100%;
+.scraped-example .code-wrapper .next {
-	height: 5px;
+	right: 1.25em;
-	position: absolute;
+}
-	z-index: 100;
+.scraped-example .code-wrapper .expand {
-	top: 0;
+	right: 0.25em;
 }
 
+.scraped-example:not(.expanded) .code-wrapper:before,
 .scraped-example:not(.expanded) .code-wrapper:after {
 	content: " ";
 	width: 100%;
 	height: 5px;
 	position: absolute;
-	z-index: 100;
+	z-index: 1;
+}
+.scraped-example:not(.expanded) .code-wrapper:before {
+	top: 0;
+}
+.scraped-example:not(.expanded) .code-wrapper:after {
 	bottom: 0;
 }