Fix corner cases when dealing with mobile mode

Author: notriddle

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

@@ -1560,6 +1560,9 @@ a.tooltip:hover::after {
 	left: 8px;
 	z-index: 101;
 }
+.hide-sidebar .src #sidebar-button {
+	position: static;
+}
 #settings-menu > a, #help-button > a, #sidebar-button > a {
 	display: flex;
 	align-items: center;
@@ -1896,6 +1899,12 @@ in src-script.js and main.js
 	.src .search-form {
 		margin-left: 40px;
 	}
+	.hide-sidebar .search-form {
+		margin-left: 32px;
+	}
+	.hide-sidebar .src .search-form {
+		margin-left: 0;
+	}
 
 	.sidebar.shown,
 	.src-sidebar-expanded .src .sidebar,
@@ -2020,12 +2029,6 @@ in src-script.js and main.js
 	.src .src-sidebar-title {
 		padding-top: 0;
 	}
-	.hide-sidebar #sidebar-button {
-		position: static;
-	}
-	.src #sidebar-button {
-		position: fixed;
-	}
 
 	/* Position of the "[-]" element. */
 	details.toggle:not(.top-doc) > summary {

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

@@ -1519,18 +1519,14 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
     // and it can be activated by resizing the sidebar into nothing.
     const sidebarButton = document.getElementById("sidebar-button");
     if (sidebarButton) {
-        if (document.querySelector(".rustdoc.src")) {
-            sidebarButton.addEventListener("click", e => {
+        sidebarButton.addEventListener("click", e => {
+            removeClass(document.documentElement, "hide-sidebar");
+            updateLocalStorage("hide-sidebar", "false");
+            if (document.querySelector(".rustdoc.src")) {
                 window.rustdocToggleSrcSidebar();
-                e.preventDefault();
-            });
-        } else {
-            sidebarButton.addEventListener("click", e => {
-                removeClass(document.documentElement, "hide-sidebar");
-                updateLocalStorage("hide-sidebar", "false");
-                e.preventDefault();
-            });
-        }
+            }
+            e.preventDefault();
+        });
     }
 
     // Pointer capture.

tests/rustdoc-gui/sidebar-resize-setting.goml

@@ -21,3 +21,31 @@ wait-for-css: ("#settings", {"display": "block"})
 assert-property: ("#hide-sidebar", {"checked": "true"})
 click: "#hide-sidebar"
 wait-for-css: (".sidebar", {"display": "block"})
+
+// Verify that hiding the sidebar hides the source sidebar
+// and puts the button in static position mode on mobile
+go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
+set-window-size: (600, 600)
+focus: "#settings-menu a"
+press-key: "Enter"
+wait-for-css: ("#settings", {"display": "block"})
+wait-for-css: ("#sidebar-button", {"position": "fixed"})
+store-position: ("#sidebar-button", {
+    "y": sidebar_button_y,
+    "x": sidebar_button_x,
+})
+assert-property: ("#hide-sidebar", {"checked": "false"})
+click: "#hide-sidebar"
+wait-for-css: (".sidebar", {"display": "none"})
+wait-for-css: ("#sidebar-button", {"position": "static"})
+assert-position: ("#sidebar-button", {
+    "y": |sidebar_button_y|,
+    "x": |sidebar_button_x|,
+})
+assert-property: ("#hide-sidebar", {"checked": "true"})
+press-key: "Escape"
+// Clicking the sidebar button should work, and implicitly re-enable
+// the persistent navigation bar
+wait-for-css: ("#settings", {"display": "none"})
+click: "#sidebar-button"
+wait-for-css: (".sidebar", {"display": "block"})

tests/rustdoc-gui/src/theme_css/custom-theme.css

@@ -18,6 +18,7 @@
 	--code-attribute-color: #999;
 	--toggles-color: #999;
 	--toggle-filter: none;
+	--mobile-sidebar-menu-filter: none;
 	--search-input-focused-border-color: #66afe9;
 	--copy-path-button-color: #999;
 	--copy-path-img-filter: invert(50%);