Rollup merge of rust-lang#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 rust-lang#90246
r? `@GuillaumeGomez`

Demo: https://rustdoc.crud.net/jsha/flashy-searchbar/std/string/struct.String.html

Author: matthiaskrgr

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

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;

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

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

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.

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

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