Rollup merge of rust-lang#90333 - jsha:flashy-searchbar, r=GuillaumeG…

…omez 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
matthiaskrgr · Oct 31, 2021 · bdbad5f · bdbad5f
2 parents ff0e148 + a4fe76f
commit bdbad5f
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"})