diff --git a/src/ci/docker/host-x86_64/x86_64-gnu-tools/browser-ui-test.version b/src/ci/docker/host-x86_64/x86_64-gnu-tools/browser-ui-test.version
index 3428dd4826a73..e15121e0f3162 100644
--- a/src/ci/docker/host-x86_64/x86_64-gnu-tools/browser-ui-test.version
+++ b/src/ci/docker/host-x86_64/x86_64-gnu-tools/browser-ui-test.version
@@ -1 +1 @@
-0.20.3
\ No newline at end of file
+0.20.6
\ No newline at end of file
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index a6dd06b76ea97..5138c394434ce 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/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;
@@ -2402,10 +2410,9 @@ 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,
@@ -2413,17 +2420,6 @@ However, it's not needed with smaller screen width because the doc/code block is
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 */
@@ -2608,9 +2604,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);
}
@@ -2668,6 +2661,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);
+ }
}
diff --git a/tests/rustdoc-gui/sidebar.goml b/tests/rustdoc-gui/sidebar.goml
index 38160cc49d085..9c66b84165f88 100644
--- a/tests/rustdoc-gui/sidebar.goml
+++ b/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"