rustdoc: allow resizing the sidebar

Author: notriddle

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

@@ -383,7 +383,7 @@ img {
 
 .sidebar {
 	font-size: 0.875rem;
-	flex: 0 0 200px;
+	flex: 0 0 var(--desktop-sidebar-width, 200px);
 	overflow-y: scroll;
 	overscroll-behavior: contain;
 	position: sticky;
@@ -401,6 +401,56 @@ img {
 	z-index: 1;
 }
 
+.hide-sidebar .sidebar,
+.hide-sidebar .sidebar-resizer {
+	display: none;
+}
+
+.sidebar-resizer {
+	width: 3px;
+	margin: 0 3px;
+	cursor: col-resize;
+	z-index: 10;
+	position: absolute;
+	height: 100%;
+	left: var(--desktop-sidebar-width, 200px);
+}
+
+.rustdoc.src .sidebar-resizer {
+	left: 50px;
+	width: 6px;
+	margin: 0 3px 0 0;
+}
+
+.src-sidebar-expanded .rustdoc.src .sidebar-resizer {
+	left: var(--src-sidebar-width, 300px);
+}
+
+.sidebar-resizing {
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.sidebar-resizing * {
+	cursor: col-resize !important;
+}
+
+.sidebar-resizer:hover,
+.sidebar-resizer:active,
+.sidebar-resizer:focus {
+	width: 9px;
+	margin: 0;
+}
+
+.sidebar-resizer.active {
+	/* when dragging the sidebar into nothing, make sure the items inside
+	   don't get hovered over */
+	width: 141px;
+	margin: 0 -66px;
+}
+
 .sidebar, .mobile-topbar, .sidebar-menu-toggle,
 #src-sidebar-toggle, #src-sidebar {
 	background-color: var(--sidebar-background-color);
@@ -416,7 +466,7 @@ img {
 
 .src-sidebar-expanded .src .sidebar {
 	overflow-y: auto;
-	flex-basis: 300px;
+	flex-basis: var(--src-sidebar-width, 300px);
 }
 
 .src-sidebar-expanded .src .sidebar > *:not(#src-sidebar-toggle) {
@@ -1615,7 +1665,8 @@ in src-script.js
 	/* Hide the logo and item name from the sidebar. Those are displayed
 	   in the mobile-topbar instead. */
 	.sidebar .logo-container,
-	.sidebar .location {
+	.sidebar .location,
+	.sidebar-resizer {
 		display: none;
 	}
 
@@ -1692,6 +1743,10 @@ in src-script.js
 		color: var(--main-color);
 	}
 
+	.hide-sidebar .sidebar-menu-toggle {
+		display: none;
+	}
+
 	.sidebar-elems {
 		margin-top: 1em;
 	}

src/librustdoc/html/static/js/main.js

@@ -1,5 +1,5 @@
 // Local js definitions:
-/* global addClass, getSettingValue, hasClass, searchState */
+/* global addClass, getSettingValue, hasClass, searchState, updateLocalStorage */
 /* global onEach, onEachLazy, removeClass, getVar */
 
 "use strict";
@@ -1230,6 +1230,71 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/how-to-read-rustdoc.html\
     searchState.setup();
 }());
 
+(function() {
+    const resizer = document.getElementsByClassName("sidebar-resizer")[0];
+    const sidebar = document.getElementsByClassName("sidebar")[0];
+    if (!resizer || !sidebar) {
+        return;
+    }
+    const isSrcPage = hasClass(document.body, "src");
+    const hideSidebar = () => {
+        if (isSrcPage) {
+            window.rustdocCloseSourceSidebar();
+        } else {
+            addClass(document.documentElement, "hide-sidebar");
+            updateLocalStorage("hide-sidebar", "true");
+        }
+    };
+    const showSidebar = () => {
+        if (isSrcPage) {
+            window.rustdocShowSourceSidebar();
+        } else {
+            removeClass(document.documentElement, "hide-sidebar");
+            updateLocalStorage("hide-sidebar", "false");
+        }
+    };
+    const changeSidebarSize = size => {
+        if (isSrcPage) {
+            updateLocalStorage("src-sidebar-width", size);
+            document.documentElement.style.setProperty("--src-sidebar-width", size + "px");
+        } else {
+            updateLocalStorage("desktop-sidebar-width", size);
+            document.documentElement.style.setProperty("--desktop-sidebar-width", size + "px");
+        }
+    };
+    const isSidebarHidden = () => {
+        return isSrcPage ?
+            !hasClass(document.documentElement, "src-sidebar-expanded") :
+            hasClass(document.documentElement, "hide-sidebar");
+    };
+    const resize = e => {
+        const pos = e.clientX - sidebar.offsetLeft - 3;
+        if (pos < 50) {
+            hideSidebar();
+        } else if (pos >= 100) {
+            // 100 is the size of the logo
+            // don't let it get smaller, or it'll get squished
+            if (isSidebarHidden()) {
+                showSidebar();
+            }
+            changeSidebarSize(Math.min(pos, window.innerWidth - 100));
+        }
+    };
+    const stopResize = () => {
+        removeClass(resizer, "active");
+        window.removeEventListener("mousemove", resize, false);
+        window.removeEventListener("mouseup", stopResize, false);
+        removeClass(document.documentElement, "sidebar-resizing");
+    };
+    const initResize = () => {
+        window.addEventListener("mousemove", resize, false);
+        window.addEventListener("mouseup", stopResize, false);
+        addClass(resizer, "active");
+        addClass(document.documentElement, "sidebar-resizing");
+    };
+    resizer.addEventListener("mousedown", initResize, false);
+}());
+
 (function() {
     let reset_button_timeout = null;
 

src/librustdoc/html/static/js/settings.js

@@ -29,6 +29,13 @@
                     window.rustdoc_remove_line_numbers_from_examples();
                 }
                 break;
+            case "hide-sidebar":
+                if (value === true) {
+                    addClass(document.documentElement, "hide-sidebar");
+                } else {
+                    removeClass(document.documentElement, "hide-sidebar");
+                }
+                break;
         }
     }
 
@@ -186,6 +193,11 @@
                 "js_name": "line-numbers",
                 "default": false,
             },
+            {
+                "name": "Hide navigation sidebar",
+                "js_name": "hide-sidebar",
+                "default": false,
+            },
             {
                 "name": "Disable keyboard shortcuts",
                 "js_name": "disable-shortcuts",
@@ -216,6 +228,13 @@
 
     function displaySettings() {
         settingsMenu.style.display = "";
+        onEachLazy(settingsMenu.querySelectorAll("input[type='checkbox']"), el => {
+            const val = getSettingValue(el.id);
+            const checked = val === "true";
+            if (checked !== el.checked && val !== null) {
+                el.checked = checked;
+            }
+        });
     }
 
     function settingsBlurHandler(event) {

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

@@ -71,16 +71,26 @@ function createDirEntry(elem, parent, fullPath, hasFoundFile) {
     return hasFoundFile;
 }
 
+window.rustdocCloseSourceSidebar = () => {
+    const toggleLabel = document.querySelector("#src-sidebar-toggle button");
+    removeClass(document.documentElement, "src-sidebar-expanded");
+    toggleLabel.innerText = ">";
+    updateLocalStorage("source-sidebar-show", "false");
+};
+
+window.rustdocShowSourceSidebar = () => {
+    const toggleLabel = document.querySelector("#src-sidebar-toggle button");
+    addClass(document.documentElement, "src-sidebar-expanded");
+    toggleLabel.innerText = "<";
+    updateLocalStorage("source-sidebar-show", "true");
+};
+
 function toggleSidebar() {
     const child = this.parentNode.children[0];
     if (child.innerText === ">") {
-        addClass(document.documentElement, "src-sidebar-expanded");
-        child.innerText = "<";
-        updateLocalStorage("source-sidebar-show", "true");
+        window.rustdocShowSourceSidebar();
     } else {
-        removeClass(document.documentElement, "src-sidebar-expanded");
-        child.innerText = ">";
-        updateLocalStorage("source-sidebar-show", "false");
+        window.rustdocCloseSourceSidebar();
     }
 }
 

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

@@ -188,6 +188,29 @@ if (getSettingValue("source-sidebar-show") === "true") {
     addClass(document.documentElement, "src-sidebar-expanded");
 }
 
+if (getSettingValue("hide-sidebar") === "true") {
+    // At this point in page load, `document.body` is not available yet.
+    // Set a class on the `<html>` element instead.
+    addClass(document.documentElement, "hide-sidebar");
+}
+
+(function() {
+    const desktopSidebarWidth = getSettingValue("desktop-sidebar-width");
+    if (desktopSidebarWidth) {
+        document.documentElement.style.setProperty(
+            "--desktop-sidebar-width",
+            desktopSidebarWidth + "px"
+        );
+    }
+    const srcSidebarWidth = getSettingValue("src-sidebar-width");
+    if (srcSidebarWidth) {
+        document.documentElement.style.setProperty(
+            "--src-sidebar-width",
+            srcSidebarWidth + "px"
+        );
+    }
+}());
+
 // 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/librustdoc/html/templates/page.html

@@ -110,6 +110,7 @@ <h2></h2> {# #}
         {% endif %}
         {{ sidebar|safe }}
     </nav> {# #}
+    <div class="sidebar-resizer"></div>
     <main> {# #}
         {% if page.css_class != "src" %}<div class="width-limiter">{% endif %}
             <nav class="sub"> {# #}

tests/rustdoc-gui/sidebar-resize.goml

@@ -0,0 +1,21 @@
+// Checks sidebar resizing
+go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
+assert-property: (".sidebar", {"clientWidth": "200"})
+show-text: true
+drag-and-drop: ((205, 100), (185, 100))
+assert-property: (".sidebar", {"clientWidth": "182"})
+drag-and-drop: ((185, 100), (5, 100))
+assert-property: (".sidebar", {"clientWidth": "0"})
+assert-css: (".sidebar", {"display": "none"})
+assert-local-storage: {"rustdoc-hide-sidebar": "true"}
+set-local-storage: {"rustdoc-hide-sidebar": "false"}
+
+// Now same thing, but for source code
+go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
+assert-property: (".sidebar", {"clientWidth": "49"})
+drag-and-drop: ((52, 100), (185, 100))
+assert-property: (".sidebar", {"clientWidth": "181"})
+drag-and-drop: ((185, 100), (5, 100))
+// instead of hiding the sidebar entirely, this
+// will switch to the toggle mode
+assert-property: (".sidebar", {"clientWidth": "49"})