Skip to content

rustdoc: click target for sidebar items flush left #127229

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
Jul 18, 2024
Merged

rustdoc: click target for sidebar items flush left #127229

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
5fc30b8
rustdoc: click target for sidebar items flush left
notriddle Jul 2, 2024
3924493
rustdoc: make sidebar highlight cover whole click target
notriddle Jul 15, 2024
5514906
rustdoc: add test cases for mile wide bar
notriddle Jul 16, 2024
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
55 changes: 51 additions & 4 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 @@ -15,6 +15,7 @@
--desktop-sidebar-width: 200px;
--src-sidebar-width: 300px;
--desktop-sidebar-z-index: 100;
--sidebar-elems-left-padding: 24px;
}

/* See FiraSans-LICENSE.txt for the Fira Sans license. */
Expand Down Expand Up @@ -559,8 +560,11 @@ ul.block, .block li {
.sidebar > h2 a {
display: block;
padding: 0.25rem; /* 4px */
margin-left: -0.25rem;
margin-right: 0.25rem;
/* extend click target to far edge of screen (mile wide bar) */
border-left: solid var(--sidebar-elems-left-padding) transparent;
margin-left: calc(-0.25rem - var(--sidebar-elems-left-padding));
background-clip: border-box;
}

.sidebar h2 {
Expand All @@ -578,7 +582,7 @@ ul.block, .block li {
.sidebar-elems,
.sidebar > .version,
.sidebar > h2 {
padding-left: 24px;
padding-left: var(--sidebar-elems-left-padding);
}

.sidebar a {
Expand Down Expand Up @@ -632,13 +636,56 @@ ul.block, .block li {
.sidebar-crate .logo-container {
/* The logo is expected to have 8px "slop" along its edges, so we can optically
center it. */
margin: 0 -16px 0 -16px;
margin: 0 calc(-16px - var(--sidebar-elems-left-padding));
padding: 0 var(--sidebar-elems-left-padding);
text-align: center;
}

.sidebar-crate .logo-container img {
/* When in a horizontal logo lockup, the highlight color of the crate name menu item
extends underneath the actual logo (in a vertical lockup, that background highlight
extends to the left edge of the screen).

To prevent a weird-looking colored band from appearing under the logo, cover it up
with the sidebar's background. Additionally, the crate name extends slightly above
the logo, so that its highlight has a bit of space to let the ascenders breath while
also having those ascenders meet exactly with the top of the logo.

In ANSI art, make it look like this:
| ┌─────┐
| (R) │ std │
| └─────┘

Not like this (which would happen without the z-index):
| ┌────────┐
| (│ std │
| └────────┘

Not like this (which would happen without the background):
| ┌────────┐
| (R) std │
| └────────┘

Nor like this (which would happen without the negative margin):
| ─────────┐
| (R) │ std │
| └─────┘
*/
margin-top: -16px;
border-top: solid 16px transparent;
box-sizing: content-box;
position: relative;
background-color: var(--sidebar-background-color);
background-clip: border-box;
z-index: 1;
}

.sidebar-crate h2 a {
display: block;
margin: 0 calc(-24px + 0.25rem) 0 -0.2rem;
/* extend click target to far edge of screen (mile wide bar) */
border-left: solid var(--sidebar-elems-left-padding) transparent;
background-clip: border-box;
margin: 0 calc(-24px + 0.25rem) 0 calc(-0.2rem - var(--sidebar-elems-left-padding));
/* Align the sidebar crate link with the search bar, which have different
font sizes.

Expand Down
8 changes: 5 additions & 3 deletions tests/rustdoc-gui/huge-logo.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@
go-to: "file://" + |DOC_PATH| + "/huge_logo/index.html"

set-window-size: (1280, 1024)
// offsetWidth = width of sidebar
assert-property: (".sidebar-crate .logo-container", {"offsetWidth": "48", "offsetHeight": 48})
assert-property: (".sidebar-crate .logo-container img", {"offsetWidth": "48", "offsetHeight": 48})
// offsetWidth = width of sidebar + left and right margins
assert-property: (".sidebar-crate .logo-container", {"offsetWidth": "96", "offsetHeight": 48})
// offsetWidth = width of sidebar, offsetHeight = height + top padding
assert-property: (".sidebar-crate .logo-container img", {"offsetWidth": "48", "offsetHeight": 64})
assert-css: (".sidebar-crate .logo-container img", {"border-top-width": "16px", "margin-top": "-16px"})

set-window-size: (400, 600)
// offset = size + margin
Expand Down
15 changes: 15 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 @@ -179,3 +179,18 @@ assert-property: (".sidebar .sidebar-crate h2 a", {
"offsetTop": |index_sidebar_y|,
"offsetLeft": |index_sidebar_x|,
})

// Check that the sidebar links touch the left side of the box
go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
assert-position: (".sidebar .block a", {"x": -4})
assert-position: (".sidebar-crate > h2 > a", {"x": -3})
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you also test the resizing (where the image move)?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense. I've updated that test case here.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah sorry, wasn't clear enough. For both cases, can you resize the side to ensure that the text moves under the logo when it's too small please?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lib2 doesn't have a logo at all, so resizing won't do anything.

huge_logo does have a logo, so I've added another test.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


// Check that the main sidebar links touch the left side of the box
// but the crate name doesn't, because the logo takes that space
go-to: "file://" + |DOC_PATH| + "/huge_logo/index.html"
assert-position: (".sidebar .block a", {"x": -4})
// when side-by-side, it's not line wrapped
assert-position-false: (".sidebar-crate > h2 > a", {"x": -3})
// when line-wrapped, see that it becomes flush-left again
drag-and-drop: ((205, 100), (108, 100))
assert-position: (".sidebar-crate > h2 > a", {"x": -3})
Loading