mikros/rust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rollup merge of #115988 - notriddle:notriddle/search-tab-layout, r=GuillaumeGomez

Browse Source 
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
This commit is contained in:
Guillaume Gomez 2023-09-20 17:33:17 +02:00 committed by GitHub
commit c535041995
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 104 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1355,6 +1355,7 @@ a.tooltip:hover::after {
#search-tabs .count {
font-size: 1rem;
font-variant-numeric: tabular-nums;
color: var(--search-tab-title-count-color);
}
@ -1637,6 +1638,13 @@ However, it's not needed with smaller screen width because the doc/code block is
/* Media Queries */
/* Make sure all the buttons line wrap at the same time */
@media (max-width: 850px) {
#search-tabs .count {
display: block;
}
}
/*
WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY
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
display: none !important;
}
#search-tabs .count {
display: block;
}
#main-content > details.toggle > summary::before,
#main-content > div > details.toggle > summary::before {
left: -11px;

13
src/librustdoc/html/static/js/search.js
View File

@ -2334,11 +2334,20 @@ ${item.displayPath}<span class="${type}">${name}</span>\
}
function makeTabHeader(tabNb, text, nbElems) {
// https://blog.horizon-eda.org/misc/2020/02/19/ui.html
//
// CSS runs with `font-variant-numeric: tabular-nums` to ensure all
// digits are the same width. \u{2007} is a Unicode space character
// that is defined to be the same width as a digit.
const fmtNbElems =
nbElems < 10 ? `\u{2007}(${nbElems})\u{2007}\u{2007}` :
nbElems < 100 ? `\u{2007}(${nbElems})\u{2007}` :
`\u{2007}(${nbElems})`;
if (searchState.currentTab === tabNb) {
return "<button class=\"selected\">" + text +
" <span class=\"count\">(" + nbElems + ")</span></button>";
"<span class=\"count\">" + fmtNbElems + "</span></button>";
}
return "<button>" + text + " <span class=\"count\">(" + nbElems + ")</span></button>";
return "<button>" + text + "<span class=\"count\">" + fmtNbElems + "</span></button>";
}
/**

86
tests/rustdoc-gui/search-tab.goml
View File

@ -1,5 +1,5 @@
// Checking the colors of the search tab headers.
go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html?search=something"
go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html?search=foo"
show-text: true
define-function: (
@ -74,3 +74,87 @@ call-function: ("check-colors", {
"border_top_selected": "2px solid #0089ff",
"border_top_hover": "2px solid #0089ff",
})
// set size wide enough that the text is in a single row
set-window-size: (851, 600)
// Check the size and count in tabs
assert-text: ("#search-tabs > button:nth-child(1) > .count", " (23) ")
assert-text: ("#search-tabs > button:nth-child(2) > .count", " (4)  ")
assert-text: ("#search-tabs > button:nth-child(3) > .count", " (0)  ")
store-property: ("#search-tabs > button:nth-child(1)", {"offsetWidth": buttonWidth})
assert-property: ("#search-tabs > button:nth-child(2)", {"offsetWidth": |buttonWidth|})
assert-property: ("#search-tabs > button:nth-child(3)", {"offsetWidth": |buttonWidth|})
store-property: ("#search-tabs > button:nth-child(1) > .count", {"offsetWidth": countWidth})
assert-property: ("#search-tabs > button:nth-child(2) > .count", {"offsetWidth": |countWidth|})
assert-property: ("#search-tabs > button:nth-child(3) > .count", {"offsetWidth": |countWidth|})
// Check that counts are in a row with each other
compare-elements-position: (
"#search-tabs > button:nth-child(1) > .count",
"#search-tabs > button:nth-child(2) > .count",
("y")
)
compare-elements-position: (
"#search-tabs > button:nth-child(2) > .count",
"#search-tabs > button:nth-child(3) > .count",
("y")
)
// Check that counts are beside the titles and haven't wrapped
compare-elements-position-near: (
"#search-tabs > button:nth-child(1)",
"#search-tabs > button:nth-child(1) > .count",
{"y": 8}
)
compare-elements-position-near: (
"#search-tabs > button:nth-child(2)",
"#search-tabs > button:nth-child(2) > .count",
{"y": 8}
)
compare-elements-position-near: (
"#search-tabs > button:nth-child(2)",
"#search-tabs > button:nth-child(2) > .count",
{"y": 8}
)
// Set size narrow enough that they wrap.
// When I tested it, it wrapped at 811px, but I added some fudge factor to ensure it
// doesn't prematurely wrap with slightly different font kerning or whatever, with a
// @media query
set-window-size: (850, 600)
// all counts and buttons still have same size
store-property: ("#search-tabs > button:nth-child(1)", {"offsetWidth": buttonWidth})
assert-property: ("#search-tabs > button:nth-child(2)", {"offsetWidth": |buttonWidth|})
assert-property: ("#search-tabs > button:nth-child(3)", {"offsetWidth": |buttonWidth|})
store-property: ("#search-tabs > button:nth-child(1) > .count", {"offsetWidth": countWidth})
assert-property: ("#search-tabs > button:nth-child(2) > .count", {"offsetWidth": |countWidth|})
assert-property: ("#search-tabs > button:nth-child(3) > .count", {"offsetWidth": |countWidth|})
// Check that counts are still in a row with each other
compare-elements-position: (
"#search-tabs > button:nth-child(1) > .count",
"#search-tabs > button:nth-child(2) > .count",
("y")
)
compare-elements-position: (
"#search-tabs > button:nth-child(2) > .count",
"#search-tabs > button:nth-child(3) > .count",
("y")
)
// Check that counts are NOT beside the titles; now they have wrapped
compare-elements-position-near-false: (
"#search-tabs > button:nth-child(1)",
"#search-tabs > button:nth-child(1) > .count",
{"y": 8}
)
compare-elements-position-near-false: (
"#search-tabs > button:nth-child(2)",
"#search-tabs > button:nth-child(2) > .count",
{"y": 8}
)
compare-elements-position-near-false: (
"#search-tabs > button:nth-child(2)",
"#search-tabs > button:nth-child(2) > .count",
{"y": 8}
)