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

7 files changed, 18 insertions, 14 deletions

diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css
index 0a196edd53b..37ea7b00033 100644
--- a/src/librustdoc/html/static/css/noscript.css
+++ b/src/librustdoc/html/static/css/noscript.css
@@ -13,3 +13,12 @@ rules.
 	/* It requires JS to work so no need to display it in this case. */
 	display: none;
 }
+
+.sub {
+	/* The search bar and related controls don't work without JS */
+	display: none;
+}
+
+#theme-picker {
+	display: none;
+}
diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
index f9c84dc3e31..ba7fb3b5456 100644
--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@@ -255,10 +255,6 @@ details.undocumented > summary::before {
 	box-shadow: 0 0 0 1px #148099,0 0 0 2px transparent;
 }
 
-.search-input:disabled {
-	background-color: #3e3e3e;
-}
-
 .module-item .stab,
 .import-item .stab {
 	color: #000;
diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
index 9a38277d559..77ac217e6f4 100644
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@@ -219,10 +219,6 @@ details.undocumented > summary::before {
 	border-color: #008dfd;
 }
 
-.search-input:disabled {
-	background-color: #c5c4c4;
-}
-
 #crate-search + .search-input:focus {
 	box-shadow: 0 0 8px 4px #078dd8;
 }
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
index fba8231caac..6df137e3914 100644
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@@ -209,10 +209,6 @@ details.undocumented > summary::before {
 	border-color: #66afe9;
 }
 
-.search-input:disabled {
-	background-color: #e6e6e6;
-}
-
 #crate-search + .search-input:focus {
 	box-shadow: 0 0 8px #078dd8;
 }
diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js
index e396fd9d288..c421c6e9dc1 100644
--- a/src/librustdoc/html/static/js/main.js
+++ b/src/librustdoc/html/static/js/main.js
@@ -263,7 +263,9 @@ function hideThemeButtonState() {
                 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
             // safely.
diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html
index b0174d59a7b..cead54412bb 100644
--- a/src/librustdoc/html/templates/page.html
+++ b/src/librustdoc/html/templates/page.html
@@ -85,7 +85,6 @@
                     <input {# -#}
                         class="search-input" {# -#}
                         name="search" {# -#}
-                        disabled {# -#}
                         autocomplete="off" {# -#}
                         spellcheck="false" {# -#}
                         placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
diff --git a/src/test/rustdoc-gui/javascript-disabled.goml b/src/test/rustdoc-gui/javascript-disabled.goml
new file mode 100644
index 00000000000..1693f7b645f
--- /dev/null
+++ b/src/test/rustdoc-gui/javascript-disabled.goml
@@ -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"})