Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rustdoc: optimize loading of source sidebar #98310

Closed
wants to merge 1 commit into from
Closed

rustdoc: optimize loading of source sidebar #98310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 26 additions & 12 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,16 +387,20 @@ nav.sub {
overflow-y: hidden;
}

.rustdoc.source .sidebar .sidebar-logo {
display: none;
}

.source .sidebar > *:not(#sidebar-toggle) {
opacity: 0;
visibility: hidden;
}

.source .sidebar.expanded {
.source-sidebar-expanded .source .sidebar {
overflow-y: auto;
}

.source .sidebar.expanded > *:not(#sidebar-toggle) {
.source-sidebar-expanded .source .sidebar > *:not(#sidebar-toggle) {
opacity: 1;
visibility: visible;
}
Expand Down Expand Up @@ -1682,11 +1686,11 @@ details.rustdoc-toggle[open] > summary.hideme::after {

/* When we expand the sidebar on the source code page, we hide the logo on the left of the
search bar to have more space. */
.sidebar.expanded + main .width-limiter .sub-logo-container.rust-logo {
.source-sidebar-expanded .source .sidebar + main .width-limiter .sub-logo-container.rust-logo {
display: none;
}

.source .sidebar.expanded {
.source-sidebar-expanded .source .sidebar {
width: 300px;
}
}
Expand Down Expand Up @@ -1766,7 +1770,7 @@ details.rustdoc-toggle[open] > summary.hideme::after {
}

.sidebar.shown,
.sidebar.expanded,
.source-sidebar-expanded .source .sidebar,
.sidebar:focus-within {
left: 0;
}
Expand Down Expand Up @@ -1889,11 +1893,7 @@ details.rustdoc-toggle[open] > summary.hideme::after {
left: -11px;
}

.sidebar.expanded #sidebar-toggle {
font-size: 1.5rem;
}

.sidebar:not(.expanded) #sidebar-toggle {
#sidebar-toggle {
position: fixed;
left: 1px;
top: 100px;
Expand All @@ -1910,6 +1910,17 @@ details.rustdoc-toggle[open] > summary.hideme::after {
border-left: 0;
}

.source-sidebar-expanded #sidebar-toggle {
position: unset;
left: unset;
top: unset;
width: unset;
border-top-right-radius: unset;
border-bottom-right-radius: unset;
border: unset;
border-bottom: 1px solid;
}

#source-sidebar {
z-index: 11;
}
Expand Down Expand Up @@ -1952,7 +1963,7 @@ details.rustdoc-toggle[open] > summary.hideme::after {
padding-left: 2em;
}

.source .sidebar.expanded {
.source-sidebar-expanded .source .sidebar {
max-width: 100vw;
width: 100vw;
}
Expand Down Expand Up @@ -2010,9 +2021,12 @@ details.rustdoc-toggle[open] > summary.hideme::after {
width: 35px;
}

.sidebar:not(.expanded) #sidebar-toggle {
#sidebar-toggle {
top: 10px;
}
.source-sidebar-expanded #sidebar-toggle {
top: unset;
}
}

.method-toggle summary,
Expand Down
10 changes: 2 additions & 8 deletions src/librustdoc/html/static/js/source-script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,14 +76,13 @@ function createDirEntry(elem, parent, fullPath, currentFile, hasFoundFile) {
}

function toggleSidebar() {
const sidebar = document.querySelector("nav.sidebar");
const child = this.children[0];
if (child.innerText === ">") {
sidebar.classList.add("expanded");
addClass(document.documentElement, "source-sidebar-expanded");
child.innerText = "<";
updateLocalStorage("source-sidebar-show", "true");
} else {
sidebar.classList.remove("expanded");
removeClass(document.documentElement, "source-sidebar-expanded");
child.innerText = ">";
updateLocalStorage("source-sidebar-show", "false");
}
Expand Down Expand Up @@ -119,11 +118,6 @@ function createSourceSidebar() {

const sidebar = document.createElement("div");
sidebar.id = "source-sidebar";
if (getCurrentValue("source-sidebar-show") !== "true") {
container.classList.remove("expanded");
} else {
container.classList.add("expanded");
}

const currentFile = getCurrentFilePath();
let hasFoundFile = false;
Expand Down
11 changes: 11 additions & 0 deletions src/librustdoc/html/static/js/storage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
// storage.js is loaded in the `<head>` of all rustdoc pages and doesn't
// use `async` or `defer`. That means it blocks further parsing and rendering
// of the page: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script.
// This makes it the correct place to act on settings that affect the display of
// the page, so we don't see major layout changes during the load of the page.
"use strict";

const darkThemes = ["dark", "ayu"];
Expand Down Expand Up @@ -236,6 +241,12 @@ if (getSettingValue("use-system-theme") !== "false" && window.matchMedia) {
switchToSavedTheme();
}

if (getSettingValue("source-sidebar-show") === "true") {
// At this point in page load, `document.body` is not available yet.
// Set a class on the `<html>` element instead.
addClass(document.documentElement, "source-sidebar-expanded");
}

// If we navigate away (for example to a settings page), and then use the back or
// forward button to get back to a page, the theme may have changed in the meantime.
// But scripts may not be re-loaded in such a case due to the bfcache
Expand Down
10 changes: 5 additions & 5 deletions src/test/rustdoc-gui/sidebar-source-code.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ assert-css: ("nav.sidebar", {"width": "50px"})
// We now click on the button to expand the sidebar.
click: (10, 10)
// We wait for the sidebar to be expanded.
wait-for-css: ("nav.sidebar.expanded", {"width": "300px"})
assert-css: ("nav.sidebar.expanded a", {"font-size": "14px"})
wait-for-css: (".source-sidebar-expanded nav.sidebar", {"width": "300px"})
assert-css: (".source-sidebar-expanded nav.sidebar a", {"font-size": "14px"})
// We collapse the sidebar.
click: (10, 10)
// We ensure that the class has been removed.
wait-for: "nav.sidebar:not(.expanded)"
wait-for: "html:not(.expanded)"
assert: "nav.sidebar"

// We now switch to mobile mode.
Expand All @@ -22,11 +22,11 @@ size: (600, 600)
assert-css: ("nav.sidebar", {"width": "1px"})
// We expand the sidebar.
click: "#sidebar-toggle"
assert-css: ("nav.sidebar.expanded", {"width": "600px"})
assert-css: (".source-sidebar-expanded nav.sidebar", {"width": "600px"})
// We collapse the sidebar.
click: (10, 10)
// We ensure that the class has been removed.
assert-false: "nav.sidebar.expanded"
assert-false: ".source-sidebar-expanded"
assert: "nav.sidebar"

// Check that the topbar is not visible
Expand Down
2 changes: 1 addition & 1 deletion src/test/rustdoc-gui/source-code-page.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ assert-document-property: ({"URL": "/lib.rs.html"}, ENDS_WITH)

// First we "open" it.
click: "#sidebar-toggle"
assert: ".sidebar.expanded"
assert: ".source-sidebar-expanded"

// We check that the first entry of the sidebar is collapsed (which, for whatever reason,
// is number 2 and not 1...).
Expand Down