Rollup merge of #140135 - GuillaumeGomez:sidebars-image, r=rustdoc

Unify sidebar buttons to use the same image

Part of #139832.

The source sidebar looks like this with the new image:

![image](https://github.com/user-attachments/assets/df4fee52-fb71-4794-91b7-3afc6d2aab70)

You can test it [here](https://rustdoc.crud.net/imperio/sidebar-images/src/foo/foo.rs.html).

r? `@notriddle`

Author: GuillaumeGomez

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

@@ -1 +1 @@
-0.20.3
+0.20.6

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

@@ -55,6 +55,9 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
 	--collapse-arrow-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" \
 	enable-background="new 0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="none" \
 	d="M3,8l4,4l4,-4m-4,4M3,4l4,4l4,-4" stroke="black" stroke-width="2"/></svg>');
+	--hamburger-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
+		viewBox="0 0 22 22" fill="none" stroke="black">\
+		<path d="M3,5h16M3,11h16M3,17h16" stroke-width="2.75"/></svg>');
 }
 
 :root.sans-serif {
@@ -2001,9 +2004,11 @@ a.tooltip:hover::after {
 	display: flex;
 	margin-right: 4px;
 	position: fixed;
-	left: 6px;
 	height: 34px;
 	width: 34px;
+}
+.hide-sidebar #sidebar-button {
+	left: 6px;
 	background-color: var(--main-background-color);
 	z-index: 1;
 }
@@ -2019,6 +2024,8 @@ a.tooltip:hover::after {
 	align-items: center;
 	justify-content: center;
 	flex-direction: column;
+}
+#settings-menu > a, #help-button > a, button#toggle-all-docs {
 	border: 1px solid transparent;
 	border-radius: var(--button-border-radius);
 	color: var(--main-color);
@@ -2031,14 +2038,15 @@ a.tooltip:hover::after {
 	min-width: 0;
 }
 #sidebar-button > a {
-	background-color: var(--button-background-color);
-	border-color: var(--border-color);
+	background-color: var(--sidebar-background-color);
 	width: 33px;
 }
+#sidebar-button > a:hover, #sidebar-button > a:focus-visible {
+	background-color: var(--main-background-color);
+}
 
 #settings-menu > a:hover, #settings-menu > a:focus-visible,
 #help-button > a:hover, #help-button > a:focus-visible,
-#sidebar-button > a:hover, #sidebar-button > a:focus-visible,
 button#toggle-all-docs:hover, button#toggle-all-docs:focus-visible {
 	border-color: var(--settings-button-border-focus);
 	text-decoration: none;
@@ -2405,28 +2413,16 @@ However, it's not needed with smaller screen width because the doc/code block is
 	use hamburger button */
 .src #sidebar-button > a::before, .sidebar-menu-toggle::before {
 	/* hamburger button image */
-	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
-		viewBox="0 0 22 22" fill="none" stroke="black">\
-		<path d="M3,5h16M3,11h16M3,17h16" stroke-width="2.75"/></svg>');
+	content: var(--hamburger-image);
 	opacity: 0.75;
+	filter: var(--mobile-sidebar-menu-filter);
 }
 .sidebar-menu-toggle:hover::before,
 .sidebar-menu-toggle:active::before,
 .sidebar-menu-toggle:focus::before {
 	opacity: 1;
 }
 
-/* src sidebar button opens a folder view */
-.src #sidebar-button > a::before {
-	/* folder image */
-	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
-		viewBox="0 0 22 22" fill="none" stroke="black">\
-		<path d="M16,9v-4h-6v-1l-2,-2h-4l-2,2v16h13L21,9h-15L2,19" stroke-width="1.25"/>\
-		<path d="M15,7h-11v3" stroke-width="0.75"/>\
-		<path d="M3.75,10v1.25" stroke-width="0.375"/></svg>');
-	opacity: 0.75;
-}
-
 /* Media Queries */
 
 /* Make sure all the buttons line wrap at the same time */
@@ -2611,9 +2607,6 @@ in src-script.js and main.js
 		width: 22px;
 		height: 22px;
 	}
-	.sidebar-menu-toggle::before {
-		filter: var(--mobile-sidebar-menu-filter);
-	}
 	.sidebar-menu-toggle:hover {
 		background: var(--main-background-color);
 	}
@@ -2671,6 +2664,14 @@ in src-script.js and main.js
 		margin: 0 0 -25px 0;
 		padding: var(--nav-sub-mobile-padding);
 	}
+
+	html:not(.src-sidebar-expanded) .src #sidebar-button > a {
+		background-color: var(--main-background-color);
+	}
+	html:not(.src-sidebar-expanded) .src #sidebar-button > a:hover,
+	html:not(.src-sidebar-expanded) .src #sidebar-button > a:focus-visible {
+		background-color: var(--sidebar-background-color);
+	}
 }
 
 

tests/rustdoc-gui/sidebar.goml

@@ -199,6 +199,42 @@ assert-position-false: (".sidebar-crate > h2 > a", {"x": -3})
 drag-and-drop: ((205, 100), (108, 100))
 assert-position: (".sidebar-crate > h2 > a", {"x": -3})
 
+// Check that the mobile sidebar and the source sidebar use the same icon.
+store-css: (".mobile-topbar .sidebar-menu-toggle::before", {"content": image_url})
+// Then we go to a source page.
+click: ".main-heading .src"
+assert-css: ("#sidebar-button a::before", {"content": |image_url|})
+// Check that hover events work as expected.
+store-css: ("#sidebar-button a", {"background-color": sidebar_background})
+move-cursor-to: "#sidebar-button a"
+store-css: ("#sidebar-button a:hover", {"background-color": sidebar_background_hover})
+assert: |sidebar_background| != |sidebar_background_hover|
+click: "#sidebar-button a"
+wait-for: "html.src-sidebar-expanded"
+assert-css: ("#sidebar-button a:hover", {"background-color": |sidebar_background_hover|})
+move-cursor-to: "#settings-menu"
+assert-css: ("#sidebar-button a:not(:hover)", {"background-color": |sidebar_background|})
+// Closing sidebar.
+click: "#sidebar-button a"
+wait-for: "html:not(.src-sidebar-expanded)"
+// Now we check the same when the sidebar button is moved alongside the search.
+set-window-size: (500, 500)
+store-css: ("#sidebar-button a:hover", {"background-color": not_sidebar_background_hover})
+move-cursor-to: "#settings-menu"
+store-css: ("#sidebar-button a:not(:hover)", {"background-color": not_sidebar_background})
+// The sidebar background is supposed to be the same as the main background.
+assert-css: ("body", {"background-color": |not_sidebar_background|})
+assert: |not_sidebar_background| != |not_sidebar_background_hover| && |not_sidebar_background| != |sidebar_background|
+// The hover background is supposed to be the same as the sidebar background.
+assert: |not_sidebar_background_hover| == |sidebar_background|
+click: "#sidebar-button a"
+wait-for: "html.src-sidebar-expanded"
+// And now the background colors are supposed to be the same as the sidebar since the sidebar has
+// been open.
+assert-css: ("#sidebar-button a:hover", {"background-color": |sidebar_background_hover|})
+move-cursor-to: "h2"
+assert-css: ("#sidebar-button a:not(:hover)", {"background-color": |sidebar_background|})
+
 // Configuration option to show TOC in sidebar.
 set-local-storage: {"rustdoc-hide-toc": "true"}
 go-to: "file://" + |DOC_PATH| + "/test_docs/enum.WhoLetTheDogOut.html"