Auto merge of #101613 - GuillaumeGomez:codeblock-tooltip, r=notriddle

Simplify codeblock and their associated tooltip

It is based on https://github.com/rust-lang/rust/pull/101600 so it needs to wait for this one to be merged first.

This PR does two things:

 * Remove CSS class duplication by setting CSS classes such as `compile_fail` directly on the `div` wrapping both the codeblock and the tooltip.
 * Simplify DOM: no need to wrap the tooltip into a `<div>`, it can work just as well without it.

You can test it [here](https://rustdoc.crud.net/imperio/codeblock-tooltip/std/string/struct.String.html#deref).

r? `@notriddle`

src/librustdoc/html/highlight.rs

@@ -78,21 +78,22 @@ pub(crate) fn render_source_with_highlighting(
 }
 
 fn write_header(out: &mut Buffer, class: &str, extra_content: Option<Buffer>, tooltip: Tooltip) {
-    write!(out, "<div class=\"example-wrap\">");
+    write!(
-
+        out,
-    let tooltip_class = match tooltip {
+        "<div class=\"example-wrap{}\">",
-        Tooltip::Ignore => " ignore",
+        match tooltip {
-        Tooltip::CompileFail => " compile_fail",
+            Tooltip::Ignore => " ignore",
-        Tooltip::ShouldPanic => " should_panic",
+            Tooltip::CompileFail => " compile_fail",
-        Tooltip::Edition(_) => " edition",
+            Tooltip::ShouldPanic => " should_panic",
-        Tooltip::None => "",
+            Tooltip::Edition(_) => " edition",
-    };
+            Tooltip::None => "",
+        },
+    );
 
     if tooltip != Tooltip::None {
         write!(
             out,
-            "<div class='information'><div class='tooltip{}'{}>ⓘ</div></div>",
+            "<div class='tooltip'{}>ⓘ</div>",
-            tooltip_class,
             if let Tooltip::Edition(edition_info) = tooltip {
                 format!(" data-edition=\"{}\"", edition_info)
             } else {
@@ -104,10 +105,10 @@ fn write_header(out: &mut Buffer, class: &str, extra_content: Option<Buffer>, to
     if let Some(extra) = extra_content {
         out.push_buffer(extra);
     }
-    if class.is_empty() && tooltip_class.is_empty() {
+    if class.is_empty() {
         write!(out, "<pre class=\"rust\">");
     } else {
-        write!(out, "<pre class=\"rust {class}{tooltip_class}\">");
+        write!(out, "<pre class=\"rust {class}\">");
     }
     write!(out, "<code>");
 }

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

@@ -1151,42 +1151,100 @@ pre.rust .question-mark {
 	font-weight: bold;
 }
 
-pre.compile_fail,
+.example-wrap.compile_fail,
-pre.should_panic {
+.example-wrap.should_panic {
 	border-left: 2px solid var(--codeblock-error-color);
 }
 
-pre.ignore {
+.ignore.example-wrap {
 	border-left: 2px solid var(--codeblock-ignore-color);
 }
 
-.example-wrap:hover pre.compile_fail,
+.example-wrap.compile_fail:hover,
-.example-wrap:hover pre.should_panic {
+.example-wrap.should_panic:hover {
 	border-left: 2px solid var(--codeblock-error-hover-color);
 }
 
-.example-wrap:hover pre.ignore {
+.example-wrap.ignore:hover {
 	border-left: 2px solid var(--codeblock-ignore-hover-color);
 }
 
-.tooltip.compile_fail,
+.example-wrap.compile_fail .tooltip,
-.tooltip.should_panic {
+.example-wrap.should_panic .tooltip {
 	color: var(--codeblock-error-color);
 }
 
-.tooltip.ignore {
+.example-wrap.ignore .tooltip {
 	color:  var(--codeblock-ignore-color);
 }
 
-.example-wrap:hover .tooltip.compile_fail,
+.example-wrap.compile_fail:hover .tooltip,
-.example-wrap:hover .tooltip.should_panic {
+.example-wrap.should_panic:hover .tooltip {
 	color: var(--codeblock-error-hover-color);
 }
 
-.example-wrap:hover .tooltip.ignore {
+.example-wrap.ignore:hover .tooltip {
 	color: var(--codeblock-ignore-hover-color);
 }
 
+.example-wrap .tooltip {
+	position: absolute;
+	display: block;
+	cursor: pointer;
+	left: -25px;
+	top: 5px;
+}
+
+.example-wrap .tooltip::after {
+	display: none;
+	text-align: center;
+	padding: 5px 3px 3px 3px;
+	border-radius: 6px;
+	margin-left: 5px;
+	font-size: 1rem;
+	border: 1px solid var(--border-color);
+	position: absolute;
+	width: max-content;
+	top: -2px;
+	z-index: 1;
+}
+
+.example-wrap .tooltip::before {
+	content: " ";
+	position: absolute;
+	top: 50%;
+	left: 16px;
+	margin-top: -5px;
+	border-width: 5px;
+	border-style: solid;
+	display: none;
+	z-index: 1;
+}
+
+.example-wrap.ignore .tooltip::after {
+	content: "This example is not tested";
+}
+.example-wrap.compile_fail .tooltip::after {
+	content: "This example deliberately fails to compile";
+}
+.example-wrap.should_panic .tooltip::after {
+	content: "This example panics";
+}
+.example-wrap.edition .tooltip::after {
+	content: "This code runs with edition " attr(data-edition);
+}
+
+.example-wrap .tooltip:hover::before, .example-wrap .tooltip:hover::after {
+	display: inline;
+}
+
+.example-wrap.compile_fail .tooltip,
+.example-wrap.should_panic .tooltip,
+.example-wrap.ignore .tooltip {
+	font-weight: bold;
+	font-size: 1.25rem;
+}
+
 a.test-arrow {
 	display: inline-block;
 	visibility: hidden;
@@ -1252,62 +1310,6 @@ h3.variant {
 	padding-right: 3px;
 }
 
-.information {
-	position: absolute;
-	left: -25px;
-	margin-top: 7px;
-	z-index: 1;
-}
-
-.tooltip {
-	position: relative;
-	display: inline-block;
-	cursor: pointer;
-}
-
-.tooltip::after {
-	display: none;
-	text-align: center;
-	padding: 5px 3px 3px 3px;
-	border-radius: 6px;
-	margin-left: 5px;
-	font-size: 1rem;
-	border: 1px solid var(--border-color);
-}
-
-.tooltip.ignore::after {
-	content: "This example is not tested";
-}
-.tooltip.compile_fail::after {
-	content: "This example deliberately fails to compile";
-}
-.tooltip.should_panic::after {
-	content: "This example panics";
-}
-.tooltip.edition::after {
-	content: "This code runs with edition " attr(data-edition);
-}
-
-.tooltip::before {
-	content: " ";
-	position: absolute;
-	top: 50%;
-	left: 16px;
-	margin-top: -5px;
-	border-width: 5px;
-	border-style: solid;
-	display: none;
-}
-
-.tooltip:hover::before, .tooltip:hover::after {
-	display: inline;
-}
-
-.tooltip.compile_fail, .tooltip.should_panic, .tooltip.ignore {
-	font-weight: bold;
-	font-size: 1.25rem;
-}
-
 .notable-traits-tooltip {
 	display: inline-block;
 	cursor: pointer;
@@ -1349,7 +1351,7 @@ h3.variant {
 	display: block;
 }
 
-.notable-traits .docblock code.content{
+.notable-traits .docblock code.content {
 	margin: 0;
 	padding: 0;
 	font-size: 1.25rem;
@@ -1718,7 +1720,7 @@ in storage.js plus the media query with (max-width: 700px)
 	to prevent an overlay between the "collapse toggle" and the information tooltip.
 	However, it's not needed with smaller screen width because the doc/code block is always put
 	"one line" below. */
-	.docblock > .example-wrap:first-child > .information > .tooltip {
+	.docblock > .example-wrap:first-child .tooltip {
 		margin-top: 16px;
 	}
 

src/test/rustdoc-gui/check_info_sign_position.goml

@@ -4,8 +4,8 @@ goto: file://|DOC_PATH|/test_docs/index.html
 goto: ./fn.check_list_code_block.html
 // If the codeblock is the first element of the docblock, the information tooltip must have
 // have some top margin to avoid going over the toggle (the "[+]").
-assert-css: (".docblock > .example-wrap > .information > .compile_fail", { "margin-top": "16px" })
+assert-css: (".docblock > .example-wrap.compile_fail .tooltip", { "margin-top": "16px" })
 // Checks that the other codeblocks don't have this top margin.
-assert-css: ("ol > li > .example-wrap > .information > .compile_fail", { "margin-top": "0px" })
+assert-css: ("ol > li > .example-wrap.compile_fail .tooltip", { "margin-top": "0px" })
-assert-css: ("ol > li > .example-wrap > .information > .ignore", { "margin-top": "0px" })
+assert-css: ("ol > li > .example-wrap.ignore .tooltip", { "margin-top": "0px" })
-assert-css: (".docblock > .example-wrap > .information > .ignore", { "margin-top": "0px" })
+assert-css: (".docblock > .example-wrap.ignore .tooltip", { "margin-top": "0px" })

src/test/rustdoc-gui/codeblock-tooltip.goml

@@ -7,90 +7,90 @@ local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
 reload:
 
 // compile_fail block
-assert-css: (".docblock .information .compile_fail", {"color": "rgba(255, 0, 0, 0.5)"})
+assert-css: (".docblock .example-wrap.compile_fail .tooltip", {"color": "rgba(255, 0, 0, 0.5)"})
-assert-css: (".docblock .example-wrap pre.compile_fail", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
+assert-css: (".docblock .example-wrap.compile_fail", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
 
-move-cursor-to: ".docblock .information .compile_fail"
+move-cursor-to: ".docblock .example-wrap.compile_fail"
 
-assert-css: (".docblock .information .compile_fail", {"color": "rgb(255, 0, 0)"})
+assert-css: (".docblock .example-wrap.compile_fail .tooltip", {"color": "rgb(255, 0, 0)"})
-assert-css: (".docblock .example-wrap pre.compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
+assert-css: (".docblock .example-wrap.compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
 
 // should_panic block
-assert-css: (".docblock .information .should_panic", {"color": "rgba(255, 0, 0, 0.5)"})
+assert-css: (".docblock .example-wrap.should_panic .tooltip", {"color": "rgba(255, 0, 0, 0.5)"})
-assert-css: (".docblock .example-wrap pre.should_panic", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
+assert-css: (".docblock .example-wrap.should_panic", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
 
-move-cursor-to: ".docblock .information .should_panic"
+move-cursor-to: ".docblock .example-wrap.should_panic"
 
-assert-css: (".docblock .information .should_panic", {"color": "rgb(255, 0, 0)"})
+assert-css: (".docblock .example-wrap.should_panic .tooltip", {"color": "rgb(255, 0, 0)"})
-assert-css: (".docblock .example-wrap pre.should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
+assert-css: (".docblock .example-wrap.should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
 
 // ignore block
-assert-css: (".docblock .information .ignore", {"color": "rgba(255, 142, 0, 0.6)"})
+assert-css: (".docblock .example-wrap.ignore .tooltip", {"color": "rgba(255, 142, 0, 0.6)"})
-assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
+assert-css: (".docblock .example-wrap.ignore", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
 
-move-cursor-to: ".docblock .information .ignore"
+move-cursor-to: ".docblock .example-wrap.ignore"
 
-assert-css: (".docblock .information .ignore", {"color": "rgb(255, 142, 0)"})
+assert-css: (".docblock .example-wrap.ignore .tooltip", {"color": "rgb(255, 142, 0)"})
-assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
+assert-css: (".docblock .example-wrap.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
 
 
 // Light theme.
 local-storage: {"rustdoc-theme": "light"}
 reload:
 
-assert-css: (".docblock .information .compile_fail", {"color": "rgba(255, 0, 0, 0.5)"})
+assert-css: (".docblock .example-wrap.compile_fail .tooltip", {"color": "rgba(255, 0, 0, 0.5)"})
-assert-css: (".docblock .example-wrap pre.compile_fail", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
+assert-css: (".docblock .example-wrap.compile_fail", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
 
-move-cursor-to: ".docblock .information .compile_fail"
+move-cursor-to: ".docblock .example-wrap.compile_fail"
 
-assert-css: (".docblock .information .compile_fail", {"color": "rgb(255, 0, 0)"})
+assert-css: (".docblock .example-wrap.compile_fail .tooltip", {"color": "rgb(255, 0, 0)"})
-assert-css: (".docblock .example-wrap pre.compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
+assert-css: (".docblock .example-wrap.compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
 
 // should_panic block
-assert-css: (".docblock .information .should_panic", {"color": "rgba(255, 0, 0, 0.5)"})
+assert-css: (".docblock .example-wrap.should_panic .tooltip", {"color": "rgba(255, 0, 0, 0.5)"})
-assert-css: (".docblock .example-wrap pre.should_panic", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
+assert-css: (".docblock .example-wrap.should_panic", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
 
-move-cursor-to: ".docblock .information .should_panic"
+move-cursor-to: ".docblock .example-wrap.should_panic"
 
-assert-css: (".docblock .information .should_panic", {"color": "rgb(255, 0, 0)"})
+assert-css: (".docblock .example-wrap.should_panic .tooltip", {"color": "rgb(255, 0, 0)"})
-assert-css: (".docblock .example-wrap pre.should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
+assert-css: (".docblock .example-wrap.should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
 
 // ignore block
-assert-css: (".docblock .information .ignore", {"color": "rgba(255, 142, 0, 0.6)"})
+assert-css: (".docblock .example-wrap.ignore .tooltip", {"color": "rgba(255, 142, 0, 0.6)"})
-assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
+assert-css: (".docblock .example-wrap.ignore", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
 
-move-cursor-to: ".docblock .information .ignore"
+move-cursor-to: ".docblock .example-wrap.ignore"
 
-assert-css: (".docblock .information .ignore", {"color": "rgb(255, 142, 0)"})
+assert-css: (".docblock .example-wrap.ignore .tooltip", {"color": "rgb(255, 142, 0)"})
-assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
+assert-css: (".docblock .example-wrap.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
 
 
 // Ayu theme.
 local-storage: {"rustdoc-theme": "ayu"}
 reload:
 
-assert-css: (".docblock .information .compile_fail", {"color": "rgba(255, 0, 0, 0.5)"})
+assert-css: (".docblock .example-wrap.compile_fail .tooltip", {"color": "rgba(255, 0, 0, 0.5)"})
-assert-css: (".docblock .example-wrap pre.compile_fail", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
+assert-css: (".docblock .example-wrap.compile_fail", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
 
-move-cursor-to: ".docblock .information .compile_fail"
+move-cursor-to: ".docblock .example-wrap.compile_fail"
 
-assert-css: (".docblock .information .compile_fail", {"color": "rgb(255, 0, 0)"})
+assert-css: (".docblock .example-wrap.compile_fail .tooltip", {"color": "rgb(255, 0, 0)"})
-assert-css: (".docblock .example-wrap pre.compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
+assert-css: (".docblock .example-wrap.compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
 
 // should_panic block
-assert-css: (".docblock .information .should_panic", {"color": "rgba(255, 0, 0, 0.5)"})
+assert-css: (".docblock .example-wrap.should_panic .tooltip", {"color": "rgba(255, 0, 0, 0.5)"})
-assert-css: (".docblock .example-wrap pre.should_panic", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
+assert-css: (".docblock .example-wrap.should_panic", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
 
-move-cursor-to: ".docblock .information .should_panic"
+move-cursor-to: ".docblock .example-wrap.should_panic"
 
-assert-css: (".docblock .information .should_panic", {"color": "rgb(255, 0, 0)"})
+assert-css: (".docblock .example-wrap.should_panic .tooltip", {"color": "rgb(255, 0, 0)"})
-assert-css: (".docblock .example-wrap pre.should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
+assert-css: (".docblock .example-wrap.should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
 
 // ignore block
-assert-css: (".docblock .information .ignore", {"color": "rgba(255, 142, 0, 0.6)"})
+assert-css: (".docblock .example-wrap.ignore .tooltip", {"color": "rgba(255, 142, 0, 0.6)"})
-assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
+assert-css: (".docblock .example-wrap.ignore", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
 
-move-cursor-to: ".docblock .information .ignore"
+move-cursor-to: ".docblock .example-wrap.ignore"
 
-assert-css: (".docblock .information .ignore", {"color": "rgb(255, 142, 0)"})
+assert-css: (".docblock .example-wrap.ignore .tooltip", {"color": "rgb(255, 142, 0)"})
-assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
+assert-css: (".docblock .example-wrap.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})

src/test/rustdoc-gui/overflow-tooltip-information.goml

@@ -2,7 +2,7 @@
 // have overflow and max-width CSS rules set because they create a bug in firefox on
 // mac. For more information: https://github.com/rust-lang/rust/issues/89185
 goto: file://|DOC_PATH|/test_docs/fn.foo.html
-assert-css: (".docblock > .example-wrap > .information", {
+assert-css: (".docblock > .example-wrap .tooltip", {
     "overflow-x": "visible",
     "max-width": "none"
 }, ALL)

src/test/rustdoc/codeblock-title.rs

@@ -1,8 +1,8 @@
 #![crate_name = "foo"]
 
-// @has foo/fn.bar.html '//*[@class="tooltip compile_fail"]' "ⓘ"
+// @has foo/fn.bar.html '//*[@class="example-wrap compile_fail"]/*[@class="tooltip"]' "ⓘ"
-// @has foo/fn.bar.html '//*[@class="tooltip ignore"]' "ⓘ"
+// @has foo/fn.bar.html '//*[@class="example-wrap ignore"]/*[@class="tooltip"]' "ⓘ"
-// @has foo/fn.bar.html '//*[@class="tooltip should_panic"]' "ⓘ"
+// @has foo/fn.bar.html '//*[@class="example-wrap should_panic"]/*[@class="tooltip"]' "ⓘ"
 // @has foo/fn.bar.html '//*[@data-edition="2018"]' "ⓘ"
 
 /// foo