Rollup merge of #102898 - notriddle:notriddle/sidebar-block, r=GuillaumeGomez

rustdoc: remove unneeded `<div>` wrapper from sidebar DOM

When this was added, the sidebar had a bit more complex style. It can be removed, now.

Preview: https://notriddle.com/notriddle-rustdoc-demos/sidebar-block/std/index.html
This commit is contained in:
Yuki Okushi 2022-10-11 18:37:55 +09:00 committed by GitHub
commit 3011538b80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 35 additions and 48 deletions

View File

@ -1853,12 +1853,12 @@ fn print_sidebar(cx: &Context<'_>, it: &clean::Item, buffer: &mut Buffer) {
buffer.write_str("<div class=\"sidebar-elems\">"); buffer.write_str("<div class=\"sidebar-elems\">");
if it.is_crate() { if it.is_crate() {
write!(buffer, "<div class=\"block\"><ul>"); write!(buffer, "<ul class=\"block\">");
if let Some(ref version) = cx.cache().crate_version { if let Some(ref version) = cx.cache().crate_version {
write!(buffer, "<li class=\"version\">Version {}</li>", Escape(version)); write!(buffer, "<li class=\"version\">Version {}</li>", Escape(version));
} }
write!(buffer, "<li><a id=\"all-types\" href=\"all.html\">All Items</a></li>"); write!(buffer, "<li><a id=\"all-types\" href=\"all.html\">All Items</a></li>");
buffer.write_str("</ul></div>"); buffer.write_str("</ul>");
} }
match *it.kind { match *it.kind {
@ -2258,8 +2258,7 @@ fn extract_for_impl_name(item: &clean::Item, cx: &Context<'_>) -> Option<(String
} }
} }
/// Don't call this function directly!!! Use `print_sidebar_title` or `print_sidebar_block` instead! fn print_sidebar_title(buf: &mut Buffer, id: &str, title: &str) {
fn print_sidebar_title_inner(buf: &mut Buffer, id: &str, title: &str) {
write!( write!(
buf, buf,
"<h3 class=\"sidebar-title\">\ "<h3 class=\"sidebar-title\">\
@ -2269,25 +2268,18 @@ fn print_sidebar_title_inner(buf: &mut Buffer, id: &str, title: &str) {
); );
} }
fn print_sidebar_title(buf: &mut Buffer, id: &str, title: &str) {
buf.push_str("<div class=\"block\">");
print_sidebar_title_inner(buf, id, title);
buf.push_str("</div>");
}
fn print_sidebar_block( fn print_sidebar_block(
buf: &mut Buffer, buf: &mut Buffer,
id: &str, id: &str,
title: &str, title: &str,
items: impl Iterator<Item = impl fmt::Display>, items: impl Iterator<Item = impl fmt::Display>,
) { ) {
buf.push_str("<div class=\"block\">"); print_sidebar_title(buf, id, title);
print_sidebar_title_inner(buf, id, title); buf.push_str("<ul class=\"block\">");
buf.push_str("<ul>");
for item in items { for item in items {
write!(buf, "<li>{}</li>", item); write!(buf, "<li>{}</li>", item);
} }
buf.push_str("</ul></div>"); buf.push_str("</ul>");
} }
fn sidebar_trait(cx: &Context<'_>, buf: &mut Buffer, it: &clean::Item, t: &clean::Trait) { fn sidebar_trait(cx: &Context<'_>, buf: &mut Buffer, it: &clean::Item, t: &clean::Trait) {
@ -2676,9 +2668,7 @@ pub(crate) fn sidebar_module_like(buf: &mut Buffer, item_sections_in_use: FxHash
write!( write!(
buf, buf,
"<section>\ "<section>\
<div class=\"block\">\ <ul class=\"block\">{}</ul>\
<ul>{}</ul>\
</div>\
</section>", </section>",
sidebar sidebar
); );

View File

@ -501,13 +501,14 @@ img {
width: 100px; width: 100px;
} }
.block ul, .block li { ul.block, .block li {
padding: 0; padding: 0;
margin: 0; margin: 0;
list-style: none; list-style: none;
} }
.block a, .block a,
.sidebar h3 a,
h2.location a { h2.location a {
display: block; display: block;
padding: 0.25rem; padding: 0.25rem;
@ -767,7 +768,7 @@ h2.small-section-header > .anchor {
text-decoration: underline; text-decoration: underline;
} }
.block a.current.crate { font-weight: 500; } .crate.block a.current { font-weight: 500; }
/* In most contexts we use `overflow-wrap: anywhere` to ensure that we can wrap /* In most contexts we use `overflow-wrap: anywhere` to ensure that we can wrap
as much as needed on mobile (see as much as needed on mobile (see

View File

@ -442,12 +442,10 @@ function loadCss(cssFileName) {
return; return;
} }
const div = document.createElement("div");
div.className = "block " + shortty;
const h3 = document.createElement("h3"); const h3 = document.createElement("h3");
h3.innerHTML = `<a href="index.html#${id}">${longty}</a>`; h3.innerHTML = `<a href="index.html#${id}">${longty}</a>`;
div.appendChild(h3);
const ul = document.createElement("ul"); const ul = document.createElement("ul");
ul.className = "block " + shortty;
for (const item of filtered) { for (const item of filtered) {
const name = item[0]; const name = item[0];
@ -473,8 +471,8 @@ function loadCss(cssFileName) {
li.appendChild(link); li.appendChild(link);
ul.appendChild(li); ul.appendChild(li);
} }
div.appendChild(ul); sidebar.appendChild(h3);
sidebar.appendChild(div); sidebar.appendChild(ul);
} }
if (sidebar) { if (sidebar) {
@ -592,27 +590,25 @@ function loadCss(cssFileName) {
return; return;
} }
// Draw a convenient sidebar of known crates if we have a listing // Draw a convenient sidebar of known crates if we have a listing
const div = document.createElement("div"); const h3 = document.createElement("h3");
div.className = "block crate"; h3.innerHTML = "Crates";
div.innerHTML = "<h3>Crates</h3>";
const ul = document.createElement("ul"); const ul = document.createElement("ul");
div.appendChild(ul); ul.className = "block crate";
for (const crate of window.ALL_CRATES) { for (const crate of window.ALL_CRATES) {
let klass = "crate";
if (window.rootPath !== "./" && crate === window.currentCrate) {
klass += " current";
}
const link = document.createElement("a"); const link = document.createElement("a");
link.href = window.rootPath + crate + "/index.html"; link.href = window.rootPath + crate + "/index.html";
link.className = klass; if (window.rootPath !== "./" && crate === window.currentCrate) {
link.className = "current";
}
link.textContent = crate; link.textContent = crate;
const li = document.createElement("li"); const li = document.createElement("li");
li.appendChild(link); li.appendChild(link);
ul.appendChild(li); ul.appendChild(li);
} }
sidebarElems.appendChild(div); sidebarElems.appendChild(h3);
sidebarElems.appendChild(ul);
} }

View File

@ -106,8 +106,8 @@ assert-css: ("h6#sub-heading-for-enum-impl-item-doc", {"border-bottom-width": "0
assert-css: ("h6#sub-sub-heading-for-enum-impl-item-doc", {"font-size": "14px"}) assert-css: ("h6#sub-sub-heading-for-enum-impl-item-doc", {"font-size": "14px"})
assert-css: ("h6#sub-sub-heading-for-enum-impl-item-doc", {"border-bottom-width": "0px"}) assert-css: ("h6#sub-sub-heading-for-enum-impl-item-doc", {"border-bottom-width": "0px"})
assert-text: (".sidebar .mod h3", "Modules") assert-text: ("//ul[@class='block mod']/preceding-sibling::h3", "Modules")
assert-css: (".sidebar .mod h3", {"border-bottom-width": "0px"}, ALL) assert-css: ("//ul[@class='block mod']/preceding-sibling::h3", {"border-bottom-width": "0px"}, ALL)
goto: "file://" + |DOC_PATH| + "/test_docs/union.HeavilyDocumentedUnion.html" goto: "file://" + |DOC_PATH| + "/test_docs/union.HeavilyDocumentedUnion.html"

View File

@ -12,7 +12,7 @@ assert-count: (".sidebar .location", 1)
assert-text: ("#all-types", "All Items") assert-text: ("#all-types", "All Items")
assert-css: ("#all-types", {"color": "rgb(53, 109, 164)"}) assert-css: ("#all-types", {"color": "rgb(53, 109, 164)"})
// We check that we have the crates list and that the "current" on is "test_docs". // We check that we have the crates list and that the "current" on is "test_docs".
assert-text: (".sidebar-elems .crate > ul > li > a.current", "test_docs") assert-text: (".sidebar-elems ul.crate > li > a.current", "test_docs")
// And we're also supposed to have the list of items in the current module. // And we're also supposed to have the list of items in the current module.
assert-text: (".sidebar-elems section ul > li:nth-child(1)", "Re-exports") assert-text: (".sidebar-elems section ul > li:nth-child(1)", "Re-exports")
assert-text: (".sidebar-elems section ul > li:nth-child(2)", "Modules") assert-text: (".sidebar-elems section ul > li:nth-child(2)", "Modules")
@ -41,21 +41,21 @@ assert-property: ("html", {"scrollTop": "0"})
// We now go back to the crate page to click on the "lib2" crate link. // We now go back to the crate page to click on the "lib2" crate link.
goto: "file://" + |DOC_PATH| + "/test_docs/index.html" goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
assert-property: (".sidebar", {"clientWidth": "200"}) assert-property: (".sidebar", {"clientWidth": "200"})
assert-css: (".sidebar-elems .crate > ul > li:first-child > a", {"color": "rgb(53, 109, 164)"}) assert-css: (".sidebar-elems ul.crate > li:first-child > a", {"color": "rgb(53, 109, 164)"})
click: ".sidebar-elems .crate > ul > li:first-child > a" click: ".sidebar-elems ul.crate > li:first-child > a"
// PAGE: lib2/index.html // PAGE: lib2/index.html
goto: "file://" + |DOC_PATH| + "/lib2/index.html" goto: "file://" + |DOC_PATH| + "/lib2/index.html"
assert-property: (".sidebar", {"clientWidth": "200"}) assert-property: (".sidebar", {"clientWidth": "200"})
assert-text: (".sidebar > .location", "Crate lib2") assert-text: (".sidebar > .location", "Crate lib2")
// We check that we have the crates list and that the "current" on is now "lib2". // We check that we have the crates list and that the "current" on is now "lib2".
assert-text: (".sidebar-elems .crate > ul > li > a.current", "lib2") assert-text: (".sidebar-elems ul.crate > li > a.current", "lib2")
// We now go to the "foobar" function page. // We now go to the "foobar" function page.
assert-text: (".sidebar-elems > section .block ul > li:nth-child(1)", "Modules") assert-text: (".sidebar-elems > section ul.block > li:nth-child(1)", "Modules")
assert-text: (".sidebar-elems > section .block ul > li:nth-child(2)", "Structs") assert-text: (".sidebar-elems > section ul.block > li:nth-child(2)", "Structs")
assert-text: (".sidebar-elems > section .block ul > li:nth-child(3)", "Traits") assert-text: (".sidebar-elems > section ul.block > li:nth-child(3)", "Traits")
assert-text: (".sidebar-elems > section .block ul > li:nth-child(4)", "Functions") assert-text: (".sidebar-elems > section ul.block > li:nth-child(4)", "Functions")
assert-text: (".sidebar-elems > section .block ul > li:nth-child(5)", "Type Definitions") assert-text: (".sidebar-elems > section ul.block > li:nth-child(5)", "Type Definitions")
assert-text: ("#functions + .item-table .item-left > a", "foobar") assert-text: ("#functions + .item-table .item-left > a", "foobar")
click: "#functions + .item-table .item-left > a" click: "#functions + .item-table .item-left > a"
@ -90,7 +90,7 @@ assert-property: (".sidebar-elems section .block li > a", {"offsetHeight": 29})
// appropriate anchor in index.html. // appropriate anchor in index.html.
goto: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html" goto: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
assert-property: (".sidebar", {"clientWidth": "200"}) assert-property: (".sidebar", {"clientWidth": "200"})
click: ".block.mod h3 a" click: "//ul[@class='block mod']/preceding-sibling::h3/a"
// PAGE: index.html // PAGE: index.html
assert-css: ("#modules", {"background-color": "rgb(253, 255, 211)"}) assert-css: ("#modules", {"background-color": "rgb(253, 255, 211)"})

View File

@ -1 +1 @@
<ul><li><a href="#variant.Shown">Shown</a></li></ul> <ul class="block"><li><a href="#variant.Shown">Shown</a></li></ul>

View File

@ -3,7 +3,7 @@
// @!has - '//code' 'NotShown' // @!has - '//code' 'NotShown'
// @has - '//code' '// some variants omitted' // @has - '//code' '// some variants omitted'
// Also check that `NotShown` isn't displayed in the sidebar. // Also check that `NotShown` isn't displayed in the sidebar.
// @snapshot no-not-shown - '//*[@class="sidebar-elems"]/section/*[@class="block"][1]/ul' // @snapshot no-not-shown - '//*[@class="sidebar-elems"]/section/*[@class="block"][1]'
pub enum MyThing { pub enum MyThing {
Shown, Shown,
#[doc(hidden)] #[doc(hidden)]