Skip to content

Commit 02866fe

Browse files
rust-timerrust-timer
authored
Unrolled build for rust-lang#115988
Rollup merge of rust-lang#115988 - notriddle:notriddle/search-tab-layout, r=GuillaumeGomez rustdoc: add test cases, and fix, search tabs layout jank ## Before ### Resizing https://github.com/rust-lang/rust/assets/1593513/24bb5f2b-f6bd-4ed8-91e1-f9ff63d1acee ### Typing https://github.com/rust-lang/rust/assets/1593513/145f53e1-42eb-4b2a-adba-7c9ab44b0aa4 ## After ### Resizing https://github.com/rust-lang/rust/assets/1593513/acc10a55-e83e-43e6-8604-5dfcb9ae3141 ### Typing https://github.com/rust-lang/rust/assets/1593513/09d6d389-e24f-428f-933f-83d9075f15a2
2 parents e3811a7 + 66e0483 commit 02866fe

File tree

3 files changed

+104
-7
lines changed

3 files changed

+104
-7
lines changed

Diff for: ‎src/librustdoc/html/static/css/rustdoc.css

+8-4
Original file line numberDiff line numberDiff line change
@@ -1355,6 +1355,7 @@ a.tooltip:hover::after {
13551355

13561356
#search-tabs .count {
13571357
font-size: 1rem;
1358+
font-variant-numeric: tabular-nums;
13581359
color: var(--search-tab-title-count-color);
13591360
}
13601361

@@ -1637,6 +1638,13 @@ However, it's not needed with smaller screen width because the doc/code block is
16371638

16381639
/* Media Queries */
16391640

1641+
/* Make sure all the buttons line wrap at the same time */
1642+
@media (max-width: 850px) {
1643+
#search-tabs .count {
1644+
display: block;
1645+
}
1646+
}
1647+
16401648
/*
16411649
WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY
16421650
If you update this line, then you also need to update the line with the same warning
@@ -1764,10 +1772,6 @@ in src-script.js
17641772
display: none !important;
17651773
}
17661774

1767-
#search-tabs .count {
1768-
display: block;
1769-
}
1770-
17711775
#main-content > details.toggle > summary::before,
17721776
#main-content > div > details.toggle > summary::before {
17731777
left: -11px;

Diff for: ‎src/librustdoc/html/static/js/search.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -2334,11 +2334,20 @@ ${item.displayPath}<span class="${type}">${name}</span>\
23342334
}
23352335

23362336
function makeTabHeader(tabNb, text, nbElems) {
2337+
// https://blog.horizon-eda.org/misc/2020/02/19/ui.html
2338+
//
2339+
// CSS runs with `font-variant-numeric: tabular-nums` to ensure all
2340+
// digits are the same width. \u{2007} is a Unicode space character
2341+
// that is defined to be the same width as a digit.
2342+
const fmtNbElems =
2343+
nbElems < 10 ? `\u{2007}(${nbElems})\u{2007}\u{2007}` :
2344+
nbElems < 100 ? `\u{2007}(${nbElems})\u{2007}` :
2345+
`\u{2007}(${nbElems})`;
23372346
if (searchState.currentTab === tabNb) {
23382347
return "<button class=\"selected\">" + text +
2339-
" <span class=\"count\">(" + nbElems + ")</span></button>";
2348+
"<span class=\"count\">" + fmtNbElems + "</span></button>";
23402349
}
2341-
return "<button>" + text + " <span class=\"count\">(" + nbElems + ")</span></button>";
2350+
return "<button>" + text + "<span class=\"count\">" + fmtNbElems + "</span></button>";
23422351
}
23432352

23442353
/**

Diff for: ‎tests/rustdoc-gui/search-tab.goml

+85-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Checking the colors of the search tab headers.
2-
go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html?search=something"
2+
go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html?search=foo"
33
show-text: true
44

55
define-function: (
@@ -74,3 +74,87 @@ call-function: ("check-colors", {
7474
"border_top_selected": "2px solid #0089ff",
7575
"border_top_hover": "2px solid #0089ff",
7676
})
77+
78+
// set size wide enough that the text is in a single row
79+
set-window-size: (851, 600)
80+
81+
// Check the size and count in tabs
82+
assert-text: ("#search-tabs > button:nth-child(1) > .count", " (23) ")
83+
assert-text: ("#search-tabs > button:nth-child(2) > .count", " (4)  ")
84+
assert-text: ("#search-tabs > button:nth-child(3) > .count", " (0)  ")
85+
store-property: ("#search-tabs > button:nth-child(1)", {"offsetWidth": buttonWidth})
86+
assert-property: ("#search-tabs > button:nth-child(2)", {"offsetWidth": |buttonWidth|})
87+
assert-property: ("#search-tabs > button:nth-child(3)", {"offsetWidth": |buttonWidth|})
88+
store-property: ("#search-tabs > button:nth-child(1) > .count", {"offsetWidth": countWidth})
89+
assert-property: ("#search-tabs > button:nth-child(2) > .count", {"offsetWidth": |countWidth|})
90+
assert-property: ("#search-tabs > button:nth-child(3) > .count", {"offsetWidth": |countWidth|})
91+
92+
// Check that counts are in a row with each other
93+
compare-elements-position: (
94+
"#search-tabs > button:nth-child(1) > .count",
95+
"#search-tabs > button:nth-child(2) > .count",
96+
("y")
97+
)
98+
compare-elements-position: (
99+
"#search-tabs > button:nth-child(2) > .count",
100+
"#search-tabs > button:nth-child(3) > .count",
101+
("y")
102+
)
103+
// Check that counts are beside the titles and haven't wrapped
104+
compare-elements-position-near: (
105+
"#search-tabs > button:nth-child(1)",
106+
"#search-tabs > button:nth-child(1) > .count",
107+
{"y": 8}
108+
)
109+
compare-elements-position-near: (
110+
"#search-tabs > button:nth-child(2)",
111+
"#search-tabs > button:nth-child(2) > .count",
112+
{"y": 8}
113+
)
114+
compare-elements-position-near: (
115+
"#search-tabs > button:nth-child(2)",
116+
"#search-tabs > button:nth-child(2) > .count",
117+
{"y": 8}
118+
)
119+
120+
// Set size narrow enough that they wrap.
121+
// When I tested it, it wrapped at 811px, but I added some fudge factor to ensure it
122+
// doesn't prematurely wrap with slightly different font kerning or whatever, with a
123+
// @media query
124+
set-window-size: (850, 600)
125+
126+
// all counts and buttons still have same size
127+
store-property: ("#search-tabs > button:nth-child(1)", {"offsetWidth": buttonWidth})
128+
assert-property: ("#search-tabs > button:nth-child(2)", {"offsetWidth": |buttonWidth|})
129+
assert-property: ("#search-tabs > button:nth-child(3)", {"offsetWidth": |buttonWidth|})
130+
store-property: ("#search-tabs > button:nth-child(1) > .count", {"offsetWidth": countWidth})
131+
assert-property: ("#search-tabs > button:nth-child(2) > .count", {"offsetWidth": |countWidth|})
132+
assert-property: ("#search-tabs > button:nth-child(3) > .count", {"offsetWidth": |countWidth|})
133+
134+
// Check that counts are still in a row with each other
135+
compare-elements-position: (
136+
"#search-tabs > button:nth-child(1) > .count",
137+
"#search-tabs > button:nth-child(2) > .count",
138+
("y")
139+
)
140+
compare-elements-position: (
141+
"#search-tabs > button:nth-child(2) > .count",
142+
"#search-tabs > button:nth-child(3) > .count",
143+
("y")
144+
)
145+
// Check that counts are NOT beside the titles; now they have wrapped
146+
compare-elements-position-near-false: (
147+
"#search-tabs > button:nth-child(1)",
148+
"#search-tabs > button:nth-child(1) > .count",
149+
{"y": 8}
150+
)
151+
compare-elements-position-near-false: (
152+
"#search-tabs > button:nth-child(2)",
153+
"#search-tabs > button:nth-child(2) > .count",
154+
{"y": 8}
155+
)
156+
compare-elements-position-near-false: (
157+
"#search-tabs > button:nth-child(2)",
158+
"#search-tabs > button:nth-child(2) > .count",
159+
{"y": 8}
160+
)

0 commit comments

Comments
 (0)