Rollup merge of #98671 - GuillaumeGomez:source-sidebar-fixes, r=notriddle

Fix source sidebar bugs

This PR fixes the following two bugs:

![Screenshot from 2022-06-29 14-39-58](https://user-images.githubusercontent.com/3050060/176449070-3e3762da-2bfe-4acf-8eb0-34f6eb4c94ed.png)
![Screenshot from 2022-06-29 15-05-09](https://user-images.githubusercontent.com/3050060/176449073-b164820b-bd71-4b1a-990c-bba4e5fce196.png)

I added regression tests to prevent them to happen again.

I think we should backport it to beta as well.

You can test it [here](https://rustdoc.crud.net/imperio/source-sidebar-fixes/src/std/lib.rs.html).

cc ```@jsha```
r? ```@notriddle```

Author: matthiaskrgr

src/ci/docker/host-x86_64/x86_64-gnu-tools/browser-ui-test.version

@@ -1 +1 @@
-0.9.6
+0.9.7

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

@@ -1772,9 +1772,11 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 	/* The source view uses a different design for the sidebar toggle, and doesn't have a topbar,
 	   so don't bump down the main content or the sidebar. */
 	.source main,
-	.source .sidebar {
+	.rustdoc.source .sidebar {
 		top: 0;
 		padding: 0;
+		height: 100vh;
+		border: 0;
 	}
 
 	.sidebar.shown,
@@ -1924,6 +1926,9 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		width: unset;
 		border-top-right-radius: unset;
 		border-bottom-right-radius: unset;
+		position: sticky;
+		border: 0;
+		border-bottom: 1px solid;
 	}
 
 	#source-sidebar {

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

@@ -10,6 +10,7 @@
 (function() {
 
 const rootPath = document.getElementById("rustdoc-vars").attributes["data-root-path"].value;
+let oldScrollPosition = 0;
 
 function createDirEntry(elem, parent, fullPath, hasFoundFile) {
     const name = document.createElement("div");
@@ -65,10 +66,24 @@ function createDirEntry(elem, parent, fullPath, hasFoundFile) {
 function toggleSidebar() {
     const child = this.children[0];
     if (child.innerText === ">") {
+        if (window.innerWidth < 701) {
+            // This is to keep the scroll position on mobile.
+            oldScrollPosition = window.scrollY;
+            document.body.style.position = "fixed";
+            document.body.style.top = `-${oldScrollPosition}px`;
+        }
         addClass(document.documentElement, "source-sidebar-expanded");
         child.innerText = "<";
         updateLocalStorage("source-sidebar-show", "true");
     } else {
+        if (window.innerWidth < 701) {
+            // This is to keep the scroll position on mobile.
+            document.body.style.position = "";
+            document.body.style.top = "";
+            // The scroll position is lost when resetting the style, hence why we store it in
+            // `oldScroll`.
+            window.scrollTo(0, oldScrollPosition);
+        }
         removeClass(document.documentElement, "source-sidebar-expanded");
         child.innerText = ">";
         updateLocalStorage("source-sidebar-show", "false");

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

@@ -116,3 +116,39 @@ assert-css: (
     "#source-sidebar .expand + .children .folders .name",
     {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
 )
+
+// Now checking on mobile devices.
+size: (500, 700)
+reload:
+// Waiting for the sidebar to be displayed...
+wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
+
+// We now check it takes the full size of the display.
+assert-property: ("body", {"clientWidth": "500", "clientHeight": "700"})
+assert-property: (".sidebar", {"clientWidth": "500", "clientHeight": "700"})
+
+// We now check the display of the toggle once the sidebar is expanded.
+assert-property: ("#sidebar-toggle", {"clientWidth": "500", "clientHeight": "39"})
+assert-css: (
+    "#sidebar-toggle",
+    {
+        "border-top-width": "0px",
+        "border-right-width": "0px",
+        "border-left-width": "0px",
+        "border-bottom-width": "1px",
+    },
+)
+
+// We now check that the scroll position is kept when opening the sidebar.
+click: "#sidebar-toggle"
+wait-for-css: (".sidebar", {"width": "0px"})
+// We scroll to line 117 to change the scroll position.
+scroll-to: '//*[@id="117"]'
+assert-window-property: {"pageYOffset": "2519"}
+// Expanding the sidebar...
+click: "#sidebar-toggle"
+wait-for-css: (".sidebar", {"width": "500px"})
+click: "#sidebar-toggle"
+wait-for-css: (".sidebar", {"width": "0px"})
+// The "scrollTop" property should be the same.
+assert-window-property: {"pageYOffset": "2519"}

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

@@ -18,8 +18,8 @@ assert: "nav.sidebar"
 
 // We now switch to mobile mode.
 size: (600, 600)
-// We check that the sidebar has the expected width (0 and 1px for the border).
-assert-css: ("nav.sidebar", {"width": "1px"})
+// We check that the sidebar has the expected width (0).
+assert-css: ("nav.sidebar", {"width": "0px"})
 // We expand the sidebar.
 click: "#sidebar-toggle"
 assert-css: (".source-sidebar-expanded nav.sidebar", {"width": "600px"})