Rollup merge of #98310 - jsha:defer-source-sidebar, r=GuillaumeGomez

rustdoc: optimize loading of source sidebar

The source sidebar has a setting to remember whether it should be open or
closed. Previously, this setting was handled in source-script.js, which
is loaded with `defer`, meaning it is often run after the document is rendered.
Since CSS renders the source sidebar as closed by default, changing this
after the initial render results in a relayout.

Instead, handle the setting in storage.js, which is the first script to load
and is the only script that blocks render. This avoids a relayout and means
navigating between files with the sidebar open is faster.

Demo: https://rustdoc.crud.net/jsha/defer-source-sidebar/src/alloc/ffi/c_str.rs.html

r? ``@GuillaumeGomez``

Author: matthiaskrgr

src/librustdoc/html/static/css/rustdoc.css

@@ -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;
 }
@@ -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;
 	}
 }
@@ -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;
 	}
@@ -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;
@@ -1910,6 +1910,14 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		border-left: 0;
 	}
 
+	.source-sidebar-expanded #sidebar-toggle {
+		left: unset;
+		top: unset;
+		width: unset;
+		border-top-right-radius: unset;
+		border-bottom-right-radius: unset;
+	}
+
 	#source-sidebar {
 		z-index: 11;
 	}
@@ -1952,7 +1960,7 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		padding-left: 2em;
 	}
 
-	.source .sidebar.expanded {
+	.source-sidebar-expanded .source .sidebar {
 		max-width: 100vw;
 		width: 100vw;
 	}
@@ -2010,9 +2018,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,

src/librustdoc/html/static/js/source-script.js

@@ -63,14 +63,13 @@ function createDirEntry(elem, parent, fullPath, 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");
     }
@@ -103,11 +102,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");
-    }
 
     let hasFoundFile = false;
 

src/librustdoc/html/static/js/storage.js

@@ -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"];
@@ -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

src/test/rustdoc-gui/sidebar-source-code.goml

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

src/test/rustdoc-gui/source-code-page.goml

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