Skip to content

Unify sidebar buttons to use the same image #140135

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 6, 2025
Merged

Unify sidebar buttons to use the same image #140135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
821925e
Update browser-ui-test version to 0.20.6
GuillaumeGomez Apr 21, 2025
934e86b
Unify sidebar buttons to use the same image
GuillaumeGomez Apr 21, 2025
f7d8558
Add rustdoc-gui test to ensure sidebars share the same image
GuillaumeGomez Apr 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/ci/docker/host-x86_64/x86_64-gnu-tools/browser-ui-test.version
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
0.20.3
0.20.6
43 changes: 22 additions & 21 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand All @@ -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);
Expand All @@ -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;
Expand Down Expand Up @@ -2402,28 +2410,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 */
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
}
}


Expand Down
36 changes: 36 additions & 0 deletions tests/rustdoc-gui/sidebar.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading