mikros/rust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rustdoc: simplify the codeblock tooltip

Browse Source 
This commit moves the tooltip into example-wrap, simplifying allowing several
overly-complex things to be fixed:

* The mousover javascript can be removed, because hovering example-wrap can
  style the tooltip inside.
* The sibling selecor can be removed, because hovering the tooltip also
  hovers the wrapper, which can hover the codeblock itself.
* The relative positioning of the `<li>` tag, which was added in
  e861efd9f9 to fix the positioning of the code
  tooltip, can now be removed, because example-wrap itself already has
  relative positioning.
This commit is contained in:
Michael Howell 2022-09-08 17:46:57 -07:00
parent f9da510cff
commit cbcb74e939
6 changed files with 61 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/librustdoc/html/highlight.rs
View File

@ -52,35 +52,14 @@ pub(crate) fn render_example_with_highlighting(
tooltip: Tooltip,
playground_button: Option<&str>,
) {
let class = 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>",
class,
if let Tooltip::Edition(edition_info) = tooltip {
format!(" data-edition=\"{}\"", edition_info)
} else {
String::new()
},
);
}
write_header(out, &format!("rust-example-rendered{}", class), None);
write_header(out, "rust-example-rendered", None, tooltip);
write_code(out, src, None, None);
write_footer(out, playground_button);
}
/// Highlights `src` as a macro, returning the HTML output.
pub(crate) fn render_macro_with_highlighting(src: &str, out: &mut Buffer) {
write_header(out, "macro", None);
write_header(out, "macro", None, Tooltip::None);
write_code(out, src, None, None);
write_footer(out, None);
}
@ -93,20 +72,42 @@ pub(crate) fn render_source_with_highlighting(
href_context: HrefContext<'_, '_, '_>,
decoration_info: DecorationInfo,
) {
write_header(out, "", Some(line_numbers));
write_header(out, "", Some(line_numbers), Tooltip::None);
write_code(out, src, Some(href_context), Some(decoration_info));
write_footer(out, None);
}
fn write_header(out: &mut Buffer, class: &str, extra_content: Option<Buffer>) {
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 => "",
};
if tooltip != Tooltip::None {
write!(
out,
"<div class='information'><div class='tooltip{}'{}>ⓘ</div></div>",
tooltip_class,
if let Tooltip::Edition(edition_info) = tooltip {
format!(" data-edition=\"{}\"", edition_info)
} else {
String::new()
},
);
}
if let Some(extra) = extra_content {
out.push_buffer(extra);
}
if class.is_empty() {
if class.is_empty() && tooltip_class.is_empty() {
write!(out, "<pre class=\"rust\">");
} else {
write!(out, "<pre class=\"rust {}\">", class);
write!(out, "<pre class=\"rust {class}{tooltip_class}\">");
}
write!(out, "<code>");
}

20
src/librustdoc/html/static/css/rustdoc.css
View File

@ -352,10 +352,6 @@ img {
max-width: 100%;
}
li {
position: relative;
}
.source .content {
max-width: none;
overflow: visible;
@ -657,7 +653,7 @@ h2.location a {
position: relative;
}
.docblock > :not(.information):not(.more-examples-toggle) {
.docblock > :not(.more-examples-toggle):not(.example-wrap) {
max-width: 100%;
overflow-x: auto;
}
@ -1174,12 +1170,12 @@ pre.ignore {
border-left: 2px solid var(--codeblock-ignore-color);
}
pre.compile_fail:hover, .information:hover + .example-wrap pre.compile_fail,
pre.should_panic:hover, .information:hover + .example-wrap pre.should_panic {
.example-wrap:hover pre.compile_fail,
.example-wrap:hover pre.should_panic {
border-left: 2px solid var(--codeblock-error-hover-color);
}
pre.ignore:hover, .information:hover + .example-wrap pre.ignore {
.example-wrap:hover pre.ignore {
border-left: 2px solid var(--codeblock-ignore-hover-color);
}
@ -1192,12 +1188,12 @@ pre.ignore:hover, .information:hover + .example-wrap pre.ignore {
color: var(--codeblock-ignore-color);
}
.information > .compile_fail:hover,
.information > .should_panic:hover {
.example-wrap:hover .tooltip.compile_fail,
.example-wrap:hover .tooltip.should_panic {
color: var(--codeblock-error-hover-color);
}
.information > .ignore:hover {
.example-wrap:hover .tooltip.ignore {
color: var(--codeblock-ignore-hover-color);
}
@ -1738,7 +1734,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 > .information:first-child > .tooltip {
.docblock > .example-wrap:first-child > .information > .tooltip {
margin-top: 16px;
}

21
src/librustdoc/html/static/js/main.js
View File

@ -699,9 +699,8 @@ function loadCss(cssFileName) {
(function() {
// To avoid checking on "rustdoc-line-numbers" value on every loop...
let lineNumbersFunc = () => {};
if (getSettingValue("line-numbers") === "true") {
lineNumbersFunc = x => {
onEachLazy(document.getElementsByClassName("rust-example-rendered"), x => {
const count = x.textContent.split("\n").length;
const elems = [];
for (let i = 0; i < count; ++i) {
@ -711,26 +710,8 @@ function loadCss(cssFileName) {
addClass(node, "line-number");
node.innerHTML = elems.join("\n");
x.parentNode.insertBefore(node, x);
};
}
onEachLazy(document.getElementsByClassName("rust-example-rendered"), e => {
if (hasClass(e, "compile_fail")) {
e.addEventListener("mouseover", function() {
this.parentElement.previousElementSibling.childNodes[0].style.color = "#f00";
});
e.addEventListener("mouseout", function() {
this.parentElement.previousElementSibling.childNodes[0].style.color = "";
});
} else if (hasClass(e, "ignore")) {
e.addEventListener("mouseover", function() {
this.parentElement.previousElementSibling.childNodes[0].style.color = "#ff9200";
});
e.addEventListener("mouseout", function() {
this.parentElement.previousElementSibling.childNodes[0].style.color = "";
});
}
lineNumbersFunc(e);
});
}());
let oldSidebarScrollPosition = null;

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 > .information > .compile_fail", { "margin-top": "16px" })
assert-css: (".docblock > .example-wrap > .information > .compile_fail", { "margin-top": "16px" })
// Checks that the other codeblocks don't have this top margin.
assert-css: ("ol > li > .information > .compile_fail", { "margin-top": "0px" })
assert-css: ("ol > li > .information > .ignore", { "margin-top": "0px" })
assert-css: (".docblock > .information > .ignore", { "margin-top": "0px" })
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" })

36
src/test/rustdoc-gui/codeblock-tooltip.goml
View File

@ -8,30 +8,30 @@ reload:
// compile_fail block
assert-css: (".docblock .information .compile_fail", {"color": "rgba(255, 0, 0, 0.5)"})
assert-css: (".docblock .example-wrap .compile_fail", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
assert-css: (".docblock .example-wrap pre.compile_fail", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
move-cursor-to: ".docblock .information .compile_fail"
assert-css: (".docblock .information .compile_fail", {"color": "rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap .compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap pre.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", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
assert-css: (".docblock .example-wrap pre.should_panic", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
move-cursor-to: ".docblock .information .should_panic"
assert-css: (".docblock .information .should_panic", {"color": "rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap .should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap pre.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", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
move-cursor-to: ".docblock .information .ignore"
assert-css: (".docblock .information .ignore", {"color": "rgb(255, 142, 0)"})
assert-css: (".docblock .example-wrap .ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
// Light theme.
@ -39,30 +39,30 @@ 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", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
assert-css: (".docblock .example-wrap pre.compile_fail", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
move-cursor-to: ".docblock .information .compile_fail"
assert-css: (".docblock .information .compile_fail", {"color": "rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap .compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap pre.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", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
assert-css: (".docblock .example-wrap pre.should_panic", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
move-cursor-to: ".docblock .information .should_panic"
assert-css: (".docblock .information .should_panic", {"color": "rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap .should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap pre.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", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
move-cursor-to: ".docblock .information .ignore"
assert-css: (".docblock .information .ignore", {"color": "rgb(255, 142, 0)"})
assert-css: (".docblock .example-wrap .ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
// Ayu theme.
@ -70,27 +70,27 @@ 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", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
assert-css: (".docblock .example-wrap pre.compile_fail", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
move-cursor-to: ".docblock .information .compile_fail"
assert-css: (".docblock .information .compile_fail", {"color": "rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap .compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap pre.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", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
assert-css: (".docblock .example-wrap pre.should_panic", {"border-left": "2px solid rgba(255, 0, 0, 0.5)"})
move-cursor-to: ".docblock .information .should_panic"
assert-css: (".docblock .information .should_panic", {"color": "rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap .should_panic", {"border-left": "2px solid rgb(255, 0, 0)"})
assert-css: (".docblock .example-wrap pre.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", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
assert-css: (".docblock .example-wrap pre.ignore", {"border-left": "2px solid rgba(255, 142, 0, 0.6)"})
move-cursor-to: ".docblock .information .ignore"
assert-css: (".docblock .information .ignore", {"color": "rgb(255, 142, 0)"})
assert-css: (".docblock .example-wrap .ignore", {"border-left": "2px solid rgb(255, 142, 0)"})
assert-css: (".docblock .example-wrap pre.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 > .information", {
assert-css: (".docblock > .example-wrap > .information", {
"overflow-x": "visible",
"max-width": "none"
}, ALL)