Skip to content

Commit 2a1db4e

Browse files
compiler-errorscompiler-errors
authored
Rollup merge of #101613 - GuillaumeGomez:codeblock-tooltip, r=notriddle
Simplify codeblock and their associated tooltip It is based on #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`
2 parents 1463688 + 8ba06d4 commit 2a1db4e

File tree

6 files changed

+139
-136
lines changed

6 files changed

+139
-136
lines changed

‎src/librustdoc/html/highlight.rs

+14-13
Original file line numberDiff line numberDiff line change
@@ -78,21 +78,22 @@ pub(crate) fn render_source_with_highlighting(
7878
}
7979

8080
fn write_header(out: &mut Buffer, class: &str, extra_content: Option<Buffer>, tooltip: Tooltip) {
81-
write!(out, "<div class=\"example-wrap\">");
82-
83-
let tooltip_class = match tooltip {
84-
Tooltip::Ignore => " ignore",
85-
Tooltip::CompileFail => " compile_fail",
86-
Tooltip::ShouldPanic => " should_panic",
87-
Tooltip::Edition(_) => " edition",
88-
Tooltip::None => "",
89-
};
81+
write!(
82+
out,
83+
"<div class=\"example-wrap{}\">",
84+
match tooltip {
85+
Tooltip::Ignore => " ignore",
86+
Tooltip::CompileFail => " compile_fail",
87+
Tooltip::ShouldPanic => " should_panic",
88+
Tooltip::Edition(_) => " edition",
89+
Tooltip::None => "",
90+
},
91+
);
9092

9193
if tooltip != Tooltip::None {
9294
write!(
9395
out,
94-
"<div class='information'><div class='tooltip{}'{}>ⓘ</div></div>",
95-
tooltip_class,
96+
"<div class='tooltip'{}>ⓘ</div>",
9697
if let Tooltip::Edition(edition_info) = tooltip {
9798
format!(" data-edition=\"{}\"", edition_info)
9899
} else {
@@ -104,10 +105,10 @@ fn write_header(out: &mut Buffer, class: &str, extra_content: Option<Buffer>, to
104105
if let Some(extra) = extra_content {
105106
out.push_buffer(extra);
106107
}
107-
if class.is_empty() && tooltip_class.is_empty() {
108+
if class.is_empty() {
108109
write!(out, "<pre class=\"rust\">");
109110
} else {
110-
write!(out, "<pre class=\"rust {class}{tooltip_class}\">");
111+
write!(out, "<pre class=\"rust {class}\">");
111112
}
112113
write!(out, "<code>");
113114
}

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

+72-70
Original file line numberDiff line numberDiff line change
@@ -1151,42 +1151,100 @@ pre.rust .question-mark {
11511151
font-weight: bold;
11521152
}
11531153

1154-
pre.compile_fail,
1155-
pre.should_panic {
1154+
.example-wrap.compile_fail,
1155+
.example-wrap.should_panic {
11561156
border-left: 2px solid var(--codeblock-error-color);
11571157
}
11581158

1159-
pre.ignore {
1159+
.ignore.example-wrap {
11601160
border-left: 2px solid var(--codeblock-ignore-color);
11611161
}
11621162

1163-
.example-wrap:hover pre.compile_fail,
1164-
.example-wrap:hover pre.should_panic {
1163+
.example-wrap.compile_fail:hover,
1164+
.example-wrap.should_panic:hover {
11651165
border-left: 2px solid var(--codeblock-error-hover-color);
11661166
}
11671167

1168-
.example-wrap:hover pre.ignore {
1168+
.example-wrap.ignore:hover {
11691169
border-left: 2px solid var(--codeblock-ignore-hover-color);
11701170
}
11711171

1172-
.tooltip.compile_fail,
1173-
.tooltip.should_panic {
1172+
.example-wrap.compile_fail .tooltip,
1173+
.example-wrap.should_panic .tooltip {
11741174
color: var(--codeblock-error-color);
11751175
}
11761176

1177-
.tooltip.ignore {
1177+
.example-wrap.ignore .tooltip {
11781178
color: var(--codeblock-ignore-color);
11791179
}
11801180

1181-
.example-wrap:hover .tooltip.compile_fail,
1182-
.example-wrap:hover .tooltip.should_panic {
1181+
.example-wrap.compile_fail:hover .tooltip,
1182+
.example-wrap.should_panic:hover .tooltip {
11831183
color: var(--codeblock-error-hover-color);
11841184
}
11851185

1186-
.example-wrap:hover .tooltip.ignore {
1186+
.example-wrap.ignore:hover .tooltip {
11871187
color: var(--codeblock-ignore-hover-color);
11881188
}
11891189

1190+
.example-wrap .tooltip {
1191+
position: absolute;
1192+
display: block;
1193+
cursor: pointer;
1194+
left: -25px;
1195+
top: 5px;
1196+
}
1197+
1198+
.example-wrap .tooltip::after {
1199+
display: none;
1200+
text-align: center;
1201+
padding: 5px 3px 3px 3px;
1202+
border-radius: 6px;
1203+
margin-left: 5px;
1204+
font-size: 1rem;
1205+
border: 1px solid var(--border-color);
1206+
position: absolute;
1207+
width: max-content;
1208+
top: -2px;
1209+
z-index: 1;
1210+
}
1211+
1212+
.example-wrap .tooltip::before {
1213+
content: " ";
1214+
position: absolute;
1215+
top: 50%;
1216+
left: 16px;
1217+
margin-top: -5px;
1218+
border-width: 5px;
1219+
border-style: solid;
1220+
display: none;
1221+
z-index: 1;
1222+
}
1223+
1224+
.example-wrap.ignore .tooltip::after {
1225+
content: "This example is not tested";
1226+
}
1227+
.example-wrap.compile_fail .tooltip::after {
1228+
content: "This example deliberately fails to compile";
1229+
}
1230+
.example-wrap.should_panic .tooltip::after {
1231+
content: "This example panics";
1232+
}
1233+
.example-wrap.edition .tooltip::after {
1234+
content: "This code runs with edition " attr(data-edition);
1235+
}
1236+
1237+
.example-wrap .tooltip:hover::before, .example-wrap .tooltip:hover::after {
1238+
display: inline;
1239+
}
1240+
1241+
.example-wrap.compile_fail .tooltip,
1242+
.example-wrap.should_panic .tooltip,
1243+
.example-wrap.ignore .tooltip {
1244+
font-weight: bold;
1245+
font-size: 1.25rem;
1246+
}
1247+
11901248
a.test-arrow {
11911249
display: inline-block;
11921250
visibility: hidden;
@@ -1252,62 +1310,6 @@ h3.variant {
12521310
padding-right: 3px;
12531311
}
12541312

1255-
.information {
1256-
position: absolute;
1257-
left: -25px;
1258-
margin-top: 7px;
1259-
z-index: 1;
1260-
}
1261-
1262-
.tooltip {
1263-
position: relative;
1264-
display: inline-block;
1265-
cursor: pointer;
1266-
}
1267-
1268-
.tooltip::after {
1269-
display: none;
1270-
text-align: center;
1271-
padding: 5px 3px 3px 3px;
1272-
border-radius: 6px;
1273-
margin-left: 5px;
1274-
font-size: 1rem;
1275-
border: 1px solid var(--border-color);
1276-
}
1277-
1278-
.tooltip.ignore::after {
1279-
content: "This example is not tested";
1280-
}
1281-
.tooltip.compile_fail::after {
1282-
content: "This example deliberately fails to compile";
1283-
}
1284-
.tooltip.should_panic::after {
1285-
content: "This example panics";
1286-
}
1287-
.tooltip.edition::after {
1288-
content: "This code runs with edition " attr(data-edition);
1289-
}
1290-
1291-
.tooltip::before {
1292-
content: " ";
1293-
position: absolute;
1294-
top: 50%;
1295-
left: 16px;
1296-
margin-top: -5px;
1297-
border-width: 5px;
1298-
border-style: solid;
1299-
display: none;
1300-
}
1301-
1302-
.tooltip:hover::before, .tooltip:hover::after {
1303-
display: inline;
1304-
}
1305-
1306-
.tooltip.compile_fail, .tooltip.should_panic, .tooltip.ignore {
1307-
font-weight: bold;
1308-
font-size: 1.25rem;
1309-
}
1310-
13111313
.notable-traits-tooltip {
13121314
display: inline-block;
13131315
cursor: pointer;
@@ -1349,7 +1351,7 @@ h3.variant {
13491351
display: block;
13501352
}
13511353

1352-
.notable-traits .docblock code.content{
1354+
.notable-traits .docblock code.content {
13531355
margin: 0;
13541356
padding: 0;
13551357
font-size: 1.25rem;
@@ -1718,7 +1720,7 @@ in storage.js plus the media query with (max-width: 700px)
17181720
to prevent an overlay between the "collapse toggle" and the information tooltip.
17191721
However, it's not needed with smaller screen width because the doc/code block is always put
17201722
"one line" below. */
1721-
.docblock > .example-wrap:first-child > .information > .tooltip {
1723+
.docblock > .example-wrap:first-child .tooltip {
17221724
margin-top: 16px;
17231725
}
17241726

‎src/test/rustdoc-gui/check_info_sign_position.goml

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

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

+45-45
Original file line numberDiff line numberDiff line change
@@ -7,90 +7,90 @@ local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
77
reload:
88

99
// compile_fail block
10-
assert-css: (".docblock .information .compile_fail", {"color": "rgba(255, 0, 0, 0.5)"})
11-
assert-css: (".docblock .example-wrap pre.compile_fail", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
10+
assert-css: (".docblock .example-wrap.compile_fail .tooltip", {"color": "rgba(255, 0, 0, 0.5)"})
11+
assert-css: (".docblock .example-wrap.compile_fail", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
1212

13-
move-cursor-to: ".docblock .information .compile_fail"
13+
move-cursor-to: ".docblock .example-wrap.compile_fail"
1414

15-
assert-css: (".docblock .information .compile_fail", {"color": "rgb(255, 0, 0)"})
16-
assert-css: (".docblock .example-wrap pre.compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
15+
assert-css: (".docblock .example-wrap.compile_fail .tooltip", {"color": "rgb(255, 0, 0)"})
16+
assert-css: (".docblock .example-wrap.compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
1717

1818
// should_panic block
19-
assert-css: (".docblock .information .should_panic", {"color": "rgba(255, 0, 0, 0.5)"})
20-
assert-css: (".docblock .example-wrap pre.should_panic", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
19+
assert-css: (".docblock .example-wrap.should_panic .tooltip", {"color": "rgba(255, 0, 0, 0.5)"})
20+
assert-css: (".docblock .example-wrap.should_panic", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
2121

22-
move-cursor-to: ".docblock .information .should_panic"
22+
move-cursor-to: ".docblock .example-wrap.should_panic"
2323

24-
assert-css: (".docblock .information .should_panic", {"color": "rgb(255, 0, 0)"})
25-
assert-css: (".docblock .example-wrap pre.should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
24+
assert-css: (".docblock .example-wrap.should_panic .tooltip", {"color": "rgb(255, 0, 0)"})
25+
assert-css: (".docblock .example-wrap.should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
2626

2727
// ignore block
28-
assert-css: (".docblock .information .ignore", {"color": "rgba(255, 142, 0, 0.6)"})
29-
assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
28+
assert-css: (".docblock .example-wrap.ignore .tooltip", {"color": "rgba(255, 142, 0, 0.6)"})
29+
assert-css: (".docblock .example-wrap.ignore", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
3030

31-
move-cursor-to: ".docblock .information .ignore"
31+
move-cursor-to: ".docblock .example-wrap.ignore"
3232

33-
assert-css: (".docblock .information .ignore", {"color": "rgb(255, 142, 0)"})
34-
assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
33+
assert-css: (".docblock .example-wrap.ignore .tooltip", {"color": "rgb(255, 142, 0)"})
34+
assert-css: (".docblock .example-wrap.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
3535

3636

3737
// Light theme.
3838
local-storage: {"rustdoc-theme": "light"}
3939
reload:
4040

41-
assert-css: (".docblock .information .compile_fail", {"color": "rgba(255, 0, 0, 0.5)"})
42-
assert-css: (".docblock .example-wrap pre.compile_fail", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
41+
assert-css: (".docblock .example-wrap.compile_fail .tooltip", {"color": "rgba(255, 0, 0, 0.5)"})
42+
assert-css: (".docblock .example-wrap.compile_fail", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
4343

44-
move-cursor-to: ".docblock .information .compile_fail"
44+
move-cursor-to: ".docblock .example-wrap.compile_fail"
4545

46-
assert-css: (".docblock .information .compile_fail", {"color": "rgb(255, 0, 0)"})
47-
assert-css: (".docblock .example-wrap pre.compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
46+
assert-css: (".docblock .example-wrap.compile_fail .tooltip", {"color": "rgb(255, 0, 0)"})
47+
assert-css: (".docblock .example-wrap.compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
4848

4949
// should_panic block
50-
assert-css: (".docblock .information .should_panic", {"color": "rgba(255, 0, 0, 0.5)"})
51-
assert-css: (".docblock .example-wrap pre.should_panic", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
50+
assert-css: (".docblock .example-wrap.should_panic .tooltip", {"color": "rgba(255, 0, 0, 0.5)"})
51+
assert-css: (".docblock .example-wrap.should_panic", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
5252

53-
move-cursor-to: ".docblock .information .should_panic"
53+
move-cursor-to: ".docblock .example-wrap.should_panic"
5454

55-
assert-css: (".docblock .information .should_panic", {"color": "rgb(255, 0, 0)"})
56-
assert-css: (".docblock .example-wrap pre.should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
55+
assert-css: (".docblock .example-wrap.should_panic .tooltip", {"color": "rgb(255, 0, 0)"})
56+
assert-css: (".docblock .example-wrap.should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
5757

5858
// ignore block
59-
assert-css: (".docblock .information .ignore", {"color": "rgba(255, 142, 0, 0.6)"})
60-
assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
59+
assert-css: (".docblock .example-wrap.ignore .tooltip", {"color": "rgba(255, 142, 0, 0.6)"})
60+
assert-css: (".docblock .example-wrap.ignore", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
6161

62-
move-cursor-to: ".docblock .information .ignore"
62+
move-cursor-to: ".docblock .example-wrap.ignore"
6363

64-
assert-css: (".docblock .information .ignore", {"color": "rgb(255, 142, 0)"})
65-
assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
64+
assert-css: (".docblock .example-wrap.ignore .tooltip", {"color": "rgb(255, 142, 0)"})
65+
assert-css: (".docblock .example-wrap.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
6666

6767

6868
// Ayu theme.
6969
local-storage: {"rustdoc-theme": "ayu"}
7070
reload:
7171

72-
assert-css: (".docblock .information .compile_fail", {"color": "rgba(255, 0, 0, 0.5)"})
73-
assert-css: (".docblock .example-wrap pre.compile_fail", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
72+
assert-css: (".docblock .example-wrap.compile_fail .tooltip", {"color": "rgba(255, 0, 0, 0.5)"})
73+
assert-css: (".docblock .example-wrap.compile_fail", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
7474

75-
move-cursor-to: ".docblock .information .compile_fail"
75+
move-cursor-to: ".docblock .example-wrap.compile_fail"
7676

77-
assert-css: (".docblock .information .compile_fail", {"color": "rgb(255, 0, 0)"})
78-
assert-css: (".docblock .example-wrap pre.compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
77+
assert-css: (".docblock .example-wrap.compile_fail .tooltip", {"color": "rgb(255, 0, 0)"})
78+
assert-css: (".docblock .example-wrap.compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
7979

8080
// should_panic block
81-
assert-css: (".docblock .information .should_panic", {"color": "rgba(255, 0, 0, 0.5)"})
82-
assert-css: (".docblock .example-wrap pre.should_panic", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
81+
assert-css: (".docblock .example-wrap.should_panic .tooltip", {"color": "rgba(255, 0, 0, 0.5)"})
82+
assert-css: (".docblock .example-wrap.should_panic", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
8383

84-
move-cursor-to: ".docblock .information .should_panic"
84+
move-cursor-to: ".docblock .example-wrap.should_panic"
8585

86-
assert-css: (".docblock .information .should_panic", {"color": "rgb(255, 0, 0)"})
87-
assert-css: (".docblock .example-wrap pre.should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
86+
assert-css: (".docblock .example-wrap.should_panic .tooltip", {"color": "rgb(255, 0, 0)"})
87+
assert-css: (".docblock .example-wrap.should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
8888

8989
// ignore block
90-
assert-css: (".docblock .information .ignore", {"color": "rgba(255, 142, 0, 0.6)"})
91-
assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
90+
assert-css: (".docblock .example-wrap.ignore .tooltip", {"color": "rgba(255, 142, 0, 0.6)"})
91+
assert-css: (".docblock .example-wrap.ignore", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
9292

93-
move-cursor-to: ".docblock .information .ignore"
93+
move-cursor-to: ".docblock .example-wrap.ignore"
9494

95-
assert-css: (".docblock .information .ignore", {"color": "rgb(255, 142, 0)"})
96-
assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
95+
assert-css: (".docblock .example-wrap.ignore .tooltip", {"color": "rgb(255, 142, 0)"})
96+
assert-css: (".docblock .example-wrap.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})

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

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

0 commit comments

Comments
 (0)