Rollup merge of #91905 - GuillaumeGomez:source-code-page-sidebar, r=jsha

Fix source code page sidebar on mobile

Current broken behaviour:

https://user-images.githubusercontent.com/3050060/145984316-35c82353-5bab-4dc6-9ac6-63ea7e5c27d8.mp4

Fixed:

https://user-images.githubusercontent.com/3050060/145984329-8be1127b-d707-424d-ac3c-c1fb3c48a093.mp4

r? `@jsha`

2 files changed, 42 insertions, 2 deletions

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 5751ec2cc02..cbb078f2ab3 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -373,7 +373,6 @@ nav.sub {
 
 .source .sidebar.expanded {
 	overflow-y: auto;
-	width: 300px;
 }
 
 .source .sidebar.expanded > * {
@@ -1394,7 +1393,7 @@ pre.rust {
 	z-index: 10;
 }
 #source-sidebar {
-	width: 300px;
+	width: 100%;
 	z-index: 1;
 	overflow: auto;
 }
@@ -1711,6 +1710,10 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 	.rustdoc.source .sidebar {
 		transition: width .5s;
 	}
+
+	.source .sidebar.expanded {
+		width: 300px;
+	}
 }
 
 @media (max-width: 700px) {
@@ -1999,6 +2002,11 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 	.search-results div.desc, .search-results .result-description, .item-right {
 		padding-left: 2em;
 	}
+
+	.source .sidebar.expanded {
+		max-width: 100vw;
+		width: 100vw;
+	}
 }
 
 @media print {
diff --git a/src/test/rustdoc-gui/sidebar-source-code.goml b/src/test/rustdoc-gui/sidebar-source-code.goml
new file mode 100644
index 00000000000..98f4fdf4233
--- /dev/null
+++ b/src/test/rustdoc-gui/sidebar-source-code.goml
@@ -0,0 +1,32 @@
+// The goal of this test is to ensure that the sidebar is working as expected in the source
+// code pages.
+goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
+// First: desktop mode.
+size: (1100, 800)
+// We check that the sidebar isn't expanded and has the expected width.
+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 (there is a 0.5s animation).
+wait-for: 600
+assert-css: ("nav.sidebar.expanded", {"width": "300px"})
+// We collapse the sidebar.
+click: (10, 10)
+// We wait for the sidebar to be collapsed (there is a 0.5s animation).
+wait-for: 600
+// We ensure that the class has been removed.
+assert-false: "nav.sidebar.expanded"
+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 expand the sidebar.
+click: "#sidebar-toggle"
+assert-css: ("nav.sidebar.expanded", {"width": "600px"})
+// We collapse the sidebar.
+click: (10, 10)
+// We ensure that the class has been removed.
+assert-false: "nav.sidebar.expanded"
+assert: "nav.sidebar"