Skip to content

Commit f89003e

Browse files
committed
Auto merge of #106301 - notriddle:notriddle/dir-entry, r=GuillaumeGomez
rustdoc: use the regular arrow indicator for dir-entry CSS This mostly reverts 468acca, 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)
2 parents d5a7ddd + 399fe5d commit f89003e

File tree

2 files changed

+87
-27
lines changed

2 files changed

+87
-27
lines changed

src/librustdoc/html/static/css/rustdoc.css

+2-23
Original file line numberDiff line numberDiff line change
@@ -1387,31 +1387,10 @@ details.dir-entry {
13871387
padding-left: 4px;
13881388
}
13891389

1390-
details.dir-entry > summary::after {
1391-
content: " ►";
1392-
position: absolute;
1393-
left: -15px;
1394-
top: 0px;
1395-
font-size: 80%;
1396-
padding: 2px 0px;
1397-
/* set width to cover gap between arrow and text */
1398-
width: 25px;
1399-
}
1400-
1401-
details[open].dir-entry > summary::after {
1402-
content: " ▼";
1403-
}
1404-
1405-
details.dir-entry > summary::-webkit-details-marker,
1406-
details.dir-entry > summary::marker {
1407-
display: none;
1408-
}
1409-
14101390
details.dir-entry > summary {
1411-
margin: 0 0 0 13px;
1412-
list-style: none;
1391+
margin: 0 0 0 -4px;
1392+
padding: 0 0 0 4px;
14131393
cursor: pointer;
1414-
position: relative;
14151394
}
14161395

14171396
details.dir-entry div.folders, details.dir-entry div.files {

src/test/rustdoc-gui/source-code-page.goml

+85-4
Original file line numberDiff line numberDiff line change
@@ -111,8 +111,57 @@ assert-property: ("#source-sidebar details:first-of-type", {"open": "true"})
111111
click: "#source-sidebar details:first-of-type > summary"
112112
assert-property: ("#source-sidebar details:first-of-type", {"open": "false"})
113113

114-
// Check the spacing.
115-
assert-css: ("#source-sidebar > details.dir-entry", {"padding-left": "4px"})
114+
// And open it again, since it'll be the reference we use to check positions.
115+
click: "#source-sidebar details:first-of-type > summary"
116+
assert-property: ("#source-sidebar details:first-of-type", {"open": "true"})
117+
118+
// Check the sidebar directory entries have a marker and spacing (desktop).
119+
store-property: (
120+
link_height,
121+
"#source-sidebar > details:first-of-type.dir-entry[open] > .files > a",
122+
"offsetHeight"
123+
)
124+
define-function: (
125+
"check-sidebar-dir-entry",
126+
(x, y),
127+
[
128+
("assert", "details:first-of-type.dir-entry[open] > summary::marker"),
129+
("assert-css", ("#source-sidebar > details:first-of-type.dir-entry", {"padding-left": "4px"})),
130+
// This check ensures that the summary is only one line.
131+
("assert-property", (
132+
"#source-sidebar > details:first-of-type.dir-entry[open] > summary",
133+
{"offsetHeight": |link_height|}
134+
)),
135+
("assert-position", (
136+
"#source-sidebar > details:first-of-type.dir-entry[open] > summary",
137+
{"x": |x|, "y": |y|}
138+
)),
139+
("assert-property", (
140+
"#source-sidebar > details:first-of-type.dir-entry[open] > .files > a",
141+
{"offsetHeight": |link_height|}
142+
)),
143+
("assert-position", (
144+
"#source-sidebar > details:first-of-type.dir-entry[open] > .files > a",
145+
// left margin
146+
{"x": |x| + 27, "y": |y| + |link_height|}
147+
)),
148+
]
149+
)
150+
store-property: (
151+
source_sidebar_title_height,
152+
"#source-sidebar > .title",
153+
"offsetHeight"
154+
)
155+
store-property: (
156+
source_sidebar_title_y,
157+
"#source-sidebar > .title",
158+
"offsetTop"
159+
)
160+
call-function: ("check-sidebar-dir-entry", {
161+
"x": 0,
162+
// border + margin = 6
163+
"y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
164+
})
116165

117166
// Check the search form
118167
assert-css: ("nav.sub", {"flex-direction": "row"})
@@ -125,13 +174,45 @@ assert-property: ("nav.sub form", {"offsetTop": 28, "offsetHeight": 34})
125174
assert-property: ("#main-content", {"offsetTop": 90})
126175
// 28 = 90 - 34 - 28
127176

128-
// Now do the same check on moderately-sized mobile.
177+
// Now do the same check on moderately-sized, tablet mobile.
129178
size: (700, 700)
130179
assert-css: ("nav.sub", {"flex-direction": "row"})
131180
assert-property: ("nav.sub form", {"offsetTop": 21, "offsetHeight": 34})
132181
assert-property: ("#main-content", {"offsetTop": 76})
133182
// 21 = 76 - 34 - 21
134183

135-
// Tiny mobile gets a different display where the logo is stacked on top.
184+
// Check the sidebar directory entries have a marker and spacing (tablet).
185+
store-property: (
186+
source_sidebar_title_height,
187+
"#source-sidebar > .title",
188+
"offsetHeight"
189+
)
190+
store-property: (
191+
source_sidebar_title_y,
192+
"#source-sidebar > .title",
193+
"offsetTop"
194+
)
195+
call-function: ("check-sidebar-dir-entry", {
196+
"x": 0,
197+
"y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
198+
})
199+
200+
// Tiny, phone mobile gets a different display where the logo is stacked on top.
136201
size: (450, 700)
137202
assert-css: ("nav.sub", {"flex-direction": "column"})
203+
204+
// Check the sidebar directory entries have a marker and spacing (phone).
205+
store-property: (
206+
source_sidebar_title_height,
207+
"#source-sidebar > .title",
208+
"offsetHeight"
209+
)
210+
store-property: (
211+
source_sidebar_title_y,
212+
"#source-sidebar > .title",
213+
"offsetTop"
214+
)
215+
call-function: ("check-sidebar-dir-entry", {
216+
"x": 0,
217+
"y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
218+
})

0 commit comments

Comments
 (0)