bjoernager/rust
bjoernager/rust
1
Fork 0
Code Activity

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

Browse source 
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`
This commit is contained in:
bors 2022-09-10 23:13:23 +00:00
commit 781ef3e995
6 changed files with 139 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/librustdoc/html/highlight.rs
View file

@ -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\">");
let tooltip_class = match tooltip {
Tooltip::Ignore => " ignore",
Tooltip::CompileFail => " compile_fail",
Tooltip::ShouldPanic => " should_panic",
Tooltip::Edition(_) => " edition",
Tooltip::None => "",
};
write!(
out,
"<div class=\"example-wrap{}\">",
match tooltip {
Tooltip::Ignore => " ignore",
Tooltip::CompileFail => " compile_fail",
Tooltip::ShouldPanic => " should_panic",
Tooltip::Edition(_) => " edition",
Tooltip::None => "",
},
);
if tooltip != Tooltip::None {
write!(
out,
"<div class='information'><div class='tooltip{}'{}>ⓘ</div></div>",
tooltip_class,
"<div class='tooltip'{}>ⓘ</div>",
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>");
}

142
src/librustdoc/html/static/css/rustdoc.css
View file

@ -1151,42 +1151,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;
@ -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;
}

8
src/test/rustdoc-gui/check_info_sign_position.goml
View file

@ -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 > .information > .ignore", { "margin-top": "0px" })
assert-css: (".docblock > .example-wrap > .information > .ignore", { "margin-top": "0px" })
assert-css: ("ol > li > .example-wrap.compile_fail .tooltip", { "margin-top": "0px" })
assert-css: ("ol > li > .example-wrap.ignore .tooltip", { "margin-top": "0px" })
assert-css: (".docblock > .example-wrap.ignore .tooltip", { "margin-top": "0px" })

90
src/test/rustdoc-gui/codeblock-tooltip.goml
View file

@ -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 pre.compile_fail", {"border-left": "2px solid 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.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 pre.compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap.compile_fail .tooltip", {"color": "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 pre.should_panic", {"border-left": "2px solid 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.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 pre.should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap.should_panic .tooltip", {"color": "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 pre.ignore", {"border-left": "2px solid 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.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 pre.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
assert-css: (".docblock .example-wrap.ignore .tooltip", {"color": "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 pre.compile_fail", {"border-left": "2px solid 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.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 pre.compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap.compile_fail .tooltip", {"color": "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 pre.should_panic", {"border-left": "2px solid 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.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 pre.should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap.should_panic .tooltip", {"color": "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 pre.ignore", {"border-left": "2px solid 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.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 pre.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
assert-css: (".docblock .example-wrap.ignore .tooltip", {"color": "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 pre.compile_fail", {"border-left": "2px solid 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.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 pre.compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap.compile_fail .tooltip", {"color": "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 pre.should_panic", {"border-left": "2px solid 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.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 pre.should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap.should_panic .tooltip", {"color": "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 pre.ignore", {"border-left": "2px solid 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.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 pre.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
assert-css: (".docblock .example-wrap.ignore .tooltip", {"color": "rgb(255, 142, 0)"})
assert-css: (".docblock .example-wrap.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})

2
src/test/rustdoc-gui/overflow-tooltip-information.goml
View file

@ -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)

6
src/test/rustdoc/codeblock-title.rs
View file

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