From 30168bd06bd623a47ba2c43cadde3671ae48a7a8 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Fri, 9 Sep 2022 16:18:14 +0200 Subject: [PATCH] Simplify DOM for codeblocks tooltips --- src/librustdoc/html/highlight.rs | 27 ++-- src/librustdoc/html/static/css/rustdoc.css | 142 +++++++++++---------- 2 files changed, 86 insertions(+), 83 deletions(-) diff --git a/src/librustdoc/html/highlight.rs b/src/librustdoc/html/highlight.rs index 84781d898385..1e6cab8fcd3b 100644 --- a/src/librustdoc/html/highlight.rs +++ b/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, tooltip: Tooltip) { - write!(out, "
"); - - let tooltip_class = match tooltip { - Tooltip::Ignore => " ignore", - Tooltip::CompileFail => " compile_fail", - Tooltip::ShouldPanic => " should_panic", - Tooltip::Edition(_) => " edition", - Tooltip::None => "", - }; + write!( + out, + "
", + match tooltip { + Tooltip::Ignore => " ignore", + Tooltip::CompileFail => " compile_fail", + Tooltip::ShouldPanic => " should_panic", + Tooltip::Edition(_) => " edition", + Tooltip::None => "", + }, + ); if tooltip != Tooltip::None { write!( out, - "
ⓘ
", - 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, 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, "
");
     } else {
-        write!(out, "
");
+        write!(out, "
");
     }
     write!(out, "");
 }
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index ec9e3b1ecd17..c854d3bf4eeb 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -1156,42 +1156,100 @@ pre.rust .question-mark {
 	font-weight: bold;
 }
 
-pre.compile_fail,
-pre.should_panic {
+.example-wrap.compile_fail,
+.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:hover pre.should_panic {
+.example-wrap.compile_fail:hover,
+.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,
-.tooltip.should_panic {
+.example-wrap.compile_fail .tooltip,
+.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:hover .tooltip.should_panic {
+.example-wrap.compile_fail:hover .tooltip,
+.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;
@@ -1257,62 +1315,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;
@@ -1354,7 +1356,7 @@ h3.variant {
 	display: block;
 }
 
-.notable-traits .docblock code.content{
+.notable-traits .docblock code.content {
 	margin: 0;
 	padding: 0;
 	font-size: 1.25rem;
@@ -1723,7 +1725,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;
 	}