user0/rust
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Auto merge of #106301 - notriddle:notriddle/dir-entry, r=GuillaumeGomez

Browse source 
rustdoc: use the regular arrow indicator for dir-entry CSS

This mostly reverts 468acca108, while still fixing the problem it fixed by using an internal list-style-position. It results in a slight change in the hover indicator, but nothing misleading.

Preview: http://notriddle.com/notriddle-rustdoc-demos/dir-entry/src/std/lib.rs.html

## Before

![image](https://user-images.githubusercontent.com/1593513/210104247-642e6df0-07d3-452a-a2ab-4c700bc22e0e.png)

## After

![image](https://user-images.githubusercontent.com/1593513/210104271-a3832784-1e4d-4516-983e-6ecb9051857b.png)
This commit is contained in:
bors 2023-01-02 10:21:53 +00:00
commit f89003eda8
2 changed files with 87 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/librustdoc/html/static/css/rustdoc.css
View file

@ -1387,31 +1387,10 @@ details.dir-entry {
padding-left: 4px;
}
details.dir-entry > summary::after {
content: " ►";
position: absolute;
left: -15px;
top: 0px;
font-size: 80%;
padding: 2px 0px;
/* set width to cover gap between arrow and text */
width: 25px;
}
details[open].dir-entry > summary::after {
content: " ▼";
}
details.dir-entry > summary::-webkit-details-marker,
details.dir-entry > summary::marker {
display: none;
}
details.dir-entry > summary {
margin: 0 0 0 13px;
list-style: none;
margin: 0 0 0 -4px;
padding: 0 0 0 4px;
cursor: pointer;
position: relative;
}
details.dir-entry div.folders, details.dir-entry div.files {

89
src/test/rustdoc-gui/source-code-page.goml
View file

@ -111,8 +111,57 @@ assert-property: ("#source-sidebar details:first-of-type", {"open": "true"})
click: "#source-sidebar details:first-of-type > summary"
assert-property: ("#source-sidebar details:first-of-type", {"open": "false"})
// Check the spacing.
assert-css: ("#source-sidebar > details.dir-entry", {"padding-left": "4px"})
// And open it again, since it'll be the reference we use to check positions.
click: "#source-sidebar details:first-of-type > summary"
assert-property: ("#source-sidebar details:first-of-type", {"open": "true"})
// Check the sidebar directory entries have a marker and spacing (desktop).
store-property: (
link_height,
"#source-sidebar > details:first-of-type.dir-entry[open] > .files > a",
"offsetHeight"
)
define-function: (
"check-sidebar-dir-entry",
(x, y),
[
("assert", "details:first-of-type.dir-entry[open] > summary::marker"),
("assert-css", ("#source-sidebar > details:first-of-type.dir-entry", {"padding-left": "4px"})),
// This check ensures that the summary is only one line.
("assert-property", (
"#source-sidebar > details:first-of-type.dir-entry[open] > summary",
{"offsetHeight": |link_height|}
)),
("assert-position", (
"#source-sidebar > details:first-of-type.dir-entry[open] > summary",
{"x": |x|, "y": |y|}
)),
("assert-property", (
"#source-sidebar > details:first-of-type.dir-entry[open] > .files > a",
{"offsetHeight": |link_height|}
)),
("assert-position", (
"#source-sidebar > details:first-of-type.dir-entry[open] > .files > a",
// left margin
{"x": |x| + 27, "y": |y| + |link_height|}
)),
]
)
store-property: (
source_sidebar_title_height,
"#source-sidebar > .title",
"offsetHeight"
)
store-property: (
source_sidebar_title_y,
"#source-sidebar > .title",
"offsetTop"
)
call-function: ("check-sidebar-dir-entry", {
"x": 0,
// border + margin = 6
"y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
})
// Check the search form
assert-css: ("nav.sub", {"flex-direction": "row"})
@ -125,13 +174,45 @@ assert-property: ("nav.sub form", {"offsetTop": 28, "offsetHeight": 34})
assert-property: ("#main-content", {"offsetTop": 90})
// 28 = 90 - 34 - 28
// Now do the same check on moderately-sized mobile.
// Now do the same check on moderately-sized, tablet mobile.
size: (700, 700)
assert-css: ("nav.sub", {"flex-direction": "row"})
assert-property: ("nav.sub form", {"offsetTop": 21, "offsetHeight": 34})
assert-property: ("#main-content", {"offsetTop": 76})
// 21 = 76 - 34 - 21
// Tiny mobile gets a different display where the logo is stacked on top.
// Check the sidebar directory entries have a marker and spacing (tablet).
store-property: (
source_sidebar_title_height,
"#source-sidebar > .title",
"offsetHeight"
)
store-property: (
source_sidebar_title_y,
"#source-sidebar > .title",
"offsetTop"
)
call-function: ("check-sidebar-dir-entry", {
"x": 0,
"y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
})
// Tiny, phone mobile gets a different display where the logo is stacked on top.
size: (450, 700)
assert-css: ("nav.sub", {"flex-direction": "column"})
// Check the sidebar directory entries have a marker and spacing (phone).
store-property: (
source_sidebar_title_height,
"#source-sidebar > .title",
"offsetHeight"
)
store-property: (
source_sidebar_title_y,
"#source-sidebar > .title",
"offsetTop"
)
call-function: ("check-sidebar-dir-entry", {
"x": 0,
"y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
})