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:
Matthias Krüger 2021-11-01 03:33:06 +01:00 committed by GitHub
commit bb6901d32b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 18 additions and 14 deletions

View File

@ -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;
}

View File

@ -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;

View File

@ -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;
} }

View File

@ -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;
} }

View File

@ -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.

View File

@ -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…" {# -#}

View File

@ -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"})