bjoernager/rust
bjoernager/rust
1
Fork 0
Code Activity

Improve loading of crates.js and sidebar-items.js

Browse source 
Now that the "All Crates" dropdown is only rendered on the search results page,
there is no need to load crates.js on most pages. Load it only on crate pages.
Also, add the `defer` attribute so it does not block page rendering.

For sidebar-items.js, move the script tag to `<head>`. Since it already has the
defer attribute it won't block loading. The defer attribute does preserve
ordering between scripts, so instead of the callback on load, it can set a
global variable on load, which is slightly simpler. Also, since it is required
to finish rendering the page, beginning its load earlier is better.

Remove generation and handling of sidebar-vars. Everything there can be computed
with information available in JS via other means.

Remove the "other" wrapper in the sidebar. It was unnecessary.

Remove excess script fields
This commit is contained in:
Jacob Hoffman-Andrews 2022-06-14 23:25:51 -07:00
parent bb8c2f4117
commit 27dcebeb3e
11 changed files with 91 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/librustdoc/html/layout.rs
View file

@ -31,8 +31,6 @@ pub(crate) struct Page<'a> {
pub(crate) description: &'a str, pub(crate) description: &'a str,
pub(crate) keywords: &'a str, pub(crate) keywords: &'a str,
pub(crate) resource_suffix: &'a str, pub(crate) resource_suffix: &'a str,
pub(crate) extra_scripts: &'a [&'a str],
pub(crate) static_extra_scripts: &'a [&'a str],
} }
impl<'a> Page<'a> { impl<'a> Page<'a> {

6
src/librustdoc/html/render/context.rs
View file

@ -211,8 +211,6 @@ impl<'tcx> Context<'tcx> {
description: &desc, description: &desc,
keywords: &keywords, keywords: &keywords,
resource_suffix: &clone_shared.resource_suffix, resource_suffix: &clone_shared.resource_suffix,
extra_scripts: &[],
static_extra_scripts: &[],
}; };
let mut page_buffer = Buffer::html(); let mut page_buffer = Buffer::html();
print_item(self, it, &mut page_buffer, &page); print_item(self, it, &mut page_buffer, &page);
@ -568,8 +566,6 @@ impl<'tcx> FormatRenderer<'tcx> for Context<'tcx> {
description: "List of all items in this crate", description: "List of all items in this crate",
keywords: BASIC_KEYWORDS, keywords: BASIC_KEYWORDS,
resource_suffix: &shared.resource_suffix, resource_suffix: &shared.resource_suffix,
extra_scripts: &[],
static_extra_scripts: &[],
}; };
let sidebar = if shared.cache.crate_version.is_some() { let sidebar = if shared.cache.crate_version.is_some() {
format!("<h2 class=\"location\">Crate {}</h2>", crate_name) format!("<h2 class=\"location\">Crate {}</h2>", crate_name)
@ -693,7 +689,7 @@ impl<'tcx> FormatRenderer<'tcx> for Context<'tcx> {
else { unreachable!() }; else { unreachable!() };
let items = self.build_sidebar_items(module); let items = self.build_sidebar_items(module);
let js_dst = self.dst.join(&format!("sidebar-items{}.js", self.shared.resource_suffix)); let js_dst = self.dst.join(&format!("sidebar-items{}.js", self.shared.resource_suffix));
let v = format!("initSidebarItems({});", serde_json::to_string(&items).unwrap()); let v = format!("window.SIDEBAR_ITEMS = {};", serde_json::to_string(&items).unwrap());
self.shared.fs.write(js_dst, v)?; self.shared.fs.write(js_dst, v)?;
} }
Ok(()) Ok(())

19
src/librustdoc/html/render/mod.rs
View file

@ -56,7 +56,7 @@ use rustc_middle::middle::stability;
use rustc_middle::ty; use rustc_middle::ty;
use rustc_middle::ty::TyCtxt; use rustc_middle::ty::TyCtxt;
use rustc_span::{ use rustc_span::{
symbol::{kw, sym, Symbol}, symbol::{sym, Symbol},
BytePos, FileName, RealFileName, BytePos, FileName, RealFileName,
}; };
use serde::ser::SerializeSeq; use serde::ser::SerializeSeq;
@ -1738,8 +1738,6 @@ pub(crate) fn render_impl_summary(
} }
fn print_sidebar(cx: &Context<'_>, it: &clean::Item, buffer: &mut Buffer) { fn print_sidebar(cx: &Context<'_>, it: &clean::Item, buffer: &mut Buffer) {
let parentlen = cx.current.len() - if it.is_mod() { 1 } else { 0 };
if it.is_struct() if it.is_struct()
|| it.is_trait() || it.is_trait()
|| it.is_primitive() || it.is_primitive()
@ -1800,21 +1798,6 @@ fn print_sidebar(cx: &Context<'_>, it: &clean::Item, buffer: &mut Buffer) {
write!(buffer, "<h2 class=\"location\"><a href=\"index.html\">In {}</a></h2>", path); write!(buffer, "<h2 class=\"location\"><a href=\"index.html\">In {}</a></h2>", path);
} }
// Sidebar refers to the enclosing module, not this module.
let relpath = if it.is_mod() && parentlen != 0 { "./" } else { "" };
write!(
buffer,
"<div id=\"sidebar-vars\" data-name=\"{name}\" data-ty=\"{ty}\" data-relpath=\"{path}\">\
</div>",
name = it.name.unwrap_or(kw::Empty),
ty = it.type_(),
path = relpath
);
write!(
buffer,
"<script defer src=\"{}sidebar-items{}.js\"></script>",
relpath, cx.shared.resource_suffix
);
// Closes sidebar-elems div. // Closes sidebar-elems div.
buffer.write_str("</div>"); buffer.write_str("</div>");
} }

2
src/librustdoc/html/render/write_shared.rs
View file

@ -475,8 +475,6 @@ if (typeof exports !== 'undefined') {exports.searchIndex = searchIndex};
description: "List of crates", description: "List of crates",
keywords: BASIC_KEYWORDS, keywords: BASIC_KEYWORDS,
resource_suffix: &shared.resource_suffix, resource_suffix: &shared.resource_suffix,
extra_scripts: &[],
static_extra_scripts: &[],
}; };
let content = format!( let content = format!(

2
src/librustdoc/html/sources.rs
View file

@ -203,8 +203,6 @@ impl SourceCollector<'_, '_> {
description: &desc, description: &desc,
keywords: BASIC_KEYWORDS, keywords: BASIC_KEYWORDS,
resource_suffix: &shared.resource_suffix, resource_suffix: &shared.resource_suffix,
extra_scripts: &[&format!("source-files{}", shared.resource_suffix)],
static_extra_scripts: &[&format!("source-script{}", shared.resource_suffix)],
}; };
let v = layout::render( let v = layout::render(
&shared.layout, &shared.layout,

130
src/librustdoc/html/static/js/main.js
View file

@ -66,26 +66,18 @@ function showMain() {
(function() { (function() {
window.rootPath = getVar("root-path"); window.rootPath = getVar("root-path");
window.currentCrate = getVar("current-crate"); window.currentCrate = getVar("current-crate");
window.searchJS = resourcePath("search", ".js");
window.searchIndexJS = resourcePath("search-index", ".js");
window.settingsJS = resourcePath("settings", ".js");
const sidebarVars = document.getElementById("sidebar-vars");
if (sidebarVars) {
window.sidebarCurrent = {
name: sidebarVars.attributes["data-name"].value,
ty: sidebarVars.attributes["data-ty"].value,
relpath: sidebarVars.attributes["data-relpath"].value,
};
// FIXME: It would be nicer to generate this text content directly in HTML,
// but with the current code it's hard to get the right information in the right place.
const mobileLocationTitle = document.querySelector(".mobile-topbar h2.location");
const locationTitle = document.querySelector(".sidebar h2.location");
if (mobileLocationTitle && locationTitle) {
mobileLocationTitle.innerHTML = locationTitle.innerHTML;
}
}
}()); }());
function setMobileTopbar() {
// FIXME: It would be nicer to generate this text content directly in HTML,
// but with the current code it's hard to get the right information in the right place.
const mobileLocationTitle = document.querySelector(".mobile-topbar h2.location");
const locationTitle = document.querySelector(".sidebar h2.location");
if (mobileLocationTitle && locationTitle) {
mobileLocationTitle.innerHTML = locationTitle.innerHTML;
}
}
// Gets the human-readable string for the virtual-key code of the // Gets the human-readable string for the virtual-key code of the
// given KeyboardEvent, ev. // given KeyboardEvent, ev.
// //
@ -227,7 +219,7 @@ function loadCss(cssFileName) {
// Sending request for the CSS and the JS files at the same time so it will // Sending request for the CSS and the JS files at the same time so it will
// hopefully be loaded when the JS will generate the settings content. // hopefully be loaded when the JS will generate the settings content.
loadCss("settings"); loadCss("settings");
loadScript(window.settingsJS); loadScript(resourcePath("settings", ".js"));
}; };
window.searchState = { window.searchState = {
@ -304,8 +296,8 @@ function loadCss(cssFileName) {
function loadSearch() { function loadSearch() {
if (!searchLoaded) { if (!searchLoaded) {
searchLoaded = true; searchLoaded = true;
loadScript(window.searchJS); loadScript(resourcePath("search", ".js"));
loadScript(window.searchIndexJS); loadScript(resourcePath("search-index", ".js"));
} }
} }
@ -485,40 +477,11 @@ function loadCss(cssFileName) {
document.addEventListener("keypress", handleShortcut); document.addEventListener("keypress", handleShortcut);
document.addEventListener("keydown", handleShortcut); document.addEventListener("keydown", handleShortcut);
// delayed sidebar rendering. function addSidebarItems() {
window.initSidebarItems = items => { if (!window.SIDEBAR_ITEMS) {
const sidebar = document.getElementsByClassName("sidebar-elems")[0]; return;
let others;
const current = window.sidebarCurrent;
function addSidebarCrates(crates) {
if (!hasClass(document.body, "crate")) {
// We only want to list crates on the crate page.
return;
}
// Draw a convenient sidebar of known crates if we have a listing
const div = document.createElement("div");
div.className = "block crate";
div.innerHTML = "<h3>Crates</h3>";
const ul = document.createElement("ul");
div.appendChild(ul);
for (const crate of crates) {
let klass = "crate";
if (window.rootPath !== "./" && crate === window.currentCrate) {
klass += " current";
}
const link = document.createElement("a");
link.href = window.rootPath + crate + "/index.html";
link.className = klass;
link.textContent = crate;
const li = document.createElement("li");
li.appendChild(link);
ul.appendChild(li);
}
others.appendChild(div);
} }
const sidebar = document.getElementsByClassName("sidebar-elems")[0];
/** /**
* Append to the sidebar a "block" of links - a heading along with a list (`<ul>`) of items. * Append to the sidebar a "block" of links - a heading along with a list (`<ul>`) of items.
@ -529,7 +492,7 @@ function loadCss(cssFileName) {
* "Modules", or "Macros". * "Modules", or "Macros".
*/ */
function block(shortty, id, longty) { function block(shortty, id, longty) {
const filtered = items[shortty]; const filtered = window.SIDEBAR_ITEMS[shortty];
if (!filtered) { if (!filtered) {
return; return;
} }
@ -546,17 +509,18 @@ function loadCss(cssFileName) {
const desc = item[1]; // can be null const desc = item[1]; // can be null
let klass = shortty; let klass = shortty;
if (name === current.name && shortty === current.ty) {
klass += " current";
}
let path; let path;
if (shortty === "mod") { if (shortty === "mod") {
path = name + "/index.html"; path = name + "/index.html";
} else { } else {
path = shortty + "." + name + ".html"; path = shortty + "." + name + ".html";
} }
const current_page = document.location.href.split("/").pop();
if (path === current_page) {
klass += " current";
}
const link = document.createElement("a"); const link = document.createElement("a");
link.href = current.relpath + path; link.href = path;
link.title = desc; link.title = desc;
link.className = klass; link.className = klass;
link.textContent = name; link.textContent = name;
@ -565,14 +529,10 @@ function loadCss(cssFileName) {
ul.appendChild(li); ul.appendChild(li);
} }
div.appendChild(ul); div.appendChild(ul);
others.appendChild(div); sidebar.appendChild(div);
} }
if (sidebar) { if (sidebar) {
others = document.createElement("div");
others.className = "others";
sidebar.appendChild(others);
const isModule = hasClass(document.body, "mod"); const isModule = hasClass(document.body, "mod");
if (!isModule) { if (!isModule) {
block("primitive", "primitives", "Primitive Types"); block("primitive", "primitives", "Primitive Types");
@ -590,12 +550,8 @@ function loadCss(cssFileName) {
block("keyword", "keywords", "Keywords"); block("keyword", "keywords", "Keywords");
block("traitalias", "trait-aliases", "Trait Aliases"); block("traitalias", "trait-aliases", "Trait Aliases");
} }
// `crates{version}.js` should always be loaded before this script, so we can use
// it safely.
addSidebarCrates(window.ALL_CRATES);
} }
}; }
window.register_implementors = imp => { window.register_implementors = imp => {
const implementors = document.getElementById("implementors-list"); const implementors = document.getElementById("implementors-list");
@ -680,6 +636,39 @@ function loadCss(cssFileName) {
window.register_implementors(window.pending_implementors); window.register_implementors(window.pending_implementors);
} }
function addSidebarCrates() {
if (!window.ALL_CRATES) {
return;
}
const sidebarElems = document.getElementsByClassName("sidebar-elems")[0];
if (!sidebarElems) {
return;
}
// Draw a convenient sidebar of known crates if we have a listing
const div = document.createElement("div");
div.className = "block crate";
div.innerHTML = "<h3>Crates</h3>";
const ul = document.createElement("ul");
div.appendChild(ul);
for (const crate of window.ALL_CRATES) {
let klass = "crate";
if (window.rootPath !== "./" && crate === window.currentCrate) {
klass += " current";
}
const link = document.createElement("a");
link.href = window.rootPath + crate + "/index.html";
link.className = klass;
link.textContent = crate;
const li = document.createElement("li");
li.appendChild(link);
ul.appendChild(li);
}
sidebarElems.appendChild(div);
}
function labelForToggleButton(sectionIsCollapsed) { function labelForToggleButton(sectionIsCollapsed) {
if (sectionIsCollapsed) { if (sectionIsCollapsed) {
// button will expand the section // button will expand the section
@ -924,6 +913,9 @@ function loadCss(cssFileName) {
buildHelperPopup = () => {}; buildHelperPopup = () => {};
}; };
setMobileTopbar();
addSidebarItems();
addSidebarCrates();
onHashChange(null); onHashChange(null);
window.addEventListener("hashchange", onHashChange); window.addEventListener("hashchange", onHashChange);
searchState.setup(); searchState.setup();

5
src/librustdoc/html/static/js/search.js
View file

@ -1719,10 +1719,11 @@ function initSearch(rawSearchIndex) {
} }
let crates = ""; let crates = "";
if (window.ALL_CRATES.length > 1) { const crates_list = Object.keys(rawSearchIndex);
if (crates_list.length > 1) {
crates = " in <select id=\"crate-search\"><option value=\"All crates\">" + crates = " in <select id=\"crate-search\"><option value=\"All crates\">" +
"All crates</option>"; "All crates</option>";
for (const c of window.ALL_CRATES) { for (const c of crates_list) {
crates += `<option value="${c}" ${c === filterCrates && "selected"}>${c}</option>`; crates += `<option value="${c}" ${c === filterCrates && "selected"}>${c}</option>`;
} }
crates += "</select>"; crates += "</select>";

41
src/librustdoc/html/static/js/source-script.js
View file

@ -9,33 +9,19 @@
(function() { (function() {
function getCurrentFilePath() { const rootPath = document.getElementById("rustdoc-vars").attributes["data-root-path"].value;
const parts = window.location.pathname.split("/");
const rootPathParts = window.rootPath.split("/");
for (const rootPathPart of rootPathParts) { function createDirEntry(elem, parent, fullPath, hasFoundFile) {
if (rootPathPart === "..") {
parts.pop();
}
}
let file = window.location.pathname.substring(parts.join("/").length);
if (file.startsWith("/")) {
file = file.substring(1);
}
return file.substring(0, file.length - 5);
}
function createDirEntry(elem, parent, fullPath, currentFile, hasFoundFile) {
const name = document.createElement("div"); const name = document.createElement("div");
name.className = "name"; name.className = "name";
fullPath += elem["name"] + "/"; fullPath += elem["name"] + "/";
name.onclick = () => { name.onclick = ev => {
if (hasClass(name, "expand")) { if (hasClass(ev.target, "expand")) {
removeClass(name, "expand"); removeClass(ev.target, "expand");
} else { } else {
addClass(name, "expand"); addClass(ev.target, "expand");
} }
}; };
name.innerText = elem["name"]; name.innerText = elem["name"];
@ -46,7 +32,7 @@ function createDirEntry(elem, parent, fullPath, currentFile, hasFoundFile) {
folders.className = "folders"; folders.className = "folders";
if (elem.dirs) { if (elem.dirs) {
for (const dir of elem.dirs) { for (const dir of elem.dirs) {
if (createDirEntry(dir, folders, fullPath, currentFile, hasFoundFile)) { if (createDirEntry(dir, folders, fullPath, hasFoundFile)) {
addClass(name, "expand"); addClass(name, "expand");
hasFoundFile = true; hasFoundFile = true;
} }
@ -60,8 +46,9 @@ function createDirEntry(elem, parent, fullPath, currentFile, hasFoundFile) {
for (const file_text of elem.files) { for (const file_text of elem.files) {
const file = document.createElement("a"); const file = document.createElement("a");
file.innerText = file_text; file.innerText = file_text;
file.href = window.rootPath + "src/" + fullPath + file_text + ".html"; file.href = rootPath + "src/" + fullPath + file_text + ".html";
if (!hasFoundFile && currentFile === fullPath + file_text) { const w = window.location.href.split("#")[0];
if (!hasFoundFile && w === file.href) {
file.className = "selected"; file.className = "selected";
addClass(name, "expand"); addClass(name, "expand");
hasFoundFile = true; hasFoundFile = true;
@ -72,7 +59,7 @@ function createDirEntry(elem, parent, fullPath, currentFile, hasFoundFile) {
children.appendChild(files); children.appendChild(files);
parent.appendChild(name); parent.appendChild(name);
parent.appendChild(children); parent.appendChild(children);
return hasFoundFile && currentFile.startsWith(fullPath); return hasFoundFile;
} }
function toggleSidebar() { function toggleSidebar() {
@ -109,9 +96,6 @@ function createSidebarToggle() {
// This function is called from "source-files.js", generated in `html/render/mod.rs`. // This function is called from "source-files.js", generated in `html/render/mod.rs`.
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
function createSourceSidebar() { function createSourceSidebar() {
if (!window.rootPath.endsWith("/")) {
window.rootPath += "/";
}
const container = document.querySelector("nav.sidebar"); const container = document.querySelector("nav.sidebar");
const sidebarToggle = createSidebarToggle(); const sidebarToggle = createSidebarToggle();
@ -125,7 +109,6 @@ function createSourceSidebar() {
container.classList.add("expanded"); container.classList.add("expanded");
} }
const currentFile = getCurrentFilePath();
let hasFoundFile = false; let hasFoundFile = false;
const title = document.createElement("div"); const title = document.createElement("div");
@ -135,7 +118,7 @@ function createSourceSidebar() {
Object.keys(sourcesIndex).forEach(key => { Object.keys(sourcesIndex).forEach(key => {
sourcesIndex[key].name = key; sourcesIndex[key].name = key;
hasFoundFile = createDirEntry(sourcesIndex[key], sidebar, "", hasFoundFile = createDirEntry(sourcesIndex[key], sidebar, "",
currentFile, hasFoundFile); hasFoundFile);
}); });
container.appendChild(sidebar); container.appendChild(sidebar);

15
src/librustdoc/html/templates/page.html
View file

@ -34,17 +34,18 @@
{%- endfor -%} {%- endfor -%}
></script> {#- -#} ></script> {#- -#}
<script src="{{static_root_path|safe}}storage{{page.resource_suffix}}.js"></script> {#- -#} <script src="{{static_root_path|safe}}storage{{page.resource_suffix}}.js"></script> {#- -#}
<script src="{{page.root_path|safe}}crates{{page.resource_suffix}}.js"></script> {#- -#} {%- if page.css_class.contains("crate") -%}
<script defer src="{{page.root_path|safe}}crates{{page.resource_suffix}}.js"></script> {#- -#}
{%- else if page.css_class == "source" -%}
<script defer src="{{static_root_path|safe}}source-script{{page.resource_suffix}}.js"></script> {#- -#}
<script defer src="{{page.root_path|safe}}source-files{{page.resource_suffix}}.js"></script> {#- -#}
{%- else -%}
<script defer src="sidebar-items{{page.resource_suffix}}.js"></script> {#- -#}
{%- endif -%}
<script defer src="{{static_root_path|safe}}main{{page.resource_suffix}}.js"></script> {#- -#} <script defer src="{{static_root_path|safe}}main{{page.resource_suffix}}.js"></script> {#- -#}
{%- for script in page.static_extra_scripts -%}
<script defer src="{{static_root_path|safe}}{{script}}.js"></script> {#- -#}
{% endfor %}
{%- if layout.scrape_examples_extension -%} {%- if layout.scrape_examples_extension -%}
<script defer src="{{page.root_path|safe}}scrape-examples{{page.resource_suffix}}.js"></script> {#- -#} <script defer src="{{page.root_path|safe}}scrape-examples{{page.resource_suffix}}.js"></script> {#- -#}
{%- endif -%} {%- endif -%}
{%- for script in page.extra_scripts -%}
<script defer src="{{page.root_path|safe}}{{script}}.js"></script> {#- -#}
{% endfor %}
<noscript> {#- -#} <noscript> {#- -#}
<link rel="stylesheet" {# -#} <link rel="stylesheet" {# -#}
href="{{static_root_path|safe}}noscript{{page.resource_suffix}}.css"> {#- -#} href="{{static_root_path|safe}}noscript{{page.resource_suffix}}.css"> {#- -#}

6
src/test/rustdoc-gui/duplicate-macro-reexport.goml
View file

@ -1,14 +1,14 @@
// This test ensures that there is no macro duplicates in the sidebar. // This test ensures that there is no macro duplicates in the sidebar.
goto: file://|DOC_PATH|/test_docs/macro.a.html goto: file://|DOC_PATH|/test_docs/macro.a.html
// Waiting for the elements in the sidebar to be rendered. // Waiting for the elements in the sidebar to be rendered.
wait-for: ".sidebar-elems .others .macro" wait-for: ".sidebar-elems .macro"
// Check there is only one macro named "a" listed in the sidebar. // Check there is only one macro named "a" listed in the sidebar.
assert-count: ( assert-count: (
"//*[@class='sidebar-elems']//*[@class='others']/*[@class='block macro']//li/a[text()='a']", "//*[@class='sidebar-elems']//*[@class='block macro']//li/a[text()='a']",
1, 1,
) )
// Check there is only one macro named "b" listed in the sidebar. // Check there is only one macro named "b" listed in the sidebar.
assert-count: ( assert-count: (
"//*[@class='sidebar-elems']//*[@class='others']/*[@class='block macro']//li/a[text()='b']", "//*[@class='sidebar-elems']//*[@class='block macro']//li/a[text()='b']",
1, 1,
) )

4
src/test/rustdoc-gui/headings.goml
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 .others h3", "Modules") assert-text: (".sidebar .mod h3", "Modules")
assert-css: (".sidebar .others h3", {"border-bottom-width": "0px"}, ALL) assert-css: (".sidebar .mod h3", {"border-bottom-width": "0px"}, ALL)
goto: file://|DOC_PATH|/test_docs/union.HeavilyDocumentedUnion.html goto: file://|DOC_PATH|/test_docs/union.HeavilyDocumentedUnion.html