rust-lang/rust
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Auto merge of #131002 - steffahn:rustdoc-long-names-fix, r=notriddle

Browse Source 
In redesigned rustdoc toolbar: Adjust spacings and sizing to improve behavior with over-long names

Fixes #130993.

Some additional adjustments also fix more issues I’ve noticed such as:

* on small screens, opening search made the 3 bottons move down very slightly (because the row with the crate picker got larger, enlarging the whole grid), this is fixed with a `min-height: 60px` on the toolbar
* with long names in the “breadcrumps” area, wrapping was very broken
  * ![Screenshot_20240929_031831](https://github.com/user-attachments/assets/6f46bbb7-004b-4606-bf17-8a6f3289a8f7)
  * fixed:
  * ![Screenshot_20240929_035312](https://github.com/user-attachments/assets/4e2f8dd2-043e-4279-b588-0a72c7533f8e)
* the left grid area has a minimal width (105px); like before, that leaves about enough space for crate names becoming as short as “all cra…”;
    to save even more space, there’s support for a little bit of extra squeezing of the buttons
  * ![Screenshot_20240929_034511](https://github.com/user-attachments/assets/7c6788ee-8ec1-4a38-b341-8d67704f5575)
  * ![Screenshot_20240929_034525](https://github.com/user-attachments/assets/e141756d-37a9-4205-bc4d-235ddd1c0609)
  * ![Screenshot_20240929_034535](https://github.com/user-attachments/assets/526447f3-48b6-47aa-8a60-e5b0d4d055f0)

I’m really not super good with HTML or CSS stuff at all; there seem to be many magical numbers already, I’ve just used `px` values until things look right, I hope that’s okay 🤷‍♂️

r? `@GuillaumeGomez`

cc `@notriddle`
This commit is contained in:
bors
2024-09-29 22:04:32 +00:00
parent 7608018cbd c27b54ac4a
commit 0d6e130196
6 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/librustdoc/html/static/css/rustdoc.css
View File

@@ -182,17 +182,18 @@ h1, h2, h3, h4 {
"main-heading-breadcrumbs main-heading-breadcrumbs"
"main-heading-h1 main-heading-toolbar"
"main-heading-sub-heading main-heading-toolbar";
grid-template-columns: 1fr max-content;
grid-template-rows: 25px min-content min-content;
grid-template-columns: minmax(105px, 1fr) minmax(0, max-content);
grid-template-rows: minmax(25px, min-content) min-content min-content;
padding-bottom: 6px;
margin-bottom: 11px;
}
.rustdoc-breadcrumbs {
grid-area: main-heading-breadcrumbs;
height: 25px;
line-height: 1.25;
display: flex;
flex-wrap: wrap;
align-items: end;
padding-top: 5px;
}
.rustdoc-breadcrumbs a {
padding: 4px 0;
@@ -928,6 +929,7 @@ rustdoc-toolbar {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
min-height: 60px;
}
.docblock code, .docblock-short code,
@@ -1104,17 +1106,17 @@ table,
.search-results-title + .sub-heading {
color: var(--main-color);
display: flex;
align-items: center;
align-items: baseline;
white-space: nowrap;
}
#crate-search-div {
/* ensures that 100% in properties of #crate-search-div:after
are relative to the size of this div */
position: relative;
/* allows this div (and with it the <select>-element "#crate-search") to be shrunk */
min-width: 5em;
min-width: 0;
}
#crate-search {
min-width: 115px;
padding: 0 23px 0 4px;
/* prevents the <select> from overflowing the containing div in case it's shrunk */
max-width: 100%;
@@ -1825,6 +1827,7 @@ a.tooltip:hover::after {
margin-left: var(--button-left-margin);
display: flex;
line-height: 1.25;
min-width: 14px;
}
#sidebar-button {
display: none;
@@ -1861,6 +1864,9 @@ a.tooltip:hover::after {
width: 80px;
border-radius: var(--toolbar-button-border-radius);
}
#settings-menu > a, #help-button > a {
min-width: 0;
}
#sidebar-button > a {
background-color: var(--button-background-color);
border-color: var(--border-color);

4
tests/rustdoc-gui/scrape-examples-layout.goml
View File

@@ -90,8 +90,8 @@ assert-css: (".scraped-example .example-wrap::after", {"bottom": "0px"})
// Then with mobile
set-window-size: (600, 600)
store-size: (".scraped-example .scraped-example-title", {"height": title_height})
assert-position: (".scraped-example", {"y": 281})
assert-position: (".scraped-example .prev", {"y": 281 + |offset_y| + |title_height|})
assert-position: (".scraped-example", {"y": 287})
assert-position: (".scraped-example .prev", {"y": 287 + |offset_y| + |title_height|})
define-function: (
"check_title_and_code_position",

2
tests/rustdoc-gui/search-result-display.goml
View File

@@ -64,7 +64,7 @@ set-text: (
)
// Then we compare again to confirm the height didn't change.
assert-size: ("#crate-search", {"width": 509})
assert-size: ("#crate-search", {"width": 370})
assert-size: (".search-results-title", {
"height": |search_results_title_height|,
})

2
tests/rustdoc-gui/sidebar-source-code-display.goml
View File

@@ -141,7 +141,7 @@ click: "#sidebar-button"
wait-for-css: (".src .sidebar > *", {"visibility": "hidden"})
// We scroll to line 117 to change the scroll position.
scroll-to: '//*[@id="117"]'
store-value: (y_offset, "2564")
store-value: (y_offset, "2570")
assert-window-property: {"pageYOffset": |y_offset|}
// Expanding the sidebar...
click: "#sidebar-button"

8
tests/rustdoc-gui/source-anchor-scroll.goml
View File

@@ -8,13 +8,13 @@ set-window-size: (600, 800)
assert-property: ("html", {"scrollTop": "0"})
click: '//a[text() = "barbar" and @href="#5-7"]'
assert-property: ("html", {"scrollTop": "194"})
assert-property: ("html", {"scrollTop": "200"})
click: '//a[text() = "bar" and @href="#28-36"]'
assert-property: ("html", {"scrollTop": "225"})
assert-property: ("html", {"scrollTop": "231"})
click: '//a[normalize-space() = "sub_fn" and @href="#2-4"]'
assert-property: ("html", {"scrollTop": "122"})
assert-property: ("html", {"scrollTop": "128"})
// We now check that clicking on lines doesn't change the scroll
// Extra information: the "sub_fn" function header is on line 1.
click: '//*[@id="6"]'
assert-property: ("html", {"scrollTop": "122"})
assert-property: ("html", {"scrollTop": "128"})

12
tests/rustdoc-gui/toggle-docs-mobile.goml
View File

@@ -3,12 +3,12 @@
go-to: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
set-window-size: (433, 600)
assert-attribute: (".top-doc", {"open": ""})
click: (4, 260) // This is the position of the top doc comment toggle
click: (4, 270) // This is the position of the top doc comment toggle
assert-attribute-false: (".top-doc", {"open": ""})
click: (4, 260)
click: (4, 270)
assert-attribute: (".top-doc", {"open": ""})
// To ensure that the toggle isn't over the text, we check that the toggle isn't clicked.
click: (3, 260)
click: (3, 270)
assert-attribute: (".top-doc", {"open": ""})
// Assert the position of the toggle on the top doc block.
@@ -24,10 +24,10 @@ assert-position: (
// Now we do the same but with a little bigger width
set-window-size: (600, 600)
assert-attribute: (".top-doc", {"open": ""})
click: (4, 260) // New Y position since all search elements are back on one line.
click: (4, 270) // New Y position since all search elements are back on one line.
assert-attribute-false: (".top-doc", {"open": ""})
click: (4, 260)
click: (4, 270)
assert-attribute: (".top-doc", {"open": ""})
// To ensure that the toggle isn't over the text, we check that the toggle isn't clicked.
click: (3, 260)
click: (3, 270)
assert-attribute: (".top-doc", {"open": ""})