Rollup merge of #97113 - GuillaumeGomez:search-ui-fixes, r=notriddle

Search GUI fixes

The first fix is about the duplicated "in":

![Screenshot from 2022-05-17 13-25-53](https://user-images.githubusercontent.com/3050060/168814186-a4e9064f-4325-469c-8bf6-46ea2737a24f.png)

The second fix is about the `<select>` broken style:

![Screenshot from 2022-05-17 13-37-03](https://user-images.githubusercontent.com/3050060/168814182-b1c5ae66-d8cf-4fd5-a227-5aa8cd8453ab.png)
![Screenshot from 2022-05-17 13-36-55](https://user-images.githubusercontent.com/3050060/168814184-be9e56f8-fad4-477c-899e-9abff4d4910c.png)

You can test it [here](https://rustdoc.crud.net/imperio/search-ui-fixes/doc/foo/index.html?search=test).

r? `@notriddle`
This commit is contained in:
Yuki Okushi 2022-05-18 07:41:00 +09:00 committed by GitHub
commit b8dd27079c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 43 additions and 9 deletions

View file

@ -897,7 +897,7 @@ table,
margin-left: 0.25em;
padding-left: 0.3125em;
padding-right: 23px;
border: 0;
border: 1px solid;
border-radius: 4px;
outline: none;
cursor: pointer;
@ -2010,7 +2010,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
#crate-search {
border-radius: 4px;
border: 0;
}
.docblock {

View file

@ -236,8 +236,8 @@ details.undocumented > summary::before {
#crate-search, .search-input {
background-color: #141920;
border-color: #424c57;
color: #c5c5c5;
/* Without the `!important`, the border-color is ignored for `<select>`... */
border-color: #424c57 !important;
}
.search-input {

View file

@ -217,7 +217,8 @@ details.undocumented > summary::before {
#crate-search, .search-input {
color: #111;
background-color: #f0f0f0;
border-color: #000;
/* Without the `!important`, the border-color is ignored for `<select>`... */
border-color: #f0f0f0 !important;
}
.search-input {

View file

@ -209,9 +209,9 @@ details.undocumented > summary::before {
}
#crate-search, .search-input {
color: #555;
background-color: white;
border-color: #e0e0e0;
/* Without the `!important`, the border-color is ignored for `<select>`... */
border-color: #e0e0e0 !important;
}
.search-input:focus {

View file

@ -1738,7 +1738,7 @@ function initSearch(rawSearchIndex) {
let output = "<div id=\"search-settings\">" +
`<h1 class="search-results-title">Results for ${escape(results.query.userQuery)}` +
`${typeFilter}</h1> in ${crates} </div>`;
`${typeFilter}</h1>${crates}</div>`;
if (results.query.error !== null) {
output += `<h3>Query parser error: "${results.query.error}".</h3>`;
output += "<div id=\"titles\">" +

View file

@ -45,3 +45,37 @@ goto: file://|DOC_PATH|/test_docs/index.html?search=test&filter-crate=lib2
wait-for: "#crate-search"
assert-property: ("#crate-search", {"value": "lib2"})
assert-false: "#results .externcrate"
// Checking that the text for the "title" is correct (the "All" comes from the "<select>").
assert-text: ("#search-settings", "Results for test in All", STARTS_WITH)
// Checking the display of the crate filter.
// We start with the light theme.
local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
reload:
timeout: 2000
wait-for: "#crate-search"
assert-css: ("#crate-search", {
"border": "1px solid rgb(224, 224, 224)",
"color": "rgb(0, 0, 0)",
"background-color": "rgb(255, 255, 255)",
})
// We now check the dark theme.
click: "#settings-menu"
wait-for: "#settings"
click: "#theme-dark"
wait-for-css: ("#crate-search", {
"border": "1px solid rgb(240, 240, 240)",
"color": "rgb(17, 17, 17)",
"background-color": "rgb(240, 240, 240)",
})
// And finally we check the ayu theme.
click: "#theme-ayu"
wait-for-css: ("#crate-search", {
"border": "1px solid rgb(66, 76, 87)",
"color": "rgb(197, 197, 197)",
"background-color": "rgb(20, 25, 32)",
})