mirror of https://github.com/rust-lang/rust.git
Rollup merge of #90333 - jsha:flashy-searchbar, r=GuillaumeGomez
rustdoc: remove flicker during page load The search bar has a `:disabled` style that makes it grey, which creates a distracting flicker from grey to white when the page finishes loading. The search bar should stay the same color throughout page load. A blank white search bar might create an incorrect impression for users with JS turned off. Since they can't use the search functionality, I've hidden the search bar in noscript.css. Fixes #90246 r? `@GuillaumeGomez` Demo: https://rustdoc.crud.net/jsha/flashy-searchbar/std/string/struct.String.html
This commit is contained in:
commit
bb6901d32b
|
@ -13,3 +13,12 @@ rules.
|
||||||
/* It requires JS to work so no need to display it in this case. */
|
/* It requires JS to work so no need to display it in this case. */
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sub {
|
||||||
|
/* The search bar and related controls don't work without JS */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#theme-picker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
|
@ -255,10 +255,6 @@ details.undocumented > summary::before {
|
||||||
box-shadow: 0 0 0 1px #148099,0 0 0 2px transparent;
|
box-shadow: 0 0 0 1px #148099,0 0 0 2px transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input:disabled {
|
|
||||||
background-color: #3e3e3e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-item .stab,
|
.module-item .stab,
|
||||||
.import-item .stab {
|
.import-item .stab {
|
||||||
color: #000;
|
color: #000;
|
||||||
|
|
|
@ -219,10 +219,6 @@ details.undocumented > summary::before {
|
||||||
border-color: #008dfd;
|
border-color: #008dfd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input:disabled {
|
|
||||||
background-color: #c5c4c4;
|
|
||||||
}
|
|
||||||
|
|
||||||
#crate-search + .search-input:focus {
|
#crate-search + .search-input:focus {
|
||||||
box-shadow: 0 0 8px 4px #078dd8;
|
box-shadow: 0 0 8px 4px #078dd8;
|
||||||
}
|
}
|
||||||
|
|
|
@ -209,10 +209,6 @@ details.undocumented > summary::before {
|
||||||
border-color: #66afe9;
|
border-color: #66afe9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input:disabled {
|
|
||||||
background-color: #e6e6e6;
|
|
||||||
}
|
|
||||||
|
|
||||||
#crate-search + .search-input:focus {
|
#crate-search + .search-input:focus {
|
||||||
box-shadow: 0 0 8px #078dd8;
|
box-shadow: 0 0 8px #078dd8;
|
||||||
}
|
}
|
||||||
|
|
|
@ -263,7 +263,9 @@ function hideThemeButtonState() {
|
||||||
search_input.placeholder = searchState.input.origPlaceholder;
|
search_input.placeholder = searchState.input.origPlaceholder;
|
||||||
});
|
});
|
||||||
|
|
||||||
search_input.removeAttribute('disabled');
|
if (search_input.value != '') {
|
||||||
|
loadSearch();
|
||||||
|
}
|
||||||
|
|
||||||
// `crates{version}.js` should always be loaded before this script, so we can use it
|
// `crates{version}.js` should always be loaded before this script, so we can use it
|
||||||
// safely.
|
// safely.
|
||||||
|
|
|
@ -85,7 +85,6 @@
|
||||||
<input {# -#}
|
<input {# -#}
|
||||||
class="search-input" {# -#}
|
class="search-input" {# -#}
|
||||||
name="search" {# -#}
|
name="search" {# -#}
|
||||||
disabled {# -#}
|
|
||||||
autocomplete="off" {# -#}
|
autocomplete="off" {# -#}
|
||||||
spellcheck="false" {# -#}
|
spellcheck="false" {# -#}
|
||||||
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
|
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
// When JavaScript is disabled, we hide the search bar, because it
|
||||||
|
// can't be used without JS.
|
||||||
|
javascript: false
|
||||||
|
|
||||||
|
goto: file://|DOC_PATH|/test_docs/struct.Foo.html
|
||||||
|
assert-css: (".sub", {"display": "none"})
|
Loading…
Reference in New Issue